How to use Divi for Search results page

Introduction

Do you feel that search results page looks different than your theme?

On this tutorial you are going to learn how to enhance Search Results page and match your website’s look by using Divi template.

When is this method useful?

1 – This method is useful if the Search results page design is not consistent with the other pages on your website.

2 – You want to add more content in the Search page but you can’t do that unless you hard-code the search.php file.

3 – No need to have programming experience.

Requirements

1 – Divi theme or Divi Builder

Setting up the Search Results Page Template in Divi

1 – Go to WordPress Dashboard navigate to Divi > Theme Builder.

2 – Click the “Add New Template” area.

3 – On the Template Settings > select the Search Results checkbox option. Then click Create Template

4 – The Search Results template will be created. You can decide if you want to edit the Header, Body and Footer. For our example we will edit Body only by clicking on Add Custom Body.

Edit the template as you need.

On the example below we have added a separator, a page title, a dynamic keyword that shows what has been used to search and finally a blog element that shows posts for current page.

Steps to recreate the Search results page example.

1 – Add a new Row

2 – Insert a Divider module inside the new row.

3 – Add a Text module below the divider and a title “Search Results”

4 – Add another Text module and click the Dynamic Content icon on the right:

5 – Select Post/Archive Title from the options. 

The 5th step will automatically show which keyword has been used to search. For example if I used keyword “web” to search this is how it will look like:

6 – Finally, the most important part, add a Blog module 

7 – Enable Posts for Current page option.

As mentioned previously you can customize the Search results page as you need, the steps above are just an example.  

Results

Voila! Your search results page has been enhanced and looks similar to your website’s design! You can always edit this template by adding or removing content as needed. Furthermore, there is no need to have programming experience to do this!