Hero Search customization

Hero Search plays a great role in making your website look beautiful while your visitors experience an easy way to search your content. 

You can customize the look of the Hero Search by uploading a background image, adjust the height and the overlay opacity.

Here is an example of how it might look like.

To start customizing the Hero Search, go to the Themes page and click the Customize button on the currently active theme to launch the Theme Editor.

On the left panel, click on Header & Navigation, then click on Hero Search.

Type your text in the following fields:

  1. Heading: write a bold statement. You can adjust the font size to make it bigger or smaller.  
  2. Subheading: write a short description. You can separate lines by adding a <br> tag. 
  3. Small text: Appears under the search input field.
  4. Search placeholder: Appears inside the search input field.

If you want to center all text inside the Hero Search, check the Align to center checkbox.

To adjust the height of the Hero Search section, use the Top & bottom padding slider.

Select the background and text color.

Upload or select a background image.

After adding the background image, new customization options will be displayed.

Choose the Background image style, there are two options:

  1. Cover: the image covers the whole section. It is recommended that the background image size is 1200px width and 700px height, and the file size doesn't exceed 500Kb for faster loading. 
  2. Repeat: the image is repeated horizontally and vertically to cover the whole section. It is recommended to use a small image or icon.

Adjust the Overlay opacity to add a semi-transparent layer over the background image. Use the slider to increase or decrease the opacity, higher values make the image dimmer.

The Overlay opacity uses the image background color that you choose for the Hero Search section, you can play with the background color and the opacity level until you reach a preferred look.

After finishing all your theme edits, Click the Save button on the top right of the page. 

Still need help? Contact Us Contact Us