Select Page

How to Edit Divi Theme Footer [Easy Guide]

  1. Home
  2. »
  3. Divi
  4. »
  5. How to Edit Divi Theme Footer [Easy Guide]

Mozsteps content is free. When you purchase through referral links on our site, we earn a commission. Learn More

edit divi theme footer
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

Trying to edit Divi Theme footer?

Since Divi is becoming one of the leader and most popular WordPress themes and page builders on the market, customizing each part of your website can be slightly harder for some people especially those who create a website for the first time.

In this blog post, we're going to take a look at the Divi Theme footer as well as walk you through exactly how to customize and edit each part of it.

So without further ado …. let's Get into it!

Divi Footer At a glance

Like any other theme on the market, Divi comes with a default footer that you can fill and control from the theme customizer inside the WordPress Admin Dashboard.

Tips for a good Divi website footer?

to create a stunning website footer, you might be wondering what are the best practices or the essential things that should be included in your website footer. well, although there is no general rule we can say that a good footer respects the following criteria:

1 – Your information: it's highly recommended that you include your information (email address, social media accounts, a brief description about your website, …) will add some of the authenticity and professionalism and it can also increase your followers on different social media platforms.

2 – Color scheme: it's preferred that you use the same colors you used on your theme to keep it consistent as much as you can as we have mentioned in the Divi Favicon Guide.

3 – Fonts: same as colors we also need to either use a global font for our theme which will be automatically applied to our footer or use one of the fonts we already using in the website.

The part of the Divi Theme footer

After adding some random widgets and a menu in the footer here's how the Divi footer looks like:

Default Divi Footer
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

The Divi theme comes with a default footer which can be divided into 3 parts:

1 – The widget area: whenever you add a new widget in the footer it will appear in the footer widget area (number 1 in the screenshot above)

2 – The Footer menu: whenever you add a menu from the “menus” under the “appearance” tab and you set it to be displayed as a footer menu it will appear in the place (number 2) as can you see in the screenshot above.

3 – The bottom bar: also called the Divi copyright credits section mainly used to change and edit that bottom line of text that is displayed right underneath the footer.

How to Edit Divi Theme footer [Basic Guide]

Now, that we have taken a closer look at the Default footer. we are going to explain how you can edit each part of it step by step.

Let's Go !

Since all the settings will be configured from one place, I am going to show you how to access the Divi footer settings first then we learn how to customize it part by part.

So, to find the Divi theme footer settings follow these steps:

1 – Hover over “Appearance” tab then from the menu choose “customize”

Divi appearance customizer
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

OR you can also hover over “Divi” tab and then choose “customize” from the displayed menu.

Divi theme customizer
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

2 – whether you access it from the first option or second, you'll end up in the customization settings of the Divi theme. Now, choose “Footer”

Divi Footer
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

You'll now see the settings that control each part of the parts we have mentioned earlier, now let's play around with settings and see how far we can customize our website. sounds good?

let's continue …

How to customize Divi footer Layout?

The first settings in under Divi footer customization has to do with the general layout and color applied to the whole footer.

customize divi footer layout
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

The default footer layout in the Divi theme is the 3 column layout but it offers 19 different column layouts to choose from which is awesome, here are some of the footer layout examples.

Divi footer column layout
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

The second setting concerns the global color of the footer, Divi gives you the ability to choose any color you want using the integrated color picker but it's always recommended that you choose a color that matches your website color scheme as we mentioned in the tips section.

If you are interested in using a background image instead of colors then check the FAQs section in the end of this blog post, I am going to show you how you can do that.

divi footer background color
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

You can always return to the default initial color provided by Divi by clicking the “Default” option next to the color picker.

Divi Theme footer widgets

1 – How to add widgets to the Divi theme footer?

Before we jump in and see the various settings available when customizing the Divi footer widgets, I want to make it clear for you by saying that the section of widgets doesn't appear when you first install the Divi theme. why?

simply, because there are no widgets added to the footer so the section is hidden until you add some widgets and here how to add them:

1 – Hover over “Appearance” then choose “widgets” (as shown below)

Divi add widgets
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

2 – It will take you to a page where you can add widgets in the footer and sidebar, since our today's article is about footer we'll focus on it and ignore sidebar for now.

Divi theme add widgets
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

As you can see in the screenshot above:

On the right-hand side, you see the “available widgets” section from which you can choose the widgets you want and add them by dragging and dropping them in the different footer areas.

On the left-hand side, you see the different footer areas numbered from #1 to #6, you can use them as much as you want, and if for some reason the 6 widgets are not enough for you. you can go ahead and add a new one from the section underneath by simply entering a name for your widget and clicking “add widget”.

If you notice in the screenshot above I have added three widgets as I personally like the three column layout.

Awesome!

Now that you have learned how to add a widget, let's see the Divi footer widgets customizations available for us.

2 – How to customize Divi footer widgets?

Under “Footer” settings, choose “widgets”

divi footer widget settings
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

Now, you see all the settings related to “widgets” (as show below)

divi footer widgets customization
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

The available widget customizations include the following:

  • Header customization: includes “Header text size” and “Header font style” which allows you to control the font size and font style of your widgets titles.
  • Body customization: includes “body/link text size” and “body / link line-height”, you can use them to customize your widget's main content.
  • Colors: the four remaining options are used to customize the color of links, texts widgets titles.

Anyway, you can play around with all these options until you reach something cool (:

let's move to the next!

How to enable footer social icons in Divi theme?

Go to “Footer Elements” under the global footer settings (as shown below)

divi footer elements settings
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

Now you see an option saying “show social icons” simply, put a check mark on it.

add social icons to divi footer
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

And Voila! The social icons are displayed in the footer. Pretty easy right?

divi footer social icons
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

Check the FAQs section in the end of this article if you want to make some custom customization in case you didn't like the default look of it!

Let's move on to the next one …

Divi Theme footer menu

Similar to the process we have done in the widgets, the menu should be created and added to the footer before they can actually appear. Let's show you how very quickly!

1 – How to add a menu to Divi Footer?

First, Go to “Appearance” then choose “menus”

wordpress menus
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

To create a menu in WordPress follow the these simple steps:

1 – Enter a name for your menu in the field next to the “Menu Name” then in the bottom left corner click “Save menu” button

2 – Now menu items from the ones available in the right-hand side, all the pages you created will appear so you can add them (the footer menu usually contains pages like privacy policy, contact us, about us …) just like the example I created below.

3- After adding the desired menu items, be sure to check “Footer menu” from the menu settings (as shown below)

4 – finally go ahead and click “save menu”

add menu wordpress
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

That's it!

2 – Customizing the Divi footer menu?

Now that we have created the menu, it will automatically appear in the default place set by the Divi theme developers.

To customize it we'll choose “Footer Menu” under Footer settings. (as you can see in the following screenshot)

divi footer menu settings
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

Here are all the available settings to customize the Divi theme footer menu:

divi menu footer settings
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

Now you can play around with those settings to control every detail about the footer menu just like we did with the widgets.

How to Change the Divi footer credits?

One of the important things you'll be looking for when you edit Divi theme footer is to change the footer credits that comes with the theme once you install it.

To change the Divi footer text, follow these simple steps:

1 – Go “Bottom Bar” under the general footer settings

divi footer bottom bar settings
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

Like any other part of the footer, the copyright section can be fully customized using the settings you see on the top (as shown below).

Divi footer credits customization
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

2 – Scroll down and you'll see an option that allow you to completely hide the footer text and a box underneath where you can change the credits to your own ones. Just like you see in the following screenshot.

change divi copyright footer credits
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

By having the copyright text complete we come to the end of the edit Divi theme footer tutorial. and we'll move on from the practical examples to some of the most asked questions about editing and customizing the footer in Divi.

When you make any edits to any part of your Divi website footer then make sure to save the changes by clicking on the “Publish” button in the top left corner.

FAQs

Q: How to align Divi Footer credits to the center?

To change Divi footer credits text alignment to the center, use the following CSS code:

#footer-info
{
   float: none;
   text-align: center;
}

Note: it becomes perfectly aligned with the social icons disabled.

Q: How to add background image to Divi footer?

To add a background image to Divi theme footer, use the following CSS code snippet:

#main-footer {
background: url("Put your image URL here") !important;
background-repeat: no-repeat !important;
background-size: cover !important;
}

Q: How to remove bullet points from Divi footer?

To remove bullet points from your Divi footer widgets, use the following CSS code snippet:

#footer-widgets .footer-widget li:before {
    display:none;
}
#footer-widgets .footer-widget li {
    padding-left: 0px;
}

Q: How to center the Divi footer menu?

To align the Divi theme footer menu, use the following CSS code snippet:

#et-footer-nav .bottom-nav
{
   display: flex;
   justify-content: center;
}

Q: How to display Divi footer on all page?

The default Divi theme footer needs to be edited and customized once and it will be displayed on all of your website pages including the pages and posts you'll create later on.

Q: How to style Divi footer social icons?

To customize the default social icons style while you edit Divi theme footer, use custom CSS. here's an example:

.et-social-facebook a.icon:before {
    content: "\e093";
    background-color: #3b5998;
    color: #fff;
    padding: 5px;
    font-size: 19px;
}
.et-social-twitter a.icon:before {
    content: "\e094";
    background-color: #55acee;
    color: #fff;
    padding: 5px;
    font-size: 19px;
}
.et-social-instagram a.icon:before {
    content: "\e09a";
    background-color: #e95950;
    color: #fff;
    padding: 5px;
    font-size: 19px;
}
et-social-rss a.icon:before {
    content: "\e09e";
    background-color: #ff6600;
    color: #fff;
    padding: 5px;
    font-size: 19px;
}

You'll get a new amazing look for you social icons something that look like the following:

divi-social-icons-1
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

Further Reading:

Roundup

Although, I see a lot of website on the internet that don't have a footer at all but it's very important to have one for your website because users will find it much much more easier to reach out to you and even help you build trust with them.

The process of editing and customizing the Divi theme footer is pretty simple, especially if you're someone who already knows how to use the WordPress Admin Dashboard or you have customized a theme before because it's almost the same.

I hope this article was helpful to you, If you still have any questions about the Divi footer editing basics then let me know by dropping a comment below. Otherwise, share your thoughts let me know how was your first experience dealing with theme customizations.

Cheers!

0 Comments
Submit a Comment

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

Start a blog at 2.75$/mo

Categories

Pin It on Pinterest

Share This