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:

AFTER

Video Tutorial

Table of Contents

Difficulty

Easy

Time

5 Minutes

Add Two Divi Button Modules Inline Next to Each Other

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

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!

Changing your Divi site URL - The End

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 😁