How to Hide the Header and Footer in Divi

In some cases, you might want to hide the Divi header and footer on a certain page or for your entire website. For example, on a landing page, you might want to hide the header for less distraction.

In this tutorial, I will be covering how you can accomplish this.

Hide the Divi header and footer with the blank page option

Open the page in the backend which you want to hide the header and footer. On the right, you will find the page attributes and under template, you can choose Blank Page.

Hide the header and footer with the blank page option

With this option you can hide the header and footer from that page.

Hide the Divi header

For the entire website

If you want to hide the header from the entire website you can use this snippet.

Place this snippet in Divi > Theme Options > CSS

#main-header { 
	display: none; 
}

#page-container {
	padding-top: 0px !important;
	margin-top: -1px !important;
}

For a particular page

If you want to hide the header from a particular page you can use the following snippet.

.page-id-1098 #main-header { 
	display: none; 
}

.page-id-1098 #page-container {
	padding-top: 0px !important;
	margin-top: -1px !important;
}

You need to change the page-id number with yours. You can find the page-id number by going to your page in the backend and from the URL you will find your ID number.

Find the page id number

Hide the Divi footer

For the entire website

To hide the footer on the entire website you can use this snippet.

#main-footer {
	display: none;
}

For a particular page

To hide the footer on a particualr page you can use this snippet.

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

Change the ID number with yours same way as for the header.