web analytics

How To Position Two Buttons Side By Side With The Divi Theme

Divi Button Module

I have always been a fan of Divi by Elegant Themes. The versatility of being able to customize modules using the Divi Builder is incredibly convenient. Originally I learned how to design & develop a website through the use of HTML & CSS. So transitioning to Divi with this knowledge was incredibly helpful as I know how CSS works.

Many people who use WordPress have no prior experience with CSS, so they are not aware of how they can achieve what they want, so continue reading to grab this CSS snippet. One of the common aspects that Divi lacks in, is in regard to Buttons. It really irks me that Elegant Themes hasn’t given some love to the Button Module. Typically by default, Divi text modules and buttons will utilize 100% of the width of the column they are in. This makes it a bit tricky when we want to have two buttons as they will stack up in a column.

Divi button stack

This brief Divi guide will counter this problem and demonstrate how you can get two buttons side by side in Divi!

Divi buttons in line

What You Need To Know For This Guide

  1. How to use the Internet
  2. A WordPress installation
  3. Divi Theme by Elegant Themes installed

Estimated time to complete this tutorial

5 minutes

Placing Divi Buttons Next To Each Other

The best way to put at least two button modules next to each other in a row is by utilizing a small piece of CSS.

First, copy and paste the following snippet into your Divi > Theme Options > Custom CSS box.

/* Add Class to Row, this will place the Buttons side by side */
.ethan-button .et_pb_button_module_wrapper {
    display: inline-block;
}

Divi button step 1

Divi button step 2

Next, edit your page with Divi. Once the page loads, create two button modules within a row.

Divi button step 3

Next, we’ll need to add the class we created “ethan-button” to the row with the buttons. Click the cog or double click the row to enter the Row Settings, proceed to the “Advanced” tab, under “CSS Class” and add “ethan-button”.

Divi button step 4

Add Margins (Optional)

If you want to add margins, go to your button on the left settings Button > Design > Spacing and add 10px to Margin Right. Do the same for the button on the right and add 10px to Margin Left.

Conclusion

Hopefully, you now have two Divi buttons side by side and the knowledge to utilize this nifty trick if you have need of it in the future. If you enjoyed this guide, please give it a share or leave a comment!

Remember, if you need any help, you can leave a comment on this post, or you can contact me on Facebook or Twitter.

You can also check out my latest post, The Number #1 Website Speed Testing Tool for 2021 if you’re looking for ideas on how you can improve the performance of your website.

Enjoy your Day!

You May Also Like…

Receive your free quote!

Receive Your Free Audit!