How to Add Two Buttons Side by Side in Divi

Updated: October 4, 2022

On some web pages, you might find a layout where two buttons are placed side by side, and want to implement the layout on your own website. If you use Divi, you can follow the tutorial we will cover below to achieve the layout style.

In Divi, you can place two buttons side by side in a column. This practice is great to make your page looks shorter, more compact, and more pleasing to see rather than stacking the buttons vertically. If the page builder you use has an inline positioning setting option, you can add two buttons (and other elements) side by side more effortlessly. Unfortunately, Divi has no positioning setting option like that. One example of a page builder that offers an inline positioning setting option is Elementor (read: Elementor vs Divi).

In Divi, you can achieve the side-by-side layout style using custom CSS.

How to Add Two Buttons Side by Side in a Column in Divi

First, create a new page (Pages -> Add New) and edit it with Divi Builder. Or you can also edit an existing page. Add the Button module to a column and duplicate it.

Once the buttons are added, add the Code module right beneath the second button. Add the following CSS code to the Code field under the Text block under the Content tab on the settings panel.

The code:

<style>
 .wpb-inline-buttons .et_pb_button_module_wrapper {
  display: inline-block;
}
</style>

Next, edit the row belongs to the buttons by clicking the green gear icon.

On the appearing settings panel, go to the Advanced tab and open the CSS ID & Classes block. Add the CSS class wpb-inline-buttons to the CSS Class field. Make sure to click the green checklist icon.

Here is the result:

If you want to set the position of the buttons (e.g., to the center of the column), you can edit the first button. Open the Spacing block under the Design tab and set the left margin accordingly.

Once done setting the position, you can style up the buttons according to what you want. You can read our previous article to learn how to use the Button module in Divi.

This page may contain affiliate links, which help support WP Pagebuilders. Learn more

Leave a Comment

Pin It on Pinterest

Thanks for commenting

Help us grow by sharing this post with your friends!

Join 500+ WordPress users receiving tips and insights on creating on WordPress with Divi.

Hello.

How long have you been using WordPress? If you are an old WordPress user, then you have been a witness how WordPress has evolved massively. It has gone from a merely blogging tool into a comprehensive website builder. You can now use WordPress to create any type of website. From e-commerce website, LMS, listing website, membership website, to social media website.

Do you know what’s more interesting?

You can create your website with WordPress without touching a single line of code. At WP Pagebuilders, we write a lot about how to get the most out of WordPress in the no-code era. Subscribe and be first to know our newest content.