How To Create A Footer In Divi Theme?

In this article, we will have a look at how to create a footer in Divi theme using the Divi Theme customizer. Later in the article I will also show you how to create custom footer in Divi websites.

A footer is one of the most important part of a website. It showcases a finished feeling for your visitors, while also giving crucial information and navigation links to the entire website, in case they have missed it elsewhere.

There are two options to create Footer in Divi;

  1. Make a basic footer using the Divi theme’s customizer settings (make use of WordPress Sections & Widgets)
  2. Create Custom footer in Divi using the Divi Builder

Divi Footer Parts

A footer on Divi website contains 3 parts

  1. Widget Area
  2. Footer Menu
  3. Bottom Bar

All of these 3 parts are completely customizable via the theme customizer.

sample
Divi Footer Parts

The Divi footer can easily be controlled from the Theme Customizer or Appearance menu, on your WordPress Dashboard.

If you need the Widget Area and the Footer Menu, it is up to you. Since these are optional and can be hidden. But, to hide the Divi Bottom Bar, it requires some CSS code.

Creating Footer In Divi Theme

Divi footer uses WordPress widgets. That means you can easily create and edit a footer in Divi website using the Theme Customizer.

The only tricky part here is to really understand that in this way, you do not have to use the Divi Builder tools. Do not confuse this method with the one where you use the Visual Builder. That is another method, and it requires you to start from Divi Theme Builder.

Step 1: Go To Theme Customizer

Go to your WordPress Dashboard, look for Appearance, and click on Customize.

Alternatively, you can also hover your mouse on Divi and select Theme Customizer. Either of them will open the Divi theme customizer for you.

theme customizer
Divi Theme Customizer Showing Website Footer

Step 2: Open Theme Customizer Footer Settings

Now click on Footer. After clicking on Footer, you will see 5 options to set your styles.

customizing footer
Customizing Divi Footer
  • Layout – Used for controlling the number of columns
  • Widgets – Lets you control the appearance of your widget area
  • Footer Elements – Manage Social Media Icons from here
  • Footer Menu – Used for placing Horizontal Footer Menu in Divi Theme
  • Bottom Bar – Section that showcases copyright information (comes by default)

Step 3: Edit Footer Layout

Customize Footer Layout by clicking on Layout. Select the number of columns you need in the Widget Area. Plus, you also get to change the entire background color.

Note:- This applies to all the 3 Footer parts; Widget Area, Footer Menu, and Bottom Bar.

Step 4: Customize Footer Widgets

Next step is to customize Footer Widgets. Go back and now click on Widgets.

customize divi footer widgets
Customizing Footer Widgets

Here you can edit the Header, Font Styles, Body Text Size, Widget Text, Link, Header & Bullet Color. The changes you make here will only apply to the Widget Area.

Step 5: Show or Hide the Social Icons on Bottom Bar

Get back and now click on Footer Elements. From here, you can choose to show or hide social icons.

The Footer Elements menu controls the display of Social Media Icons. By default, you get to show or hide Facebook icon, Twitter icon, Instagram icon, and RSS feed icon.

We find this settting under the General Tab of Divi Theme Options.

divi theme options social icons enable
Enabling/Disabling Social Icons From Divi Theme Options

Enabling or disabling social icons from the Divi Theme Options is great, but the problem here is that if you have YouTube, Pinterest or any other social channel, you don’t get to showcase that.

That is not the case if we create custom footers in divi via Divi Builder. Over there, you can insert multiple icons, stick HTML code, and customize the look.

Step 6: Customizing Footer Menu

Next option is to customize the Footer Menu. This is where you place the most important links like About Us, Contact Us, Privacy Policy, Sitemap, and other content related links to the website.

A footer menu distinguishes between the website and the website’s footer and it is important from the visitor’s point of view.

divi footer menu theme customizer
Customizing Divi Footer Menu

The Footer Menu in Divi allows you to control the menu’s background color, text color, and active link color. Moreover, you can also adjust letter spacing, adjust font size and style.

Allocate Footer Menu in the Menu Settings. To reach there, go to WordPress Dashboard, hover your mouse on Appearance, and click on Menus.

From the Edit Menus tab create new menus as per your rquirement.

Step 7: Customizing Divi Bottom Bar

Next comes the bottom bar. Just go back and click on the Bottom Bar, and you will see something like the image shown below.

You cannot disable this unless you add a CSS to the Additonal CSS portion of the Theme Customizer.

You can edit the background color, text color, font size, social icon size and color.

Most importantly, you get to enable or disable the Divi footer credits.

divi bottom bar
Divi Bottom Bar Settings

Bonus:- To remove Bottom Bar in Divi, just paste the below code into your Additonal CSS section of the theme customizer.

#footer-bottom {
display: none;
}


Before I complete this article, I wanted to showcase another method to create custom Divi footer.

This way of building footers is much easier, better and gives you more features while customizing footers.

I also wanted to show the difference in creating a Global Footer and Custom Footers in Divi.

To create either one of the footers, you will need to go to the Divi Theme Builder. Go to your WordPress Dashboard, hover your mouse on Divi and click on Divi Theme Builder.

divi theme builder dashboard
Sample Divi Theme Builder Dashboard

A blank dashboard with default website template section opens up. In the image above, I have already created multiple custom templates.

For creating a Global Divi Footer, just click on the first template’s ‘Add Global Footer’ section. It will prompt you to choose between Building Global Footer from scratch or Adding From Library.

global footer
Adding Global Footer

If you’d like to build a footer by yourself, just click on Build Global Footer or else select Add From Library.

Create Custom Divi Footer

The difference here between global and custom is only that for building any custom template in Divi, whether its header, footer, category pages, etc; you just need to click on plus sign on the new template.

Step1: Add New Template In Divi

Click on the plus sign in the template section, next to the default website template.

new template in divi theme builder
Adding New Template in Divi Theme Builder

In our procedure, we like to create a footer. Let us just say that we are going to apply this footer to all our single blog posts. For doing that, you will be prompted with a list of pages and posts.

applying custom divi template to all posts

Click on All Posts, as we need to apply the new custom footer on all of our single blog posts, then click on Create Template.

Once that is done, you will see a Custom Template section besides the Default Website Template section.

divi custom template for all posts
Divi Custom Template

This template has been created for All posts. You can create custom header, footer, body and make that consistent across all single blog posts on your website.

Remember, this only applies to single blog posts on your website and nowhere else.

Step 2: Add Custom Footer

The next step is to click on the Add Custom Footer section.

Similar to the one under default website template, you will be prompted to create a custom footer from scratch or from your Divi library.

custom footer in divi

Step 3: Build Custom Footer In Divi

I have selected ‘Build Custom Footer’ and it opens up a Footer Layout for me to customize.

customizing custom footer layout
Customizing Footer Layout

From here I can decide on adding Rows, Columns and Sections to my custom footer and within them adding different Divi modules is a piece of cake.

Bonus: Check out Elegant Themes’s 10 Free Divi Footer Layouts to give you a heads up while designing custom footers.

FAQs – Create A Footer In Divi Theme

How do I stick the footer to the bottom of the page in Divi?

If you have created Divi footer via Theme Customizer, then you will need to add CSS code to the specific footer part, to make it sticky. But if you have made the footer via Divi Builder, then you need to click on the footer part (for example, widget area), open builder settings, go to Advanced section, and under Sticky Position select Stick To Bottom.

What is Global Footer?

In the Divi theme, a Global footer means the footer that gets showcased on the entire website.

How do I add logo to the footer in Divi?

Click on the Footer part where you want to add your logo image, select builder settings, under Content tab go to Image section and add an image, click on save. Optionally, you can also enable lightbox.

I am in love with WordPress, building websites, doing SEO, and all that kind of stuff. I generally write about WordPress, Blogging, and SEO on BloggingIdol.

Leave a Comment