One of my pet peeves is when buttons in a single row are not vertically aligned with each other. This is most often the case when you use the blurb module or text module and add a button just underneath it. If the content is not the same length, you end up with buttons that look sloppy.
Well that is about to change!
In this tutorial, I will show you how we use a little custom CSS to make the buttons align vertically across the bottom of the row so that no matter how much text is in the module above it, all the buttons in that row will align vertically.
View Demo
Let’s Get Started Setting up the standard Divi Section.
Adding the row and custom class
1. Create a multi-column row within your section.
2. Open up the row settings, go to the “Advanced tab”, and add this custom CSS Class: gq_r_fixed_buttons
3. While you are in the row settings, go to the “Design” tab, and enable “Equalize Column Height”
4. Go ahead and add your text, image, or blurb modules and add your button modules below each one.
5. Save your page and move on to the magic of adding a little CSS.
Adding The Custom CSS
If you are working with a child theme you can go to Appearance>Editor and open your stylesheet. If not, go to Appearance>Divi Theme Options>Custom CSS (which is located at the bottom of the first tab in Theme Options)
Add this CSS.
/*------------------------------------------------*/ /*---------[GQ ALIGN BUTTONS TO BOTTOM]-----------*/ /*------------------------------------------------*/ /* buttons fixed to the bottom */ .gq_r_fixed_buttons .et_pb_column { padding-bottom:30px;} .gq_r_fixed_buttons .et_pb_button_module_wrapper { position: absolute; bottom: 0; left: 0; right: 0; margin: auto;}
And that’s it.
If you used this on one of your projects, please share a link below so we can see how you used it.
Have fun!
Well, that’s all for now. I hope you find this article useful.
Nice Geno! That’s nice lean code to do the job 🙂
Ooh, Geno, you are the king! 🙂
How much I suffered with it!!!
Thank you! 🙂
Thanks Geno, that is one of my pet peeves too. Problem solved. You are the best!
Many thanks, this is great stuff – genuinely useful tips
Thank you sir, used it here: https://f7softball.com/
Nice job!
Hey Man, THANK YOU for clearly showing this, exact stpes, and making it so easy to follow. CSS is not hard, but it can be a bit confusing sometimes.
Hi Geno, i’ve been reading your blog. It’s amazing and useful! Could you help me with one question? ¿How can i use that but with images instead of buttons?
Try replacing .et_pb_button_module_wrapper with .et_pb_image. Let me know if that works.
Thank you for these steps, great for beginners like me! Is there a way to modify this to work for a site using WP Bakery/visual composer? Thanks, I’ll keep following your blog.
Thanks Bre. I am not sure exactly what the CSS needs to be for WP Bakery but I am sure there is a similar solution.
Hi Geno is there a code for Visual Composer?
It should be very similar. Just use the classes that come with VB instead of the custom ones I am using for Divi.
Hello, if someone need this for WPBAKERY / VS (like me) … here is a solution:
Settings wpbakery (back-end or front-end)
Row:
Equal High = YES
Custom CSS = vs_button_fix
Column:
padding = 35 px (top,bottom, left,right) https://screenshot.wubit.de/vs_button_fix1.jpg
get class -> https://screenshot.wubit.de/vs_button_fix2.jpg
I hope it it helps you. Questions ? -> kontakt@wubit.de
Thanks.
Dude thank you so much… OMGOSH! One of my pet peaves as well.
You sir, are a life saver! Thank you!
Nice tutorial! Is there any similar code that can align the Divi pricing table buttons?
I have not tried that yet.
Rock Star! Thank you!
Thanks Josh,
This worked easily! Much Appreciated.
Quick help, thanks.
Great, thanks! It doesn’t show up in the Divi visual builder, but does when live. Thought I would note that if anyone else wondered what they were doing wrong before switching to the live version of the page.