Since the introduction of the Theme Builder in Divi, we can build a custom footer for Divi without the need for any plugin or extra coding. We can build and customize this footer with the power of the visual builder. This will allow us to build anything we want.
Before we start, I will give you a couple of custom footer examples build with Divi.
This is a custom footer example from my Avanti design:
And this is one from my DiviCommerce design:
These are just a couple of examples I have more at the end of this tutorial.
Let’s get started with building our custom footer for Divi.
Create a Global Footer In Divi
Go to Divi > Theme Builder and click on Add Global Footer.
Then click on Build Global Footer.
After that choose Build From Scratch.
Now you can start building your Global Footer with the visual builder. The same as you do with pages.
When you are finished with building your footer click on save when you are back in the Theme Builder you need to click on Save Changes.
Custom Footer For a Particular Page
Perhaps you want to use a different footer layout for a particular page. This is easy to do in the Theme Builder. Go to the Theme Builder and click on Add New Template.
In the template settings tab, you can choose which pages you want to assign this template to.
Then click on the 3 vertical dots to open the menu and click on Disable Global.
Now you can customize this footer and it will only be visible on the pages you have it assigned to.
Divi Customizer Footer Options Disappeared?
Maybe you have already noticed it but the Footer Options in Divi > Theme Customizer are gone. You might see them briefly but then they disappear. This is normal when you have enabled the Global Footer the options in the Theme Customizer are not needed anymore because you can now make all your edits in the Theme Builder.
Footer Examples For Inspiration
I will give you some extra footer examples for inspiration.
In this design, I created a 3 column structure with a dark blue background. I used some slighter lighter blue dividers and for the first column a right border. In the first column, I placed the logo + contact info and social media icons. In the second and third columns, I placed quick navigation and the services pages. At the top of this footer, I created a horizontal email opt-in.
In this website’s footer, I used 2 rows. The top row is a 4 column structure, within each column an image module. The bottom row is a 1 column structure with 2 texts and 1 social media module. I place a background image in the section.
This site’s footer uses a 4 column structure. In the first column, I used an image module for the logo and 3 blurb modules. In between each blurb module I used a divider module for the thin line. The second and third column is created with text modules and I also used here a divider module for the line. In the fourth column, I placed a social media module and an email opt-in.