Search Bar
Search Bar is a widget that allows visitors to search for and find necessary information on a website.
The widget consists of the following elements:
- Input Label
- Search Button
Search Bar settings on the Settings tab in the right panel includes:
General settings
Type:
- Default - The Search Bar has its common structure: the search query input line and the search button.
- Slide – The search query input line is hidden and it appears when first clicking the search button, the second click sends the search query.
Slide type has extra settings:
- Show input line: On Click or On Hover
- Display Input line on canvas
Placeholder:
- Placeholder – you can enter text in the input line (for example: Site search)
- Placeholder color – you can select a color and its opacity
Click “Go to search results page” to move to links to pages found during the search. You may customize the search results page.
You can style the Search Bar using the Styles tab in the right panel.
By selecting the appropriate element of the Search Bar, you can:
- Style the input line. You can add a border to the input line (in the Borders section), round the corners, change paddings and margins (in the Size section), change the font (in the Text section).
- Style the search button. You can change the background color (in the Background section), adjust the corner radius (in the Size section), change the font (in the Text section).
When creating a project, a page is automatically generated to display Search results. You can open the page on the Pages tab in the left panel.
It consists of three blocks:
● Text with title. You may replace and style the text.
● Search widget. You may customize it as described above.
● Search results with a list of all pages found. You may customize and style it as well.
1. Select the Search results element on the Layers tab on the left and go to the Settings tab on the right.
2. On the Settings tab, in the General section, select State — one of the three states available (Default, No results, Disabled) for the results list.
Depending on the status, the page will display different information. You may change the text and customize the styles for each option.
● Default state for any search results.
The found data is displayed in the Found State block with three blocks: Result Count, Result list and Controls container.
You may style each block as you wish. For example, you may select the desired font size, text color and other styles on the Design tab.
In the settings you may also choose:
- The number of elements (10, 20, 30, 40, 50) in the results list. The default is 10.
- Desired pagination format: numbers from 1, numbers from 01, or page by page.
● No results state when search delivers no results.
In this state, the Found State block is hidden and the Empty State block is displayed. It contains a text element with a message stating that nothing was found. You may change the text and style it as you wish.
● Disabled state is used when the search function is disabled.
The Found State and Empty State blocks are hidden, the Disabled State block is active, which contains a text element with a message.
You may create a custom search page interface for any state. You may add additional text elements, images and content blocks.
For example, you may place the same header and footer on your search page as other pages on your site and style it to match your overall design.
