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 starting out.
Step 1: Open the Visual Builder
- Navigate to the page where you want to add the button.
- Click “Enable Visual Builder” at the top of the screen.
Step 2: Choose a Section and Row
If you don’t already have a section:
- Click the + blue button to add a new section.
- Select Regular.
- Add a row layout (e.g., one column or two columns depending on where you want the button).
Step 3: Add a Button Module
- Click the gray + button inside the column.
- Select Button from the module list.
- Give your button a label under the Button Text field (e.g., “Get Started”).
Step 4: Add the Button Link
- Under the Link tab, add your URL.
- Choose whether it opens in the same tab or a new one.
Step 5: Customize the Button Style (Optional)
- Open the Design tab.
- Toggle Use Custom Styles for Button to “Yes.”
- Change:
- Text color
- Background color
- Border radius
- Hover effects
Pro Tips:
- Use strong action words like Download, Book Now, or Get a Quote.
- Keep button colors consistent with your brand.
- Add spacing or margin so the button doesn’t feel cramped.
Final Thoughts
Divi’s Button module is flexible, easy to use, and perfect for boosting clicks. Once you’ve mastered the basics, you’ll be ready to move on to more advanced button layouts and styles.
More On Divi Buttons
How to Make a Full-Width Button in Divi
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....
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...