As like you, I am also bored with the default look of the Divi search module so I have decided to make it beautiful as like the website.

Recently, I have changed my search module style according to my website theme. You may have a look at Divi Freebies. It’s not just a design it’s also responsive for all devices.

Styling Divi Search Module

You might want to see what will be the result once you add my code to your website right?

BEFORE

AFTER

Place the below code inside Divi search module settings > Advanced > Custom CSS > Button

padding-left:40px;
padding-right:40px;
border-bottom-right-radius:30px;
border-top-right-radius:30px;
margin-right:-4px;
margin-top:-0.2px;
margin-bottom:-0.2px;

Divi Search Module Mobile Responsive Code

I have reduced the padding from left and right to make the button look smaller otherwise it was taking more than 50% of the field and the placeholder was not visible.

Enable the phone option in the advanced > button and then paste the code inside.

padding-left:20px;
padding-right:20px;
border-bottom-right-radius:30px;
border-top-right-radius:30px;
margin-right:-4px;
margin-top:-0.2px;
margin-bottom:-0.2px;

According to the image:

If you see the code, we have styled the button and now it’s the time to make a search bar and some adjustment to the design.

Let’s edit the button, like the font and color of the button.

In search module settings > Design > Fields:

• Placeholder color: #000000 (black)
• Background color: #ffffff (white)
• Text color: #000000 (black)

Please note: I am having a dark theme that’s why things are like this but if you have a light theme then please edit it accordingly.

Field: You can use font according to your theme, in my case I am using Poppins

• Font size: 15px
• Line height: 1.2em

You can adjust the Divi search module settings accordingly.

Button Text:

• Font: Poppins
• Font weight: semibold
• Font style: Uppercase
• Text color: #ffffff (white)
• Text size: 16px
• Line height: 1.1em

Spacing:

• Top and bottom padding: 1.2em
• Left and right padding: 2em

Border:

• Rounded corners: 50px(all four side)
• Border width: 0px

NOTE: Make sure button and border color is the default.

In Divi search module settings > content > text > Input placeholder

You can place the text you want to show to your users as a placeholder text.

Divi Search Module Gradient Button

Copy and paste this code under Divi > Theme Options > Custom CSS

Don’t forget to change the color code according to your color scheme.

.et_pb_search input.et_pb_searchsubmit {
    background-image: linear-gradient(120deg, #3525AF, #F16699)!important;
}

If you don’t want gradient color you may use this code:

.et_pb_search input.et_pb_searchsubmit {
    background-color: #3525af;
}

Like this Boring design?

YES? NO? YES YES? NO NO NO?

haha, see you in the next. 

Don’t forget to subscribe to our newsletter to get the latest updates and freebies every Friday.