Search

How to Add Two Buttons Side by Side in Divi

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.

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.

The gear icon to access row settings panel in Divi

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.

Adding CSS Class to a Row in Divi settings panel.

Here is the result:

The end results of the tutorial.

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 our project. Read our affiliate disclosure.
Aliko Sunawang

Aliko Sunawang

Aliko is a WordPress expert and lead blogger at WPPagebuilders. He has been blogging with WordPress since 2012. He is responsible of all content published on this website.
Want to save yearly expense up to $219? why not?

Leave a Comment

Save your Divi assets to the cloud and access them from anywhere.