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.

Add new Template - How to use Divi for Search results page

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

Template Settings Other - How to use Divi for Search results page

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.

Search Results section - How to use Divi for Search results page

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.

Search Result example 2 - How to use Divi for Search results page

Steps to recreate the Search results page example.

1 – Add a new Row

Add a new row - How to use Divi for Search results page

2 – Insert a Divider module inside the new row.

Divider module - How to use Divi for Search results page

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

Search results title - How to use Divi for Search results page

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

Dynamic Content - How to use Divi for Search results page

5 – Select Post/Archive Title from the options. 

Post Archive title - How to use Divi for Search results page

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:

Results for - How to use Divi for Search results page

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

Blog module - How to use Divi for Search results page

7 – Enable Posts for Current page option.

Posts for current page - How to use Divi for Search results page

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!  

What do you think of this tutorial?

Article Title: How to use Divi for Search results page

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

Author: Ardian Lumi

Publisher - Orgnization: MemberFix

Publisher Logo: mermberfix logo x200 1 - How to use Divi for Search results page

User Review
0 (0 votes)

 

R

Now let’s hear from you!

Are you using Divi for your Search page results?

Is this article helpful for you?

Tell us in the comments section below.

Share This