28. August 2022

Place Divi buttons next to each other

Unfortunately, Divi has no easy built in option to place 2 buttons next to each other. Luckily, there are 2 workarounds:

2 options to place Divi buttons next to each other

There are 2 options for placing the Divi buttons next to each other:

  • with Columns
  • with CSS

With the first option, the buttons are always distributed over the whole row, whereas with the second option they are directly next to each other.

One should decide depending on the intended use, but for me personally option 2 is usually the more suitable.

Option 1: Columns

If you want to place 2, 3 or even 4 buttons next to each other in the Divi Page Builder, you can create a row with the corresponding number of columns.

Normally, Divi buttons and text modules take up 100% of the width of the column they are in, and any additional modules placed in the same column appear directly below them.

divi buttons next to each other with columns

Option 2: With CSS

However, if this distance is too big for you, the buttons must be next to each other in the same column.

Placing Divi modules next to each other in the same column is quite easy and quick to achieve.

With a little CSS, we can easily adjust the positioning of these modules so that they stay in the same line and do not fall into the next one. This then looks like this:

divi buttons next to each other with css

Insert CSS

/* Place Divi buttons next to each other */
.inline-btns .et_pb_button_module_wrapper {
  display: inline-block;
  margin: 0 10px;
}

Insert lines class

To do this, go to Settings → Advanced → CSS ID & Classes → CSS Class and insert the class inline-btns.

Divi CSS Klasse hinzufuegen

Ready

This is what the result looks like:

Buttons nebeneinander Resultat

The distance between the 2 buttons is the margin and can be adjusted in the code snippet.

If you want to remove the border from the first button, you can add this CSS snippet:

/* Divi Buttons left margin remove from first button */
.inline-btns .et_pb_button_module_wrapper:first-child {
  margin-left: 0px;
}

Are you still thinking about whether the Divi is right for you? Then I can recommend my blog post where I share my experiences. You can find it here.

Disclosure: Some of my posts contain ‘affiliate links.’ This means if you click on the link and purchase the item, I will receive an affiliate commission at no extra cost to you.

5 1 vote
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Pin It on Pinterest