Divi Tutorials + Layout Kits | WordPress Tips | Business Growth

Home of the Original Divi Tutorials & Divi Layout Kits.

Divi Tutorials + Layout Kits | WordPress Tips | Business Growth

Home of the Original Divi Tutorials & Divi Layout Kits.

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 The Live 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.


The following two tabs change content below.
Geno is an entrepreneur who has been designing websites since 1996. He also enjoys all things design, traveling, hanging out with friends, encouraging other believers, and experimenting with new technologies. When not doing any of the above, you can find Geno blogging or writing Divi customization tutorials here on Quiroz.co.

©2012-2018 Geno Quiroz | Teach Learn Build Love | Divi Expert ServicesJohn 3:16

Divi is a registered trademark of Elegant Themes, Inc. This website is not affiliated with nor endorsed by Elegant Themes.

STAY RELEVANT | BE INFORMED | SIGN UP NOW

IT DOES NOT TAKE LONG TO GET LEFT BEHIND!

You have Successfully Subscribed!

Pin It on Pinterest