Divi Theme:
How to customize the footer
to improve conversions

Follow us on

Fabio Sarcona, Web Developer, Italy

12 Aug 2016

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).

Footer Divi Pre-Made Sections

On Needyesterday you will find 10 ready-to-use layouts for your Footer. You do not need any plugins and like all our pre-made section, they are all compatible with the latest version of Divi and 100% Responsive.

1. Step: Download the Divi Widget Builder

The Divi Widget Builder It is a plugin (premium) developed by SJ James of 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.

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“.

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 ?.

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


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.