How to Add Two Buttons Side by Side in Divi

Updated: October 12, 2021

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 to 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 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>
 .de-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 de-inline-buttons on 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 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.

Original posted on: October 12, 2021

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

Leave a Reply

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

Pin It on Pinterest

Thanks for commenting

Help us grow by sharing this post with your friends!

Support Us

Consider subscribing to help us grow. Get the regular articles about page builder plugins and WordPress in general.