#Button hover how to#
#Button hover plus#

This option allows you to assign a custom border color to the button in this module. Button Border Colorīy default, button borders assume your theme accent color as defined in the Theme Customizer. Borders can be removed by inputting a value of 0. This border can be increased or decreased in size using this setting. Button Border WidthĪll Divi buttons have a 2px border by default. This can be changed by selected your desired background color from the color picker. Button Background Colorīy default, buttons have a transparent background color. Select your custom color using the color picker to change the button’s color. This option allows you to assign a custom text color to the button in this module. Button Text Colorīy default, buttons assume your theme accent color as defined in the Theme Customizer. The button will scale as the text size is increased and decreased. This setting can be used to increase or decrease the size of the text within the button. Use Custom Styles for ButtonĮnabling this option will reveal various button customization settings that you can use to change the appearance of your module’s button. If your background is light, then your text should be set to dark. If you are working with a dark background, then your text should be light. Here you can choose whether your text should be light or dark. Here you can choose to have your button aligned to the left, right or center. Every Divi module has a long list of design settings that you can use to change just about anything. This is the tab you will use to change how your module looks. Within the design tab you will find all of the module’s styling options, such as fonts, colors, sizing and spacing. When using WireFrame view in the Visual Builder, these labels will appear within the module block in the Divi Builder interface. This will change the label of the module in the builder for easy identification. Here you can choose whether or not your link opens in a new window. Input the destination URL for your button. Anything that controls what appears in your module will always be found within this tab.

Within the content tab you will find all of the module’s content elements, such as text, images and icons. That’s it! This is just one of the countless ways you can use the button module. Then add the Button Module directly under the Text Module.īutton Font: Source Sans, Bold, Uppercase Add a Text Module to add and style the Headline and Subheadline. Use the visual builder to add a Standard Section with a fullwidth (1 column) layout.

#Button hover how to#

For this example, I’m going to show you how to add a “learn more” button to the hero section of a landing page. There are countless ways to use the Button Module. Use Case Example: Adding a CTA Button to the Hero Section of a Landing Page. These options are separated into three main groups: Content, Design and Advanced. The module list is searchable, which means you can also type the word “button” and then click enter to automatically find and add the button module! Once the module has been added, you will be greeted with the module’s list of options. Locate the button module within the list of modules and click it to add it to your page. We have some great tutorials about how to use Divi’s row and section elements. If you are starting a new page, don’t forget to add a row to your page first. New modules can only be added inside of Rows.

#Button hover plus#

Once you have entered the Visual Builder, you can click the gray plus button to add a new module to your page. You can also click the Use Visual Builder button when browsing your website on the front end if you are logged in to your WordPress Dashboard. Next, click the Use Visual Builder button to launch the builder in Visual Mode. Clicking this button will enable the Divi Builder, giving you access to all of the Divi Builder’s modules. Once the Divi Theme has been installed on your website, you will notice a Use Divi Builder button above the post editor every time you are building a new page. View A Live Demo Of This Module How To Add A Button Module To Your Pageīefore you can add a button module to your page, you will first need to jump into the Divi Builder. How to add, configure and customize the Divi button module.