All Collections
FAQ's and Troubleshooting
Hiding the Divi Header or Footer on Specific Pages: A Step-by-Step Guide
Hiding the Divi Header or Footer on Specific Pages: A Step-by-Step Guide

Learn how to effortlessly customize your Divi theme by hiding the header or footer on specific pages with our step-by-step guide.

Fozla Rabbi avatar
Written by Fozla Rabbi
Updated over a week ago

Method 1: Hiding the Header and Footer using the Blank Page Template

  1. Edit the desired page or post from the WordPress backend.

  2. In the right sidebar, locate the "Template" option.

  3. Choose "Blank Page" from the dropdown.

  4. The page will now display without a header or footer.

Note: This method hides both the header and footer and may not work if you want to hide just one of them.

Method 2: Hiding the Header or Footer using Theme Builder

  1. Create a Theme Builder template and assign it to specific pages where you want to hide the header or footer.

  2. In the Specific Page template, click the eye icon for the header or footer to hide it.

This is one of the easiest ways to hide the header or footer selectively.

Method 3: Using CSS to Hide the Header or Footer by Page/Post ID:

  • To apply CSS and hide the header or footer on specific pages or posts, you first need to locate their IDs.

  • Find the page/post ID by clicking "Edit" in WordPress Dashboard Pages/Posts and checking the browser's address bar.

    In this example, the ID number is 2.

  • Use custom CSS like the examples below to hide the header or footer by applying them to Divi > Theme Options > Custom CSS field.

    /* Hide Header from Sample Page */

    .page-id-2 #page-container header {
    display: none;
    }
    .page-id-2 #page-container {
    padding-top: 0px!important;
    }

    /* Hide Footer from Sample Page */

    .page-id-2 #et-main-area footer {
    display: none;
    }

For posts and other post types (e.g. projects), use .postid-2 instead of .page-id-2 in your CSS.

Method 4: Using CSS in the Page Settings (Without Page/Post ID)

  1. Enable Divi Builder for the page/post.

  2. Click on the three-dot builder icon at the bottom to expand settings.

  3. Click on the gear/settings icon to open Page Settings.

  4. Navigate to the Advanced tab > Custom CSS field.

  5. Add CSS code below to hide the header or footer:

    /* Hide Header from Sample Page */
    #page-container header {
    display: none;
    }
    #page-container {
    padding-top: 0px!important;
    }

    /* Hide Footer from Sample Page */

    #et-main-area footer {
    display: none;
    }

    Method 4 is applicable only if you are using Divi Builder for the page/post. If not, consider one of the first three methods to achieve your goal.

Did this answer your question?