Trying To Hack The Divi Search Module
The Most Difficult Module To Style
I’ll start with the obvious. The Search module is the most annoying Divi module to try to style. I recently added a search feature to our blog, and in the process, I hacked the Search module pretty well, and I wanted to share that with you. So here we go, this tutorial will show you how to customize and style that pesky Divi search module.
▶️ Please watch the video above to get all the exciting details! 👆
FYI: Do It With Divi Search Helper!
Why work so hard? You can do this easily with a setting in our Divi Search Helper plugin!
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;
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;
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;
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.
Create The Divi Theme Builder Template For The Search Results Page
The first thing you need to do is go to the Divi Theme Builder. You can find that from the Dashboard under the Divi menu, Divi>Theme Builder.
The Theme Builder is an absolutely amazing tool, and if you are not using it yet, I highly recommend you learn how.
Create & Assign A Template
Go ahead and create a new template. To do that, just click on “Add New Template.”
In the popup, click on “Search Results.”
Then click the blue button at the bottom of the popup that says “Create Template.”
Next, click on “Add Custom Body.”
This will bring up a new popup again. In that popup, click on “Build Custom Body.”
Add The Blog Module To Dynamically Display The Search Results
At this point, you can design the layout however you want. The important step here is to make sure you turn on the toggle called “Posts For Current Page.”
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!
Do It With Our Divi Search Helper!
Make life easier and use the Divi Search Helper instead! This innovative plugin upgrades the existing Divi Search module with all the missing features provided by our addon with new design settings, advanced search criteria options, and improved search result pages.
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…
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!