You can view our complete Theme Builder Documentation here.

The wait for the most anticipated release is finally over! Divi 4.0 is here and with it, the brand new Divi Theme Builder is in your hands. The Theme Builder gives you the ability to build and set site-wide custom headers, footers, post, and product templates, category pages and much more all through the already familiar Divi Builder. 

Once you update to Divi 4.0, the new Divi Theme Builder interface can be accessed from your WordPress Dashboard > Divi > Theme Builder.

(click the image to see the full size)

Here is where you can design your global website template and create new templates for specific areas on your website. As an example, you can create a new template, assign it to all your blog posts and they will be automatically updated with the new structure and design.

When creating a new template, you will be given the option to assign or exclude the template from specific parts of your website. This will give you a lot of control over your website's design.

(click the image to see the full size)

Portability, one of the widely used and time-saving features in the Divi Builder, is also available in the Divi Theme Builder. Export/Import your Divi Theme Builder templates in seconds and save time when working on a new website. The Portability system can be accessed through the portability icon in the top-right corner.

(click the image to see the full size)

Custom Headers And Footers

With the Divi Theme Builder, you are no longer limited to using the default Divi theme header and footer. You can now create custom headers and footers for any part of your website using the Divi Builder and its many modules. 

In addition to this, the new and improved Menu module gives you more layout options and more control over its elements and full control over its design. Create a global custom header and footer or create custom headers and footers that you can assign through the Template Settings powerful conditional logic system.

To create a global header, click on "Add Global Header" and you will be given the option to Build Global Header (from scratch) and Add From Library to add an existing item from your Divi Library.

(click the image to see the full size)

If you chose the Build Global Header option, you can build the layout from scratch. Once you are satisfied with your custom header, save the changes in the layout from the Edit Template Layout screen and then also save the changes in the Divi Theme Builder as well.

(click the image to see the full size)

Note: If you are editing an existing template that is assigned all you need to do is save in the Edit Template Layout screen.

Now, create a global footer the same way you created the global header. After saving the Divi Theme Builder changes, you should notice that all your pages are now using the custom header and footer you've just built.

(click the image to see the full size)

Custom Body

For the custom body template, there are two modules that are particularly useful so it is important to go through the improved Blog module and the new Post Content module.

The Blog module now has two new options, "Posts For Current Page" and "Post Type", which will both come in handy when building custom templates for pages like author, category, tags, archive, or any other index page.

Posts For Current Page

When this option is enabled, the Blog module will display posts for that current page meaning that, if you are on a category page, it will display the posts in that category. Another example would be for the author page where it will return posts for that author. 

In short, this option will use the WordPress current loop on that page.

Post Type

This option will let you choose which post types (post, project, product, etc) you would like to display. This is useful when building templates for a custom post type like products.

The new Post Content module is a simple yet very useful module. This module will display the current post, project or any other post type content, so it's very useful when building custom post templates. The content that will be displayed can be from Divi Builder, Classic WordPress Editor or Block Editor (Gutenberg).

When the module is added on a template, it will display dummy content and on the actual post/page it will display the actual content. The Design settings that are available across all the Divi Builder modules are also available in the Post Content module.

(click the image to see the full size)

With this being said, you are free to use all the other Divi Builder modules to build your custom body layout(s).

Template Assignment

As I briefly mentioned earlier, when you create a template you have the option to assign and/or exclude it from specific areas of your website through the conditional logic system in the Template Settings modal. 

Some areas that are included:

(click the image to see the full size)

Note: This might be slightly different for you if you don't have any custom post type(s) or any plugin that adds post type(s) (ex: WooCommerce's product post type)

This is very easy to use. Simply select the area(s) you want the template to be used on or excluded then save the changes and you are ready to start building the template.

Portability

As you would expect you can export and import your Divi Theme Builder layouts using the Portability system. The system works the same way as the Divi Builder Portability with a few exceptions with the Import functionality that I will explain below.

Export

Export All Templates - Exports all Theme Builder templates

Export Selected Templates - Untick Export All Templates to display a checklist with all your templates.

Import

The Import tab includes two options which are ticked by default. If you don't want these actions to occur, be sure to untick the option(s) before importing.

Override the Default Website Template - Allows the imported template(s) to overwrite the Default Website Template (Global Header, Body and Footer).

Allow import to override existing assignments - Allows the imported template(s) to overwrite the exiting template assignments. As an example, if you have a template assignment for "All Categories" and the imported template has the same assignments, it will overwrite your existing assignment.

You can now edit the templates, their assignments and even delete the ones that you don't want/need. 

(click the image to see the full size)

If you change your mind and want to go back to the default Divi theme template, you can easily reset the Divi Theme Builder by clicking on the delete icon in the top right corner.

(click the image to see the full size)

Theme Builder Actions

Disable Template

You can temporarily disable templates from the triple dot or right-click drop-down menu.

(click the image to see the full size)

To enable a template again, hover over it and click on "Enable Template".

Drag & Drop To Clone

You can drag & drop to clone template parts (header, body, footer) to other templates. Simply drag a template part from a template and drop it on another template where that part is not defined.

(click the image to see the full size)

Disable Global

This option is useful when you want to have a unique header, body and/or footer for that template part. Click on the triple dot icon in the template part and choose "Disable Global". Now you are free to adjust this template part without affecting the global part.

(click the image to see the full size)

Duplicate Template

Click on the duplicate icon at the top of the template you wish to duplicate. The duplicate template will not have any assignments so the template settings will be displayed and you can choose your assignment(s).

(click the image to see the full size)

Toggle Template Part Visibility

You can toggle the template part visibility (show/hide) on frontend by clicking on the eye icon next to the part.

(click the image to see the full size)

History

As with the Divi Builder, we keep a history of the actions made in the Divi Theme Builder so if you find yourself making a mistake or you simply want to go a few steps back, you can use the history to go to a previous action.

To access the History modal, click on the clock icon in the top right corner. You can then select an action from the list to go back to.

(click the image to see the full size)

Note: The editing history is reset when you end your session in the Divi Theme Builder.

Did this answer your question?