Since version 4.0, Divi Builder comes with a theme builder feature that allows you to create custom templates for your theme. You can, for instance, create a custom header template to replace the default header template of your theme. A downside of Divi Builder’s theme builder feature is the absence of premade templates on the template library. As a comparison, Elementor offers premade templates on the template library to streamline your workflow in creating a custom template.
Even so, it doesn’t mean that Elegant Themes (the developer of Divi Builder) offers no premade template at all. They regularly release new premade templates via blog posts. If you find a suited custom template on the Elegant Themes blog, you can simply download it and import it to your website. Here is how to import a theme builder template in Divi Builder.
Importing a Theme Builder Layout in Divi Builder
Before we get started, one thing you need to know first. Elegant Themes uses the term “layout” instead of “template”. In this context, both terms refer to the same thing, so you don’t need to be confused.
In Divi Builder, layout is divided into three types according to their context.
- Layouts exported from an individual page (et_builder)
- Layouts exported from Divi Library (et_builder_layouts)
- Layouts exported from theme builder (et_theme_builder)
You can only import a layout according to its context. For instance, a theme builder layout (with the “context et_theme_builder”) can only be imported via theme builder. You can’t import a theme builder layout on a page. To check the context of the layout you want to import, you can open the JSON file of the associated layout using a text editor (i.e. Notepad). The context is described in the beginning section of the file as you can see on the screenshot below.
In this example, we will demonstrate how to import a custom header layout which we downloaded from the Elegant Themes blog post.
Once downloaded, unzip the ZIP file to get the JSON file of the layout. Next, go to Divi -> Theme Builder on your WordPress dashboard. On the theme builder page, click the two-arrow icon on the right side.
On the appearing window, click the Import tab and select the JSON file of the layout you want to import by clicking NO FILE SELECTED. End by clicking the Import Divi Theme Builder Templates button to start importing the layout.
Wait a moment until Divi Builder is done importing the layout.
By default, the custom header layout you have imported will be applied to the entire site, but only on parts that use the default templates of your theme. If you, say, created a custom template for blog posts, the custom header layout won’t be applied to blog posts unless you assigned it.
To assign a custom header layout you have just imported to a custom blog post template (and other custom templates), you can click Add Custom Header on the associated custom template and select Use Global Header.
Don’t forget to click the Save Changes button to apply the changes you have made.
The Bottom Line
Theme builder is one of the features offered by Divi. You can use it to create custom templates for site parts like header, footer, archive pages, to single post. In Divi, you can have two options to create a new custom template. First, you can start from scratch. Second, you can use a pre-made template, which you can import.
To import a pre-made template itself, you need to know where the pre-made template was exported from. If it was exported right from the Divi Builder editor, you need to import it from the Divi Builder as well. Similarly, if it was exported from the Theme Builder screen, then you need to import it from the Theme Builder screen too.
