Select Page

How to Hide & Remove Divi Footer

  1. Home
  2. »
  3. Divi
  4. »
  5. How to Hide & Remove Divi Footer

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

remove divi footer
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

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 (:

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.

Why would you hide Divi Footer?

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.

How to Remove Divi Footer?

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 … !

Remove Divi footer globally from the site

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.

wordpress remove footer
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

Short and sweet! right?

Let's move on …

Remove Divi footer from all pages

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”.

remove divi footer from all pages
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

How to hide footer from a specific page in Divi?

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”

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

2 – Go to the page that you want to disable the footer for and put the mouse on “Edit”

edit wordpress page
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

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)

wordpress post ID
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

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;
}

Remove Divi footer from all posts

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;
}

How to hide footer from a specific post in Divi

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.

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

2 – Hover over the “Edit” link underneath the desired post for which we'll disable the footer.

wordpress edit post
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

3 – Leave the mouse on the “Edit” link and look at the link appearing in the bottom left of your screen

wordpress post link
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

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;
}

Remove Divi footer from category pages

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;
}

How to hide Divi footer from a specific category page

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”

WordPress category pages
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

2 – As we did with posts and pages we just need to hover the mouse over the “Edit” link underneath the category name.

Edit category page in WordPress
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

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)

WordPress category ID
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

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 …

Remove Divi footer from product pages

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;
}

How to hide Divi footer from a specific product page

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”

Woocommerce products WordPress
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

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.

Woocommerce Product ID
  • Facebook
  • Pinterest
  • reddit
  • LinkedIn
  • Myspace
  • Tumblr

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

How to remove Divi footer widget area?

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;
}

How to remove Divi Footer Bottom Bar?

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;
}

How to remove white space below Divi footer?

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 (:

How to disable footer menu in Divi?

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:

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!

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