Divi TutorialsPlacing Divi Buttons Next to Each Other

Placing Divi Buttons Next to Each Other

Learn how to effortlessly arrange Divi buttons side by side using Divi theme's features for enhanced layout flexibility with just a few lines of CSS.
Published Wednesday, 24 Mar 2021

The Divi theme is amazing, no arguments here, but you know how when you have something great, it is the small things that get to you. One of those small things on the Divi theme, to me, is how there is no default to have two buttons side by side. You can stack them one above the other very easily but side by side is sadly an issue.

In this divi tutorial today, hopefully I will be able to show you how to achieve this somewhat easy functionality using a bit of code.

Let’s start with why.

Why would someone want to have the two divi buttons show side by side? Well, let’s say on your home page you would like to offer the user some options to either buy your product now or learn more about it, you can do so by placing the buttons next to each other above the fold.

divi button next to each other kinsta

So how do you do it?

We are going to add a CSS class to the column that the Button Modules reside in. Then we are going to add some CSS in the Custom CSS box from the Theme Options section of the Divi menu to achieve what we want. So let’s get going.

Side by side buttons in Divi

Head on over to the row and column where you want to place the buttons. Navigate through to the Advanced tab and click on the CSS ID & Classes. In the CSS Class field add the following “dd-btn-sidebyside” and click save.

Right, now head over to Divi -> Theme Options -> Custom CSS (or if you have a child theme, in your style.css) and enter the following code

.dd-btn-sidebyside .et_pb_button_module_wrapper {
    display: inline-block;

So now if you add two or more Button Modules into this column, they should line up next to each other.

Best web hosting for Divi websites