Search Element
The Search Element adds a search field to any part of a page, a header or a sidebar area. Visitors type a term and land on the site’s search results page, or see matching results appear below the field while they type when live search is on.
Each Search Element can search its own part of the site. You can limit it to certain content types, such as pages or products, include or exclude terms, and search post titles only. This makes it easy to offer, for example, a product search on the product pages and a general search in the header.
In this article: How To Use · Element Options · Tips · Related Elements · Example
How To Use The Search Element
Add the Search Element and choose what it searches. Search Results Content limits the results to the selected content types; leave it empty for all. Include Terms keeps only content that has at least one of the selected terms, Exclude Terms removes content with the selected terms, and Limit Search to Post Titles ignores the text of the content. Enter a Placeholder that tells visitors what they can search for.
Turn on Enable Live Search to show suggestions under the field while the visitor types. Live Search Minimal Character Count sets how many characters are needed before suggestions appear, and Live Search Number of Posts how many are listed. The results can show the featured image and the content type of each hit.
On the Design tab choose the Search Form Design, Classic or Clean, and set the field height, colors, font size, border and border radius, including a separate border color while the field is focused. The live results box has its own background, link, meta and border colors, a maximum height and a choice of scrollbar. Options left on Default or empty follow Global Options.
Element Options
The tables below list every option of the element, grouped by the tabs you see when you edit it in the Builder. Many options depend on others, so the edit screen only shows the options that apply to your current choices.
General
| Heading | Description |
|---|---|
| Search Results Content | Controls the type of content that displays in search results. Leave empty for all. |
| Include Terms | Select one or more terms to which the search results should be limited to or leave blank for all. |
| Exclude Terms | Select one or more terms to exclude from search results or leave blank to exclude none. |
| Enable Live Search | Turn on to enable live search results on menu search field and other fitting search forms. |
| Live Search Minimal Character Count | Set the minimal character count to trigger the live search. |
| Live Search Number of Posts | Controls the number of posts that should be displayed as search result suggestions. |
| Live Search Display Featured Image | Turn on to display the featured image of each live search result. |
| Live Search Display Post Type | Turn on to display the post type of each live search result. |
| Limit Search to Post Titles | Turn on to limit the search to post titles only. |
| Search for Woo Product SKUs | Turn on to also search for WooCommerce product SKUs. This will only work, if products have been added to the search results content. |
| Placeholder | Search placeholder. |
| Element Visibility | Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time. |
| Element Sticky Visibility | Choose to show or hide the element, based on the current mode (normal or sticky) of its parent container. You can choose more than one at a time. |
| CSS Class | Add a class to the wrapping HTML element. |
| CSS ID | Add an ID to the wrapping HTML element. |
Design
| Heading | Description |
|---|---|
| Search Form Design | Controls the design of the search form. |
| Height | Controls the height of form input field. Enter value including CSS unit (px, em, rem), for example 50px. |
| Field Background Color | Controls the background color of search field. |
| Field Font Size | Controls the size of the search field text. Enter value including any valid CSS unit, for example 16px. |
| Field Text Color | Controls the color of the search text in field. |
| Field Border Size | Controls the border size of the search field. |
| Field Border Color | Controls the border color of the search field. |
| Field Border Color On Focus | Controls the border color of the search input field when it is focused. |
| Field Border Radius | Controls the border radius of the search input field. Also works, if border size is set to 0. In pixels. |
| Live Results Background Color | Controls the background color of live search results. |
| Link Color | Controls the link color of the live search results. |
| Meta Color | Controls the meta color of the live search results. |
| Live Results Container Height | Controls the height of live results container. |
| Scrollbar | Turn on enable scroll for live search results. |
| Scrollbar Background | Controls the background color of the scrollbar of the live search results. |
| Scrollbar Handle Color | Controls the color of the scrollbar handle in live search results. |
| Live Results Border Size | Controls the border size of the live results. |
| Live Results Border Color | Controls the border color of the live search results. |
| Margin | Enter values including any valid CSS unit, for example 4%. |
Extras
| Heading | Description |
|---|---|
| Conditional Rendering | Add conditional rendering logic for the element. The element will only be part of the post / page contents, if the set conditions are met. NOTE: Server cache can interfere with results. |
| Animation Type | Select the type of animation to use on the element. |
| Direction of Animation | Select the incoming direction for the animation. |
| Animation Color | Select the color of the animation. |
| Speed of Animation | Type in speed of animation in seconds (0.1 – 5). |
| Animation Delay | Select the delay time after the animation starts(0 – 5). |
| Offset of Animation | Controls when the animation should start. |
Tips
- The settings of the element travel with the search: when the visitor presses Enter, the results page uses the same content types and terms as the field they searched in.
- A Live Search Minimal Character Count of 3 or 4 avoids long, useless suggestion lists after the first letter and reduces the load on the server.
- Keep Live Search Number of Posts small, around 5 to 10, and set a Live Results Container Height so the suggestions do not cover the whole page.
- Write a Placeholder that names the content, such as “Search products” or “Search by part number”, when the element searches only part of the site.
- Search for Woo Product SKUs only has an effect when products are part of Search Results Content.