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!
Preview:
BEFORE
Video Tutorial
Table of Contents
Difficulty
Easy
Time
5 Minutes
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
Save
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 de-inline-buttons
Save
NOTE: The class needs to be added to the element containing the buttons. We are using a single column row in this example and that is why we add the class to the row, but if you are using a row with multiple columns, you need to add the class to the column that has your buttons in it.
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 <style> tags
Save
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
Save
Repeat for the other Button
Save
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 <style> tags
Save
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!
Conclusion
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 😁
Great! Many Thanks for this tutorial!
Been struggling with this problem for days and most other sites use the ‘Flex’ CSS.
This Flex code doesn’t work well on phones and tablets
Your way of doing it works perfectly on all devices!
Top!!!!
I appreciate this tutorial and yes it worked as advertised. However, what I really want to do is do it with images instead. I’m having a hard time finding the code to use for images.
## Comment SPAM Protection: Shield Security marked this comment as “Trash”. Reason: Failed AntiBot Verification ##
I appreciate this tutorial and yes it worked as advertised. However, what I really want to do is do it with images instead. I’m having a hard time finding the code to use for images.