When creating a website with the Divi theme, you can customize the footer via Theme Customizer (Divi -> Theme Customizer). There are about 20 different column layouts you can choose from to customize your footer. You can add content to each column via the WordPress widget manager (Appearance -> Widgets).
However, since WordPress has limited enough widgets, the content you can add to your footer is also limited. You won’t be able to add content like social media buttons, email subscription form, or button — unless you install additional plugins.
Since version 4.0, Divi Builder (the default page builder of Divi theme) allows you to create custom elements for your theme, including the footer. And, since Divi Builder can now be used on WordPress themes other than Divi and Extra, you can basically create a custom footer (or other theme elements) with Divi Builder, no matter the theme you use.
In this post, we will show you how to create a custom footer with Divi Builder. The theme we use here is Divi.
How to Create a Custom Footer with Divi Builder
There are two ways to create a custom footer with Divi Builder: via a layout and from scratch. We will cover both methods.
# Creating the Custom Footer from a Premade Layout
Unlike, for instance, Elementor that offers premade footer templates, Divi Builder offers no footer template (called layout in Divi Builder) on its layout library. But you can download a footer layout created by Elegant Themes (the developer of Divi Builder) on one of its blog posts. Click the button below to download the file. The file is available in a ZIP format.
Download Divi Footer Layout 👈🏻
Once the file is downloaded, unzip it to get the JSON file. This is the layout file you need. Login to your WordPress dashboard and go to Divi -> Theme Builder. On the Theme Builder page, click the two-arrow icon on the right side.
Click the Import tab and select the layout file (the JSON file) you have just extracted above by clicking NO FILE SELECTED. Once the file is selected, click the Import Divi Theme Builder Templates button.
Click the pencil icon to edit the footer so that you can tailor the default content with your own content.
You will be taken to the Divi Builder editor after clicking the pencil icon above. You can edit your footer here. Remove the unnecessary elements. To edit an element, you can hover your mouse over an element (module) you want to edit and click the gear icon to display the settings window.
Once you are done editing the footer, click the SAVE button to apply the changes and close the Divi Builder editor by clicking the x icon on the top-right corner.
You will be taken back to the Theme Builder page. Click the Save Changes button to apply the custom footer you have created.
# Creating the Custom Footer from Scratch
When creating a custom footer with Divi Builder, you can set on which pages the footer to appear. On the first example we have covered above, the footer will appear on every part of the website. In this second example, we will create a custom footer for a specific page (the contact page). We will create a simple footer that consists of 3 columns. The end result of the footer will look like this.
First off, login to WordPress dashboard and go to Divi -> Theme Builder. Add a new template and specify on which page the template to appear. Since we want to create the custom footer for the contact page then select Contact (take a look at the screencast below).
If you see a yellow button (which means a custom footer already exists), click the trash icon to delete it. Add a new custom footer by clicking Add Custom Footer and select Build Custom Footer.
Since we want to create the footer from scratch, select the Build from Scratch option.
Your default section might contain a divider. To remove it, open the settings window by clicking the gear icon.
Go to the Design tab and open the Dividers option. Click the dropdown menu on Divider Style and select None. Don’t forget to click the checklist icon to apply the new change.
Set the background of the section. To do so, click the gear icon once again to open the settings window. Click the Background option under the Content tab. Click the plus button to set the color. Don’t forget to click the checklist icon to apply the background color.
Add a new row by clicking the green plus button. Select the three-column structure.
- The First Column
Go the first column to add the content to it. We will add two modules to this column (Images and Text) to place the site logo and a disclosure. So first, click the grey plus icon and select the Image module. Select your image (site logo in this case) from the settings window.
Go to the Design tab and open the Sizing option to set the image size.
Add another module (Text module) beneath the Image module.
Replace the default text with your own text. Go to the Design tab and open the Text option to set the text color and text size.
- Second Column
We will use the second column to place the email subscription form. We will connect this form with MailChimp.
Go to the second column and add the Email Optin module.
Change the default title on the Title section under the Content tab. Also change the default description on the Body section. In this example, we don’t use a description so we just delete the content on the Body section.
Still on the Content tab, open the Emai Account option and select the email marketing platform you want to connect with (Mailchimp in this case). Select a Mailchimp list and click the FETCH LIST button
A little note. The email field might don’t appear when you publish your footer if you don’t select a MailChimp list. You can read this post to fix the issue.
Open the Fields option to remove the unnecessary fields. In this example, we add only the email field to the email subscription form so we disable all fields on this option.
Open the Background option to change the background of your form. In this example, we set the background to transparent.
Go to the Design tab to customize the look of your form. To change the field background and the field text background, you can open the Fields option.
To set the typography of the title (text color, text size, font style, and so on) you can open the Title Text option.
There are many other customization options you can set. You can play around on the Design tab until you get satisfied with the look of your form. Just don’t forget to click the checklist button to apply the customization options you have made.
- Third Column
We will use the third column to place the links to the important pages on your site (about page, contact and privacy policy page) as well as the social media icons.
First, add the Text module for the heading.
Replace the default text with a title like “THE SITE”, “COMPANY” or something similar.
Go to the Design tab and open the Text option to set the typography.
Add another Text module to place the links. Replace the default text with your own text with the following formation (hit enter to add a new line).
To add a link to each text, you can highlight the text and click the chain icon.
Go to the Design tab and open the Text option. To set the color of the link text, you can click the chain icon.
Go to the Link Text Color and Link Text Size to set the link text color and the link text size.
Lastly, add the Social Media Follow module.
By default, the Social Media Follow module contains only two social media platforms (Facebook and Twitter). To add a new social media platform, simply click the plus button under the Content tab.
To add a link to each social media platform, you can click the gear icon of each platform to open the settings option.
Open the Link option and paste the URL of the associated social media account. You can also set the background of the social media platform from the Background option. Don’t forget to click the checklist icon to apply the link you added.
Once done adding the links to each social media platform, go to the Design tab to customize the icons. To set the icon color as well as the icon size, you can open the Icon option.
To set the border radius (in case you want to have rounded corners) you can open the Border option.
You can open the Spacing option to add a little space between the Social Media Follow module and the Text module. Set the top padding to 8px or 10px.
There are many other customization options you can set. You can play around on the Design tab until you get satisfied with the result.
Once you are done, click the Save button on the bottom-right corner to apply the new changes to your footer, followed by the x button on the top-right corner to close the Divi Builder editor.
You will be taken back to the Theme Builder page. Click the Save Changes button to save all of the new changes you have made.
The Bottom Line
Footer is a crucial enough element of a website. With the Theme Builder feature of Divi Builder, you can create a custom footer for your WordPress site. The custom footer you created will replace the default footer of your theme.
Creating a custom footer with Divi Builder gives you the freedom to add more elements without installing additional WordPress plugin, such as email subscription form, latest posts, button, social media icons. You can basically add all modules offered by Divi Builder to your footer. The Divi Builder is now available for all WordPress themes, not limited to Divi Theme and Extra Theme anymore.
