The Search Banner Background Hero features a full-surface background image while placing a left-aligned heading and a search bar front and center to help candidates find jobs.
You can also include a list of "Quick Links" under the search bar to showcase popular search terms.
How to Add Hero - Search Banner Background
To add the element to your page, first click on "Add Paragraph." Select the "Hero Section" category from the overview and add the specific element "Hero - Search Banner Background" by clicking the "Add this row" button.
How to Configure Content Settings
Once the row has been added, you can customize the content. First, enter your main heading, which will be positioned directly above the integrated search bar. You can then add rotating words for the header to create a dynamic typewriter effect; simply enter your words or phrases and press enter after each one to add them to the sequence.
Additionally, you can include popular search terms and link them so they appear right under the search bar for easy navigation. Finally, upload your background image and provide a suitable alternative text to ensure your content is accessible to everyone.
How to add rotating words
To keep your header dynamic, you can add as many words as you like. Every new line in the field represents a new word in the animation. Just type a word and press Enter to move to the next one:
How to Style Hero - Search Banner Background
In the next step, you refine the look of your element. You can adjust the colors of your buttons to match your brand and use the LP Row Margin to set the vertical spacing, creating the desired structure on the page. With Overlay Transparency, you control the brightness of the background image: while 100% represents the original state, the image is shown completely black at 0%. This ensures that your text remains optimally readable at all times.
Once you are satisfied with the settings, click "Save" at the top of the page to store your configuration.
Final Outcome
To check your work, simply switch to the "View (Frontend)" tab at the top. Here you will see the live view of your element exactly as it appears to your users on the website.