Search Object

Step 4 - Pages >

Search Object

Previous pageReturn to chapter overviewNext page
Show/Hide hidden text

In large websites and, in particular, in online stores with lots of products, it's normal practice to include a search field so that visitors can quickly find what they are looking for.

With WebSite X5 you can use the Search Object to add a search field either to the template's header/footer or directly as part of the page content. This object uses a built-in search engine that can focus the search on both the entire website or on specific sections: the search results are ordered according to relevance and displayed in pages created automatically by the Program.

Click to expand/collapseReference: The settings for creating a Search field

In order to add  Search Field, you first need to define which contents should the search be performed on:

Search on the whole Site: the search is performed on Pages, Images, Videos, E-Commerce Products and Blog. In this case, the search results will be organized by their relevance and displayed on Pages which are automatically generated by the Program.
Search E-Commerce Products: the search is performed on the E-Commerce Products only and the results are reported on the Product Search Page. Additional filters are available on this page, so to make the search more precise.
Search on Blog Articles: the search is performed on the Blog Articles only. The results are organized by their relevance and displayed on the Blog Home Page.

Once you've done this, you then have to choose the Display Mode that you want to use:

Search field and Button: this adds both the search field, where the search string is typed in, and the Search button, to click on to start the search. These two elements are inserted side by side.

Only search field: only the search field is added with this option. When the search string has been typed in, you must press the Enter key to start the search.

Only button and search field visible on click: only the Search button is added with this option. When you click on this button, the search field appears: type in the search string and click on the Search button again to start the search.

Different Display Mode will be shown, depending on the selected Graphic:

Repeat: indicates whether the search field is to be on the left or the right of the button.
Font Type: specifies the font, style and size to use for the text.
Margins: you can specify the value in pixels for the text margins, so that it is positioned at precisely the distance you want it from the search field's borders.
Distance: sets the value, in pixels, of the distance between the search field and the button.

The following options are available for defining the style of the Search Field and Button:

Label: this specifies the default text to be displayed inside the search field or button.
Text / Background Color:  you can specify the foreground and backgrounds for the text you are working on.
Color: the colors of the borders (each border can be colored separately).
Rounded corner: how rounded the corner are (each border can be defined separately).

Finally, you can choose to display an icon in the search field with the Show Icon option. If you do choose to have an icon, you then have the following options for it:

Style: you can choose the format for the icon from the list of available styles.
Position: you can indicate whether the icon is to be displayed inside the search field or on the button.
Alignment: you can align the icon to the Left or Right of the search field or button it is displayed in.

When you add a Search Object to the template's Header / Footer or as part of the page content, a Special Page is automatically added to the Map with the name "Search": you can select it and open the Page Properties window to specify its properties.
The results of a search on the whole website are shown on pages created automatically by the Program: the appearance of these pages depends on the settings you give in the Text Style section of Step 2- Template Settings).