Ria du PlessisTable 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;
}
Conclusion
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
More Articles You Will Like
