Source: https://divicake.com/blog/add-divi-button-modules-side-by-side/ [Blog](https://divicake.com/blog/)/[Tips & Tricks](https://divicake.com/category/tips-tricks/) # How to Add Divi Button Modules Side by Side By Divi Cake·5 April 2024·Updated 19 August 2026·4 min read How to Add Divi Button Modules Side by Side We may earn a commission from affiliate links in this post. [Disclosure policy](https://divicake.com/affiliate-disclosure-policy/) On this page - [Step 1: Open Divi Builder](https://divicake.com#step-1-open-divi-builder) - [Step 2: Add Row](https://divicake.com#step-2-add-row) - [Step 3: Add Button Modules](https://divicake.com#step-3-add-button-modules) - [Step 4: Adding The CSS Code Snippet](https://divicake.com#step-4-adding-the-css-code-snippet) - [Final Look:](https://divicake.com#final-look) - [Conclusion:](https://divicake.com#conclusion) Often, you might find yourself wanting to put two [Divi](https://divicake.com/go/divi/) buttons next to each other i.e. side by side, but it’s not always straightforward. Sure, you can attempt to place button modules in different columns, but that’s not always practical. Sometimes, you just need them side by side in the same column. The good news is, there’s a simple solution: a tiny bit of CSS. In this quick Divi tutorial, I’ll walk you through how to do it step by step. So, if you’ve ever struggled with getting those buttons aligned just right, you’re in the right place! Let’s dive in and learn how to do it together. ## Step 1: Open Divi Builder Log in to your WordPress dashboard and navigate to the page or post where you want to add the Divi Button Modules. Click on the “Enable Divi Builder” button to launch the [Divi Builder.](https://divicake.com/blog/divi-theme-builder-overview/) Click on the Enable Divi Builder button to launch the Divi Builder. Enabling Divi Visual Builder ## Step 2: Add Row Once in the Divi Builder, click on the green “+” button to add a new row. Choose the number of columns you want for your buttons. For side-by-side buttons, select the 2-column layout. In the Divi Builder, click on the green “+” button to add a new row. Adding a row ## Step 3: Add Button Modules In each column, click the black “+” button to add a new module. From the module list, select the “Button” module, and add two button modules. In the module list, choose the “Button” module, and insert it. Adding the Button Module Read More: [How to Fix Divi Builder Not Loading Issue: Troubleshooting Tips](https://divicake.com/blog/divi-builder-not-loading-issue/) ## Step 4: Adding The CSS Code Snippet To arrange the buttons side by side in Divi, we’ll focus on tweaking the column they’re in, rather than messing with the buttons themselves. Here’s what you need to do: First, locate the row and column where your buttons are placed. Then, open up the settings for that column. Look for the “Advanced” tab and find the box where you can add custom CSS classes. In there, type in “dc-inline-buttons” without the quotes and save your changes. avigate to the “Advanced” tab and locate the CSS Class section where you can input custom CSS classes. Advanced Column Settings Now, you’ll need to add a bit of code to your website. Don’t worry, it’s simple. Just copy the following snippet. Paste the given css code into your Divi>Theme Options>Custom CSS code box as shown in the picture below. .dc-inline-buttons .et_pb_button { display: inline-block; margin-right: 10px; incorporate custom CSS code into the Divi dashboard, allowing you to fine-tune and personalize the appearance and functionality of your website. Adding Custom CSS Code to the Divi Dashboard What this code does is it targets the buttons inside columns with the “pa-inline-buttons” class and makes them display side by side instead of stacking on top of each other. It also adds a bit of space between them for a clean look. Feel free to adjust the margin-right value to change the spacing between buttons according to your preference. And that’s it! Your buttons should now be nicely lined up next to each other. Read More: [How to Use a Dynamic Logo in Divi Website](https://divicake.com/blog/dynamic-logo-in-divi/) ## Final Look: At the end of the process, you’ll see two button modules positioned right next to each other. These modules serve as buttons that users can click on. They’ll be displayed side by side on your webpage. This setup makes it easy for visitors to your site to see and interact with both buttons without having to scroll or search for them. It’s a clean and organized way to present multiple calls-to-action or options to your audience. Whether you’re prompting them to sign up for a newsletter, explore more content, or make a purchase, having these buttons side by side enhances user experience and makes your website more user-friendly. By placing the Divi Button Modules side by side, you can create an engaging and visually appealing user experience on your website. Divi Button Modules after placing them side by side ## Conclusion: In conclusion, mastering the art of placing Divi Button Modules side by side can greatly enhance the aesthetics and functionality of your website. By following the simple steps outlined in this tutorial, you can effortlessly align your buttons without the need for complicated coding or layout adjustments. This technique not only improves the visual appeal of your site but also enhances user experience by making important [calls-to-action](https://divicake.com/blog/divi-call-to-actions-to-skyrocket-conversions/) easily accessible to your visitors. Whether you’re aiming to increase engagement, drive conversions, or simply streamline navigation, having neatly arranged buttons side by side is a valuable asset. So, next time you’re faced with the challenge of aligning Divi buttons, remember this quick and effective solution to achieve the desired results with ease. Read More: [How To Create A Promo Bar in Divi Theme](https://divicake.com/blog/how-to-create-a-promo-bar-in-divi-theme/) About the author Written by Divi Cake. ## 1 comment - Sebastia7 August 2024 at 07:21 If it doesn't work, try ".et_pb_button_module_wrapper" instead of ".et_pb_button". ## Submit a comment Comments are read before they appear. Your email is not published. Comment NameEmail Company website Submit commentSubmit commentSubmit comment The comment form needs JavaScript for its spam check. Thanks. Your comment is waiting for review and will appear here once it is approved. ## Do you need help with … - [Divi websites](https://divicake.com/divi-website-development/) - [Divi plugins](https://divicake.com/divi-plugin-development/) - [Fix a site](https://divicake.com/fix-existing-site/) - [Beyond Divi](https://divicake.com/beyond-divi/) - [Technical SEO](https://divicake.com/technical-seo/) - [SEO content](https://divicake.com/seo-content/) ## Save Annually on Divi [Save 69% on Divi VIP](https://divicake.com/go/divi-vip/)[Save 69% on Divi Cloud](https://divicake.com/go/divi-cloud/)[Save 69%, Divi Team](https://divicake.com/go/divi-teams/) ## WordPress Hosting & Tools [100% off on Kinsta for 1 Month](https://divicake.com/go/kinsta/)[Get up to 62% off Bluehost hosting.](https://divicake.com/go/wordpress-hosting-blue-host/)[Save Up to 15% on Rank Math](https://divicake.com/go/rank-math/)[Get 50% OFF on all WPForms plans](https://divicake.com/go/wpforms/) ## More in Tips & Tricks [ Divi Condition Options Explained Tips & Tricks6 min read ### Divi Condition Options Explained How Divi condition options work: show or hide any section, row, column or module by post info, location, user, interaction, device or WooCommerce state. 3 October 2026](https://divicake.com/blog/a-look-at-the-new-divi-condition-options/) [ Divi 5 Video Autoplay (No Plugin): How to Autoplay Videos in the Divi Video Module Tips & Tricks6 min read ### Divi 5 Video Autoplay (No Plugin): How to Autoplay Videos in the Divi Video Module Set Divi 5 video autoplay with the built in Video module settings, muted playback, and loop options, no plugin or custom code needed for it to work on phones. 26 February 2026](https://divicake.com/blog/divi-5-video-autoplay-no-plugin/) [ Divi Pro Pricing Explained: Is the Bundle Better Than Buying Add-Ons Separately? Reviews7 min read ### Divi Pro Pricing Explained: Is the Bundle Better Than Buying Add-Ons Separately? Divi Pro pricing bundles AI, hosting, cloud and support into one plan. See what each add-on costs alone and the point where the bundle stops paying off. 25 February 2026](https://divicake.com/blog/divi-pro-pricing-bundle-vs-addons/)