How to Hide the Header and Footer in Divi Theme?

The elegant theme provides Divi builder with better features, and that’s why it’s so popular. For example, the Divi theme adds the header by default, but sometimes you don’t need this header. There are several ways to hide the header and footer in the Divi theme. 

You might want to hide the Divi header and footer on a specific page or across your entire website in some situations. For instance, you might want to hide the header on a landing page because it might reduce the user’s attention. On the other hand, sometimes, you may need to Change footer credits and text for a professional appearance of your site.

Using different methods, we’ll show you how to hide the header and footer in the Divi in this article. First, we’ll hide the header using default or classic editor and then use the code to hide the header and footer. So let’s start!

Hide the Divi header and footer by default options

First, you need to open that page that wants to hide its header and footer by logging into the WordPress admin panel and selecting that page from the left sidebar. 

Once you open the desired page, you can change the settings by navigating to the Template on the right sidebar menu. Now, in the template dropdown menu, choose a Blank Page.

After that, click on the Update button, and it will remove the header and footer on this page.

Hide the header and footer with the Theme Builder

The Divi Theme Builder is a framework mechanism within Divi that allows users to create layouts and apply them to your website’s pages or articles.

Using the Template Configuration checkbox, you may design a template that will be selectively allocated to your website using the Divi Theme Builder. You can hide or exclude the layout from any web pages or articles you like.

You may then use the Hide On Front End (Eye Icon) option within your newer version to hide the Divi header, Divi footer, or both the header and footer. In addition, It will hide the Divi primary and secondary menus and the Divi footer area and bottom bar.

Finally, you can use the Hide On Frontend Eye Icons within the Default Website Template to deploy your hidden header and footer to your entire website.

Hide the header and footer specific page or post 

You’ll probably want to apply it to a single page and post. You can accomplish this by creating a new Theme Builder template. In your WordPress dashboard, go to Divi and click the Divi Theme Builder menu.

To build a new Theme Builder template, go to your Theme Builder dashboard and click on the Add New Template button.

The Template Settings window will appear, you can utilize the checkboxes on the Exclude From tab to indicate that post or page should not apply to the template.  All these settings are for the specific post, page, or selected desire page. 

After creating the template, you can add the custom header or footer. Also, hide both of them by clicking on the Eye Icon.

Now select the page, post, or author, and then click on the Save button.

Manually Hide the header for the whole website.

If you have knowledge about the coding and technical stuff, then use this method to hide the header. You can use this snippet to hide the header across the entire webpage. 

First, go to the WordPress admin dashboard, navigate to the Divi and click on Theme Options. Then scroll down to the bottom and paste the code in the Custom CSS section.

#main-header { 
	display: none; 
}

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

For a particular page

If you don’t want to hide the header from the website, use this code to hide it for a specific page. Copy this line of code and paste it into the Custom CSS section. 

Note: Use your Page ID, and it appears in the URL on the specific page as shown below:

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

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

Hide footer For the entire website

Sometimes you need the header but don’t need the footer for any reason. So to hide the footer, use these lines of code and paste them into the Custom CSS section. 

Note: If you want to hide both header and footer, then use the above code.

 #main-footer {
	display: none;
} 

For a particular page

if you need to hide the footer from a specific page, then use this snippet. Copy and paste it into the Custom CSS section.

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