When designing a website with Divi, one of the most common customization requests is placing the Divi button side by side Two (Or More ) in the same column. It’s a simple yet effective way to enhance the user experience and create visually appealing layouts. If you’re wondering how to set up Divi buttons side by side, this guide will show you how to achieve it quickly and efficiently.
2 Methods to Create Divi Button Side by Side
#1. Using Divi Button Module and Columns
The simplest way to align buttons side by side is by using Divi’s built-in column structure. Here’s how:
- Add a “New Row” to your layout.
2. Select a “Column” layout with the desired “Number of Columns” (e.g., two columns for two buttons).
3. Add a “Button Module” to each column.
4. “Customize each button” with its unique settings (text, color, link, etc.).
This method works well for most designs but may require additional tweaks for spacing or alignment.
#2. Using CSS for More Control (Divi button inline)
If you want greater flexibility, Custom CSS can help you align Divi buttons side by side in a Single column (divi button inline). Follow these steps:
- Add “Multiple Button Modules” in the “same column“
2. Find the Row and Column where you want to place the buttons. In the “Column Settings“, go to the “Advanced Tab” to the CSS Class. Add the class “side-by-side-buttons” and save.
Check out: Where to Add Custom Code in Divi Theme
3. Go to your Divi > Theme Options > Custom CSS section and paste the following code:
/*place button modules next to each other in the same column*/
.side-by-side-buttons .et_pb_button_module_wrapper {
display: inline-block;
margin-right: 10px; /* Adjust spacing between buttons */
}
.side-by-side-buttons {
text-align: center !important; /* Adjust the align like left, center, right */
}
4. “Save your Changes“, and your buttons will now appear side by side.
Check the Mobile version. It Looks Perfect
Responsive Design for Divi Buttons
When creating Divi buttons side by side, don’t forget to test how they appear on mobile devices. Divi provides responsive design settings, so you can adjust button alignment, spacing, and stacking behavior for smaller screens.
- Open the button settings and enable the Responsive Design Mode.
- Adjust the layout so that buttons stack vertically or reduce spacing for compact designs.
Final Thoughts
Placing Divi buttons side by side is a simple customization that can significantly enhance your site’s usability and visual appeal. Whether you prefer using Divi’s built-in tools, or custom CSS, you have multiple options to achieve the perfect look.
That’s all for today!
Discover more by supporting me on
