Divi's Theme Builder lets you design your website's header and footer with the same Visual Builder you use for pages.
You create header and footer layouts in Theme Builder, assign them as global templates, and Divi 5 uses them across your entire site (or only on specific pages you choose).
If you're new to Divi 5, think of Theme Builder as the place where you control the "frame" around your content: logo, menu, top bar, footer links, credits, and more.
Before you start
Make sure:
Divi 5 is installed and active.
You can access Divi → Theme Builder in your WordPress dashboard.
You've set up at least one menu under Appearance → Menus (Theme Builder headers use the Menu module).
Step 1: Open Theme Builder
Log in to your WordPress Dashboard.
Go to Divi → Theme Builder.
You'll see the Default Website Template with three areas:
Global Header
Global Body
Global Footer
You'll use the Theme Builder to tell Divi which header and footer layout to use everywhere (global), and where you want exceptions (custom templates).
Step 2: Understand global vs custom headers and footers
Theme Builder works with templates:
The Default Website Template controls the default header, body, and footer for your whole site.
Global Header / Global Footer inside the Default Website Template show on every page by default.
Additional templates can override the global header or footer on specific pages, posts, or categories.
If you only want one header and one footer for your site, you only need the Default Website Template and its Global Header and Global Footer.
Step 3: Create a global header
You start by building a Global Header that appears site-wide.
Go to Divi → Theme Builder.
On the Default Website Template, click Add Global Header.
Choose Build Global Header.
Divi opens the Visual Builder for the header area.
From here, you use the usual Divi building blocks (sections, rows, columns, modules) just like a page:
Add a Section with a Row (for example, one row with one column).
Add the Menu module to display your logo.
In the Menu module's settings → Content tab → Menu, choose the WordPress menu you want to display.
In the Menu module's settings → Content tab → Logo, choose your website's logo.
In the Menu module's settings → Design tab → Menu Text → Text Alignment, choose Right alignment so that the menu items will be right-aligned on the page.
Use the Design tab to adjust spacing, alignment, and colors so the header matches your design system. You can also make the header fixed or sticky using the section/row options if you need it.
When you're done:
Click the Save button in the top toolbar.
Click the Exit button to exit back to Theme Builder.
Click Save Changes in the top right of the Theme Builder screen so the new header goes live.
Step 4: Create a global footer
Next, you build a Global Footer the same way.
Go to Divi → Theme Builder.
On the Default Website Template, click Add Global Footer.
Choose Build Global Footer.
Common footer elements you might add:
Text module for a short about blurb.
Social Follow module for social icons.
Email Optin module or contact info.
Text module for copyright / footer credits (or use the footer credits options if you prefer).
You design the footer layout like any other Divi layout. Use multiple sections and rows if you want different background colors, columns, or top/bottom bars.
When you're finished:
Click the Save button in the top toolbar.
Click the Exit button to exit back to Theme Builder.
Click Save Changes in the top right of the Theme Builder screen so the new header goes live.
Step 5: Use different headers and footers on specific pages (optional)
Once your global header and footer are in place, you can use Theme Builder to customize your header and footer for only certain pages.
In Divi → Theme Builder, click Add New Template.
In the assignment modal, choose where this template should apply (for example, Specific Page → About, All Posts, Product Category X, etc.).
Inside that new template, click Add Custom Header or Add Custom Footer and build them just like you did for the global versions.
⚠︎ Note: If you already have the Global Header and Global Footer created, those will be automatically copied to the new template. To be able to edit them and apply without actually changing the Global Header and/or Footer template, right-click on them and choose Disable Global.
By disabling the Global functionality, any changes that will be made in the Header and/or Footer will only apply to that specific template without affecting the Global Header and/or Footer templates.
Key points:
If a template has a Custom Header, it overrides the Global Header for that template's pages.
If it doesn't, the page continues to use the Global Header. Same for the footer.
This is how you create special headers (for example, a simplified landing page header) or custom footers for specific sections of your site.
Step 6: Back up and reuse Theme Builder templates
Use the Theme Builder portability tools to back up and reuse your header and footer templates.
To Export:
Go to Divi → Theme Builder.
Click the Portability (double arrow) icon.
Use the Export tab
Give the export file a name.
Leave the Export All Templates option enabled to export all the current templates, or uncheck it and select only particular templates to be exported.
Click the Export Divi Theme Builder Template button to export all Theme Builder templates or only selected ones to a JSON file.
Store that file as a backup or use it on another Divi site.
To import:
Go to Divi → Theme Builder.
Click the Portability (double arrow) icon again.
Open the Import tab.
Choose your JSON file and import.
This lets you move your header/footer system between sites or restore it if something goes wrong.
Bonus Tips
There are specific page templates where you might not want to display a Header and/or a Footer layout, for example, for the template assigned to your 404 Page. In this case, you can remove the display of the Header and/or Footer layouts by clicking on the visibility icon.
Go to Divi → Theme Builder.
Create a new template by clicking the + Add New Template and choosing Build New Template.
In the assignment modal, choose the 404 page.
Click the Create Template button.
Click the Eye icon to deactivate the Header and/or Footer template.
Tips for using Theme Builder on your header and footer
A few simple best practices when you use Theme Builder to customize your website's header and footer:
Keep the header simple and focused on navigation and key actions; don't overload it.
Make sure your menu works well on mobile; test the hamburger menu and spacing on phones and tablets.
Use your global design system (Theme Customizer + Theme Options) so your header/footer colors and fonts match the rest of the site.
Use global header/footer for most pages, and reserve custom templates for special cases like landing pages, blog posts, or WooCommerce pages.
Once you're comfortable with Theme Builder for your header and footer, you can use the same system to build templates for your blog posts, product pages, 404 page, search results, and more.