We’ve recently used the WordPress theme/page builder DIVI on a few websites and by-and-large it’s pretty user-friendly and you can build great looking websites much faster than coding from scratch. However, it does have some limitations and some things that you’d expect to be included as standard right out of the boxes aren’t there.

Side by side buttons (the easy way)

For example, trying to put buttons side by side is a case in point. Nowadays, “call to action” buttons are seen as a must-have for most websites and you quite often want them to appear side by side rather than below each other. While there are ways of doing this within the DIVI page builder by creating a new section then a row split into two (or more) parallel parts, it’s not always ideal and may not get things to look how you want them to. With both buttons will be side by side, they’ll most likely be spaced too far apart as in the two screenshots below

Buttons split into two halves seen from the backend page builder view of Divi

Divi buttons side by side viewed from the front-end

 Divi buttons rendered side by side using CSS

So, if the above really isn’t what you’re looking for because you want your buttons to be closer together in your Divi theme, how do you achieve that instead? If we’re to assume that you want them similar to the image at the very top of this article, you’ll need to delve into a bit of simple CSS. So, here’s how you do it. Firstly, create a “section” and then a “row” as you normally would do within the DIVI builder. Then, we’ll add a couple of buttons so they appear like the image below (backend view).

Here’s what that looks like on the front end of Divi: Not really what we’re looking for, so here’s where the CSS comes into play… The first thing to do is to go into the “Row” settings and click on the advanced tab (see image below) and put this bit of CSS in the “CSS Class” field so it’s the same as in the picture: btn-inline

Save it and then go to the WordPress dashboard. Select Divi’s theme options (image below).

Scroll down to the bottom of the “General” tab which is the default page when it loads and you’ll see the area where you can insert your custom side by side button CSS code. This is what goes in the box:

/* Buttons side by side for header */
.btn-inline .et_pb_button_module_wrapper {
display: inline-block;
padding-bottom: 20px;
margin: 0 10px;
}

Here’s what it looks like:

Save it and go and check the front end and it should now look like the picture below:

And there you have it; a simple way to get your buttons next to each other on your DIVI website and you can see what it looks like on this site that’s built using the Divi theme. For other DIVI tips and tricks see also: How to put a caption with an image in a DIVI module. How to make Hyperlink Color and Hover Color Change in DIVI.

About Us

We’re an SEO consulting and digital marketing agency based in the UK, and we love working with DIVI!