How to Add Divi Button Modules Side by Side

by | Apr 5, 2024 | Tips & Tricks, Tutorials | 2 comments

Affiliate Disclosure: Some of the links in this post are affiliate links, which means we may earn a commission if you click through and make a purchase. For more details, please read our Affiliate Disclosure Policy.

Often, you might find yourself wanting to put two Divi buttons next to each other i.e. side by side, but it’s not always straightforward. Sure, you can attempt to place button modules in different columns, but that’s not always practical. Sometimes, you just need them side by side in the same column. The good news is, there’s a simple solution: a tiny bit of CSS. In this quick Divi tutorial, I’ll walk you through how to do it step by step. So, if you’ve ever struggled with getting those buttons aligned just right, you’re in the right place! Let’s dive in and learn how to do it together.

Step 1: Open Divi Builder

Log in to your WordPress dashboard and navigate to the page or post where you want to add the Divi Button Modules. Click on the “Enable Divi Builder” button to launch the Divi Builder.

Click on the Enable Divi Builder button to launch the Divi Builder.

Enabling Divi Visual Builder

Step 2: Add Row

Once in the Divi Builder, click on the green “+” button to add a new row. Choose the number of columns you want for your buttons. For side-by-side buttons, select the 2-column layout.

In the Divi Builder, click on the green "+" button to add a new row.

Adding a row

Step 3: Add Button Modules

In each column, click the black “+” button to add a new module. From the module list, select the “Button” module, and add two button modules.

In the module list, choose the "Button" module, and insert it.

Adding the Button Module

Read More: How to Fix Divi Builder Not Loading Issue: Troubleshooting Tips

Step 4: Adding The CSS Code Snippet

To arrange the buttons side by side in Divi, we’ll focus on tweaking the column they’re in, rather than messing with the buttons themselves. Here’s what you need to do:

First, locate the row and column where your buttons are placed. Then, open up the settings for that column. Look for the “Advanced” tab and find the box where you can add custom CSS classes. In there, type in “dc-inline-buttons” without the quotes and save your changes.

avigate to the "Advanced" tab and locate the CSS Class section where you can input custom CSS classes.

Advanced Column Settings

Now, you’ll need to add a bit of code to your website. Don’t worry, it’s simple. Just copy the following snippet. Paste the given css code into your Divi>Theme Options>Custom CSS code box as shown in the picture below.

.dc-inline-buttons .et_pb_button {
 display: inline-block;
 margin-right: 10px; 

incorporate custom CSS code into the Divi dashboard, allowing you to fine-tune and personalize the appearance and functionality of your website.

Adding Custom CSS Code to the Divi Dashboard

What this code does is it targets the buttons inside columns with the “pa-inline-buttons” class and makes them display side by side instead of stacking on top of each other. It also adds a bit of space between them for a clean look. Feel free to adjust the margin-right value to change the spacing between buttons according to your preference. And that’s it! Your buttons should now be nicely lined up next to each other.

Read More: How to Use a Dynamic Logo in Divi Website

Final Look:

At the end of the process, you’ll see two button modules positioned right next to each other. These modules serve as buttons that users can click on. They’ll be displayed side by side on your webpage. This setup makes it easy for visitors to your site to see and interact with both buttons without having to scroll or search for them. It’s a clean and organized way to present multiple calls-to-action or options to your audience. Whether you’re prompting them to sign up for a newsletter, explore more content, or make a purchase, having these buttons side by side enhances user experience and makes your website more user-friendly.

By placing the Divi Button Modules side by side, you can create an engaging and visually appealing user experience on your website.

Divi Button Modules after placing them side by side

Conclusion:

In conclusion, mastering the art of placing Divi Button Modules side by side can greatly enhance the aesthetics and functionality of your website. By following the simple steps outlined in this tutorial, you can effortlessly align your buttons without the need for complicated coding or layout adjustments. 

This technique not only improves the visual appeal of your site but also enhances user experience by making important calls-to-action easily accessible to your visitors. Whether you’re aiming to increase engagement, drive conversions, or simply streamline navigation, having neatly arranged buttons side by side is a valuable asset. So, next time you’re faced with the challenge of aligning Divi buttons, remember this quick and effective solution to achieve the desired results with ease.

Read More: How To Create A Promo Bar in Divi Theme

2 Comments

  1. Sebastia

    If it doesn’t work, try “.et_pb_button_module_wrapper” instead of “.et_pb_button”.

    Reply
  2. Homer Jon Young

    This works but the code for the latest version of divi is
    .dc-inline-buttons .et_pb_button_module_wrapper {
    display: inline-block;
    margin-right: 10px;

    }

    Reply

Submit a Comment

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

Stay ahead with the Latest WordPress Insights

Subscribe for tips, updates, and exclusive tools to elevate your website game.

Newsletter

No spam ever. Only Divi related updates. You need this.

Pin It on Pinterest

Shares