How to place buttons next to each other in Divi

by | Last updated Sep 3, 2019 | Divi Module Tutorials | 0 comments

INTRO

Display your Divi buttons side by side

So you want to place your Divi buttons side-by-side in the same column and that’s why I made this tutorial where I’m showing you the easiest way to display your Divi Buttons inline.

The standard Divi Button Module takes the entire width of the column and when you add multiple buttons they go below the previous ones.

VIDEO

How to place buttons next to each other in Divi Video Tutorial

In this tutorial I will show you how to center inline Divi buttons. Recently when I was building this website I wanted to have 3 buttons inline so I come up with solution witch does not require editing any CSS but just injecting a two little snippets into our column settings and button settings.

1

Add section, columns and insert Button module

We are going to start by adding one section one row with single column and one button module rows.

  1. Add Standard Section and select Single Column layout for our heading area.
  2. Add one Button module.

At this point your visual editor in Divi should look like the picture below.

2

Apply CSS snippets to Column & Buttons Settings

Next we are going to apply our CSS snippets to our Row/Column Settings and Button Settings as well.

If you’re new to CSS or want to learn more about DIVI CSS specifically, you should check my upcoming “Digest Divi CSS In A Day” course which is available for pre-order with a 50% OFF right now!

Let’s start by editing column settings. To edit column settings since one of the recent updates we have to go into row settings first and then click on the column gear icon in gray.

COLUMN SETTINGS

  1. Open Row Settings by clicking to gear icon in a green frame.
  2. In the Content tab find Column and on the far left in the column line click on gear icon.
  3. You are now in a Column Settings, go to Advanced tab and click on Custom CSS and now copy and paste first little snippet that you can find in STEP 3 of this tutorial.
  4. Save changes by clicking on checked green icon in bottom right corner – two times.

BUTTON SETTINGS

  1. Open Button Settings by clicking to gear icon in a gray/button frame.
  2. Go to Advanced tab and click on Custom CSS and now copy and paste first little snippet that you can find in STEP 3 of this tutorial.
  3. Save changes and duplicate button two more times.
3

Add Custom CSS to into row/column & button settings

Column Settings Custom CSS: In the section below find Custom CSS that you have to add into Column settings!

Column Settings Custom CSS: In the section below find Custom CSS that you have to add into Column settings!