Make Divi Buttons Inline
Solving Another Missing Feature
There are many times you want to place two Divi buttons next to each other, but you just can’t. Sure, you could try adding button modules to different columns, but sometimes that’s not practical. The only way to place two or more button modules side by side in the same column is by using a tiny snippet of CSS. This quick Divi tutorial will show you how!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.
I can’t seem to get it to work. pa-inline-buttons
Hi Steve,
I’ll need more details in order to help you! Let me know.