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!
Contents
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.
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.
After adding some random widgets and a menu in the footer here's how the Divi footer looks like:
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.
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”
OR you can also hover over “Divi” tab and then choose “customize” from the displayed menu.
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”
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 …
The first settings in under Divi footer customization has to do with the general layout and color applied to the whole footer.
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.
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.
You can always return to the default initial color provided by Divi by clicking the “Default” option next to the color picker.
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)
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.
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.
Under “Footer” settings, choose “widgets”
Now, you see all the settings related to “widgets” (as show below)
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!
Go to “Footer Elements” under the global footer settings (as shown below)
Now you see an option saying “show social icons” simply, put a check mark on it.
And Voila! The social icons are displayed in the footer. Pretty easy right?
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 …
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!
First, Go to “Appearance” then choose “menus”
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”
That's it!
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)
Here are all the available settings to customize the Divi theme footer menu:
Now you can play around with those settings to control every detail about the footer menu just like we did with the widgets.
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
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).
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.
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.
FAQs
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.
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;
}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;
}To align the Divi theme footer menu, use the following CSS code snippet:
#et-footer-nav .bottom-nav
{
display: flex;
justify-content: center;
}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.
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:
Further Reading:
- How to Hide or Remove Divi Sidebar?
- Divi Logo: Change size, Customization Guide & [Expert Tips]
- Divi Fonts Guide: Add Custom Fonts & Google Fonts
- Divi Favicon: How to Add it & What to know
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!
