If ever you need to place buttons side-by-side in the same column, this tutorial is for you. The standard Divi Button module takes the entire width of the column it’s placed in and any additional buttons would go below the previous button. With a little bit of CSS you can change that and place the buttons side-by-side assuming there’s enough space. Having buttons in-line and side-by-side is very useful for presenting multiple options to the user.
If you don’t want to touch code then you may be interested in Divi Modules Pro. It includes the Multi Button module for doing this exact thing (but doesn’t require any custom CSS.
The Example
As shown in the screenshot below, the example is made of two Divi Button modules placed below each other in the same row.
The CSS
To achieve this button layout, there are two steps. Begin by adding the following CSS to either your child theme’s stylesheet, or at page level by adding it to the Custom CSS field in the page settings window.
Tip: If you don’t want to center the buttons or you want to right align, simple remove or edit the second piece of CSS (.btn-inline {text-align: center !important;}). The right align, just change the word center to right.
Once you’ve added the CSS all that’s left to do is to add the class name btn-inline to the row that the buttons are in (Row Module Settings > Advanced tab > CSS Class field).
Wrapping It Up
And there you have it, a super easy way to place Divi Buttons next to each other in the same column.
Photo by André Robillard on Unsplash
Support Divi Notes
Divi Notes started as a way to document my own WordPress and Divi web design/development journey and, to my delight, has grown to become a helpful resource to many other Divi users out there. If you’ve found Divi Notes to be useful in your journey, I’d appreciate it if you would consider supporting me using the form below.
