New!
Add a Site Search element to your page to allow easy navigation of website pages and blog post content. You can drag and drop the Site Search element onto any page in your builder.
Settings Tab
This tab controls how your search bar and results are displayed on your page. Once placed, click the gear icon on the element to open the Site Search Settings panel. The settings are organized into three tabs: Settings, Pages, and Blog Posts.
Search Setup
Display Type: Choose how the search bar and results appear from the options below.
Search Bar + Results: Displays the search bar and results together on the same page (default).
Search Bar + Results in Dropdown: Shows the search bar with results appearing in a dropdown below it.
Search Bar + Modal: Shows the search bar, and when results are found, they appear in a modal overlay.
Search Bar + Search Page: Direct users to a separate search results page.
You can set up a separate search page with the following steps:
1. Create a new page and add a "Site Search" element onto the page.
2. Set the display settings to "Results Only".
3. Add a search bar to any other page.
4. Set the display settings to "Search Only" and select your new page from step 1 as the redirect.
Once complete, searching on one page...
Will redirect you to a separate results page!
Search Settings
Placeholder Text: The text that appears inside the search bar before users start typing. (Example: “Search this site...”)
Crop Length: Adjusts how much of the text snippet from each result is shown. A higher number shows more content from the matching page or post.
Max Results: Limits the number of search results displayed at one time.
Enable Paging: Allows users to navigate through multiple pages of search results if there are more than the maximum displayed.
Include Site Pages in Results: When enabled, the search will include your website’s regular pages.
Include Blog Posts in Results: When enabled, the search will include posts from your blog.
After making your changes, click
Save Changes.
Pages Tab
This tab manages which site pages are indexed (included) in search results. Each page is listed with its name and URL, along with its indexing status.
Status Icons
Indexed: Page is included in search results.
Pending Index: Page needs to be reindexed.
Not Indexed: Page is excluded from search.
Actions
Refresh Icon: Reindex that specific page.
Trash Icon: Remove that page from the search index.
You can also
Click
Index All to index all listed pages.
Click
Delete All Indexes to clear all stored search indexes.
Blog Posts Tab
This tab works the same way as the Pages tab but lists your blog posts instead.
Each post shows
Name: The post title.
URL: The internal path to the post.
Indexed: A checkbox showing whether it’s included in search.
Actions: Buttons to reindex or delete.
You can also
Click
Index All to index all blog posts.
Click
Delete All Indexes to remove all blog post indexes.
Tips
Reindex your pages or posts after making significant content changes to ensure search results are up to date.
If a page or post is missing from search results, check that it’s marked as Indexed in the appropriate tab.
The search results will automatically update when content is reindexed.
Customize Appearance
The Element Styles menu controls the general appearance and spacing of the Site Search element within your layout. These options work the same as they do for other elements.
Fonts: Controls the default font family and size used by text in this element (for example, labels or headings around the search bar).
Background: Sets the background color or transparency behind the entire search element.
Container: Adjusts width, alignment, and other container-level options that affect how the search bar sits inside the page.
Padding: Adds space
inside the element’s edges, around the search bar.
Border: Controls border color, thickness, and corner radius for the outer edge of the element.
Margin: Adds space
outside the element so it doesn’t touch neighboring content.
Use these options to ensure your search bar matches the overall spacing and style of your site before fine-tuning the details in the Search Bar Style menu.
Search Bar Style Menu
The Search Bar Style menu is specific to the Site Search element. It lets you control the look of the search icon, the search button, and the search input field.
Search Icon
These settings control the magnifying glass icon inside the search bar.
Icon: Choose a different icon style or reset the existing one.
Icon Color: Sets the color of the icon. You can enter a hex code or use the color picker.
Icon Size: Adjusts how large the icon appears using a slider.
Hover Color: Changes the icon color when the visitor hovers over it.
Search Button
Styles the optional button used to submit a search query.
Padding: Adds inner spacing around the button text or icon.
Background: Sets the button’s background color.
Border Radius: Rounds the corners of the button. Higher values create more rounded corners.
Hover Background: Sets the background color when the button is hovered.
Search Input
Controls the text field where visitors type their search terms.
Max Width: Limits how wide the input field can stretch. Enable this option if you want a fixed maximum width.
Background: Sets the input field’s background color.
Font Color: Sets the color of the typed text and placeholder text.
Border Color: Controls the color of the input field’s border.
Border Thickness: Adjusts how thick the border line appears.
Border Radius: Rounds the corners of the input field.
Font Family: Selects the font used inside the input field.
Font Size: Adjusts the size of the text inside the input field.
Saving and Restoring Styles
Save: Applies your current settings to the Site Search element.
Restore: Resets the styles for this element back to its defaults.
Cancel: Closes the panel without saving recent changes.
