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.
Blog Post + Snippets: www.peeayecrea...
There are many times you want to place two Divi buttons next to each other, but you just can't. Sure, you could try adding button modules to different columns, but sometimes that's not practical. The only way to place two or more button modules side by side in the same column is by using a tiny snippet of CSS. This quick Divi tutorial will show you how!
Become a member of our Divi Adventure Club!
www.peeayecrea...
Join The Divi Teacher Facebook group: / thediviteacher
Visit our Divi child themes, plugins, tutorials, and courses here: www.peeayecrea...
Thanks for watching!

[@eq091801]

Amazing. Every time I need to find a solution when customizing divi, this is where I look. Extremely helpful content.

[@PeeAyeCreative]

I'm really happy to hear that! 😊

[@CanadianLlama]

Thank you! Center the buttons on the page, someone posted this below. He updated the text version of the tutorial. Add this to your CSS as a new line .pa-inline-buttons { text-align: center !important; }

[@PeeAyeCreative]

Yup, sometimes KZbin gets left behind

[@kayzzer]

You are nailing all the missing parts. Thank you!!

[@PeeAyeCreative]

Lots more to go! Let me know if you have ideas!

[@jamesdavis8731]

GREAT video, very helpful to many people. DIVI you need to wake up. Having to use CSS and Classes to just put buttons side by side is absolutely ridiculous. This is one reason why so many people get SO frustrated with DIVI!!!! Putting buttons side by side in Thrive Architect, Elementor, and many other page builders is so easy. With DIVI not so easy.

[@PeeAyeCreative]

Calm down and go watch my video about the future of Divi! Then get excited again! 🙂

[@Erik_Thorsvik]

Thanks for this! Still works Dec 2023.

[@PeeAyeCreative]

You're welcome!

[@MikikoMurdoch]

Thank you for this valuable tutorial! Love your written tutorials too.

[@PeeAyeCreative]

Glad you like them!

[@Youthman]

Exactly what I needed for my page. Thanks!

[@alextuppen1264]

Another solution from the sage 🙏

[@PeeAyeCreative]

haha I'm glad to help!

[@jeannewilmot935]

Thank you! Fast and easy. I can't believe Divi doesn't have an inline option in the modules!!! boooo divi.

[@PeeAyeCreative]

So glad I could help!

[@aniketjoshi7518]

Cool. Small ,simple yet very important tip.

[@PeeAyeCreative]

Thank you, yes I use this quite often. I'll be having more short tips each Thursday.

[@aniketjoshi7518]

Pee-Aye Creative that will be nice.

[@AdvanceWebSolutions]

Great tutorial it should also note you can add more than one button. If you want 3 o 4 instead of 2 keep adding button modules and it still works. Good stuff!

[@user-wi9kh4mu7z]

Thanks so much. So good

[@PeeAyeCreative]

You are so welcome!

[@FawadJadeediNuristani]

hay guys please like this Chenal don't just watch and learn and go he deserves More

[@PeeAyeCreative]

Good idea ;)

[@user-co4yl7fx8q]

Easy to follow, great work. Enjoying your themes too so far, keep up the good work!

[@PeeAyeCreative]

Awesome, thank you!

[@MelCruzado]

Just what I needed today, Thank You !!

[@PeeAyeCreative]

That's great, Mel, I love perfect timing!

[@audreyhoffman3803]

THANK YOU!!

[@PeeAyeCreative]

You're welcome!

[@belen-vilches]

Thank you so much! I was going insane trying to place them together! You saved me!! 😅

[@PeeAyeCreative]

I'm so glad I prevent insanity 😊

[@jaapdeschipper3555]

Works great! But it doesn't seem to work when the buttons alignment should be centered. Would some extra coding help?

[@lukewulsin641]

^wondering the same thing

[@DaleStrickland]

He updated the text version of the tutorial. Add this to your CSS as a new line .pa-inline-buttons { text-align: center !important; }

[@rosedickison92]

so clear and simple thanks heaps!

[@PeeAyeCreative]

Glad it helped!

[@michaelhilton9729]

That was A.MAZING! I have been searching for an EASY how to on this (not sure why Divi hasn't created the feature...)... Anyhow, THANK YOU!! :)

[@PeeAyeCreative]

Glad you like it, Michael! You're very welcome!

[@farhanfarooq9847]

Amazing solved a huge problem for me, thank you so much

[@PeeAyeCreative]

Awesome, you're welcome!

[@DigitalNomadsDaily]

Amazing! Thanks so much for sharing this quick fix! 💪🏻🙏🏻

[@PeeAyeCreative]

You're welcome!

[@itskamila_speaking]

thank you!

[@PeeAyeCreative]

You're welcome!

[@JanisMcAdoo]

Your tutorials are great! Thank you so much.

[@PeeAyeCreative]

Glad you like them!

[@lacocinadelatialety]

Thank you very much for sharing this, it will be very useful to me!

[@PeeAyeCreative]

You are welcome, I'm so glad this is helpful!

[@SelcukOZMUMCU]

Thank you Nelson, awesome tutorial! It will be so useful.

[@jmfdcv]

Excelent! Many thank`s to share.

[@PeeAyeCreative]

Our pleasure!

[@farhan-app]

Awesome video! Keep it up 👍👍

[@PeeAyeCreative]

Thanks! Will do! :)

[@ChristianMauerer]

Supereasy & quick - thank you VERY much!

[@PeeAyeCreative]

You're welcome! Definitely one I use all the time!

[@amandabillings3780]

Thank you!! Exactly what I needed and worked perfectly.

[@PeeAyeCreative]

Perfect, thanks for letting me know Amanda!

[@pratprat8655]

Awesome! thank you

[@user-bv7nm7re8e]

Brother Love you

[@PeeAyeCreative]

Thanks man

[@nero36925]

Awesome information!

[@BeauBlackbear]

Super helpful. Okay buttons are side by side but now I need to move them down the column a little. How would I do that?

[@lafrancedigitale196]

Thank you

[@PeeAyeCreative]

You're welcome!

[@GavinWren]

Wow, brilliiant, such a simple piece of code that did EXACTLY what I wanted to do! Thank you!

[@PeeAyeCreative]

You're very welcome, glad it was just what you needed!

[@jugbabic9726]

Thx man!

[@PeeAyeCreative]

No problem!

[@andreds1469]

Great video but now that you have the buttons stacked side by side how do you make sure they are at the bottom of the column. 30 px bottom padding

[@ilmarti1951]

Hey Mate, fantastic, simple tip! How can I center the two buttons at the centerr of the column instead of left?

[@PeeAyeCreative]

Do you mean to the center? Or to the right? Try the alignment in the Design tab. Or change the margin of the CSS snippet to "margin-left: auto; margin-right: auto;"

[@matheusguifer]

@@PeeAyeCreative I should add this to the css snipped I pasted on page settings? Cause this didn't work. Also, on your blog post you mention adding "text-align: center;" but you didn't say where we should put this: column settings, button settings or page settings? There are so many settings and all of them have the custom css field. And yeah, center aligning the buttons does nothing.

[@PeeAyeCreative]

@@matheusguifer "text-align: center;" is CSS, so that is not settings in Divi. This would go in the code snippet.

[@R3DB3EARD]

@@PeeAyeCreative I did "margin-left: auto; & margin-right: auto; and text-align: center;" and it worked perfectly! Thank you so much! Literally becoming a CSS pro watching your videos!!

[@PeeAyeCreative]

@@R3DB3EARD That's great! I have a CSS course coming soon too!

[@fardeenfiyaz]

thanks machaa you are the best

[@rafaelcortez5009]

Thank u!!!

[@PeeAyeCreative]

You're welcome!

[@Bestiezzzz]

This is Helpfull!!!!! thanks so much !!

[@dwicahya1918]

big thanks from me.

[@PeeAyeCreative]

You're welcome!

[@chiefkibitzer9419]

Nice stuff Nelson. Appreciate it.

[@PeeAyeCreative]

Thank you, happy to do it!

[@RalfvandeSand]

Life saver! Thank you!

[@abigroman]

Pow! I needed that!

[@PeeAyeCreative]

Nice and simple for the win 😉

[@R3DB3EARD]

This is brilliant. Any way of aligning the buttons center and right of a row after this video is said and done?

[@PeeAyeCreative]

I'm not sure what you are asking about ce.ter and right aver the video. Any link or example?

[@R3DB3EARD]

@@PeeAyeCreative I got it figured out. The way I asked it was confusing. Was wondering if there was a way to center the buttons after placing them side by side! Thank you for your quick response!

[@tanatos06]

I love you!

[@PeeAyeCreative]

😊

[@kellymorris1618]

That was really helpful - cheers!

[@PeeAyeCreative]

Thanks Kelly, glad it was helpful!

[@collectivemarketing]

this is awesome - thanks - how would you then get the 2 buttons to centralise together as at the moment they range left. :)

[@PeeAyeCreative]

The answer is already covered in the linked written tutorial, so go check that out!

[@jrana]

Genius! Thanks bro!

[@shawnash7755]

Great video, I love it.

[@PeeAyeCreative]

Glad you enjoyed it

[@shawnash7755]

@@PeeAyeCreative can you please make a video of how to resize the button on mobile devices. So if I design 3 buttons on half column side by side on the pc when someone searches this it will resize smaller and then stay horizontal. Thank you again!

[@elviebakes8579]

Very Helpful tutorial. how would i do this with icons? ( stacking icons side by side ). i would like to place social media icons side by side in my global footer. thank you

[@PeeAyeCreative]

It works the same for any module, display: inline-block; is your friend.

[@olafheilker3464]

thanks man means a lot!

[@PeeAyeCreative]

Sure Olaf, I enjoy doing it and glad to help!

[@olafheilker3464]

@@PeeAyeCreative you really help my work. thanks again!

[@laynesteege3966]

This isn't working for me for some reason :( any ideas? Thank you for such easy to follow tutorials!

[@PeeAyeCreative]

I'm not sure, it does work, so if you could double check the code from the blog post and make sure you are putting the class in the correct place. Otherwise give me a link and more context in order to help.

[@BrianEdwardsBCE]

Hey there! Love this trick. Worked pretty well, but now I am getting 'jumping' or 'dancing' buttons. Not sure what the problem is, but any idea how to fix it? Thanks!

[@PeeAyeCreative]

Hi Brian, replied to your message. It's just a physics problem, not enough space for the buttons with the icons on hover.

[@jmiller6224]

Thanks bro, you da man!

[@PeeAyeCreative]

Thanks man, appreciate it!

[@romy2903m]

Thanks for the great video! On desktop/tablet it works perfect, but on mobile only one button will show and the other isn't visible... How can I fix this? :)

[@PeeAyeCreative]

This tutorial would not cause that. You'll have to share a link for me to help.

[@sarajavid237]

Amazing 😉💡

[@PeeAyeCreative]

Thank you!

[@user-tn9bi5dc3y]

when I use this, it works great, except on mobile size, then it moves both buttons to the far right? is there a way to fix this?

[@PeeAyeCreative]

I'm not sure what you mean I never heard of that.

[@rashed2936]

thanks!

[@xKessa]

Very helpful :) Thanks

[@ceemoai]

But what if you want the side-by-side buttons to align to the right? When I do this, they're stuck to the left.

[@PeeAyeCreative]

Left would be the default for CSS inline-block. You could try text-align: right; and see if that works!

[@akramulhasan8048]

Great tips but I think there has a more efficient and easy way. No need to put any class name and custom CSS rules. Just put 'display:flex' inside the Main Element of Custom CSS under the Advanced tab of Column settings. Boom !!!!

[@PeeAyeCreative]

That would affext everything in the column though.

[@urbencl]

Bravo!

[@fishionboy9911]

Thanks a lot again! :)

[@PeeAyeCreative]

My pleasure!

[@fishionboy9911]

@@PeeAyeCreative Do you know how to make that a button goes and stops to a specific slide? I was checking this tutorial www.divithemeexamples.com/control-divi-slider-with-external-links/ It doesn't work for me, but I'm not sure if it's more simple if you are using the divi buttons.

[@MyGodTube]

Thank you for this great video. I would like to do it inside a layout that I create. In the layout there is no page settings. I would like to include all relevant code inside the layout so the user of the layout will now have to do additional actions later. Any ideas?

[@PeeAyeCreative]

Sure, you can add the code to a Code module in any section on the page.

[@philippcuno-friess8775]

great vid! can you do this also with two images ? and which classes do i have to use if so? Thanks!

[@PeeAyeCreative]

Hi Philipp, yes you can do this with any modules. Just add "display: inline-block;" in the Main Element CSS of each.

[@emmanuelrobles8755]

@@PeeAyeCreative Is there a way to also center both elements? (auto right and left?)

Thanks!!

[@PeeAyeCreative]

Welcome!

[@retaworld]

how to place two short codes side by side in the same column ? Can you help me with this

[@PeeAyeCreative]

That seems odd. But you could easily just add them in the text module next to each other

[@urhorattel]

Great bravo!

[@PeeAyeCreative]

Glad you like it! :)

[@matheusguifer]

Link in description opened a nonsense page. Had to google it. But thanks!

[@PeeAyeCreative]

All the links are working fine, not sure what you mean.

[@WhoAmI-nu7kf]

Does it really need to be this hard? I mean every little thing needs CSS in Divi... When will they change this 🤦‍♂️

[@PeeAyeCreative]

Until they do I'll continue to fill in the the blanks :)

[@WhoAmI-nu7kf]

@@PeeAyeCreative YES...That's why I am here seeking help from the master himself...

[@abigroman]

Be thankful it's not a plugin. That's what most people would do.

[@abigroman]

Secondly, for divi to add it it would be extra code for everyone. Adding your own CSS prevents rows of additional code we don't need. I would pay a dollar if I could remove every mention of WooCommerce in Divi Theme. I don't use WooCommerce

[@TechWazSA]

@@abigroman Hey dude, it would though all they would need to do is hook it up to the global PHP settings for the button module, add the class there, then add the same class to the global column module as a boolean value, then boom, clickl button on and off and you get buttons to align and it will inject the code from global css file that already exists. Also they could use some of the code they use in the fullwidth header which would also help. haha well this is just in my head I guess

[@NewHopeUrbandale]

In Custom CSS, I have a "before," "Main element," and "after" block. Which one does the code go into? Divi also tells me that the braces are either expected or unexpected and gives me a bunch of error codes. Copy/pasting the code as is doesn't work :(

[@PeeAyeCreative]

Hi there, it sounds like you are not putting the code where I say. You never put it in a module, you would always put it in the Theme Options Custom CSS box or your child theme style.css file.

[@webmetaverso]

Fantastic

[@PeeAyeCreative]

Thank you!

[@ashleymendoza137]

Hello, I just followed your instructions and no changes where made into my page. I did everything just like on this video... Help anyone!

[@PeeAyeCreative]

Hi Ashley, can you share a link?

[@muneebmuneeb2783]

Now how to make it resonsive in mobile because we can show buttons inline in mobile.

[@PeeAyeCreative]

It would work fine responsive. Not sure what you had in mind, but maybe reduce button size.

[@keelanford]

How about doing this to do images (facebook and a telephone.png) but the same thing, centered in the column?

[@PeeAyeCreative]

Sure, just use the same system, display: inline-block; and float: left; to the image custom CSS Main Element.

[@birdhousemn]

I am curious, when will Divi allow modules to be set horizontally in the same column without custom coding? In my experience using Oxygen and Elementor this is easily accomplished within their builder from the builder itself. Does Divi have a plan to add this feature? Thanks!

[@PeeAyeCreative]

Yes please check my future of Divi video.

[@birdhousemn]

@@PeeAyeCreative Epic, thank you 🙌

[@AndresDominicci]

What would the code be for 2 images?

[@PeeAyeCreative]

It would be the same code for any two modules.

[@webwizardofoz1162]

Sorry didnt work for me in the Global Header Layout :(

[@PeeAyeCreative]

It should not matter where it is in Divi. Try again, not sure what else to say.

[@marc149]

Great tips and tricks! Unfortunately this does not work for me :( I've tried every which way. Any thoughts? Thank you!

[@PeeAyeCreative]

Hey Marc, I'm not sure what could different for you as this is a very simple trick and works great. Can you describe what you are doing? Also be sure to reference the blog post.

[@ModernMallus]

Check if you have added a '.' like '.pa-inline-buttons ' when you added custom stile. It should be 'pa-inline-buttons '.

[@artyomawan468]

how do i align a text and a buttons just like this? instead of 2 buttons, i want 1 to be the text

[@PeeAyeCreative]

You can do this to pretty much any module with the display: inline-block; CSS trick. Just remember to set a width to like 50% for the module first.

[@artyomawan468]

@@PeeAyeCreative Thanks. i already did that. but the issue is that it's displaying perfect on the live site. but in the builder its not aligned. the button still goes down to the next row. this only happens in divi builder not in the live site

[@prashanthaprashantha880]

Please share code here

[@PeeAyeCreative]

What? I can't share code on KZbin. Please go to my blog :)

[@nimrahsharif8020]

Where can I get this code?

[@PeeAyeCreative]

In the linked blog post.

[@kevindarian247]

please how do i do this for images?

[@PeeAyeCreative]

It would be the exact same method.

[@kevindarian247]

but what will the CSS ID or CLASS be @@PeeAyeCreative

[@jollystuff6775]

Hey !! I've been watching your channel and the blog....you had some great videos ! Cheers! But a video like this one...one line of css it's just so simple that I don't really see the point, maybe if you make a 10 minutes video with something like "best css tricks for Divi" it will be better and add more value to the channel (it will also improve your seo as well). I'm trying to be constructive. Keep it up ! 🔥🔥

[@PeeAyeCreative]

Hi Santiago, thanks for sharing! Here's how I look at it, but you can correct me. I've noticed people search for very specific things with Divi. Usually they are trying to do a specific task. If I just say "10 code snippets for Divi" I think my SEO would be much worse than getting specific clicks. Always happy to hear other perspectives though!

[@marcellakirwan7148]

@@PeeAyeCreative Thank you, I appreciate you being so specific. Keep up the good work.

[@jollystuff6775]

@@PeeAyeCreative yes you're right! I don't know the specific keywords for this niche..but think that a 2 minutes video it's not the best for advertisements I think... anyway !! Keep it up ! Love the channel

[@lacocinadelatialety]

I prefer short videos on a specific topic because maybe today I do not need what I see in the video but later the need arises and it is easier to find it again

[@taknevydder]

How to Place a button beside text eg: Price: $10 [buy it from amazon]

[@PeeAyeCreative]

You can do this same thing with a Text module and a Button module. Just use the system, display: inline-block

[@davidpouet1372]

Wtf ? I'm new to divi and this is insane that you can't do this without custom css... the builder seem very outdated compared to others (elementor, brizy, cornerstone etc...) Very disappointed in divi for now. But thanks for the video ;)

[@PeeAyeCreative]

You must have missed my Future of Divi video! Go check it.

[@davidpouet1372]

@@PeeAyeCreative Will do ! Thanks.

[@johndavid4498]

Doesn't work on mobile

[@PeeAyeCreative]

Sure it does, as long as there is physically enough space like with smaller buttons.

[@JakubNovak]

Wow, Divi is so bad :-D

[@PeeAyeCreative]

I love Divi and it's something I can put up with. Leaning these trucks are very helpful!

[@Mo-mw4it]

The fact that this tutorial exists proves to me how inferior and unintuitive Divi is compared to other web builders, especially Wix

[@frankdrolet9439]

lol, wix Go try Webflow and you will never want to touch wordpress ever again or wix or squarespace!

[@Mo-mw4it]

@@frankdrolet9439 interesting, I'll give it a look. WP might be amazing, but it's not easily accessible to Web design newbies like myself, that's why I like Wix

[@PeeAyeCreative]

That's a pretty funny joke.