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!

6

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

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

Join Our NEW Divi Facebook Group!

The Divi Teacher Logo

Recent Posts

Leave A Response!

Subscribe
Notify of
guest
2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Barrie Simpson
Barrie Simpson
14 days ago

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…

Shop Our Divi Products!

Child Themes • Plugins • Layouts

Visit The Shop

Divi Tutorials On YouTube

Subscribe to our helpful Divi videos!

Visit Our Channel

0
Would love your thoughts, please comment.x
()
x

Pin It on Pinterest

0

Your Cart