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