How To Place Two Divi Buttons Side By Side In The Same Column Tutorial by Pee-Aye Creative

How To Place Two Divi Buttons Side By Side In The Same Column

This quick Divi Pro Tip will show you how to place two button modules side by side in the same column with a simple and easy solution.

Add The CSS Code Snippet

We are not actually going to do anything to the Button Module itself, but rather to the colum that the Button Modules are inside. That’s because we need to target the button wrapper, and this is the only way to do that.

Find the row and column where you want to place the buttons. In the column settings, go to the Advanced tab to the CSS Class. Add the class “pa-inline-buttons” and save.

Next, add the following snippet your Divi>Theme Options>Custom CSS box.

/*place button modules next to each other in the same column*/
.pa-inline-buttons .et_pb_button_module_wrapper {
    display: inline-block;
}

Add Button Modules

Now you can go ahead and add two or more Button Modules there in that column. They will line up next to each other.

Adjust The Spacing In The Button Modules

Now of course you can adjust the spacing, because by default they will smash right up against each other. I’d recommend going in to the button settings and adding a margin left of 10px or so on the right button.

Center The Buttons In The Column

If you want to center the buttons inside the column, you will need to add an additional snippet of code:

.pa-inline-buttons {
    text-align: center !important;
}
158
Last updated May 29, 2021 @ 10:10 am

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative Co in the beautiful state of Pennsylvania. He loves helping small businesses, exploring, building websites with Divi, and teaching others.
Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

58 Comments

  1. steve

    I can’t seem to get it to work. pa-inline-buttons

    Reply
    • Thalia

      Steve, you might want to make sure the CSS rules are added to the COLUMN, not the button itself.

      Reply
  2. Alan Rogers

    Hi and many thanks for this.

    I’m just trying to get the two buttons to be centred in the column and not sure how to do this?

    I’ve set the Button Alignment to Center but there doesn’t seem to be an option in the Column Settings to Center content?

    I’ve set some vw margin at the moment to move them right and create a space between the two but this is not going to achieve consistent centering across all screen sizes.

    Is there any additional css that can be added?

    Thanks in advance

    Reply
  3. Brandi

    I’m having trouble getting this to work on the mobile page. Is that possible?

    Reply
  4. John

    Thank you for fantastic content.

    Luckily this worked for three buttons, as can be seen in the image, where the “Date”, “Location” and “Gender” are all aligned perfectly. But how would you align buttons towards the bottom in Call To Action-modules?

    I’ve attached a photo that hopefully will explain what I mean. But I have a row of Call To Action-modules (the ones with pictures of individuals and buttons with their names); which will be constantly added to.

    The above row is how it looks like in my website and the lower row is what I created with Paint:
    https://i.imgur.com/z0EqxPY.jpg

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi John,
      The simple answer is to just not use the CTA module. I don’t know if I have ever used it, to be honest. In your case, the image is the background image of the CTA module, so you may as well make it the background image of the columns and then add text and button modules as needed and even adjust the min heights of the text above the buttons if you want them to go to the bottom.

      Reply
      • John

        What module would you recommend I use instead? And any easy to follow step-by-step guide for that, since I’m a novice (and don’t intend to have any text on the images, just buttons – and those buttons, when clicked on, would open up popups for each individual with more info and pictures)

      • Nelson Lee Miller (aka The Divi Teacher)

        I’m not sure what you are asking. I mentioned using text and image modules. Did you try that?

  5. Kelly Morris

    This is amazingly helpful, thank you, thank you!. Now I’ve just got to get my side by and nicely centred buttons (and only the buttons) to always be at the bottom of the column and lined up with each other across the page. I have text of different lengths above them (don’t we always!) I don’t suppose you can help me with that? I’ve been trying all sorts to but nothing has worked. If i try the position: absolute; / bottom: 0; it knocks everything out of whack. and flex puts them one on top of each other again. I’m stumped.

    Any help would be gratefully received 🙂

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Kelly,
      The easy and often overlooked solution to this is just to set min-heights for the text. Find the longest text, play around with the height, then apply that min-height to the other columns. Be sure to adjust for responsiveness.

      Reply
      • Kelly Morris

        Thanks for getting back to me. That of course worked like a dream. Why I dint think of that perfectly simple solution is beyond me. But like you say, sometimes you just overlook the simple solution. Thanks again for your help 🙂

  6. Phil

    My Buttons are not lining up right 🙁

    Reply
  7. emma

    thanks I was looking for this. I am new to Divi. could you also help me out with inline text module in the same column.

    Reply
  8. Anthony

    Thank you for saving me 9 bucks.

    Reply
  9. rico

    Thx for help)

    Reply
  10. Jeremias

    worked perfectly, thanks for the help

    Reply
  11. SUKESH

    .pa-inline-buttons {
      text-align: center !important;
    }

    this worked but I want to center it only phone and tablet mode. How I can get it?

    Reply
  12. Chris

    Hi Nelson, This looks simple, but I cannot seem to get it to work!

    I have placed the code in the correct places (have tried placing the CSS in Page, Divi Options and Child CSS Files) But the buttons will not go side by side, they just stay in their original (Default) positions
    I have also tried on blank page and the DIVI theme builder, but all have the same result…:(

    I have no other custom CSS applied to buttons or Plugins that might be interfering so I am now at a loss as to why?

    Unfortunately it is not a live site at the moment so I cannot provide a link

    Any suggestions appreciated.

    Reply
      • Chris

        Absolutely 🙁 double checked your written and video instructions, it is an odd one. I Have implemented some of your other tips/trick without issue in the past!
        Getting Closer, just not inline

        I’ll see if i can get a link organised..

      • Nelson Lee Miller (aka The Divi Teacher)

        Hi Chris,
        I don’t see my code in the CSS. When I inspect the site, I can find the button and add display: inline-block; and it works, so I’m not sure what is wrong. Send an email if you want more help with that.

  13. Fabio

    This worked great with buttons, how can i extend this behaviour to image modules? thanks in advance!

    Reply
  14. Philippe

    Again, Great guide.

    I was wondering if it would be possible to do the same thing but with image modules within a column instead?

    Thanks !

    Reply
  15. Wim Gernaey

    Hi Nelson, thanks for the helpful tutorial. Is there a way to disable this for smartphone? I assume I have to add something to the snippet?

    Regards, Wim

    Reply
  16. Cristina

    Hello! Does this only work in Divi? I tried using your method in another builder but it didn’t work 🙁

    GoHighLevel is what I tried using it in, in case it matters 😀

    Reply
  17. Gal

    Hi, I’m able to get this to work on a row with a single column, but when it’s multiple columns it doesn’t seem to work for me. Any suggestion?

    Reply
      • Gal

        That’s correct, but maybe I’m doing this wrong. On this page you can see the buttons are not side by side in the 2 column rows, but are behaving as expected on the bottom of the page: https://channelpro.pypestream.com/

      • Gal

        Are you saying there is another underlying issue?

  18. Karel

    Great tutorial, fast and clear!

    Reply
  19. GilsonP

    Thanks a lot, been looking for this for a long time now. (Difficulty with the CSS <ul> button thing.) This is a life saver

    Reply
  20. Dick Ockers

    AGAIN!… SUPERB!… saved my day!

    Reply
  21. Hasnain

    Not working for me/

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Asset 7

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Divi Tutorials On YouTube

Our videos have views! Join subscribers and enjoy over video tutorials!

Visit Our Channel

Recent Posts

Pin It on Pinterest

0

Your Cart