The Divi Theme Builder is an interface within Divi that allows you to use the Divi Builder to construct theme templates and assign those custom templates to pages or posts across your theme, including custom post types like

As well as custom pages such as:

With the Theme Builder, you have complete control over every element of your website. And because you have the power to use or exclude templates on any page or post throughout your site, there is really no longer any need to manually edit a theme template file ever again.

In short, the Divi Theme Builder takes the power of the Divi Builder and extends it to all areas of the Divi Theme, allowing you to build custom headers, footers, category pages, product templates, blog post templates, 404 pages and more.

Here are just a few things you can do with the Theme Builder:

The Divi Theme Builder can be accessed on the backend within your WordPress dashboard under the Divi menu item.

From the WordPress dashboard, navigate to Divi → Theme Builder.

This will bring you to the main Divi Theme Builder interface, where you will manage all of your templates.

By default, there is a single template item called Default Website Template, which cannot be deleted but can be modified.

This is the standard theme template, and if left unedited, the three areas will use the standard Divi styles.

If the Header Area of the Default Website Template is edited, the theme header is replaced across the entire site with the customized Divi Builder content. The same goes for the Body and Footer areas.

The default website template comprises three areas:

To start creating a new template content area, you only need to click on one of the respective empty areas.

If you would like to add and build a new global header for your website, click the Add Global Header area and select Build Global Header.

Much like you would when designing a page in Divi, you are prompted to choose how you would like to start building the layout.

For example, you could jump-start the design with a premade layout or a previously designed header layout by selecting the option Choose a Premade Layout.

However, select Build From Scratch if you want to build the header from scratch.

Once you have selected to build the layout from scratch, you will be brought to the Template Layout Editor.

This is where you will use the Divi Builder to design your header layout, just like you would design a normal page or post with the Divi Builder.

Remember that whatever you see in this template layout editor will be what shows on the header of your page.

If this is a global header, it will show throughout your entire site by default, replacing the standard Divi header. Once you have finished designing your header, save the layout before you exit the template layout editor.

Now, you should see a green Global Header populating the Global Header space of the default website template. The green color is to remind you that it is global.

Your website will now have a new global header that replaces the standard Divi header.

In most cases, you will not want to design a global body area for your default theme template because you will most likely want more control over the body page-by-page.

For example, you may want to forego creating a global body area for your default website template (which will be applied to all pages/posts by default), but you may want to create a new template with a custom template body area for all of your blog posts.

That way, you don't have to worry about the design of each new post. You only need to add new body content. To add a Global Body to your default website template, click the Add Global Body area and select Build Global Body.

This will bring you to the Template Layout Editor, where you can design the Global body area of your website.

The Post Content module conveniently displays mock content to make it easy to add styling to the content in anticipation of the actual content for all pages and posts.

This post content module is a placeholder for the content that is added to the content of a page in Divi.

If you are not using Divi Builder on a page, the post content module will display the content within the WYSIWYG editor of a page or post on the backend.

Here is an example of how that content would appear in the Global Body area of the template.

Suppose you use the Divi Builder to edit a page or post. The area available for the Divi Builder content will be contained within the designated area of the post content module in the template's body.

That is why, in most cases, I would only suggest having a global body area for your website if you have a specific reason.

Creating a Global body might put unnecessary limitations on your ability to design page content in Divi.

Suppose you choose a global body area for your default website template. In that case, make sure your post content module spans the full width of the layout so that you aren't limited by spacing when designing pages with the Divi Builder.

The Divi Theme Builder allows you to replace the standard Divi footer (and footer bar) with a new custom footer that you can design completely from scratch using the Divi Builder.

To build a global footer for your website, click the Add Global Footer area and select Build Global Footer.

Then, use the power of the Divi Builder to design the footer within the Template Layout Editor. Remember to save the layout.

A sample page would look like this once you have a Global Header, Body, and Footer in place.

As mentioned earlier, the Global Body isn't necessary. You can easily delete the Global Body by clicking the trash icon.

Without the Global Body, you have complete control over the design of your page using the Divi Builder.

Once you have finished designing your page, the Global Header and Global Footer will still remain while the page content is displayed beautifully as expected.

The default website template controls the default template for the entire site. However, custom templates allow you to override the default template by giving a custom template to any page or post on your website. In other words, custom templates allow you to create templates for pages or posts you don't want to inherit the default template.

Click the Add New Template box with the gray plus icon to create a new template.

This will bring up the Template Settings modal that prompts you to manage the template assignments.

In other words, you must designate on what pages or posts you want to assign the template. More on this below.

The template assignments can be selected under the Use on tab and the Exclude From tab.

It is up to you whether or not you want to base your assignments on the Use on logic or the Exclude From logic.

But feel free to use a combination of both if needed.

You will also find templates for every page, post, and/or archive. You can assign templates to WooCommerce Pages and Products if you have WooCommerce installed on your site.

Templates can be assigned on a macro level and/or micro level.

You can even select multiple assignments, giving you complete control over where you would like your template assigned throughout your website.

If the user assigns a template to a page already assigned to another template, the newly saved template will take precedence, and the previous assignment on the other template will be removed.

A warning message will appear notifying you of this before saving the template.

Once all assignments have been selected, you will see a new template name generated based on your selection(s).

When hovering over the template card title area, a tooltip shows the list of everything the template is used on or excluded from.

To rename the template, click on the template name to edit the title inline.

If you do not select a template assignment, you will see warning text instead of the template name that reads Unassigned.

Like the default website template (or Global template), a custom template will also have the following areas:

If the default website template has global template layouts added to any of the three areas, those global layouts will automatically be added to the new template.

However, you don't have to keep that Global layout on your new template. You can use the Template area options to delete the layout and build a new one from scratch or disable global and tweak the layout for the specific needs of the layout.

For example, if you have a Global Header on the default website template, your new template will inherit that Global Header. You can choose to do one of the following:

You may add a layout from your Divi library when adding a custom template area to your new template. This functionality mimics adding a new layout to your page when using the Divi Builder.

To add a layout to the template area from the library, click the template area and select Add from Library.

The add from the library popup will appear, where you can choose any premade, saved, or existing page layouts.

Once the layout has been added to the template area, you can select the gear icon to edit the layout using the Divi Builder within the Template Layout Editor.

Template areas can be dragged and dropped to other template content areas. This is a quick and easy way to duplicate and place a template area in one drag-and-drop action.

Dragging doesn't remove it from the area it's being dragged FROM - it only populates or replaces the area it's dragged TO. Think of it as duplication rather than cut and paste.

In addition to customizing each template area, you can toggle an area's visibility to either show or hide it on the Front End by clicking the eye icon next to each area.

When hovering over a template within the theme builder, a template settings menu will appear at the top left of the template box.

This menu resembles those you see when hovering over a Section, Row, or Module within the Divi Builder.

The menu includes icons for the following functions:

Building a custom header will involve the same process as building a global header.

The only difference is that a custom header is not global, so it only gets displayed on posts and/or pages assigned to the template, including the custom header.

The header is where you will need to include your primary menu for your website, but you may also add countless elements and designs to your header.

For more info, check out this complete post on how to create a custom global header using Divi's Theme Builder.

Building a custom body area for your template involves the same process as building a global body, and it can be a great way to add design and/or content to the body of many pages or posts at once.

And if you use dynamic content, you can streamline the design and functionality of your blog posts or WooCommerce Products.

Building a custom footer involves the same process as building a global footer.

It is important to remember that any custom footer added to a template will completely override Divi's standard footer, including the bottom footer bar.

For a comprehensive tutorial on how to build a custom footer from scratch, check out our post on how to create a custom footer with Divi's Theme Builder.

When you are finished building your template, you must save Template Settings changes.

To do this, click the Save button at the bottom of the modal.

If you wish to cancel the changes made to the layout, click the X icon in the upper right.

Like with Divi Theme Options, you must save your changes to the Theme Builder for those changes to take effect. If you refresh the page or close the window, changes will be canceled/lost.

Dynamic content (i.e., Title, Featured Image, Post Content, etc.) can be included in your Global or Custom Template layouts.

This powerful tool allows you to streamline the design and functionality of a website, especially for blog posts and/or WooCommerce Products.

Blog posts are a great example of where a custom template with dynamic content is needed.

This will allow you to design a blog post template that will be applied to all blog posts site-wide using the Divi Builder and dynamic content.

Once done, all you would need to do is update the actual body content for all future posts. The new post content will inherit the design of the custom template.

Here is a quick example of how to do this:

Or use a text module that pulls in the Post Publish Date.

Most importantly, you must include the Post Content module when building any custom body layout for your template.

The Post Content module includes the area for page or post content to be displayed within the Body Area of the template.

Here is an illustration of an entire layout for a blog post template using dynamic content:

Once the template is created, you can easily create a new blog post using the default WordPress post editor and have that blog post inherit the template design you created using the Divi Theme Builder.

With this custom template, you can also use the Divi Builder on blog posts. It will work the same way.

Whatever you build with the Divi Builder for your post will show inside the area designated by the Post Content Module on the template layout.

Dynamic content doesn't just apply to blog post templates. You can also use Divi's built-in WooCommerce (or Woo) Modules to build a custom site-wide Product Page Template.

To do this, simply create a new template and assign the template to All Products. Then add a custom body to the template and click to build the body layout using the template editor.

Then, use the Divi Builder and the Woo Modules to design the Product page template.

Now, whenever you create a new product on the backend using the standard product page editor, the product will automatically inherit the design of the assigned body template.

The Theme Builder also makes it easy to design complete Category Page templates.

The key to creating a template for a category page is to create a custom body area and use the Blog Module to display the posts for the current page.

This is easily done with a simple click when adding a blog module to the category page template layout.

You can combine blog modules with post offsets for unique category page layouts.

For a complete walk-through, check out our post on how to build a category page template for your blog using the Divi Theme Builder.

The Theme Builder also makes it easy to design a 404-page template for your Divi website.

For a complete walk-through, check out our post on how to create a 404 page template using the Divi Theme Builder.

The Theme Builder also makes designing a Search Results Page template for your Divi website easy. Like category page templates, the key to creating a template for search results is to create a custom body area and use the Blog Module to display the posts for the current page.

This is easily done with a simple click when adding a blog module to the category page template layout.

For a complete walk-through, check out our post on how to build a Search Results page template for your website using the Divi Theme Builder.

You can export all or some theme templates in one file using the Theme Builder Portability options. These export files will include all library layouts associated with every template and all template assignment data.

To import a theme builder template JSON file to your website, you will need to deploy the portability modal and select the import tab. Select the file you'd like to import, update the override options (if needed), and click to import the file.

Theme Builder exports are what we're calling Theme Builder Packs.

Think of them like Divi Layout Packs, except for your overall website structure instead of individual page designs.

Theme Builder packs remove the need for child themes in many cases and allow you to create pre-built theme templates that can be used on any website.

For more, check out the complete post on how to use Divi's Theme Builder portability features.