It's so easy to customize the search results page on your Divi site! In fact, this tutorial will only take you 5 minutes to complete, but it will help you deliver a more "professional" site.
If you don't know what the search results page is, it's very simple: it's the results presented when a user uses the "magnifying glass" icon to search on your site. The page displayed then presents the results of his search for a given query. It is therefore a dynamic page whose results will vary depending on the user.
To do a test on this Divi Tips blogIf you want to search for a keyword, don't hesitate to enter it using the magnifying glass on the main menu (top right)... You'll see that my search page is customized and doesn't look like the basic page proposed by the Divi theme, as you can see on the following image :
In the image above, you can see that the basic search results page (top) is far less pretty and far less optimized than the custom search results page (bottom).
In this tutorial, I explain how to do it but I also give you 2 other tips... You won't regret going through it 😉 !
- 1 - Why customize your site's search results page?
- 2 - Composition of the layout of the search results page
- 3 - Creating the search page template with the Theme Builder
- 4 - Configure the Google Analytics "Site Search
- 5 - Exclude certain pages from the search
- 6 - In conclusion...
1 - Why customize your site's search results page?
If you look at the image below, you can see that a little more than 1% of the visitors of the Divi Tips blog are searching via the magnifying glass icon...
In the last 30 days, 348 people have searched my blog to find answers to their questions...
1% of the visits is very little but if I hadn't customized this page of the search results, 348 people would have visited an unoptimized and unbranded page. This does not reflect the image I would like my blog to send back.
This is a good reason to customize this page of the search results: it will match your brand image and will not stand out from the other pages....
2 - Composition of the layout of the search results page
If you look at my search results page, it is composed of 5 elements:
- A - The dynamic title of the page
- B - The results of the Internet user's search in the form of thumbnails
- C - A new section with a title
- D - A possibility to restart the search if the first one was unsuccessful
- E - Other elements or calls to action, i.e. content that you would like to put forward on this page...
And if we look at this layout in grid version, these elements could be set up using these modules:
- A - The dynamic title of the page = Text module
- B - The results of the user's search in the form of thumbnails = Blog module
- C - A new section with a title = Text module (again)
- D - A possibility to restart the search if the first one was unsuccessful = Search module
- E - Other elements or calls to action, i.e. content that you would like to put forward on this page... = all the modules you want!
Did you know that you can test Divi for free? Go to this page and click on "TRY IT FOR FREE
3 - Creating the search page template with the Theme Builder
To customize this dynamic page, there is only one way: use the Divi Theme Builder ! Here's how to do it:
- Go to the Divi > Theme Builder
- Click on "Add a new model".
- Assign the template to it "Search results
- Validate by clicking on Click on "Create a model".
- Click on "Building a customized body
3.1 - Building the layout of the search result page
Once the template is created, you just have to design the page without forgetting the essential modules:
- Within the layout, insert a new line (also called "row")
- Then insert a Text module
- In the Content tab of the Text module, click on the database icon to use the dynamic content proposed by Divi
- Choose "Post / Title of the archive
- This dynamic title will show : "Your dynamic publication title is displayed here". Do not attempt to change its text.
- However, you can change its appearance from the Style tab. Feel free to change its size, color, font, etc. to suit your taste.
3.2 - Showing search results
When the user enters a keyword using the magnifying glass, the native WordPress system will find results for them. Here's how to make them appear on your search results page:
- Add a new row
- Add the Blog module
- In the parameters of this module, in the tab Contenttab, select YES for the option "Message for the current page.
- In the tab Content > Itemstab, you can define what you want to display.
- Then, on the Style > Modeltab, you can choose the model Grid which is much nicer than the Full screen template…
- Finally, still from the Style tab, you can use all the options at your disposal to design the appearance of this module (color, size, shadow, animation, etc.).
3.3 - Propose to renew the research (optional)
Imagine that your reader didn't find what he was looking for on his first search, you can improve his experience by offering him to repeat this action without having to go through the magnifying glass icon again. This part is optional, but if you wish, here is how to do it:
- Add a new section
- Insert a Text module to explain to the user that he can renew his search.
- For example "Start a new search".
- Below, add a Search module
- In the parameters of this module, from the Contenttab, you will be able to enter the placeholder text (i.e. the text present by default in the search bar). For example: What are you looking for?
- From the Contents tab > Exceptionsthis module allows you to exclude certain contents from the results, for example pages, articles or certain categories of articles. Unfortunately, you can't exclude specific URLs, we'll see later in this article how to do it...
- Then, in the Style tabyou can define the appearance of the search bar (color, etc.)
- Now your search bar is ready.
3.4 - Adding calls to action (optional)
Your search results page is now functional, but there's nothing to stop you from adding various calls to action to encourage users to visit other pages or discover your store's top products!
After all, this page belongs to you and you can do whatever you want with it!
- Add for example a row with buttons, or your last 3 blog posts, or a contact form...
- Save your model.
- Exit the template and make sure to save again in the builder theme...
4 - Configure the Google Analytics "Site Search
At the beginning of the article, I told you that 348 people visited my search results page last month... If I know this number, it's because I activated a small option in my account Google Analytics.
If you also want to collect this type of statistics, you must activate it...
In addition to knowing the number of visitors who use your internal search engine, you will also know the keywords that have been entered in this search bar... This is therefore important information that can tell you the needs of your visitors.
Here's how to enable this feature:
- Go to the Administration tab of your Google Analytics account
- Select your account
- Select your property
- Click on View settings
- At the bottom of the page, activate the Site Search Tracking
- In the Parameter query field, enter " s". This is the parameter used in the URL by WordPress sites when users do a search.
- Save it.
That's it, from now on, your Google Analytics account will record visits and queries to this page (see the official documentation for configure Site Search).
5 - Exclude certain pages from the search
Finally, to perfect this page, you can exclude certain search results on a case by case basis. For example, if your site has private pages or pages that are of no interest to the user (shopping cart page, my account page, etc.) you could decide to exclude them from the results.
For this, you can use the free extension Search Exclude.
This extension is very easy to use:
- You just have to install it and activate it...
- Go to the list of your pages or articles
- Click on Quick Edit
- Check the option Check the "Exclude from Search Results" box. if you do not want this publication to appear in the search results page of your site.
If you want to exclude some pages without using a plugin, just add some lines of code, read this article.
6 - In conclusion...
Now you're the proud owner of a great search results page and it only took you a few minutes!
You can also download a free pre-built template for create your search result page more quickly (available on the official blog).
Did you already customize it? Do you have any other ideas to improve this page? Tell us in comments.