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.

*This tutorial has not been tested in Divi 2.4 or above

So today I helped someone change their footer columns from 4 to 3 simply using a little CSS. And since the change was easy enough, I thought it would make a great tutorial material for today.

By default the Divi theme comes set up with 4 columns in the footer like in this example below.

001

 

But lets say you only want 3 columns like this example below.

002

 

Easy Peasy!

3 Footer Columns Instead of 4

 

1. Go to your Divi theme ePanel . Go to Appearance>Divi Theme Options

slider 95

 

2. Scroll down to the bottom of the page down to the Custom CSS panel where you will copy this CSS and paste it into that ePanel.I included the code needed to make it render nicely in smaller devices

.footer-widget { margin-right: 0;}
.footer-widget:nth-child(1) { width: 32%; padding-right:15px;}
.footer-widget:nth-child(2) { width: 32%; padding-right:15px;}
.footer-widget:nth-child(3) { width: 32%; margin-right:0;}
.footer-widget+.last{display:none;}

@media only screen and (max-width: 980px){
.footer-widget:nth-child(1) { width: 30%; padding-right:15px;}
.footer-widget:nth-child(2) { width: 30%; padding-right:15px;}
.footer-widget:nth-child(3) { width: 30%; margin-right:0;}}

@media only screen and ( max-width: 767px ) {
.footer-widget:nth-child(1) { width: 100%; padding-right:15px;}
.footer-widget:nth-child(2) { width: 100%; padding-right:15px;}
.footer-widget:nth-child(3) { width: 100%; margin-right:0;}}

 

3. You can also make it centered. Just use this code instead.

/* Footer Columns - Centered */

.footer-widget { margin-right: 0; text-align:center;}
.footer-widget:nth-child(1) { width: 32%; padding-right:15px;}
.footer-widget:nth-child(2) { width: 32%; padding-right:15px;}
.footer-widget:nth-child(3) { width: 32%; margin-right:0;}
.footer-widget+.last{display:none;}

@media only screen and (max-width: 980px){
.footer-widget:nth-child(1) { width: 30%; padding-right:15px;}
.footer-widget:nth-child(2) { width: 30%; padding-right:15px;}
.footer-widget:nth-child(3) { width: 30%; margin-right:0;}}

@media only screen and ( max-width: 767px ) {
.footer-widget:nth-child(1) { width: 100%; padding-right:15px;}
.footer-widget:nth-child(2) { width: 100%; padding-right:15px;}
.footer-widget:nth-child(3) { width: 100%; margin-right:0;}}

 

And now you should have this…

003

 

1/4 Column – 1/4 Column – 1/2 Column

 

But lets say you want to be a little more trick and have your footer columns 1/4 Column – 1/4 Column – 1/2 Column like the image below.

 

004

 

Easy. Just use this code instead of the others.


/* Footer Columns - Qtr-Qtr-Half */ 

.footer-widget { margin-right: 0px;}
.footer-widget:nth-child(1) { width: 23%; padding-right:15px;}
.footer-widget:nth-child(2) { width: 23%; padding-right:15px;}
.footer-widget:nth-child(3) { width: 50%; margin-right:0;}
.footer-widget+.last{display:none;}

@media only screen and (max-width: 980px){
.footer-widget:nth-child(1) { width: 45%; padding-right:15px;}
.footer-widget:nth-child(2) { width: 45%; padding-right:15px;}
.footer-widget:nth-child(3) { width: 100%; margin-right:0;}}

@media only screen and ( max-width: 767px ) {
.footer-widget:nth-child(1) { width: 100%; padding-right:15px;}
.footer-widget:nth-child(2) { width: 100%; padding-right:15px;}
.footer-widget:nth-child(3) { width: 100%; margin-right:0;}}

 

And now you have your very own customized footer columns. Good job!

Check out the demo here: http://montereydev.com/demos/slideralternative/

 


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.

Latest posts by Geno Quiroz (see all)

©2012-2019 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