How to Hide & Remove Divi Footer
Just installed Divi theme, started custimizing it and wondering how to remove divi footer?
It's very frustrating to get stuck while doing customizations and we all know that it can be tough to customize a WordPress website the way you want especially if the default theme settings offered by the theme provider don't contain what you're looking for and you've no coding experience.
We all have been there somewhere in our career. But, don't worry!
removing the footer from your Divi website won't be a problem anymore. because in this free step-by-step guide we're going to teach you how to remove the default Divi footer globally from your entire website or from specific places. So, without wasting time …
Let's Go (:
Contents
Overview
First, we're going to open this article by an overview in which we discuss some reasons for which you would need to remove the footer from your website as well as some essential points to keep in mind before you actually start doing any changes.
When it comes to removing the footer from your website or at least from a particular page there are many reasons and here's some of them in our opinion:
- You want to make your website as simple and clean as possible so you're reducing unnecessary blocks.
- You're creating a more personalized WordPress website and you need to get rid of it.
- You're removing it from a particular page because it's already very long.
- You're a web designer and your client requested that.
Important to know
When you first install the Divi theme on your website, the changes you'll be doing will be applied to the core files of the theme which is not a good idea at all. wondering why?
Simply, because if you do so all the customizations you will do will be erased once you update to a newly released version of the Divi theme. Imagine losing all the custom changes you were doing for hours and hours, searching things on the internet, and picking code snippets here and there.
A horrible disaster, right?
Now, you might ask me what's the solution then?
The short answer is A child theme, by creating a child theme and applying the changes to it instead of main theme files you'll be on the safe side, maintain your changes, and never have to worry about losing them whenever you do updates because only the core files are updated.
I hope this point is very clear now, it's very important and it will absolutely save you from a lot of headaches and those frustrating issues.
Here we are, in the actionable step-by-step guide in which we're going to walk you through how to remove Divi footer from different places of your site. we'll make sure to cover all the options possible as we did in the remove Divi sidebar guide.
Let's dive in … !
In a few themes, you'll find the option to disable the footer site-wide. the Divi by elegant themes only offers the disable option for the copyright text, social icons, and some other stuff but there is no option to hide it from the whole website so, we'll remove the footer using one line of CSS.
To remove the footer from globally from a Divi website:
1 – Go to Appearance > customize > additional CSS or Divi > theme options > custom CSS and add the following CSS code snippet in there, if you're using a child theme which recommended then you can always edit and add to the style.css file.
/** Remove global footer**/
#main-footer
{
display: none;
}For the sake of this tutorial I will add the CSS code in the Additional CSS box (as shown below) then click “Publish” and the footer will be disabled.
Short and sweet! right?
Let's move on …
Let's suppose you don't want to get rid of the footer from all the WordPress pages only. to achieve that we'll be using the following code:
<style>
.page-template-default #main-footer
{
display:none;
}
</style>To remove Divi footer from all pages, follow these steps:
1 – In the very bottom left-hand side menu of the WordPress dashboard, hover over the “Divi” tab, select “Theme options” then click the “integration” tab.
2 – Copy and paste the following CSS code snippet in the <head> section then scroll down and click “save changes”.
Now, it's time to level up the game and try to disable the footer in a specific page only. We'll be using the following CSS code as a general rule.
.page-id-x #main-footer
{
display: none;
}Here are the steps to follow to remove Divi footer from a specific page:
1 – Firstly, from the WordPress left-hand side menu, click “Pages”
2 – Go to the page that you want to disable the footer for and put the mouse on “Edit”
3 – when you hover the mouse on the “Edit” button, keep your eye on the bottom left of your screen you see a link, we'll need the number that's right after “post=”. In my case, it's 5 (as you can see below)
4 – We're going to replace the letter “X” with the number we got, so the snippet code we'll add as a custom CSS looks like the following:
.page-id-5 #main-footer
{
display: none;
}To remove the footer from all posts in the Divi theme, you follow the same process of adding custom CSS for pages and regarding the snippet code we'll use the following instead:
/** remove footer from all posts **/
.post-template-default #main-footer
{
display: none;
}The following is the general CSS code we're going to use then show you how to customize it to target the exact post you want.
/** disable footer on specific post **/
.postid-x #main-footer
{
display: none;
}To hide divi footer from a specific post, You can follow these steps:
1 – Just like we did with pages, the steps are almost the same the only difference is we'll go to “Posts” this time.
2 – Hover over the “Edit” link underneath the desired post for which we'll disable the footer.
3 – Leave the mouse on the “Edit” link and look at the link appearing in the bottom left of your screen
And I think you guessed it! we'll replace the letter “X” in the snippet above with the number we see after “post”, in my case it's 3 so the snippet for that specific post is:
.postid-3 #main-footer
{
display: none;
}To remove Divi footer from category pages in WordPress you need to use a custom CSS. the snippet to use for targeting only category pages is the following:
.category #main-footer
{
display: none;
}For those who are looking to hide the footer in a specific category page, don't worry I got you covered in this free ultimate guide. The general CSS snippet we're going to use is the following and I will show you how to find the “X” number in the upcoming steps.
.category-x #main-footer
{
display: none;
}Here are the steps to remove Divi footer from a specific category page:
1 – Log in to your WordPress dashboard, Go to “Posts” from the left-hand side menu and choose “categories”
2 – As we did with posts and pages we just need to hover the mouse over the “Edit” link underneath the category name.
3 – Look at the bottom left corner of your screen you'll see a long link, I need you to just remember the number located just after “ID=”. In the example, below the number is 19 (as you can clearly see in the following screenshot)
4 – Copy and paste the general CSS snippet we mentioned above in the custom CSS area and don't forget to replace the letter “X” with the actual number you got (ID). In the example I gave the snippet will look like this:
.category-19 #main-footer
{
display: none;
}That's it for category pages, now let's move on to something else …
If you're launching a Woocommerce store and you're looking to hide the divi footer from the product pages then you can follow the same steps of adding custom CSS and here's the snippet:
.product-template-default #main-footer
{
display: none;
}Assuming that you're trying to hide the footer on a specific product page only. the general CSS snippet looks like the following with the letter “X” being the ID number of the product page. we're going to show you how to figure the number easily (:
.postid-x #main-footer
{
display: none;
}To remove divi footer from specific product page follow these steps:
1 – From the menu on the left hand side of your WordPress dashboard, hover over “products” then click “all products”
2 – under the product page for which you want to remove the footer, you'll see a number after “ID:” as you can see in the following screenshot.
That's all for the WordPress product pages, before we close this guide, I decided to answer some of the common questions about removing the Divi theme footer to give you even more value.
FAQs
Although, there is no way inside the default options of the Divi theme to remove the widget area but You can do that using the following CSS code snippet:
/** remove divi footer widget area **/
#main-footer .container
{
display: none;
}There is an option in the Divi theme customizer to disable footer credits but to completely remove Divi footer bottom bar add the following CSS snippet:
/** remove divi footer bottom bar **/
#main-footer #footer-bottom
{
display: none;
}One of the common issue with the majority of themes is a blank space appearing right below the footer.
To remove the white space below the footer in Divi, you need a snippet of code to override the CSS rules applied to the footer and you can do that following these steps:
1 – copy the following JQuery snippet code:
<script>
// Remove the white space below footer
jQuery(function($) {
$(document).ready(function() {
if ($('body').height() < $(window).height()) {
$('footer').css({
'position': 'fixed',
'bottom': '0px',
'left': '0',
'right': '0'
});
}
});
});
</script>2 – Go to Divi > theme options > integration and paste the code you just copied in the <head> section then, scroll down and click “save changes” and Boom, it will be fixed like magic (:
To remove Divi footer menu simply go to Custom CSS box in the Divi Theme options then copy and paste the following custom CSS snippet:
/** remove footer nav in Divi theme **/
#main-footer #et-footer-nav
{
display: none;
}Further Reading:
- How to Hide or Remove Divi Sidebar?
- How to Edit Divi Theme Footer [Easy Guide]
- Divi Logo: Change size, Customization Guide & [Expert Tips]
- Divi Favicon: How to Add it & What to know
Roundup
Generally speaking, there's no rule that forces you to leave or remove the footer even though, you might need to do in some cases and if you're doing web design for individuals or small businesses then you'll definitely face a situation where a client wants to get rid of the footer for some reason.
If you made it this far, do let me know in a comment below what do you think about removing the footer from a website, is it a good idea? or if you still have any questions in mind feel free to drop them below as well.
That's all for today's blog post, if you liked it share it. Otherwise, stay Awesome!
Cheers!
