Divi theme is the most versatile, multipurpose and powerful theme for making any website of any purpose in your business area. It is the masterpiece from Elegant Themes repository and from the last 3 years Divi is highly improved after the phases of multiple times development modes by the toilsome of developers, programmers and designers in Elegant Themes working base.

So today, we have organized a tutorial to help you how you can change the Divi Default button style or global button style using Theme Customizer option.

We have arranged a video tutorial as well so if you don’t like the video you can easily move to Text reading section.

Enjoy your stay.

Change Divi Theme Default Button Style

To change the default/global button style in Divi Theme you need to create a new page and switching to Divi Builder mode. Then you need to add a row and choose module like “Call to Action” or “Button”

After adding button or Call to Action you make following changes

Title: Give a Title

Button URL: Give a button URL

Button Text: Give a button text

Use Background Color: No

Text Color: Dark

Text Orientation: Center

Now preview the post – [Do not publish]

From the top left navigation select “Theme Customizer”

Choose Buttons to make changes on buttons

Now you need to choose a style of your button. You can pick one from a top 5 button styles from Elegant Themes.

We have chosen first button style for tutorial purpose, you can choose other buttons as per your needs and make changes consecutively.

We will make changes on both “Button Style” and “Button Hover Style”

Button Style

Text Color: #ffffff

Background Color: #ff9b1f

Border Width: 1

Border Color: #ff9b1f

Border Radius: 6

Buttons Font: Montserrat

Button Hover Style

Text Color: #ff9b1f

Background Color: #ffffff

Border Color: #ff9b1f

Border Radius: 6

Finally click on “Save Changes” and you’re done!

Now when you add a button in any place in your website you can see the default button style.

Fix Divi Default Button Color Issue

After adding a button you would see there is an issue with button color, due to Divi’s default link color it does not show the exact color you have selected for global button.

To fix this issue you need to add a simple code in “Custom CSS” section under “Theme Options” in Divi

To do it simply navigate to Divi > Theme Options and scroll down until you see “Custom CSS”

Now add the following code in that CSS box

body .et_pb_button {
color: #ffffff !important;
}

Now click “Save Changes” and you’re almost done!

Note: color: #ffffff is only applied if you select the button we have shown in this tutorial, otherwise you have to choose different color as per your button style.

Hope this tutorial helps.

Leave comment, share this tutorial with your friends, and other social networks to allow people see it and be benefited.

Have a great day 🙂

Pin It on Pinterest

Share This