mermberfix logo x
The MemberFix Team’s got you covered.
Membership plugins

How to use Divi for Search results page

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.

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)

 

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.

You may also enjoy...

WordPress based membership sites have certain requirements, and make use of certain applications that, in my experience, makes most of the popular hosting providers a poor choice.
Step by step guide on how to prevent customers from buying your WooCommerce products more than once.
If you’re unable to see the Blocks Manager in IPBoard – this step-by-step tutorial is for you. We’ll define the reasons and find an easy solution!
Learn how to integrate MemberMouse with ConvertKit to do EXACTLY what you need using our free script and MemberMouse push notifications!
Subscribe
Notify of
guest
7 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Andy Galaxy
September 2, 2020 3:59 am

Good work. How can we hide meta in results without resorting to hiding divs with css?

Andy Galaxy
Reply to  Andy Galaxy
September 2, 2020 4:00 am

…and include a”Read More” at the end of excerpts in the results.

Anthony
Anthony
September 16, 2020 4:58 pm

Thank you.
Do you know how can I display the results within the page where my search bar is located?

Victor Barannik
Reply to  Anthony
December 27, 2020 1:23 pm

Hello Anthony,

You need to use Divi Ajax Search add-on for it: https://www.elegantthemes.com/marketplace/divi-ajax-search/

Michael De Grave
Michael De Grave
February 5, 2021 5:53 pm

Thanks for this very handy tutorial !

Christina
Christina
March 25, 2021 4:18 pm

Is there a way for the search function to only give results for the page it’s on?

TashWord
March 4, 2022 3:15 am

I’ve followed these instructions – nice and simple, thank you.

But I am not getting anything on the results page other than the global header and footer. There are no results showing, not even the results heading.

Any suggestions on how to fix this please?