Resize the Divi Button Module

|

This post offers some ways of controlling the width of buttons added to your site using the Divi Builder button module.

Adjust the Button Module Size using the Padding Option

Perhaps the easiest way to change the button module size is using the button module's size is using the padding option, found at:

Button Settings > Design > Spacing > Padding 

It lets you add extra space above, below, and to the sides of the button module's text, inside the button border. The result is that the button size is increased.

It's a quick, easy approach. However, its downside is that the total width / height of the button is determined by the padding plus the width / height of the button text. As such, two buttons with the same padding but different text may end up as different widths. Similarly, if your layout requires a fixed button width (400px, say), it will take some trial and error to find the right padding, and any changes to the button text or font styles would require a re-adjustment to the padding.

Set the Button Module Size using Custom CSS

A more accurate way to set the size of your button module buttons is using the custom CSS options Divi provides in the module settings. This can be used to set the minimum width / height on the buttons individually. You can do this by going to the:

Button Settings > Advanced > Custom CSS

option of each button module and pasting the following into the "Main Element" box:

min-width: 400px;
min-height: 200px;

​This will make the buttons at least 400px wide and 200px tall. Obviously, you can change this to your desired width, and omit either the width or height setting if not required.

Setting a Site-Wide Minimum Button Width

Divi Booster contains an option for setting the minimum width on buttons within Divi. You'll find it at:

​Divi > Divi Booster > Divi Builder > Standard Builder > Set minimum CTA button width

​It sets a minimum width for all buttons on the site, so it's definitely worth considering the impact on all other buttons on your site – these would also be increased in size if smaller than the minimum width set in the option. Note that this option affects not just the button module, but other modules which display buttons such as the CTA and slider modules.

This post may contain referral links which may earn a commission for this site

Divi Booster

Hundreds of new features for Divi
in one easy-to-use plugin

4 Comments

    • Hi Douglas, I've just updated the post to include details on setting the height, and additional details on setting the width via padding. Hope it helps!

      Reply
  1. Thank you. Very helpful

    Reply

Submit a Comment

Your email address will not be published.