Configuring the Search Box

Updated on January 2, 2019

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:

1Go to Theme Options > Header.

Configuring search box - Header

2Select the desired location in the Search Form In Header menu in order dropdown 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 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 TooltipAdds 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 LayerAdds 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.

3Click on Save Settings.

Displaying in the Widget Area

1Go to Appearance > Widgets.

Configuring search box - Widgets

2Find the Search element and drag and drop it into the widget area where you want it to be shown.

Configuring search box - Search widget


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:

1Go to Theme Options > Header Toolbar.

Configuring search box - Header toolbar

2There are some options regarding the search box design on this page. Configure your search box settings according to your needs.

Setting Description

Search Form Input Background ColorSets the search box background color.
Search Form Input Text ColorSets the search box input text color.

3Click on Save Settings.


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:

1Go to Theme Options > Search.

Configuring search box - Search

2The page has some options regarding the search results page. Configure your search results page settings according to your needs.

Setting Description

Search LayoutSets the search results page layout as full width without the sidebar left sidebar or right sidebar.
Search Page TitleSets the search results page title.
Search Page SubtitleEnables the search results page subtitle.

3Click on Save Settings.

Did this answer your question?