When creating a landing page (or any page) using Divi Builder, you might want to add a button element to make it easier for your visitors to take an action you wish for, according to the purpose of the page creation. Amongst design elements (called modules) offered by Divi Builder is the Button module, which you can use to add a button element to the page you are working on. Of course, you can also add the Button module to a theme builder template such as the custom header template, custom footer template, and so on. If you are new to Divi Builder, this article will show you how to add a Button module as well as how to style it up.
How to add a Button module in Divi Builder
To create a page using Divi Builder, you need to add at least one section and one row. When adding a row, you can select the column structure according to your needs. You can then add the modules — including the Button module — to the columns on a row. We have separate articles that cover how to work with a section and a row in Divi Builder. You can read them to learn more.
To add a Button module, you can simply click the grey plus icon on the column you want to add it to and select Button.
The Button module settings will appear right after you select the Button module. You can make the button customization process from this panel.
Before start styling up the button, you can add a link to the button as well as set the button text. To add the link, you can open the Link block under the Content tab.
While to set the button text, you can open the Text block. Also under the Content tab. You can either add a static text or dynamic text. To add a dynamic text, you can click the database icon on the Button fields.
Setting the button size
Divi Builder offers no specific setting option dedicated to setting the button size. So, how to set the button size?
To set the button size, you can set the padding. To do so, you can go to the Design tab on the Button module settings panel and open the Spacing block. You can simply set the top padding, bottom padding, right padding, and left padding. Setting the padding will add space between the button text and button border, which also affects the button size.
Styling up the button
Once you are done setting the button size, setting the text, and adding the link, you can start to style up the button. The default button look offered by Divi Builder is a white button with a blue border and blue text. Before being able to style up the button, you need to enable the custom style. To do so, open the Button block under the Design tab and enable Use Custom Styles For Button option. Enabling this option will open more styling options.
From the Button block under the Design tab (with the Use Custom Styles For Button enabled), you can:
- Set the button text size
- Set the button text color
- Set the button background. You can use a solid color background, gradient, or image
- Set the button border width
- Set the button border color
- Set the button border radius
- Set the font family of the button text
- Set the font weight of the button text
- Set the button icon
Once done making the styling options on the Button block, you can open other blocks under the Design to apply other styling options.
- Box Shadow
You can open this block to apply a box shadow to the button. There are 7 box shadow options offered by Divi Builder. After selecting one, you can set the shadow color, horizontal position, vertical position, blur strength, and spread strength.
You can open this block to apply CSS filters to the module.
You can open this block to apply CSS transform to the button. Simply select the CSS transform you want to apply (by clicking one of the available tabs), and use your mouse to set the transform value.
You can open this block to set the entrance animation of the Button module. There are 7 entrance animation options you can choose from. After selecting one, you can set the animation duration, animation delay, and animation starting opacity.
Once you are done making the styling on the Design tab, you can switch to the Advanced tab to make some advanced settings. From adding custom CSS to setting the scroll effect. There are 7 blocks you can open on the Advanced tab.
- CSS ID & Classes
You can open this block to add custom CSS via the Code module. You can open the block to add the CSS id and CSS class.
- Custom CSS
You can open this block to add the custom CSS directly instead of via the Code module. You can simply paste your CSS code to the available fields.
You can open this block to set the button link attribute.
From this block, you can disable/enable the button on certain device types (desktop, tablet, and smartphone). Simply tick the device type you want to disable the button on.
You can open this block to set the transition of the hover animation.
When you add a new module in Divi Bulder (including the Button module), the position is set to static (Default). If you want it, you can set the position to Relative, Fixed, or Absolute.
Relative: If you select this option, the button module will follow the normal flow of the page. This option offers top, bottom, and right properties.
Absolute: If you select this option, there will be no actual space created on the page for the button module. You can think of it as a floating element on top of other rows that take up actual space.
Fixed: If you select this option, the button module will break the normal flow of the page and it has no actual space on the page.
- Scroll Effects
You can open this block to set scroll effects to the Button module. You can either set the horizontal scroll effect or vertical scroll effect. You can also apply the sticky option from this block.
The bottom line
Adding a button will make it easy for your site visitors to take a certain action such as making a purchase or downloading a digital product. In Divi Builder, you can use the Button module to add a button element to a page or theme builder template. Divi Builder offers rich enough styling options to allow you to create a stylish button. If you have CSS knowledge, you have limitless customization options as Divi Builder allows you to add custom CSS.