How To Add Buttons Side By Side In Divi Theme

Jan 20, 2021 | Blog, Divi Tutorial | 0 comments

In this short tutorial I will share the steps to show buttons side by side in the Divi theme.

There is no way to show two buttons modules on the same line inside a column in the Divi theme by default. But it is possible to achieve this with a bit of custom css code.

Here is a preview of how it will look like. As you can see the 3 buttons in the second columns display inline.

Buttons side by side in Divi theme

Add CSS Class In Column To Place Buttons Side By Side

The first step is to add a CSS Class to the Column. First open the Row Settings which has the buttons.

Row Settings for buttons inline

Then open the Column Settings for the column that contains the buttons that you want to show side by side. In my case the buttons are inside the second column. So I will open the setting for the second column.

Column Settings button side by side

Then go to Advanced > CSS > CSS Class and enter the class lwp-btn-inline. After adding the class to the column save the page.

CSS Class to show buttons side by side Divi theme

Add Custom CSS Code To Display Buttons Inline

Now go to your WordPress Dashboard > Divi > Theme Options > General > Custom CSS and then add the following code.

.lwp-btn-inline .et_pb_button_module_wrapper {
    display: inline-block;
    margin-left: 10px;
}

If you are not sure where to add the code then here is a screenshot to help you.

Divi Custom CSS Theme Options to show buttons side by side

That’s it, the buttons in the column will appear next to each other.

If you only want to show buttons on the same line on Desktops then you can wrap the code in a media query.

@media only screen and (min-width: 981px) {
    .lwp-btn-inline .et_pb_button_module_wrapper {
        display: inline-block;
        margin-left: 10px;
    }
}

The 981px value means that the buttons will be placed next to each other on Desktops only. If you also want to show buttons inline on Tablets then you can change the 981px value to 768px.

@media only screen and (min-width: 768px) {
    .lwp-btn-inline .et_pb_button_module_wrapper {
        display: inline-block;
        margin-left: 10px;
    }
}

If you would like to learn more about the Divi breakpoints then you can check this detailed article on the Elegant Themes Blog How to Identify Divi’s Responsive Breakpoints and Fine Tune Your Designs with Media Queries.

Here are some other Divi tutorials you might want to checkout

  1. How to add a Call To Action Button to Divi Menu
  2. How to Autoplay Videos in Divi Video Module And Hide Controls
  3. Remove Download Option from Video in Divi Video Module

Leave a comment below if you have any questions. Don’t forget to subscribe to the Newsletter to receive the latest tutorials in your inbox.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

Managed WordPress Hosting Solution For Everyone

Get Started From Just $1 For The First Month