How To Place Two Divi Buttons Side By Side In The Same Column Tutorial by Pee-Aye Creative

How To Place Two Divi Buttons Side By Side In The Same Column

This quick Divi Pro Tip will show you how to place two button modules side by side in the same column with a simple and easy solution.

Add The CSS Code Snippet

We are not actually going to do anything to the Button Module itself, but rather to the colum that the Button Modules are inside. That’s because we need to target the button wrapper, and this is the only way to do that.

Find the row and column where you want to place the buttons. In the column settings, go to the Advanced tab to the CSS Class. Add the class “pa-inline-buttons” and save.

Next, add the following snippet your Divi>Theme Options>Custom CSS box.

/*place button modules next to each other in the same column*/
.pa-inline-buttons .et_pb_button_module_wrapper {
    display: inline-block;

Add Button Modules

Now you can go ahead and add two or more Button Modules there in that column. They will line up next to each other.

Adjust The Spacing In The Button Modules

Now of course you can adjust the spacing, because by default they will smash right up against each other. I’d recommend going in to the button settings and adding a margin left of 10px or so on the right button.


Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative Co in the beautiful state of Pennsylvania. He loves helping small businesses, exploring, building websites with Divi, and teaching others.

Join Our NEW Divi Facebook Group!

The Divi Teacher Logo

Recent Posts

Leave A Response!

Notify of
Newest Most Voted
Inline Feedbacks
View all comments
3 days ago

I can’t seem to get it to work. pa-inline-buttons

Shop Our Divi Products!

Child Themes • Plugins • Layouts

Visit The Shop

Divi Tutorials On YouTube

Subscribe to our helpful Divi videos!

Visit Our Channel

Would love your thoughts, please comment.x

Pin It on Pinterest


Your Cart