Divi Theme:
How to customize the footer
to improve conversions

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

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.

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

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;
}

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.