Subscribe On YouTube

Join other subscribers and enjoy other Divi video tutorials!

How To Hide The Divi Header Or Footer On Specific Pages

Nelson Miller Profile Orange
In this tutorial I will show you how to hide the Divi header or footer on specific pages using the default header or theme builder template.

▶️ Please watch the video above to get all the exciting details! 👆

Method #1: Use The Blank Page Template

This first method only applies if you want to hide BOTH the header and footer on one specific page. This method of using the “Blank Page” template is often the first thing that people suggest when the question comes up. The Divi theme comes with a default and blank template. The default has the header and footer (when not using the Theme Builder) and the blank template means it does not have the header or footer.

You can access this setting by clicking edit and going to the backend of the page. On the right side is a Template dropdown selection setting like shown in the screenshot:

set the Divi page attribute template to blank

Blank Template…But Wait!

The problem with this method is that it hides both the header AND footer. But most of the time, you probably want to keep the footer or the header and hide the other. If you want to remove both, then certainly use this method, and you are done, this is the best and easiest method. But if you only want to hide the header and keep the footer, or hide the footer and keep the header, you will need to use one of the other options listed below.

Method #2: Hide The Theme Builder Template

This second method only applies if you are using the Divi Theme Builder, and NOT the default one with the Customizer. If you have a global header template applied to all the pages on your site, but you only want to hide the header on one or more pages, this method is for you. Note, this assumes you are using a “global” header or footer, meaning you have a “Default Website Template” that applies to all the pages on your site (and is a puke green color).

Here are the very easy steps. Start by adding a new template. A window will open to choose the template assignment. Hover over the “Specific Pages” option and select the page name from the list.

select a specific page to show or hide the header in Divi Theme Builder

Now this new template is assigned to that specific selected page. It will inherit the global header and footer templates, but since you want to hide one or both, simply select the eye icon, and it will disable it for that page.

how to hide Divi header or footer Theme Builder template on specfici page

Go check the frontend and you will see that the header or footer is hidden on that page, but showing on others.

There are other ways you could accomplish this same thing, such as by excluding pages with the “Exclude From” option, but I think this is the easiest.

Method #3: Use CSS To Hide the Header Or footer

If you prefer to use code, or only want to hide the footer OR footer, then this method is for you! This method allows you to hide the header and not the footer, or hide the footer and not the header.

Locate The Page ID

The first step here is to locate the page ID. This can be found several ways. I suggest looking at my previous tutorial about How To Target A Specific Page ID With CSS. It would not make sense for me to repeat everything again, so be sure to check that video if you are new to finding the page ID and using CSS to target a specific page.

How To Target A Specific Page or Post Type ID In Divi with CSS Tutorial by Pee Aye Creative

Add The CSS Snippet

After getting the page ID, you will then need to target the header or footer and simply use the display: none; property. It couldn’t be much easier than that. (Don’t forget to replace the page ID number.)

If you are using our free Divi child theme, place this snippet into the style.css file. Otherwise, place this in your Divi>Theme Options>Custom CSS code box. If you need help, check out our complete guide on Where To Add Custom Code In Divi.

Hide The Header On Specific Page

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

Hide The Footer On Specific Page

.page-id-14899 #main-footer {
	display: none;

Subscribe For More Things Like This!

At the start of each month, we send out a recap newsletter from the month before with family news, Divi news, our latest tutorials, and product news. Occasionally, if the news is too exciting to wait, we will send out another email separate from the monthly newsletter. That’s what you get when you subscribe, and of course you can unsubscribe if you are no longer interested!

Blog Post Optin

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy


Submit a Comment

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

Recent Posts


Your Cart