fbpx

blog          course

Yellow

about          contact

Divi Footer Tutorial

The footer is a key element of any website. If you’re designing WordPress websites using the Divi theme and page builder, there is a super easy way to create and update a footer. In this blog post, you’ll find a tutorial walking you through how to design and build a footer using global content.

Kristen Leigh | WordPress Web Design Studio | Divi Theme How To Divi Footer Tutorial

Updated: January 20, 2021

Divi is constantly improving and making it easier to design visually appealing websites without needing years of coding education. When I first wrote this blog post, designing a footer in Divi that looked good required coding. But because of these changes, it’s easier than ever to quickly and easily design a footer that has everything your client wants.

Instead of designing something that is clearly misaligned like this:

Kristen Leigh | WordPress Web Design Studio | Website Redesign for SoulQuest Designs | Divi Footer Tutorial | Divi Footer Before
You’ll be able to design something that looks like this:
Screen Shot 2021-01-20 at 11.04.34 AM

global content in divi

The trick to designing a footer that appears on every single page of your website is to create a piece of global content in the Divi theme builder.

What is global content? A piece of global content is created once and then added to multiple pages on a website (all pages or just selected pages of your choice). The difference between a piece of regular content and global content is that global content doesn’t need to be edited individually on each page it appears on. Instead you can edit one single piece of content and it updates site-wide.

Global content is useful for footers, sidebars, custom navigations, email opt-in forms, etc. Anything you would want on more than one page, but would still like to be able to easily edit, should be made into a piece of global content.

divi footer tutorial

Here’s a quick breakdown of how to create a global footer using Divi.

step 1: go to Divi Theme Builder

First go to the Dashboard of your WordPress website. In the left hand menu, hover over Divi and click Theme Builder.

The Theme Builder is your go to place for page templates (ie. blog post template or sales page templates) and for global headers and footers.

Step 2: edit the Default Website Template

The first box is labeled as the Default Website Template – this is the box we want to edit. If a default global footer doesn’t already appear then click on “Add Global Footer” to get started. If the default global footer already exists then click on the pencil to edit it.

Screen Shot 2021-01-20 at 11.15.39 AM
How to Make Web Design a Number One Source of Income Without Any Previous Web Design Skills | Free Training | Kristen Leigh

Step 3: add your content

After clicking the pencil you’ll be taken to the visual builder where you can add as many sections, rows, and modules needed to build the footer you’ve designed for your client.

Step 4: build the credits bar

Don’t forget to add the credits bar to the bottom of the footer. Simply add a new section, add a one column row and then add a text module.

Inside of the text module include: “© 2017 – 2021 | Designed by [Your Brand Name] | All rights reserved. | Privacy Policy | Terms and Conditions”.

The Copyright date should be the year the business started through the current year. Link “Your Brand Name” to your own websites and link “Privacy Policy” and “Terms and Conditions” to their respective pages as well.

Kristen Leigh | WordPress Web Design Studio | Website Redesign for SoulQuest Designs | WordPress Footer | Divi Theme Custom Footer Tutorial
Kristen Leigh | WordPress Web Design Studio | Website Redesign for SoulQuest Designs | WordPress Footer | Divi Theme Custom Footer Tutorial
Kristen Leigh | WordPress Web Design Studio | Website Redesign for SoulQuest Designs | WordPress Footer | Divi Theme Custom Footer Tutorial
Kristen Leigh | WordPress Web Design Studio | How to Design a Custom Divi Footer
Kristen Leigh | WordPress Web Design Studio | How To Add a Footer To Your WordPress Website
Kristen Leigh | WordPress Web Design Studio | How to Use the Divi Theme to Build a Footer
Screen Shot 2021-01-20 at 11.04.34 AM

Step 5: save your work

When you’re done designing the footer and adding the credits bar, click the 3 dots at the bottom of the screen to open up the menu. A green save button will appear. Click the save button and then click the “X” in the top right-hand corner of the screen.

The final step is to click the “All Changes Saved” button to make sure that your work is in fact saved and doesn’t disappear.

Kristen Leigh | WordPress Web Design Studio | Website Redesign for SoulQuest Designs | WordPress Footer | Divi Theme Custom Footer Tutorial
Kristen Leigh | WordPress Web Design Studio | Website Redesign for SoulQuest Designs | WordPress Footer | Divi Theme Custom Footer Tutorial
Kristen Leigh | WordPress Web Design Studio | Website Redesign for SoulQuest Designs | WordPress Footer | Divi Theme Custom Footer Tutorial
Kristen Leigh | WordPress Web Design Studio | How to Design a Custom Divi Footer
Kristen Leigh | WordPress Web Design Studio | How To Add a Footer To Your WordPress Website
Kristen Leigh | WordPress Web Design Studio | How to Use the Divi Theme to Build a Footer
Screen Shot 2021-01-20 at 11.26.22 AM

WordPress Footer Versus Global Divi Footer

Couldn’t this be done using the default WordPress footer and a bit of code?

Absolutely. But using the global footer will benefit your clients. Your clients want to be able to make updates to their websites without relying on you or someone else to make every itty bitty change for them.

The default WordPress footer, while fine, isn’t user friendly for anyone who doesn’t know code or doesn’t know their way around WordPress. The global Divi footer is.

 

-Kristen

You might also like…

Kristen Leigh | WordPress Web Design Studio | Website Redesign for SoulQuest Designs | WordPress Footer | Divi Theme Custom Footer Tutorial
Kristen Leigh | WordPress Web Design Studio | Website Redesign for SoulQuest Designs | WordPress Footer | Divi Theme Custom Footer Tutorial
Kristen Leigh | WordPress Web Design Studio | Website Redesign for SoulQuest Designs | WordPress Footer | Divi Theme Custom Footer Tutorial
Kristen Leigh | WordPress Web Design Studio | How to Design a Custom Divi Footer
Kristen Leigh | WordPress Web Design Studio | How To Add a Footer To Your WordPress Website
Kristen Leigh | WordPress Web Design Studio | How to Use the Divi Theme to Build a Footer
How to Make Web Design a Number One Source of Income Without Any Previous Web Design Skills | Free Training | Kristen Leigh

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

Hey there, I’m Kristen!

Kristen Leigh | WordPress Web Design Studio

Check Out some of My Favorite Tools ↓

Divi WordPress Theme
Monarch Social Sharing Plugin

Affiliate Disclaimer

*Hey hey! Yes, there are affiliate links throughout the Kristen Leigh website. I don’t promote products, tools, or services I’ve never used before or that I don’t absolutely love. By clicking the link and making a purchase, I may receive a percentage of the sale.

Pin It on Pinterest

Share This