Skip to content
Search banner
Section overview
The Banner Search section displays a prominent search field on top of a customizable background that can include images or videos. It serves as a dedicated search area for site visitors.
Common use cases
- Create a search results page header
- Highlight the search functionality on dedicated search pages
- Display search capabilities with visually appealing backgrounds
- Provide a prominent way for users to find products or content
Usage tips
- Use high-contrast images that make the search text and input field easily visible
- Keep the search field prominent by positioning it strategically within the banner
- For mobile, ensure the search field remains accessible and easy to tap
- Consider using the background overlay option to improve text readability when using image backgrounds
Section settings
| Setting | Description |
|---|---|
| Y spacing | Controls the vertical height of the banner |
| Image background desktop | Background image displayed on desktop devices |
| Image background mobile | Background image displayed on mobile devices |
| Video background | Background video to display behind the search field |
| Show entire image | When enabled, displays the entire image within the banner area |
| Show video on mobile | When enabled, displays the video background on mobile devices |
| Color scheme | Sets the background color scheme for the section |
| Text color | Controls the color of text within the section |
| Border color | Sets the color of any borders applied to the section |
| Button color | Sets the style and color of the search submit button |
| Enable gradient | Adds a gradient overlay to help text stand out against the background |
| Enable background overlay | Adds a background overlay behind the search content for better contrast |
| Border position | Controls where borders appear on the section |
| Y alignment | Controls the vertical alignment of content within the section |
| X alignment | Controls the horizontal alignment of content within the section |
| Enable margin | When enabled, adds horizontal margin to the section |
| Enable max width | When enabled, applies a maximum width to the search content |
| Visibility | Controls which devices the section appears on |
| Enable search | When enabled, displays the search input field |
Block settings
This section does not contain any blocks.