How To Hide The Divi Footer Without CSS

2021-12-03 | Divi, Tutorials | 0 comments

Working on a One Pager design or just want to keep it short and sweet? Hiding the footer in Divi is easy.
Skribent: Victor Duse
By Victor Duse

It’s actually really easy to hide the default Divi footer without using custom CSS. This trick works both for hiding the footer on all pages as well as just hiding it on one page or on specific pages.

Hide the Divi footer without custom CSS

Let’s hide the default Divi footer without using a single line of CSS. This is the most simple way.

Hide the Divi footer on all pages – with one single click

  1. Go to your WordPress dashboard and click Divi » Theme Builder
  2. Find the Default Website Template box
  3. Click the eye icon Display icon in Divi Theme Builder to the right of the Add Global Footer field
  4. Make sure that the eye icon Hide icon in Divi Theme Builder is now crossed out
  5. Click Save Changes and preview in frontend

Voila! The footer should now be hidden on all pages and posts on the website. Clear your browser cache and website cache if you still can see the footer.

Hide the Divi footer on all pages

Just click the eye icon to hide the footer on all pages.

The footer is now hidden

The eye icon should be crossed out. Don’t forget to save the changes.

Hide the Divi footer on specific pages or posts

  1. Go to your WordPress dashboard and click Divi » Theme Builder
  2. Find the Add New Template box
  3. Click the + icon to add a new template
  4. Hover Specific Pages (or Specific Posts) and check the pages (or posts) where you want to hide the footer.
  5. Click the eye icon Display icon in Divi Theme Builder to the right of the Add Custom Footer field
  6. Make sure that the eye icon Hide icon in Divi Theme Builder is now crossed out
  7. Click Save Changes and preview in frontend

Well done! The footer should now be hidden on the specific pages and/or posts that you selected. You can of course choose to hide the footer on just one single page or one single post too.

💡 Pro tip: You can also hide the footer on Pages only, on specific Post types only and on specific Archive pages (like Categories and Tags) only by choosing them in the Template Settings (see screenshot #2 below).

Create a new Divi Template

Click the + icon to create a new custom template. It will override the Global Template on the associated pages and posts.

Choose a page to hide the Divi footer

Find the pages (or posts) where you want to hide the footer. You can also choose entire post types and archives.

A custom Divi Theme Builder template

It should look something like this when you have saved the template settings. Hover the box and click the cogwheel to change the associated pages/posts.

Hide the Divi footer on specific pages or posts

Click the eye icon to the right of the box “Add Custom Header”. The eye should be crossed out. Don’t forget to save the changes.

Bonus #1: Hide the Divi footer with custom CSS

Do you prefer custom code over the Theme Builder? Then you can use the CSS snippets below.

Hide the footer on all pages and posts

  1. Go to your WordPress dashboard
  2. Click Divi » Theme Customizer » Custom CSS
  3. Paste the snippet below:
    /* Hide the Divi footer on all pages */
    
    #main-footer {
      display:none;
    }
  4. Save and preview in frontend

That’s it!

Hide the footer on specific pages and posts

  1. Go to your WordPress dashboard
  2. Find the ID for the page(s) where you want to hide the footer
  3. Click Divi » Theme Customizer » Custom CSS
  4. Paste the snippet below:
    /* Hide the Divi footer on specific pages */
    
    .page-id-123 #main-footer {
      display:none;
    }
  5. Replace the ID (in this example 123) so that it matches your page ID
  6. Save and preview in frontend

However, I strongly recommend that you use the Theme Builder instead since it’s much more convenient.

Bonus #2: Hide the Divi bottom bar with custom CSS

Do you still use the old Divi footer and want to hide the bottom bar? My first choice would be to design the footer using the Theme Builder instead. But if you like the good old Divi footer with widgets and stuff, you can use the snippet below to just hide the bottom bar.

Hide the Divi bottom bar on all pages and posts

  1. Go to your WordPress dashboard
  2. Click Divi » Theme Customizer » Custom CSS
  3. Paste the snippet below:
    /* Hide the Divi bottom bar on all pages */
    
    #footer-bottom {
    display:none;
    }
  4. Save and preview in frontend

That’s it!

Hide the Divi bottom bar on specific pages and posts

  1. Go to your WordPress dashboard
  2. Find the ID for the page(s) where you want to hide the bottom bar
  3. Click Divi » Theme Customizer » Custom CSS
  4. Paste the snippet below:
    /* Hide the Divi bottom bar on specific pages */
    
    .page-id-123 #footer-bottom {
    display:none;
    }
  5. Replace the ID (in this example 123) so that it matches your page ID
  6. Save and preview in frontend

However, I strongly recommend that you use the Theme Builder instead since it’s much more convenient.

That’s all for today!

I hope that you enjoyed this post. Subscribe to DiviMundo on YouTube and join our Facebook group for more crisp content on WordPress and web design.

Related content: How to create a stunning footer with the Divi Theme Builder

Free course: Create a website from scratch with Divi

Related posts

0 Comments

Submit a Comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.