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.
This brief Divi guide will counter this problem and demonstrate how you can get two buttons side by side in Divi!
What You Need To Know For This Guide
- How to use the Internet
- A WordPress installation
- 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;
}
Next, edit your page with Divi. Once the page loads, create two button modules within a row.
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”.
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!
