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.
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.
