The search box is a rectangular field that lets users type in a text in order to search for information on your website. After the user types a text and clicks the search button, the system searches the database and gathers the information that is related to the specified terms that the user searched for. Therefore it is better to use the search box if you have a website that has a large amount of content.
In this article, you will find some information about displaying the search box in different areas of the website, and configuring the design and search results.
To see the search box in action, check out the demo page.
Displaying the Search Box
You can display the search box in various areas of the Jupiter theme. It can be in the header area or in a widget area. The design and type of the search box can be changed according to the placement you selected.
Displaying in the Header Area
To display the search box:
The search box will have a different style and type according to the selected location. Below are some details about how the search box will look in each area.
| Setting | Description |
|---|---|
| Header Toolbar | Displays the search box as a text field in the header toolbar area. |
| Header Main Area | Displays the search box as a text field in the main header area. |
| Inside Main Navigation With Tooltip | Adds a search icon to the main navigation. The search box displays in a tooltip that triggered by a click on the search icon. |
| Inside Main Navigation With Fullscreen Layer | Adds a search icon to the main navigation. The search box displays in a fullscreen layer that is triggered by a click on the search icon. |
Displaying in the Widget Area
Configuring the Design
Configuring the design options lets you change the background and input text colors for the search box.
To configure the search box design:
| Setting | Description |
|---|---|
| Search Form Input Background Color | Sets the search box background color. |
| Search Form Input Text Color | Sets the search box input text color. |
Configuring the Search Results
Jupiter lets you configure the search results page options such as layout, page title, and subtitle.
To configure the search results page options:
| Setting | Description |
|---|---|
| Search Layout | Sets the search results page layout as full width without the sidebar left sidebar or right sidebar. |
| Search Page Title | Sets the search results page title. |
| Search Page Subtitle | Enables the search results page subtitle. |
