The new website search feature recently introduced in EverWeb 3.5 uses the Search Field widget for the creation of a search bar in your site and for how you want website search results displayed. You can choose from one of three search results display options: dropdown menu, popup window or ‘One of My Pages’. When using the last option, EverWeb’s Search Results widget is used to display the website search results created from the Search Field widget in a dedicated page.
The Search Results widget is always used in conjunction with the Search Field widget so cannot be used on its own.
Before Using the Search Results Widget…
To create a website search that displays search results in a dedicated ‘Search Results page’, you will first need to make sure that you have added the Search Field widget to your website. Drag and drop the Search Field widget from the Widgets Tab on to your page. Preferably, add the widget in to a Master Page so that you only need to add the widget to your site once.
Adding the Search Field widget to your page will enable the search bar as well as giving you the three search results display options mentioned above.
Position the widget on the page then customize it as you want. Check out our post on installing and customizing the Search Field widget for more infromation.
Adding the Search Results Widget
Once you have added the Search Field widget to your page you can create the Search Results page in your site which will include the Search Results Widget. This can be a page that you have already created, or even the page that contains the Search Field widget if you want.
If creating a new page for your Search Results widget, you can use the Add button in the Toolbar to create a new page. Uncheck the ‘Include page in navigation’ option as you probably will not want a dedicated search results page to be included in the navigation menu.
You may also want the page itself not to be included in any Search Results either. To remove the page from any Search Results, go to the Page Settings tab and open the Site Search section and uncheck the ‘Include in Site Search’ checkbox.
Once you have created and named the Search Results page, drag and drop the Search Results widget on to it. Size and position the widget as required.
The widget displays five ‘place holder’ results on screen. Each place holder includes Page Title, Page Link and page description.
Customizing The Search Results Widget
Customize and style the Search Results widget using the Widget Settings.
- Language: Set the language that you want search related messages to be displayed in e.g. the message shown when no search results are found. You have nine different languages to choose from: English, Dutch, French, Finnish, German, Italian, Norwegian, Spanish and Swedish.
- Open Link in New Window: Use this Check box to open a clicked upon search result in a new browser window.
- Insert Margins: This field adds vertical and horizontal padding to the search results set.
- Spacing Between Results: This field is used to add vertical padding between each result in the search results set.
- Content: Search results can be displayed one of two ways: As a scrollable set or as a results set that adjusts the results content height as needed. When using the Scrollable option, the results only scroll when there are enough search results found that go beyond the height set for the widget.
- Use Page Description Text for Summary: When this box is checked, the text from the Page Description field in the Page Settings tab will be used as the text summary in the search results. Note that if the Page Description is short, text from the results page itself may also be added to the description in the search results.
In addition to the Widget Settings, you can customize the widget using other settings in EverWeb:
- To change the color of the links in the search results, go to the Hyperlinks Inspector and change the colors of the Normal, Rollover and Visited options are desired.
- You can add your own background color, gradient or image to the Search Results widget using the Shape Options tab in the Inspector. You can even add Parallax Scrolling if you want!
Linking the Search Field and Search Results Widgets Together
Once you have finished customizing the Search Results widget, go back to the page that contains the Search Field widget. Select the widget, then set the Search Results field to ‘One of my pages’. A little bit further down in the Widget Settings, set the ‘Search Results Page’ as the page on which you have added the Search Results widget. EverWeb will check that the Search Results widget is included on the page you select. If it is not present you will receive an error message.
Preview your website, then enter search words in the Search box to test. In our next blog post, we will look at search criteria in detail!