How To Place Two Divi Buttons Side By Side In The Same Column
Вставка
- Опубліковано 7 вер 2024
- 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!
Amazing. Every time I need to find a solution when customizing divi, this is where I look. Extremely helpful content.
I'm really happy to hear that! 😊
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;
}
Yup, sometimes UA-cam gets left behind
You are nailing all the missing parts. Thank you!!
Lots more to go! Let me know if you have ideas!
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!
Thank you for this valuable tutorial! Love your written tutorials too.
Glad you like them!
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.
Calm down and go watch my video about the future of Divi! Then get excited again! 🙂
Thanks for this! Still works Dec 2023.
You're welcome!
Another solution from the sage 🙏
haha I'm glad to help!
Thank you! Fast and easy. I can't believe Divi doesn't have an inline option in the modules!!! boooo divi.
So glad I could help!
Cool. Small ,simple yet very important tip.
Thank you, yes I use this quite often. I'll be having more short tips each Thursday.
Pee-Aye Creative that will be nice.
YOU ARE MY HERO!
I'm so glad you like it!
Exactly what I needed for my page. Thanks!
Thank you so much! I was going insane trying to place them together! You saved me!! 😅
I'm so glad I prevent insanity 😊
hay guys please like this Chenal don't just watch and learn and go he deserves More
Good idea ;)
Just what I needed today, Thank You !!
That's great, Mel, I love perfect timing!
Easy to follow, great work. Enjoying your themes too so far, keep up the good work!
Awesome, thank you!
THANK YOU!!
You're welcome!
Amazing solved a huge problem for me, thank you so much
Awesome, you're welcome!
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!! :)
Glad you like it, Michael! You're very welcome!
Thanks so much. So good
You are so welcome!
Your tutorials are great! Thank you so much.
Glad you like them!
Awesome video! Keep it up 👍👍
Thanks! Will do! :)
Amazing! Thanks so much for sharing this quick fix! 💪🏻🙏🏻
You're welcome!
Thank you very much for sharing this, it will be very useful to me!
You are welcome, I'm so glad this is helpful!
Thank you!! Exactly what I needed and worked perfectly.
Perfect, thanks for letting me know Amanda!
so clear and simple thanks heaps!
Glad it helped!
Wow, brilliiant, such a simple piece of code that did EXACTLY what I wanted to do! Thank you!
You're very welcome, glad it was just what you needed!
Thank you Nelson, awesome tutorial!
It will be so useful.
Works great! But it doesn't seem to work when the buttons alignment should be centered. Would some extra coding help?
^wondering the same thing
He updated the text version of the tutorial.
Add this to your CSS as a new line
.pa-inline-buttons {
text-align: center !important;
}
Supereasy & quick - thank you VERY much!
You're welcome! Definitely one I use all the time!
Awesome information!
Brother Love you
Thanks man
thank you!
You're welcome!
Awesome! thank you
Excelent! Many thank`s to share.
Our pleasure!
thanks machaa you are the best
Nice stuff Nelson. Appreciate it.
Thank you, happy to do it!
Thank you
You're welcome!
Pow! I needed that!
Nice and simple for the win 😉
Thx man!
No problem!
Life saver! Thank you!
That was really helpful - cheers!
Thanks Kelly, glad it was helpful!
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?
big thanks from me.
You're welcome!
Thank u!!!
You're welcome!
This is Helpfull!!!!! thanks so much !!
I love you!
😊
Hey Mate, fantastic, simple tip!
How can I center the two buttons at the centerr of the column instead of left?
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;"
@@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.
@@matheusguifer "text-align: center;" is CSS, so that is not settings in Divi. This would go in the code snippet.
@@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!!
@@R3DB3EARD That's great! I have a CSS course coming soon too!
Genius! Thanks bro!
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
Amazing 😉💡
Thank you!
Great video, I love it.
Glad you enjoyed it
@@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!
This is brilliant. Any way of aligning the buttons center and right of a row after this video is said and done?
I'm not sure what you are asking about ce.ter and right aver the video. Any link or example?
@@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!
thanks man means a lot!
Sure Olaf, I enjoy doing it and glad to help!
@@PeeAyeCreative you really help my work. thanks again!
Bravo!
this is awesome - thanks - how would you then get the 2 buttons to centralise together as at the moment they range left. :)
The answer is already covered in the linked written tutorial, so go check that out!
Thanks bro, you da man!
Thanks man, appreciate it!
thanks!
Very helpful :) Thanks
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 !!!!
That would affext everything in the column though.
Thanks a lot again! :)
My pleasure!
@@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.
Thanks!!
Welcome!
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?
I'm not sure what you mean I never heard of that.
Great bravo!
Glad you like it! :)
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
It works the same for any module, display: inline-block; is your friend.
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.
Left would be the default for CSS inline-block. You could try text-align: right; and see if that works!
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!
Hi Brian, replied to your message. It's just a physics problem, not enough space for the buttons with the icons on hover.
Fantastic
Thank you!
This isn't working for me for some reason :( any ideas? Thank you for such easy to follow tutorials!
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.
great vid! can you do this also with two images ? and which classes do i have to use if so? Thanks!
Hi Philipp, yes you can do this with any modules. Just add "display: inline-block;" in the Main Element CSS of each.
@@PeeAyeCreative Is there a way to also center both elements? (auto right and left?)
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? :)
This tutorial would not cause that. You'll have to share a link for me to help.
how to place two short codes side by side in the same column ? Can you help me with this
That seems odd. But you could easily just add them in the text module next to each other
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 :(
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.
Does it really need to be this hard? I mean every little thing needs CSS in Divi... When will they change this 🤦♂️
Until they do I'll continue to fill in the the blanks :)
@@PeeAyeCreative YES...That's why I am here seeking help from the master himself...
Be thankful it's not a plugin. That's what most people would do.
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
@@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
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?
Sure, you can add the code to a Code module in any section on the page.
Link in description opened a nonsense page. Had to google it. But thanks!
All the links are working fine, not sure what you mean.
What would the code be for 2 images?
It would be the same code for any two modules.
On mobile the buttons are not side by side
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!
Yes please check my future of Divi video.
@@PeeAyeCreative Epic, thank you 🙌
Hello, I just followed your instructions and no changes where made into my page. I did everything just like on this video... Help anyone!
Hi Ashley, can you share a link?
Now how to make it resonsive in mobile because we can show buttons inline in mobile.
It would work fine responsive. Not sure what you had in mind, but maybe reduce button size.
How about doing this to do images (facebook and a telephone.png) but the same thing, centered in the column?
Sure, just use the same system, display: inline-block; and float: left; to the image custom CSS Main Element.
Sorry didnt work for me in the Global Header Layout :(
It should not matter where it is in Divi. Try again, not sure what else to say.
please how do i do this for images?
It would be the exact same method.
but what will the CSS ID or CLASS be @@PeeAyeCreative
how do i align a text and a buttons just like this? instead of 2 buttons, i want 1 to be the text
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.
@@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
Where can I get this code?
In the linked blog post.
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 ! 🔥🔥
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!
@@PeeAyeCreative Thank you, I appreciate you being so specific. Keep up the good work.
@@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
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
Great tips and tricks!
Unfortunately this does not work for me :(
I've tried every which way.
Any thoughts?
Thank you!
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.
Check if you have added a '.' like '.pa-inline-buttons ' when you added custom stile. It should be 'pa-inline-buttons '.
Please share code here
What? I can't share code on UA-cam. Please go to my blog :)
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 ;)
You must have missed my Future of Divi video! Go check it.
@@PeeAyeCreative Will do ! Thanks.
How to Place a button beside text eg: Price: $10 [buy it from amazon]
You can do this same thing with a Text module and a Button module. Just use the system, display: inline-block
Doesn't work on mobile
Sure it does, as long as there is physically enough space like with smaller buttons.
Wow, Divi is so bad :-D
I love Divi and it's something I can put up with. Leaning these trucks are very helpful!
The fact that this tutorial exists proves to me how inferior and unintuitive Divi is compared to other web builders, especially Wix
lol, wix
Go try Webflow and you will never want to touch wordpress ever again or wix or squarespace!
@@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
That's a pretty funny joke.