Getting Started with SiteSearch
From the first search field to the published site – in eight short steps
SiteSearch adds a fast, site-wide search to any Rapidweaver Elements project – no license key, no PHP and no setup. This page walks you through everything, from installing the component and placing it in your header to styling the results, choosing which pages are searched and publishing your site. Try the search at the top: type a word from this page, like sitemap, header or umlauts, and watch the results appear while you type.
Install SiteSearch
After your purchase in the Elements Store, SiteSearch is installed like every other component. Open Rapidweaver Elements, and you find it in the component library under Dynamic, next to other dynamic components like SkyCast.
SiteSearch also comes with this demo project. When you create a new project, open the projects panel and click See All Library Items to show the full list – the SiteSearch demo is there, ready to explore and to copy from.
Place SiteSearch in Your Header
Drag SiteSearch onto your page. Most people put it into the header of a Global, so the search field is available on every page of the site. It works just as well in a sidebar, in the footer or on a search page of its own.
In WeaverPixel templates like fleXon 2, NeXtlook, Maximilian or Studio, the header already has a flex row with enough room – drop SiteSearch next to the menu and you are done. If you build your own header, a Flex with Justify set to between keeps logo, menu and search nicely apart.
Choose How the Results Appear
Show Results decides where the results go. Below the Field opens a list that floats above the page and closes again with a click outside or the Escape key – ideal for a header. How wide the list gets is up to you: as wide as the field, half or the full content width, the whole screen or any size from your theme.
In the Page works differently: the results sit right in the page and push the content below them down instead of covering it. That is ideal for a sidebar, for a 404 page that helps lost visitors find their way, or for a search page of its own – Previous and Next then take visitors through longer lists.
Icon Only and the Search Window
Small screens have little room in the header. Set Icon Only to Small Screens, Small And Medium Screens or Up To Large Screens, and SiteSearch shows only a magnifying glass below that size – just like a navigation that switches to a burger menu. All Screens shows the magnifying glass everywhere.
A click on the magnifying glass dims the page and opens the search window in the middle of the screen. In the Layout group you set its width, the backdrop color and opacity and a soft blur for the page behind it. Escape, a click next to the window or the close button closes it again.
Style the Field and the Results
The Input group styles the search field: font, size and text color, the placeholder, the color of the magnifying glass, the background with its own opacity, the border and the focus ring. The Results group does the same for the list – title, text, the highlight for the search words, background, the active result, border, padding and shadow.
Every color comes from your theme palette and has its own value for light and dark mode. Change the theme, and SiteSearch follows, just like the WeaverPixel templates do.
Decide Which Pages Are Searched
By default, SiteSearch reads every page in your sitemap.xml and skips pages set to noindex. To leave out a page, turn off Include in Sitemap in its page settings, or list its address under Exclude Pages, for example /imprint/ – end an address with an asterisk to leave out a whole folder.
Navigation, footer and other text that repeats on almost every page are left out automatically. If your pages share a content container with an ID, enter that ID under Search Only In, and SiteSearch reads only that part of every page.
Translate Every Text
Together with the placeholder in the Search group, every text a visitor sees can be changed in the Language group: Reading content, No results found, the result count, Previous and Next, and the labels for screen readers. In the result text, {count} becomes the number, so 37 results reads naturally in any language.
SiteSearch also handles accents and umlauts: a search for Muller finds Müller, and ss matches ß – handy for German, French or Spanish websites.
Publish and Test
SiteSearch shows sample results in the editor, so you can style colors, fonts and spacing right away. Real results appear in Browser Preview and on the published site. After publishing, search for a word that appears on only one page – for example PhotoSpread or SkyCast – and click the result: with Jump to Match turned on, the page opens right at the found text and highlights it.
If a page seems to be missing, turn on Debug Mode in the Pages to Search group. SiteSearch then writes the list of pages it read, the pages it skipped and the score of every result to the browser console.
Instant Site-Wide Search for Rapidweaver Elements