[et_pb_section fb_built=”1″ _builder_version=”3.22.3″ custom_padding=”3px||4px|||” fb_built=”1″ _i=”0″ _address=”0″]
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 website. The 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
1 – Inside of WordPress go to Appearance > Customize > Additional CSS and hide the current footer by using CSS.
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:
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.
#main-footer {
display: none;
}
Create the footer in the Divi Library
1 – Go to WordPress dashboard > Divi > Divi Library
2 – Add a new Layout. You need to name it and Choose the Section Layout Type.
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.
Note: You can use Front End builder if you prefer. After you are done with the design, click Save.
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.
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
4 – Use this shortcode in the template:
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.
Save the file and checkout the results. Voila! You have a brand new footer in your website.
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.
[/et_pb_section]
