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 search through pages, images, videos, products in an online store and blogs: 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

To add a search field to your website, you must first 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 inside the 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).