Grab Free WordPress Website! There’s no catch!

Day(s)

:

Hour(s)

:

Minute(s)

:

Second(s)

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

By default Divi will stack your button modules one above the other. This quick and easy tutorial will teach you how to place two buttons next to each other in Divi.

Make Divi Buttons Inline

Solution For Another Common Divi Problem

Just about week ago I had to urgently design a landing page for a new real estate investor campaign that we were launching next day. While designing it I had to place two Divi buttons next to each other and since the landing page had a gradient background I’ve decided to quickly write a CSS snippet to resolve the issue – Easy way.

Add The CSS Code Snippet

In this tutorial we won’t be editing Button Module itself, rather the column that the Button Modules are inside, reason why is because we need to target the button wrapper.

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 “sk-inline-buttons” and save.

Next, add the following snippet either to your Page Settings>Advanced>Custom CSS what would apply CSS to only one page in Divi or Divi>Theme Options>Custom CSS box which would apply CSS to entire website.

/*place button modules next to each other in the same column*/
.sk-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.

Optional Button Settings CSS

Simply by adding code above to your custom CSS you’ve allowed yourself to place two Divi buttons side by side in the same column. However they won’t be centered and they will be right up against each other.

Adjust The Spacing In The Button Modules

Now you need to adjust the spacing between the buttons as they will be right up against each other. You could resolve this by getting in to the button settings and adding a margin left of 10px or by adding margin settings into the button wrapper.

/*place button modules next to each other in the same column*/
.sk-inline-buttons .et_pb_button_module_wrapper {
    display: inline-block;
    margin: 0px 10px 0px 0px;
}

Center The Buttons In The Column

If you want to center the buttons inside the column, you will need to add an additional snippet of code:

.sk-inline-buttons {
    text-align: center !important;
}

Congratulations!

I hope you have enjoyed learning How To Place Two Divi Buttons Side By Side In The Same Column. If you have any questions or need help please comment below. If you find value in this type of post, please subscribe so you don’t miss out any new Divi tutorials!