If you’ve ever wanted to place Two Divi Button Modules Inline nice and snug next to each other but were left scratching your head as to how to get that done, you certainly are not alone! It is one of those things that we scratch our heads and think “Shouldn’t Divi be able to do that?”. There are many scenarios like maybe having “Sign In” and “Register” buttons right next to each other to fit the design language of your site, but Divi just does not allow you to do that natively. Never fear, in today’s tutorial we will show you exactly how easy it is to Add Two Divi Button Modules Inline Next to Each Other in any Row.
Let’s take a look!
Table of Contents
Setting it Up
Adding Two Divi Button Modules
To Add Two Divi Button Modules Next to Each Other we will need to set up a page with a Single Column Row that has two Button Modules placed in it. You can do this on a new page or work on the one you already have up, it does not really matter.
Add/Edit a Page
Add a Single Column Row
Add two Divi Button Modules
Now this will be our basic structure for the tutorial on top of which we will make a few small changes and then add some code to get it all working. Feel free to Update/Publish this page and take a look at what it looks like on the frontend, you’ll see the two buttons stacked on top of each other.
Let’s implement those small changes I mentioned.
Single Column Row Settings > Advanced Tab > CSS ID & Classes
Add the CSS Class
Adding the CSS Code
Placing our Two Divi Button Modules Inline Next to Each Other
With the stage set, we need to get these stacked buttons cozied up with a little bit (and I mean a little bit) of CSS code. Now if you’ve followed a few of our tutorials by now, you know there are a few options of where you can add the CSS, and why you would choose either option.
In short, you can do this either with a Divi Code Module, your Child Theme CSS file, or in the Divi Theme Options Custom CSS. For this tutorial, we will use the Code Module on the page.
Add a Code Module
Paste the Code below in the Code Box between opening and closing
If you go and take a look at the frontend of your site, you’ll see that the code modules are besties now hanging out side-by-side, but there is one issue, they didn’t leave any personal space. They are right on top of each other, so let’s take a look at how we can polish the design up a bit.
Polishing the Design
Adding Space to and Centering our Inline Divi Button Modules
Look at you! You’ve come so far and all you’ve done is basically add one line of CSS, ninja much? But things are not perfect. I think we want to give these buttons a little bit of breathing room as well as center them on the page.
Let’s start with the button spacing. All we need to do is add a smidge of margin.
Go to your first Button Settings > Design Tab > Spacing
Add Left and Right Margin of 5px
Repeat for the other Button
Awesome, our buttons have some space between them and they can be buds forever.
Now, let’s center these guys and we can call it a day!
Open the Code Module Settings
Add the Code below in the Code Box between the
We done did it! Reload that frontend and you’ll see Two Divi Button Modules Next to Each Other centered on the podium.
Good job team!
Yayyyyy Button Besties for life!
Adding Two Divi Button Modules Next to Each Other was almost too easy, but dang, those buttons look so much better inline. This just goes to so how flexible the Divi Theme can be when you know just a little bit of coding. If you like enhancing both your Divi and Coding skills, definitely check out the rest of our tutorials!
Also, please let us know what you thought in the comments below, we are always looking for ways to engage and enrich our community!
Until next time 😁