How to place two buttons next to each other in Divi

When using the Divi Page Builder with the Divi Theme, sometimes you’ll find yourself needing to place two, three, or even four buttons next to each other. Placing Divi modules side-by-side in the same column is quite easy and quick to achieve.

Normally, Divi buttons and text modules take up 100% of the width of the column in which they are located, and any additional modules placed within the same column will appear right below.

Using a little bit of CSS, we can easily tweak the positioning of these modules to stay within the same line and not dropping to the next.

How we do it

The first thing we have to is to add some CSS to our theme. You can do achieve this by either adding it to your child theme’s style.css file, or on a specific page by opening the page’s Divi settings, navigating to the “Advanced” tab, and under “Custom CSS”, place the following code:

.inline-buttons .et_pb_button_module_wrapper {
    display: inline-block;
    margin: 0 10px;
}

.inline-buttons {
    text-align: center !important; 
    /* Change "Center" to left or right as you need, 
    to align the buttons to the sides rather than the 
    center of the column */
}

Please note: if you wish to have the buttons aligned to the left or the right side of the column, change center to left or right in the code, as you need.

Next, we’ll need to add the class we created to the row which will contain the buttons. We will add it in the Row Settings, at the “Advanced” tab, under “CSS Class”.

You’re Done!

Your buttons are now placed next to each other in the same row. You can repeat this with as many rows, columns and buttons as you like.