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!
▶️ Please watch the video above to get all the exciting details! 👆
Add The CSS Code Snippet
We are not actually going to do anything to the Button Module itself, but rather to the column 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, copy and paste the following snippet to your website.
Where To Paste The CSS Code
1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSS tab in the custom code window in the Divi Visual Builder.
2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.
3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Custom CSS code box.
If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.
/*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.
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:
.pa-inline-buttons {
text-align: center !important;
}
Hi! Thanks for this! It looks great on desktop but I need it to center on mobile. Is there a way to have the aligned buttons center on mobile? OR for the alignment to only be on desktop and let them stack on mobile?
Hi Christine!
I need to check the structure of the page in order to provide the code. Can you share the URL of the page to investigate further?
Hey Nelson,
I followed your tutorial and it works glowingly!
I was wondering if you knew how to stack 2 buttons that are inline with each other on top of 2 other inline buttons? The URL is kingdomecosystems.com/home-old and you can see the 4 buttons on the hero.
I was wanting the buttons to be on 2 lines. Is that possible?
Hi Daniel!
The page is not available now. Can you please share the URL of the page to investigate further?
Hi Nelson,
This has always worked for two buttons, but on the site I’m currently working on, it calls for three buttons. All of them line up, but the “click” or “hover” are working. The design I was asked to deliver called for a large negative margin on the section that contains the buttons. Could that be the cause? Is it maybe a z-index issue?
This is the site if you care to have a look. The buttons are right on the home page.
https://ramlawdev.wpengine.com/
Hi Sean,
I can see those three buttons but I am afraid I am not able to understand completely what you are trying to achieve. Could you please elaborate a bit for my better clarity?
My Buttons are not lining up right 🙁
Do you have some spacing on the buttons in the module? And a link so I can check for sure…