Introduction

Overview

In this article I will show you how to replace the default footer of your theme with a footer build with the Divi Builder!

To get a clearer understanding of this article, consider the following example:

Let’s say that you want to change the design of the footer on your websiteThe theme you are using doesn’t allow you to change the design of the footer, only the contents. This article will help you to change both the design and the content on your footer.

Note that if you’re already using the Divi Theme then you can simply use a global row and place it into all of the pages where you want to have a footer. But of course, not all themes are as flexible as Divi, which is why many people opt to use the plugin version of the Divi Builder on top of their existing theme.

Because the Divi Builder gives you great control over design it makes perfect sense to design your footer using the Divi Builder (as we’ve done on this site) and then place it into your theme’s footer file, which is exactly what you’re about to learn how to do!

Video tutorial

Remove your current footer using CSS

1 – Inside of WordPress go to Appearance > Customize > Additional CSS and hide the current footer by using CSS.

remove footer 300x156 - How to Replace the Default Footer with a Footer built with Divi Builder

Note: The footer might have a different ID or class than #main-footer which we’re using above. So make sure you use the correct ID or class when you hide your footer.

You can find out the class by opening Google Chrome, scrolling to your footer, right clicking at the top of the footer area, and opening the Google inspector. You should be able to locate the main footer class or ID which highlights the entire footer section when you mouse over it.

For example check the screen-cast below:

Inspect element footer

I visited the website, scrolled to the bottom of the page. I right clicked in the footer area and clicked Inspect Element, then I searched for the Div that holds the whole content in the footer, in my case the Div with this ID #main-footer.

I used the CSS Code below and the footer was removed. 

CSS

#main-footer {
   display: none;
}

Create the footer in the Divi Library

1 – Go to WordPress dashboard > Divi > Divi Library

Divi library - How to Replace the Default Footer with a Footer built with Divi Builder

2 – Add a new Layout. You need to name it and Choose the Section Layout Type. 

 Layout-Section

Do not active global. You can optionally add the layout to categories if you wish but it’s not necessary.

3 – Build the layout by adding as many elements as you need. I have created an example that you can check in the screenshot below.

Footer 1024x457 - How to Replace the Default Footer with a Footer built with Divi Builder

Note: You can use Front End builder if you prefer. After you are done with the design, click Save.

Insert the shortcode in footer.php template

Now that the design is done, we have to add this design in the footer.php template. We will use shortcodes to insert the footer in the template. Follow the steps below:

1 – Go to Divi > Divi Library > Open the new Layout that you have just created.

2 – Then check the URL at the top and save the post id, which is the number that appears in the URL right after post=. In this case the id is 27729, in your case will be different.

Layout2 1024x658 - How to Replace the Default Footer with a Footer built with Divi Builder

3 – Go to Appearance > Editor. You will see the theme files, depending on the theme you have there are different folders and files. In my example, I am using a child theme and there aren’t many files.

Important: make sure to use a child theme or the My Custom Functions plugin to insert this shortcode. Otherwise you’ll lose your changes when you update your theme.

4 – Locate footer.php in the right side and left click

Theme Files - How to Replace the Default Footer with a Footer built with Divi Builder

4 – Use this shortcode in the template:

php

echo do_shortcode('[et_pb_section global_module="27729"][/et_pb_section]');

Important: Make sure you change the 27729 with the post ID you saved from the second step.

The Shortcode needs to be added right before the Div you hide previously with CSS.

Template Shortcode

Save the file and checkout the results. Voila! You have a brand new footer in your website.

Results

If you want to change the design in the future you can just edit the Layout you have created, there is no need to modify the shortcode in the php template.

Share This