Skip to main content

Have questions? I can help!

< All Topics
Print
Table of Contents

To get the access to the header & footer, navigate to Divi> Theme Builder. 

If you have eixisting header or footer you can download the JSON file for your archive and delete them on the website by using the bin icon. 

 

D5 - Theme Builder Default Website Template

Create a Global Header

A global Header is a site-wide header used on all pages.

  1. Go to Divi > Theme Builder.
  2. In the Default Website Template, click Add Global Header.
  3. Choose the Build a Global Header option.
  4. Build the header's layout.
  5. Click on the Save button to save your work.
  6. Click the Exit button to exit Visual Builder and return to Theme Builder.

Best practices when building a Global Header

  • Include Essential Elements: Add key components such as a logo, primary navigation, using the Menu module, contact details, and a call-to-action button.
  • Keep Navigation Clear – Ensure menus are easily read and accessible on all devices.
  • Optimize for Mobile – Test responsiveness across devices. Use Divi’s responsive settings to adjust spacing, font sizes, and menu layouts.
  • Utilize Global Colors and Fonts – Maintain design consistency by applying global styles across all header elements.
  • Use the Divi Library for Efficiency – Save your header layout to the Divi Library for quick reuse and easy edits across multiple projects.
  • Minimize Excessive Animations – Subtle animations can enhance the design, but too many can distract users and slow page load times.

Create a Global Footer

A global Footer is a site-wide footer used on all pages.

  1. Go to Divi > Theme Builder.
  2. In the Default Website Template, click Add Global Footer.
  3. Choose the Build a Global Header option.
  4. Build the footer's layout.
  5. Click on the Save button to save your work.
  6. Click the Exit button to exit Visual Builder and return to Theme Builder.

Best practices when building a Global Footer

  • Keep It Concise: To avoid clutter, include only essential elements like navigation, contact details, and social media links.
  • Use a Clear Hierarchy: Organize footer sections logically, prioritizing key information like legal notices, support links, and calls to action.
  • Ensure Readability: Use high-contrast text and appropriate font sizes to keep footer content legible across all devices.
  • Make It Mobile-Friendly: Test footer responsiveness and optimize spacing, alignment, and link tap areas for smaller screens.
  • Include a Call to Action: Add a newsletter signup, contact button, or important site links to keep users engaged.
  • Add Quick Navigation: Include secondary menu links to quickly access important pages such as privacy policies, terms of service, and FAQs.
  • Keep Copyright Info Updated: Ensure the copyright text reflects the current year and includes necessary legal disclaimers.

    Template's Quick Actions

    Each Theme Builder Template has a set of quick actions designed to streamline your workflow. Hover over any Template to reveal the following quick actions:

     

    Clicking on the Eye icon deactivates the template's Header, Custom Body, and Footer sections.

    More read:
    https://help.elegantthemes.com/en/articles/10586867-building-templates-for-your-website-with-theme-builder-in-divi-5