How to import/export theme templates with the "Divi Theme Builder"?

Published on 22/10/2019 | 2 comments

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

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

We will look at all this in detail.

Advertisement: This article contains affiliate links that you will easily recognize. 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, and 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 to create the design of the site and to build page templates.

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

Hiérarchie des fichiers modèle de WordPress
Hierarchy of WordPress template files

These template files (page templates) cannot be modified using a page builder: that's why Divi version 4.0 was so expected!

Now, theme templates are created directly using Divi's Theme Builder, which avoids hand coding these page templates (such as page 404, category page, header, footer etc.).

This means that we really no longer need to master PHP to create great WordPress "themes"!

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

2 - Import a theme template: 3 possibilities

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

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

For this tutorial, I used a pack of ready-to-use templates that I downloaded from the Elegant Themes website. I will give you all the links at the end of the article.

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

The import of a template package (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
types d'import de template Divi
Results of the different types of theme template import

Let's look at all this 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 you do not want to modify the main part (header, footer etc.).

Onglet Theme Builder > Portabilité
Theme Builder tab > Portability (arrow icon)

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

Importer sans options
Import without option: uncheck all boxes

A popup appears:

  1. Click on the Import tab
  2. Choose the file to import: you must have it on your computer. These are.json files. For this example, I chose the "pack" version (all).
  3. Uncheck all radio buttons
  4. Click on "Import Divi Theme Builder Template".
choix alternatif d'import
Additional popup inviting you to choose between 2 options. Here, I choose "relink"

A new window opens and offers you 2 options:

"This import contains references to the global headers, bodies and/or footers of the website from which they were exported. How would you like to import these references?
1 - Link them to the global 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 fails to insert all the headers and footers contained in the theme templates.

importation sans option
Theme Builder" tab after import without option checked.

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

Page de l'article importée
Page of the article before and after
Page d'archive après import
Archive page before and after

You can notice that only the body of the page has changed design and that the header (and footer) has remained intact.

Obviously, 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:

importer sans option
Option: no checkbox ticked
  1. Click on the Import tab
  2. Choose the file to import (.json).
  3. Uncheck all radio buttons
  4. Click on "Import Divi Theme Builder Template".
import them as static layout
Option "import them as static layout"

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 parts of templates (header, body and footer) as an independent design.

Onglet Theme Builder
Theme Builder tab after import

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 entire site, or almost (depending on the content of the package 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:

options d'import par défaut
Default import options: "Override" & "Allow import".
  1. Click on the Import tab
  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".
import des templates
Theme Builder" tab after importing templates

Wait for the download time.

As you can see from the above capture, some modules are green (global elements) but especially the Default Website Template (template at the top left) has been imported: it is this one that will impact the entire and global design of your site.

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

template de page d'accueil
Home page before/after
Page des catégories du blog
Blog categories page before/after

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

3 - What to do if the import is not suitable?

You just imported Divi theme templates and this is not what you expected?

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

Another option: you can edit them to modify them to your liking!

4 - Exporting a theme template: 2 possibilities

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

Option 1: Export a simple theme template

This always happens at the tab Divi > Theme Builder

Exporter une template
Export a single template

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

fichier d'export
Name the export file

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 re-import it.

Option 2: Export multiple theme templates at once

Go to the tab Divi > Theme Builder.

portabilité Divi
Import or export one or more theme templates

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

A popup appears:

sélectionner les templates à exporter
Export all or select the templates to export
  1. From the tab "Export".
  2. Give a name to the export file.
  3. Leave the box checked if you want to export all your templates.
  4. Or uncheck the box to select only the templates that interest you.
  5. Click on "Export Divi Theme Builder Template" and register them locally.

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

The Divi Theme Builder is still very recent, however, the designers of Elegant Themes are not idle and the site already allows to download the first 5 packs for free.

Others will certainly follow: so as not to miss them, consult the Divi resources page available on the official website.

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

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

Good idea!

importer ou exporter un template de thème Divi
importer template de thème
import-export a theme template

1,544 words

6

You should like it too:

Formation Divi PDF : un guide pas à pas

Divi PDF training: a step-by-step guide

What better than a Divi PDF training to master this WordPress Theme, its Visual Builder and its Theme Builder? It's as if a trainer invited himself in your home... Discover its content!

8 fonctionnalités du Divi Visual Builder que vous devriez utiliser !

8 Divi Visual Builder features you should use!

Are you using all the features offered by the Divi Visual Builder? Some of them are little known and yet so effective! Discover now the 8 Divi options that will save you a lot of time! A great user experience in perspective!

2 Commentaires

  1. Leslie

    J’ai téléchargé 2 pages Layout de 2 thèmes différents.
    Je construit une 3eme page, ou j’intègre des blocs de l’un et de l’autre pour personnaliser la page comme je le veux.
    Cependant, je rencontre un problème : dès que je quitte mon visuel builder, tout se détruit.
    POURQUOI ?
    Avez-vous une astuce ?

  2. Lycia Diaz

    Salut Leslie, il peut y avoir plusieurs raisons à cela :

    1/ Essaye de désactiver l’option « Génération de fichiers CSS statiques » disponible dans l’onglet Divi > Option du Thème > Créateur > Avancé. Cela pourrait régler le problème.
    2/ Sinon, mets tes Thèmes et/ou plugins à jour
    3/ Vérifie que ton hébergement tourne sur une version récente de PHP (minimum 7.1).

    Voilà, tiens-nous au courant.

    Lycia

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Pin It on Pinterest

Shares
Share This