How To Customize And Style The Divi Search Module Tutorial by Pee Aye Creative

How To Customize And Style The Divi Search Module And Create A Search Results Page

This tutorial will show you how to customize and style the Divi Search Module as well as how to set up a search results page with the Divi Theme Builder.

Style The Divi Search Module Input Field

The first snippet below should be added to the Search Module in the Advanced tab in the Custom CSS toggle in the CSS field called “Input Field.”

width: calc(100% - 150px);  
border: 2px solid #dddddd; 
border-radius: 50px;
padding-left: 30px!important;
customize and style the Divi search module input field with custom css

Input Field Width

First, it creates a clever calculation trick that we are using to set the width of the input field in relation to the width of the button. By stating that the width of the input field should be 100% minus 150px, we are then allowing the 150px space to be used for the button.

Input Field Border

This first snippet also is setting the border thickness, since this is one of those funky things with Divi. The only option is to force it with CSS. You can change the value to any thickness you want.

Border Radius

We wanted the input field to be rounded, so we added a border-radius. This is optional for you.

Spacing

Because of the extra spacing, I have added in the settings, I wanted to make the placeholder text look better by moving to the right a little. I did this by adding a padding-left to the text.

Style The Divi Search Module Button

The second snippet customizes and styles the Divi search Module button. This snippet should be added to the Search Module in the Advanced tab in the Custom CSS toggle in the CSS field called “Button.”

width: 140px;  
background: #0048ff;
border: 2px solid #0048ff; 
border-radius: 50px;
transition: all .3s ease;
customize and style the Divi search module button with custom css

Button Width

To start, we are setting the width of the button to 140px. This gives us a space of 10px between the input field and the button. Pretty clever, huh!

Button Color

Next, we are adding a background color to the button.

Button Border Radius

I wanted a rounded button, so we are using a border-radius to achieve that effect.

Transition

We are adding a transition effect since we want to change the color of the button when we hover over it. 

Style The Divi Search Module Button On Hover

The last snippet controls how the Divi Search Module button behaves when you hover over it.

Button Background Color On Hover

First, we are changing the background color when we hover over the button.

Button Text Color On Hover

Since the background color is changing, we also need to change the text color.

Transition

We added the transition effect again to affect the button when we hover over it.

Style The Divi Search Module Button On Hover

The last snippet controls how the Divi Search Module button behaves when you hover over it. This snippet should be added to the Search Module in the Advanced tab in the Custom CSS toggle in the CSS field called “Button.” Just be sure to toggle on the hover icon (looks like a mouse pointer) and paste this in the “Hover” tab.

background: #ffffff;
transition: all .3s ease;
customize and style the Divi search module button on hover with custom css

Button Background Color On Hover

First, we are changing the background color when we hover over the button.

Transition

We added the transition effect again to affect the button when we hover over it.

Create A Search Results Page In Divi

Now that we have the search module properly hacked, let’s turn our attention to the search results page. This is the page that displays the items that match when a user enters a search term.

To create this page, we are going to use the Divi Theme Builder. This enables us to create a dynamic template and design the layout and style it however we want using the Divi Builder.

Add new template in the Theme Builder for the search results page
Assign template to the search results pages

Then click the blue button at the bottom of the popup that says “Create Template.”

Add custom body to the Divi Theme Builder search results template

Next, click on “Add Custom Body.”

This will bring up a new popup again. In that popup, click on “Build Custom Body.”

show Divi search results in a Theme Builder template with the blog module

You can use any layout or design style you want, just remember that this layout is for search results. So any time someone enters a search term in a search module, this will be the layout that appears. I suggest adding a text module and use dynamic content for the “Archive/Page Title” and anything else you want to use!

Last updated Jan 3, 2021 @ 12:56 pm

Subscribe

Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can’t wait! So that’s what you will get if you subscribe, and you can always unsubscribe at any time if you just can’t take it anymore :)

Blog Post Optin

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

22 Comments

  1. Barrie Simpson

    Love the subtle digs at the antiquated way in which DIVI presents this module. This has got to be your best one in terms of humour and without detracting from the subject. Excellent instructions and easy to follow. Well done Nelson…
     
    Can I propose a refresh on the DIVI “Tabs” module as this is very limited in terms of display.
     
    Really looking forward to the next one.
     
    Keep up the good work…

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Thanks Barrie! Yeah I am going more informal these days I think 🙂 Glad you like the humor. A tutorial on the Tabs module would be a good one yes! Thanks for following along!

      Reply
  2. dikosa zircon

    Hello, that was great. I got a question. what are you using to display code snippet on-page would you like to share?

    Reply
  3. bash

    how do you use this search module to serach a single page .

    Reply
    • Hemant Gaba

      By default, it is not possible with the Divi Search Module to search a single page. Please try using different search plugins and choose what fits the best.

      Reply
  4. mikiconte

    i’m trying to change the word “search” with the icon but i can’t

    Reply
  5. Mike Gluck

    Awsome job….Had such a hard time using the search module with divi….was so frustrated, was going to change back to elementor…but you made it look alot easier…thank you…Do you like dive better than elementor…i think elementor is easier…what is your opinion….

    Reply
  6. Sara

    Hi thanks a lot for this tutorial!!

    Just a question: could it be possible for the search module to be stacked on mobile? That is to say that the input box appeared above the button?

    Thanks!

    Reply
    • Hemant Gaba

      Hey Sara,

      Could you please let me know where is the search module right now on the website for me to understand the issue better?

      Reply
  7. cinzia

    Hi, great tutorial!
    It’s possible to have an image like button search?
    Thanks!

    Reply
  8. Andy

    The results are not appearing in chronological order in my search results page. They are appearing in random order. Is there a way to make them appear by date order ie newest first?
    Thanks

    Reply
  9. Luiz

    I am copying the script but the gap between the search box and button does not appear. Any suggestions?

    Reply
  10. Andy

    Hi Nelson. Thanks again for an amazing tutorial!
    I have a quick question. My search results are currently appearing in random order. Is there a way to make them appear in chronological order?

    Thanks in advance!

    Reply
  11. Beth

    On a site with woocommerce, when you do a search, I’m trying to change the “older entries” text at the bottom to “more products”.
    Banging my head off a wall here, hope you can help!

    Reply

Submit a Comment

Your email address will not be published.

Recent Posts

0

Your Cart