EverWeb’s NEW Search Results Widget

In our last blog post we looked in detail at EverWeb 3.5‘s new website search feature which is powered by EverWeb‘s new Search Field widget. This widget lets you create and customize a search bar that your visitors will use to search for keywords or terms within your site. The Search Field widget also gives you three different ways in which you can display the search results. You can either have these displayed as a dropdown menu, in a popup window or in one of the pages of your website. In this blog post, we’re going to look at the third option. If you use the ‘One of my pages’ option you will need to use the Search Results widget.

Before Using the Search Results Widget
Before we even begin with the Search Results widget, we’re first going to assume that you’ve read the last post and have set up the Search Field widget on your page, or preferably, on your Master Page. That’s all we need to do with the Search Field widget for the moment as we’ll come back to it at the end of the post.

The second thing we’re going to leave for the moment is the setting up of search criteria in your project file. EverWeb automatically searches the text on your project file’s pages as well web page titles and so on. We’ll deep dive search criteria in the next post so you can refine and hone search for your site and for SEO too!

Adding the Search Results Widget To Your Site
You can add the Search Results widget to any page in your site. You can choose an existing page or create a new page dedicated to displaying search results. You can even add the Search Results widget to the same page as the Search Field widget if you want. However, it’s unlikely you would want to do this as your Search Field widget is probably in your Master Page, so you wouldn’t want the Search Results widget to be displayed on all of the pages that use the Master Page.

In most scenarios, you will probably locate the Search Results widget in its own page. When doing so, you probably will also want to uncheck the ‘Include in Site Search’ checkbox in the Site Search section of the Page Settings tab so the page does not get included when a visitor performs a site search.

Search Results Widget Customization Options
The options to customize the widget are fairly straightforward and some even mimic those that you find in the Search Field Widget. The Search Field widget displays five placeholder results so when you change an option in the Widget Settings you can see immediately how it will look. Here’s a rundown of the Widget Settings…

1. Language: Use this to set the language of the messages the Search Results widget feeds back to you e.g. the message that no search results have been found. You can choose from nine different languages.
2. Open Link in New Window” Check this option when you want the search results to be opened in a new browser window. Leave the option unchecked to display the search results in the current browser window.
3. Insert Margins: When using this option, the results set is shifted both horizontally and vertically to the right and downwards. Essentially this is like EverWeb’s Padding option that you find in the Navigation Menu widget.
4. Space Between Results: Use this option to change the spacing between each of the results in the widget.
5. Show Border Separator: Each search result is separated by default with a horizontal line. Uncheck the box if you do not want this line displayed.
6. Search Results Style: Use the ‘Fonts’ button to change the font type and weight. Use the ‘Search Results Font Styles’ to change the font size.
7. Content: You have two options as to how the search results are displayed. By default the results are in a scrollable window. Note that you need enough search results in order for the window to be able to scroll! The second option is to have the search results ‘window’ automatically adjust to the its height to fit the number of search results that are to be displayed.
8. The ‘Show Page Link’ option displays the URL link to the page of the search result. ‘Show Number of Results’ does just that with the number of results displayed in the top left hand corner of the widget. The last checkbox option, ‘Use Page Description Text for Summary’ uses the Web Page Description from the Search Engine Optimization section of the Page Settings tab as the descriptive text that you see in the search result. This is in place of the first text found on the page that is usually displayed as the description. Note that if the Web Page Description is short, EverWeb may then display the first text of the page itself after the Web Page Description.
9. Search Results Font Styles: Use the four options to control the Title, Link, Description and Results Text font size. Use the Fonts button of the Search Results Style option to change the font style and weight.

Link The Search Results Widget To The Search Field Widget
Once you have finished customizing the widget, go back to the Search Field widget so that you can link the two widgets together. In the Search Results field, change the ‘Drop Down Menu’ to ‘One of My Pages’. When you do this, note that most of the options in the Search Results Behavior section become greyed out. Now go to the ‘Search Results Page’ option and click on the up/down arrows. From the list, select the page upon which you have included the Search Results widget.

You have now finished setting up the Search Field widget for use with the Search Results widget. Test out your work by previewing and testing your search feature before publishing!

If you have a comment or question, please let us know in the Comments Section below! We’re happy to help 🙂