How To Add In-line Buttons in Divi
Editorial Note We may earn a commission when you visit links from this website.

Table of Contents

Make Divi Buttons Inline

Solving Another Missing Feature

Sometimes, you want to put two Divi buttons next to each other, but it’s not possible. You could add button modules to different columns, but that’s not always practical. To place multiple button modules side by side in the same column, you need a small CSS snippet. This tutorial will show you how to do it quickly in Divi!

Add The CSS Code Snippet

We won’t change the Button Module. Instead, we’ll modify the column containing the Button Modules. This is necessary to access the button wrapper.

Locate the row and column for button placement. In the column settings, navigate to the Advanced tab and add the class “dm-inline-buttons” to the CSS Class field. Save your changes.

Then, copy and paste the following code snippet into the Divi->Theme Options->Custom CSS box.

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

You can change the spacing between the buttons by adding a margin. To do this, go to the button settings and add a margin-left of around 10px to the right button.

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:

dm-inline-buttons {
text-align: center !important;


We hope you have enjoyed learning How To Place Two Divi Buttons Side By Side In The Same Column. You can now create your dream Divi website!

Try Divi Areas Pro today

Sounds interesting? Learn more about Divi Areas Pro and download your copy now!
Many pre-designed layouts. Automated triggers. No coding.

Click here for more details