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

Published on 22/10/2019 | 4 comments

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.

Hiérarchie des fichiers modèle de WordPress
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
types d'import de template Divi
Results of the different types of theme template import

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.).

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 options: uncheck all boxes

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".
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, 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.

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

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

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

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:

importer sans option
Option: no box checked
  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".
import them as static layout
Import them as static layout" option

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.

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

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

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:

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

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

Exporter une template
Exporting 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 reimport it.

Option 2: Exporting 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 templates to export
  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:

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!

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

1,544 words

6

You might like it too:

Utilisez les couleurs globales de Divi pour plus de productivité !

Use Divi's global colours for more productivity!

🚀 Do you create your clients' websites with WordPress and Divi and are looking for productivity?
🥳 Perfect, I explain how to use Divi's global colours to avoid wasting time with multiple actions when you want to change a colour on your entire site...

4 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

  3. 7hil

    BonjouR Lydia,

    et merci pour ce super travail que tu fait pour nous !

    Voici le message que je lis quand je veu faire des modif s sr ma page ?

    Module de contenu post manquant
    Un modèle a été attribué à cet article à l’aide du Générateur de thèmes. Toutefois, le modèle utilisé ne contient pas de module Publier le contenu.

    Un module de publication de contenu est requis pour ajouter un contenu unique dans le modèle de générateur de thèmes. Une fois qu’un module de contenu de publication a été ajouté au modèle, vous pourrez ajouter un contenu de publication unique dans cette zone pour chaque publication à l’aide du modèle.

    Modèle actuel: Modèle de site Web par défaut

    Editer Thème Builder

    merci de ton aide 🙂
    Belle soirée

    7hil

  4. Lycia Diaz

    Salut 7hil ! C’est normal. Quand tu crée un modèle avec le thème Builder, tu dois impérativement y inclure le module Publier un contenu. Tout est expliqué ici : https://astucesdivi.com/module-post-content/

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée.

Je souhaite recevoir les news du blog Astuces Divi !

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

New Divi training!

55 videos to master the Divi Visual Builder like a pro: ⏱ 3h30 of theory + 👩🏻💻 6h00 of practical application + 🤝 30min. of individual coaching in visio.

(CPF eligible training)

Pin It on Pinterest

Shares
Share This