Divi Theme: How to customize the footer

by | Aug 12, 2016 | Tutorial | 24 comments

In all my projects I always love to add the details that can make only the end result of my work, and something what I can not live without. Sometimes I happen to “pause a project” to find the right inspiration to create an item, a layout, a combination of colors, font, that is original and special I call it “my signature” and the same the approach used to create some new layouts that you can use to make more attractive the footer of your website. In fact, in this article I show you how to customize the footer of Divi in a few easy steps.

As always, before we left I show you the end result. (Note: For this tutorial I will use the #1-layout)

Live Demo

 

Before you continue reading..

If you like this tutorial and other Creative Child Themes resources maybe you’ll also appreciate my Facebook page, but to do so you need a Like.

And a small gesture that costs you nothing, but for me it means that you have appreciated my effort. ๐Ÿ™‚

1. Step: Download the Divi Widget Builder

The Divi Widget Builder It is a free plugin developed by SJ James of Divi.space that allows you to turn any item stored in the library for a widget and that will be useful for this tutorial. If you’ve read my previous tutorial where I showed you how to customize the header of Divi then you have already installed this plugin then you can move immediately to the next step.

2. Step: Build your footer

Now all you have to do is build your own footer layout with the Divi Builder you save the result in the library, but remember to turn on the “Make this a global item” option that will make it quick and easy for future customizations. To learn more about the advanced settings of the module you should read the official documentation.

If you instead want to use the layout seen in the demo, you can download the template by clicking on the button.

DOWNLOAD TEMPLATE

Inside the .zip package are two files:

1. JSON File: Import the json file in your library using the import & export tool;
2. File CSS: open this file and copy and paste the CSS code in the options panel or in your child theme.

3. Step: Add a widget to your footer

Now go to Appearance > Widgetsย and drag & drop the widget “Divi PB Widget” within the Footer Area #1.ย Now select the items that you created or if you have imported the pre-made layout, select the item “Footer Custom 1 (CCT)“.

Note: remember to disable the option: “Display Library Item Title

ย screenshot-1

4 Step: Change the footer layout from Customizer

Now open the Customizer settings, and go to Footer > Layout and select from the drop down menu the single column and the background color that you give to your footer.ย Save the settings and enjoy your new footer ๐Ÿ™‚

Customizer-footer-screenshot

The tutorial is over here but below I have added a CSS code snippet that you will need if you want to create your own custom layouts to be used for the footer.

What this code is very simple, because it customizes the width of the widget but to do so you will need to add the class custom: footer_customย for the Section, and the class: row_custom_footerย for each Row you add in the section.

Below I added a screenshot that makes it easier to understand where you need to add custom classes.

/**** ---------- For Custom Items ----------- ****/

/**** Add to section the custom class: footer_custom ****/
/**** Add to row the custom class: row_custom_footer ****/

.footer_custom.et_pb_section {
    padding: 0 !important;
}

/**** Row Widget Custom ****/
.footer-widget .fwidget {
    min-width: 100% !important;
}

#footer-widgets {
    padding: 3% 0 0 !important;
}

#footer-widgets .footer-widget li:before {
    content: none !important;
}

#footer-widgets .footer-widget li {
    padding-left: 0px !important;
}
/*** Row Custom Width***/
.row_custom_footer.et_pb_row {
    width: 100% !important;
    max-width: 1280px !important;
}


Edit Page โ€น Creative tutorial โ€” WordPress

Conclusion

One thing I did not tell you at the beginning of this tutorial, and there will be a second part where I show you how to use the layout 3 and 4 seen in the demo. These two layouts need a dedicated tutorial so I decided to create a second part where there will also be a video that will make everything easier.

Now it’s your turn:

what do you think of this hack? Will you use it or do you prefer the default layout?

NOTE: the 2-3-4-5 layout that you can view the Demo they are reserved to the members of the newsletter.


Author | Fabio Sarcona

I am a freelance developer, dad of Creative Child Themes and one a sweet puppy Cocker Spaniel named Camilla. You want to see me happy? You just need a computer and chips! ๐Ÿ˜€


Get the latest resources and freebies in your inbox

Join over 7000 people and get access to free resources, exclusive discounts and the latest tutorials. All directly in your mailbox!

Your email is safe 💌 . I hate SPAM same as you!

Pin It on Pinterest

Shares
Share This