Adding a search bar to your site is a quick and easy way to help your visitors find content on your site. Site search will search through all the HTML content on pages of your site, including text you add as well as ALT text on other content. To add it to your site, drag the Search component to a page of your site. Next, click on the component to open the options panel to the side of the editor.
Note: If you hide a page from search engines, it will not be included in search results.
Placeholder
This is the default text shown in the input field until a visitor types their own text. By default this is set to the word, “Search”.
Design
There are several options you can use to control the styling of your search bar:
- Text Color - With this option you can customize the color of text a visitor types into the search bar.
- Background - You can customize the background with this option to a color, gradient, image, or image with overlay.
- Border - Use this option to add a border to your search bar. You can set the width, style, and color of the border.
- Shape - Changing this option will update the overall shape of the search field. You can set this separately for large and small screens by clicking the desktop/mobile icon.
Spacing
The Margin option controls the spacing around the component. You can set this individually for each side or all together, and you can set this separately for different screen sizes by clicking the desktop/mobile icon.