Skip to main content
All CollectionsDivi 5Features
Editing and Customizing Templates in Divi 5
Editing and Customizing Templates in Divi 5

Learn how to edit and customize templates in Divi 5 using the Template Layout Editor, dynamic content, and reusable design elements.

Updated today

Editing and customizing templates in Divi 5 allows you to fine-tune your website’s design while maintaining consistency.

This article explains the Template Layout Editor, dynamic content integration, and creating custom templates for blogs, WooCommerce products, archives, and error pages.

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:

It allows you to drag and drop the selected template to change its order.

Open the selected template's settings.

Duplicate the selected template.

Save the selected template to either Divi Library or Divi Cloud.

Export the selected template.

Contextual menu. You can manage the template assignments, duplicate, disable, delete, and more. The contextual menu can also be triggered by right-clicking on the template card.

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

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

  1. Include Essential Elements: Add key components such as a logo, primary navigation, using the Menu module, contact details, and a call-to-action button.

  2. Keep Navigation Clear – Ensure menus are easily read and accessible on all devices.

  3. Optimize for Mobile – Test responsiveness across devices. Use Divi’s responsive settings to adjust spacing, font sizes, and menu layouts.

  4. Utilize Global Colors and Fonts – Maintain design consistency by applying global styles across all header elements.

  5. Use the Divi Library for Efficiency – Save your header layout to the Divi Library for quick reuse and easy edits across multiple projects.

  6. 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

  1. Keep It Concise: To avoid clutter, include only essential elements like navigation, contact details, and social media links.

  2. Use a Clear Hierarchy: Organize footer sections logically, prioritizing key information like legal notices, support links, and calls to action.

  3. Ensure Readability: Use high-contrast text and appropriate font sizes to keep footer content legible across all devices.

  4. Make It Mobile-Friendly: Test footer responsiveness and optimize spacing, alignment, and link tap areas for smaller screens.

  5. Include a Call to Action: Add a newsletter signup, contact button, or important site links to keep users engaged.

  6. Add Quick Navigation: Include secondary menu links to quickly access important pages such as privacy policies, terms of service, and FAQs.

  7. Keep Copyright Info Updated: Ensure the copyright text reflects the current year and includes necessary legal disclaimers.

Important Note: A Global Body is usually not required. However, if you add one, ensure the Post Content module is included in its layout. This will ensure that each page/post's content is displayed on the Front End.

Create a Blog Post Template

The Blog Post template is assigned to All Posts, which helps you maintain a consistent design for all published posts.

  1. Go to Divi → Theme Builder.

  2. Click on the Add New Template option.

  3. Choose the Build New Template option.

  4. Assign it to All Posts and click on the Create Template button.

  5. Click on the Add Custom Body option and choose the Build Custom Body option.

  6. Insert the Post Title module.

  7. Insert the Post Content module and any other static modules that fit your design.

  8. Click on the Save button to save your work.

  9. Click the Exit button to exit Visual Builder and return to Theme Builder.

Note: The All Posts templates should always include the Post Title and the Post Content module.

Divi 5 - All Posts Template

Create All Archive Template

An archive page in WordPress is a dynamically generated page that displays a list of posts grouped by a specific taxonomy, date, author, or post type.

  1. Go to Divi → Theme Builder.

  2. Click on the Add New Template option.

  3. Choose the Build New Template option.

  4. In the Template Settings modal, scroll down to the Archive Pages section, choose All Archive Pages, and click the Create Template button.

  5. Click on the Add Custom Body option and choose the Build Custom Body option.

  6. Add the Blog module to the Custom Body's layout and enable the Posts For Current Page option.

  7. Add any other modules that are relevant to your design.

  8. Click on the Save button to save your work.

  9. Click the Exit button to exit Visual Builder and return to Theme Builder.

Divi 5 - All Archive Pages Template

Create a Custom 404 Template

The 404 Template will be displayed for the No Results Found Page. Instead of displaying a default WordPress 404 page, you can build an engaging template to help visitors navigate to your landing page or other relevant pages.

  1. Go to Divi → Theme Builder.

  2. Click on the Add New Template option.

  3. Choose the Build New Template option.

  4. In the Template Settings modal, scroll down to the Other section, choose 404 Page, and click the Create Template button.

  5. Click on the Add Custom Body option and choose the Build Custom Body option.

  6. Add any modules that are relevant to your design.

  7. Click on the Save button to save your work.

  8. Click the Exit button to exit Visual Builder and return to Theme Builder.

Divi 5 - 404 Page Template

Create a Custom Search Results Template

The Search Results page is the page that displays the results when a user performs a search using the built-in WordPress search function.

It dynamically generates a list of posts, pages, or other content types that match the search query.

  1. Go to Divi → Theme Builder.

  2. Click on the Add New Template option.

  3. Choose the Build New Template option.

  4. In the Template Settings modal, scroll down to the Other section, choose Search Results, and click the Create Template button.

  5. Click on the Add Custom Body option and choose the Build Custom Body option.

  6. Add the Blog module to the Custom Body's layout and enable the Posts For Current Page option.

  7. Click on the Save button to save your work.

  8. Click the Exit button to exit Visual Builder and return to Theme Builder.

Divi 5 - Search Results Template

Did this answer your question?