How do I import/export theme templates with the Divi Theme Builder?

In this new tutorial, discover how to import/export theme templates created with the new Divi Theme Builder.

These actions are very similar to the Divi layout import/export functionality except for a few new options that have been introduced.

We will look at this in detail.

Announcement: this article contains affiliate links that you will easily recognise. The classic links are in purple and sponsored links are in pink.

1 - What is a theme template?

A theme template should not be confused with a layout.

Layouts are used to create the design within a web page. Layouts are the result of building the page using a page builder, in our case using Divi's Visual Builder.

The theme templates, on the other hand, have been introduced since the version 4.0 of Divi. They allow you to create the design of the site and to build page templates.

Each page template has a specific functionality that has been defined in the WordPress template file hierarchy.

These template files (page templates) cannot be modified with a page builder, which is why Divi 4.0 was so eagerly awaited!

Now you can create theme templates directly using Divi's Theme Builder, so you don't have to hand-code these page templates (like the 404 page, category page, header, footer etc.).

This means that we really don't need to master PHP to create great WordPress "themes" anymore!

Did you know that you can test Divi for free? Go to this page and click on "TRY IT FOR FREE

2 - Importing a theme template: 3 possibilities

To import (or export) theme templates, simply go to the Divi > Theme Builder.

You will be able to import single templates or batches of templates (packs containing several templates).

For this tutorial, I used a ready-made template pack that I downloaded from the Elegant Themes website. I'll give you all the links at the end of the article.

The advantage of importing/exporting theme templates is that you can easily migrate a design from site to site. You will save a lot of time and can even use this feature when website redesign.

Importing a template pack (or a simple template) can be done according to 3 options:

1. Import a template without impacting the current design
2. Import a template without impacting the overall design
3. Import a global theme template

Let's look at it in detail...

Option 1: import a theme template without impacting the current design

This way of importing theme templates is ideal if you have already built the design of your site and do not wish to modify the essentials (header, footer etc.).

Go to the Divi > Theme Builder tab and click on the double arrow icon.

A popup appears:

1. Click on the Importtab
2. Choose the file to import: you must have it on your computer. These are .json files. For this example, I have chosen the "pack" (all) version.
3. Uncheck all radio buttons
4. Click on "Import Divi Theme Builder Template".

A new window opens and offers you 2 options:

"This import contains references to the global headers, body and/or footers of the website from which they were exported. How would you like to import these references?
1 - Link them to the overall header, body and/or footer of this website.
2 - Import them as static layouts from the website from which they were exported. This may take several minutes depending on the number of references imported."

Option 1: "Relink... allows you to import only the "Custom body. This means that the import system omits all headers and footers contained in the theme templates.

Thus, you keep the design of the header and footer of your current site, as shown in the following "before/after" pictures:

You can see that only the body of the page has changed and that the header (and footer) have remained unchanged.

Of course, these actions have only impacted the design but the content (texts and images) are still present.

Option 2: import a theme template without impacting the overall design

Go to the Divi > Theme Builder tab and click on the double arrow icon.

A popup appears:

1. Click on the Importtab
2. Choose the file to import (.json).
3. Uncheck all radio buttons
4. Click on "Import Divi Theme Builder Template".

The same message appears and let's see what happens if we choose the other option:

Option 2: "Import them as static layout..." allows you to import all template parts (header, body and footer) as an independent design.

This means that the imported design(s) will only affect the page(s) assigned to it.

The other pages of your site will not change.

Option 3: Import a global theme template

The last option (the one that is the most interesting if you are developing your site) will allow you to import a global design that will act on the whole site, or almost (it all depends on the content of the pack you are importing).

As with the other options, go to the Divi > Theme Builder tab and click on the double arrow icon.

A popup appears:

1. Click on the Importtab
2. Choose the file to import (.json).
3. Do not uncheck the two default options: "Override..." and "Allow import...".
4. Click on "Import Divi Theme Builder Template".

Please wait for the download.

As you can see on the above screenshot some modules are green (overall elements) but above all the Default Website Template (template on the top left) has been imported: this is the one that will impact the whole design of your site.

Here is what it looks like on the front end with these "before/after" captures:

The design of my pages has changed, the header and footer too. The only thing that hasn't changed is the content of my pages.

3 - What if the import is not suitable?

Just imported Divi theme templates and it's not what you expected?

Don't worry, just go back to the Divi > Theme Builder tab and delete (bin icon) the part(s) of the template you don't like. You can even delete them entirely and your site will look like new again.

Another option: you can edit them to suit your taste!

4 - Exporting a theme template: 2 possibilities

Exporting a theme template is also very easy, it only takes 3 clicks...

Option 1: export a simple theme template

This is always on the Divi > Theme Builder

Move the mouse over the template to be exported: a small pop-up menu appears. Click on the double arrow icon.

A popup appears:

1. Give a name to the file you are going to export
2. Click on "Export Divi Theme Builder Template
3. Save your .json file locally on your computer.

This exported file can be used on another site using the Divi theme, you just have to reimport it.

Option 2: Exporting multiple theme templates at once

Go to the tab Divi > Theme Builder.

In the purple bar, click on the double arrow icon (portability).

A popup appears:

1. From the tab "Export" tab.
2. Give the export file a name.
3. Leave the box checked if you wish to export all your templates.
4. Or uncheck the box to select only the templates you are interested in.
5. Click on "Export Divi Theme Builder Template and save them locally.

5 - Where can I find free Divi theme templates to download?

The Divi Theme Builder is still very new, however, the designers at Elegant Themes are hard at work and the site already allows you to download the first 5 packs for free.

Others will certainly follow: to avoid missing them, check the Divi resources page available on the official website.

In the meantime, you can download the first 5 packs:

• Theme Builder Pack 1
• Theme Builder Pack 2
• Theme Builder Pack 3
• Theme Builder Pack 4
• Theme Builder Pack 5
• Theme Builder Pack 6

It remains to be seen whether a future version of Divi will allow theme templates to be downloaded directly from the back-office, as the Visual Builder does with layouts?

Good idea!