Divi comes with a header and footer that will be displayed by default throughout your website.
The header and/or footer can be hidden together or individually on any or all pages as required.
- You can hide the Divi header and footer on specific page by manually selecting the blank page template when creating a page.
- You can hide the Divi header and/or footer on any selected page or post by using the Divi Theme Builder to create and set templates with or without the header and footer elements.
Hide the Divi header and footer with the blank page option
In most cases, you will simply want to hide both the Divi header & footer from a particular page.
This would be the case for a landing page or sales page where the user should not be distracted by navigation options so that they are more likely to convert to signup or purchase. This is very quick and easy to implement.
To hide both the header and footer from a WordPress page in Divi you will need to;
- Add a new page, or choose to edit an existing page.
- In the right-hand page options scroll down to the Page Attributes
- Under Page Attributes, set the Template dropdown to Blank Page
- This will completely remove both the header and footer from your page
Hide the Divi header and/or footer with the Theme Builder
The Divi Theme Builder is a template system within Divi that allows you to use the Divi Builder to create templates and assign them to any pages or posts on your website.
You can use the Divi Theme Builder to create a template that will be selectively assigned to your website using the Template Settings checkboxes. You can set the template to Hide On or Exclude From any pages or posts you choose.
Within your new template, you can then use the Hide On Front End (eye icon) option to hide the Divi header, the Divi footer, or both the header and footer. This will hide the Divi primary menu & secondary menu and/or the Divi footer area & bottom bar.
Note – If you want to apply your hidden header and/or footer on your entire website you can simply click on the Hide On Frontend icons within the Default Website Template, but you will most likely want to apply to a selected page and/or post, or to a group of selected pages and/or posts. To do this you can create a new Theme Builder template.
To create a custom template to hide the header and/or footer you will need to;
- Go to Divi in your WordPress dashboard and click on the Divi Theme Builder menu item
- In your Theme Builder dashboard click on the + icon to create a new Theme Builder template
- The Template Settings window will pop up and you can select the pages/posts you want to apply the template to by checking the Use On checkboxes. You can also use the Exclude From tab checkboxes to specify any pages/posts the template should not be used on
- Chose where to apply your new template and click on the Create Template button
- To hide your Divi header on pages and posts assigned to this template, click on the eye icon adjacent to your Add Custom Header title.
- To hide your Divi footer on pages and posts assigned to this template, click on the eye icon adjacent to your Add Custom Footer title.
- Click the Save Changes button and your headers and/or footer will now be hidden
Posts related to creating Divi and header templates for Divi
Whilst you may need to hide your Divi header and/or footer on certain areas of your website you will also want to have a custom header and/or footer on other areas of your website.
The Theme Builder allows you to create such custom templates and assign them at will. The following posts will help you customize your Divi header and footer areas.
- Download 5 free Divi footer layouts
- How to build a global custom footer for Divi
- Divi header layouts for the Theme Builder
- Make your Divi 4.0 header sticky or fixed