Site Search | Sitely Documentation

The site Search element in Sitely places a site search box on your web page, allowing users to search for a specific word or phrase. After a search query is entered, your web pages will be searched, and any text matching the query will be included in the search results. This is how the search element looks on the page.

It can be styled just like any other element in Sitely. It’s comprised of two basic components - a text input field and a button. If you click twice on the element, you will be able to select each part separately and apply your own styling. You can also rearrange the components to place the search button in front of the text input field. Here is an example of a customised style.

When a search element is first added to your web site, Sitely also creates a ‘Search Results’ page automatically. This is the page that will display after a search query is made. During site design, the page will contain dummy search results, giving you the option of styling the results page to better suit your web site design.

The results page consists of a heading text box initially displaying 'Search Results for' followed by a Smart Field showing the query. This heading text box can be styled just like any other text box.

In the main results panel, you'll find a series of text boxes, one for the page title and one for each result. Clicking on any of these boxes allows you to customize their appearance. Please note: Styling the first instance of each text box will automatically apply your style changes to all others. The default blue background is merely a visual cue indicating a complete element and can be changed. Additionally, clicking on the background enables you to access further styling options through the style inspector. These options include setting the number of search results per page and adjusting the length of the text displayed in each result. You can also define a custom message to show when there are no search results found.

Similarly, the row of page buttons at the bottom of the page can be selected for styling. The button block dynamically adjusts to include only as many buttons as there are results pages. By selecting the button block, you can modify the appearance of the 'Current Page Button' to help users identify which page of results they are currently viewing.

The only other thing that you should be aware of when implementing a site search function is that your hosting server must be running PHP. If your host doesn’t provide that facility, you won’t be able to implement site search.