Resize the Divi Button Module

Written by Dan Mossop

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.

Maximize Your Site's Impact with Divi Booster

Control your button sizes effortlessly across your site with Divi Booster. The plugin offers site-wide button enhancements, allowing you to set consistent minimum widths and optimize button styling with ease. Perfect for ensuring brand consistency and user experience.

About Dan Mossop

Dan is a Scottish-born web developer, now living in Brisbane with his wife and son. He has been sharing tips and helping users with Divi since 2014. He created Divi Booster, the first Divi plugin, and continues to develop it along with 20+ other Divi plugins. Dan has a PhD in Computer Science, a background in web security and likes a lot of stuff, 

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

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

Your email address will not be published. Required fields are marked *.

We may earn a commission when you visit links on our website.