How to Remove the Header and Footer in the Divi WordPress Theme

Whether you are designing a high-converting landing page, a dedicated squeeze page, or a sleek “Coming Soon” placeholder, there are many scenarios where you need to completely strip the global header and footer from a specific layout. Eliminating these standard navigational areas removes distractions and focuses user attention purely on your central content.

Elegant Themes’ Divi Framework provides multiple ways to accomplish this. In this quick technical guide, we will break down the most effective methods—ranging from clean CSS overrides to Divi’s native template system.

Method 1: Global or Page-Specific CSS Overrides

Using CSS gives you absolute structural control. Depending on your objective, you can deploy these overrides globally across your entire site or restrict them to individual node IDs.

Scenario A: Site-Wide Removal

If you need an entirely headless or specialized implementation where the default theme header and footer should never render, add the following CSS snippet to your configuration:

 

Scenario B: Target a Single Page Only

To safely restrict this behavior to a standalone landing page, prepend the rules with WordPress’s unique body class identifier (e.g., .page-id-123):

Developer Pro-Tip: To quickly fetch the precise class target, inspect the page source and look for the <body> tag attributes, or simply grab the post parameter integer right from your admin panel’s address bar when editing the page (e.g., post=123).

Where to Safely Inject Custom CSS

To avoid losing modifications during future theme framework updates, use one of the following integration points:

1. Divi Theme Options (Global): Navigate to Divi $\rightarrow$ Theme Options $\rightarrow$ General. Scroll to the bottom interface, paste the rules inside the Custom CSS repository, and commit changes.

2. Page Settings Override (Isolated): Open the Divi Visual Builder on your target page. Click the purple Gear Icon (Page Settings) in the center dock. Navigate to Advanced $\rightarrow$ Custom CSS and paste the snippet directly into the panel.

Method 2: Utilizing the Native Divi Blank Template (No Code)

For standard deployment where writing manual overrides isn’t necessary, Divi ships with a built-in template designed specifically for this use case.

1. Open up the backend block editor or document settings panel for your specific page.

2. Locate the Page Attributes metadata block on the right-hand sidebar.

3. Under the Template dropdown select box, shift from Default Template to Blank Page.

4. Publish or Update your page.

Performance Advantage: Choosing the native Blank Page template instructs the WordPress engine to skip rendering the theme’s core header and footer template files completely. This reduces DOM element volume and minimizes overhead layout shifts during rendering.