Want your button to stretch across the entire width of a column? Full-width buttons are great for mobile responsiveness and bold calls-to-action. Here’s how to do it in Divi.
Method 1: Use Full-Width Row + Button
- Add a new Regular section.
- Choose a single-column row.
- Add your Button module inside.
Method 2: Adjust Width with Custom CSS
- Open the Button module settings.
- Go to Advanced > Custom CSS.
- In the Main Element box, add:
width: 100% !important; text-align: center;
Method 3: Use Built-in Sizing Controls
- Go to Design > Sizing.
- Set Width to 100%.
- Set Max Width to 100%.
Final Thoughts
Full-width buttons are easy to create and make a bold impact. Use them for headers, hero sections, and mobile layouts where visibility is key.
More On Divi Buttons
How to Change Button Colors, Fonts, and Hover Effects in Divi
Want to match your buttons to your brand colors or add a stylish hover effect? Divi makes button customization simple. Here's how to do it. Step 1: Open the Button Module Settings Click on your existing button or add a new one. Then open the settings window. Step 2:...
How to Add Side by Side Buttons in a Column in Divi
A Simple Fix for a Common Divi Limitation Ever tried to place two Divi buttons next to each other — inside the same column — only to find that they automatically stack vertically? While creating multiple columns is one workaround, it’s not always flexible or ideal....
How to Center a Divi Button
Trying to center a button in Divi and it just won’t budge? Whether you’re building a clean call-to-action or designing a centered hero layout, getting your button perfectly aligned can make or break your design. Fortunately, Divi gives you several simple ways to...
How to Add a Button in Divi (Step-by-Step Tutorial)
Looking to add a button to your Divi page? Whether you want a call-to-action, a link to another page, or a stylish download button—Divi makes it easy. In this tutorial, we’ll walk you through exactly how to add and customize a button in Divi, even if you’re just...