How to import and export a Divi layout?

Updated on 22/10/2019 | Published on 10/10/2018 | 3 comments

Import and export a Divi layout? Nothing could be easier with the import/export functionality provided by the theme Divi and the Divi Builder. It's certainly my favorite!

The ability to import or export a layout - a layout - will save you a lot of time. And if you don't use it yet, you should read this article carefully because this feature will change the way you use Divi!

If you wish to import/export theme templates, it's this way! This feature is available since version 4.0 of Divi.

Here is the program:

  1. Why import/export a Divi layout?
  2. How to import a "premade layout" available in the Divi Builder?
  3. How to import a "premade layout" via the Visual Builder?
  4. How to export a Divi layout?
  5. How to import an external layout to your site?
  6. How to save a Divi layout in the library?
  7. What if you get the message "this file should not be imported in this context"?
  8. Conclusion...
import-export layout Divi

Advertisement: This article contains affiliate links that you will easily recognize. The classic links are in purple and sponsored links are in pink.

1 - Why import and export a Divi layout?

Divi's import/export functionality saves you a lot of time.

If you regularly create websites, you are certainly looking for productivity...

The idea is to be able to create a layout and reuse it later, whether in the same site or in another.

We are talking about a layout (a layout - a canvas), not a design, this means that you can import and export the succession of Divi modules present in your page and then change the images and texts.

This is different from import/export of the theme templates offered by Divi 4.0.x.

I believe that the main advantage of importing and exporting a Divi layout is its simplicity of use but above all the idea that any user, even without any knowledge of WebDesign, will quickly obtain a "magnificent" and coherent site.

Want to take it to the next level? Get the Divi theme now!

2 - How to import a "premade layout" available in the Divi Builder?

We had already talked about these "premade layout" that you find in the Divi Builder in a final article....

In short, these are layouts designed by ElegantThemes developers/designers and available to you - completely free of charge - via the Divi Builder.

As I write these lines, there are 139 packs offering 1029 layouts to download and the range is growing every week!

Important note: to be able to use these layouts, you must use a "not cracked" Divi theme (read this article to know how much the Divi theme costs) and you should not forget to enter your license key (API key) at the Update tab.

Also to be read: how to update your Divi theme?

Now let's see how import-export works....

importer un layout Divi - 1
importer-exporter un layout Divi
  1. When you are in a page, activate the Divi Builder and click on "Download the model".
  2. Choose the tab "Premade Layout".
  3. View the various layouts packages and select the one that suits your project.
  4. Each pack is composed of several layouts. Generally, you can import a different layout per page (one for the home, one for the blog, one for the contact page etc....). Select the layout to import into your page.
  5. You can view it in its entirety on the left side of the window.
  6. If it is convenient for you, all you have to do is click on "Use this layout".

Wait a few moments, save your draft (or publish your page) and check the result. Finally, you will only have to edit each module to change your texts, images, typos, colors etc....

Here is the procedure in video:

3 - How to import a "premade layout" via the Visual Builder?

Divi users are often shared, some prefer to use the Divi Builder (back-end) and others prefer to use the Visual Builder (front-end).

Even if since version 5.x of WordPress, the Visual Builder is predominant

Here are two more videos to show you how to import a pre-made layout, but this time via the Divi visual builder:

In this first version, you activate the visual builder and choose the option "choose a premade layout" (the middle one).

In this case it's easy, the layouts screen appears and you just have to make your choice.

On the other hand, if for some reason, you didn't choose the option to import a layout from the beginning, you can still do it using the icons at the bottom of the screen as you can see in the video above.

By clicking on the "+" icon, you will access the layouts import window.

4 - How to export a Divi layout?

In some cases, you may need to export a layout you have designed, either to keep it or to use it in another site...

With the Divi Builderit's as easy as importing.

Here's how to do it:

exporter un layout Divi
  1. Go to the page whose layout is to be exported. At the top of the Divi generator, you will click on the discrete icon with a double arrow,
  2. A popup opens. Enter the name of your layout to be exported. For example "contact page",
  3. Click on "Export Divi Manufacturer's Layout",
  4. Wait for the export to take place,
  5. Save this layout on your computer. For your information, the exported layouts are in.JSON format

Here is the video version:

5 - How to import a layout external to your site?

If you have exported a layout - as indicated in the previous paragraph (4) - and you want to import it into another site done with Divi, the operation will be very simple...

There is also another case where you could import an external layout to your site: if you have downloaded free layouts offered by specialized sites.

Ma Resources for Divi section is made to give you some good tips on this subject, don't hesitate to check it from time to time to see if I haven't added links to free resources for Divi to download...

importer un layout externe à son site Divi
  1. Go to the page where you want to import the layout. At the top of the Divi generator, you will click on the discrete icon with a double arrow,
  2. A popup opens. Select the "Import" tab,
  3. Click on "choose a file",
  4. A window opens to choose the layout to import. This one must be present in your computer and must be imported in a JSON format (not zipped, i. e. uncompressed).
  5. Note: an option allows you to save the current layout because importing a layout replaces your current content with the imported one.
  6. Click on "Import Divi Construction Layout" to start the import
  7. Wait until the import is complete.

Here, at this point, your page has loaded the various modules that make up the imported layout. All you have to do is modify your texts, images, colors etc....

Here is the import procedure in video version:

6 - How to save a Divi layout in the library?

All layouts you save or import will be stored in Divi's library (available at the Divi tab > Divi Library).

Saving a layout can have one advantage: you can save a layout before making many changes to one of your pages. This way, you can quickly return to a previous layout with a simple click.

To save a layout in your library, here's how to do it:

sauvegarder un layout dans la bibliothèque Divi
  1. Go to the page that contains the layout to be saved and click on "save in the library"
  2. Name your layout
  3. Click on "Save"
  4. In the the Divi tab > Divi Library
  5. You will find all your saved layouts

Here is the backup procedure in video version:

7 - What if you get the message "this file should not be imported in this context"?

When you want to import a layout external to your Divi site, you may encounter an error message "this file should not be imported in this context".

If this is your case, don't panic, there is another solution: import the layout from the library rather than from the Divi constructor of the page in question...

Here is what you will have to do:

  1. Go to the tab Divi > Divi Library
  2. At the top, select "Import & Export"
  3. In the popup that opens, choose the tab "Import"
  4. Choose your layout that is available on your computer (in.JSON format)
  5. Validate by clicking on "Import Divi Builder Layouts"
  6. Then, you can return to the page where you want to import the layout
  7. Click on download the model > your saved layouts

8- Conclusion....

If you didn't know about this feature, or at least if you hadn't yet taken the time to use it, I suppose you understood its added value....

Importing and exporting a Divi layout will save you a lot of time!

There is still a lot to say on this subject and especially on the fact that we can do the same kind of import/export with Divi modules, imagine then the power of these uses!

Discover all you can do with the Divi theme

import-export layout Divi
How to import-export a layout with Divi Builder ?

1,562 words


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!

3 Commentaires

  1. SCHMITT Jean-Luc

    Bonsoir Lycia

    Une Question: Si je crée une One Page avec un Menu à onglet d’ancrage ( je m’explique : je vais créer une page pour une grosse agence immobilier en one page pour présenter le bien en question plan 2d + video + photo + visite virtuel + contact ) est il possible de sauvegarder l’intégralité de la page et menu – en . JSON – ( en somme de faire un Template de page + menu )


  2. Lycia Diaz

    Salut Jean-Luc,
    Tu peux effectivement exporter ton layout (ta page) en .json mais pas ton menu. Tu peux cependant créer un template de thème avec un header global et l’exporter également. Toutefois, si tu le réimportes dans un autre site, ce sera le menu de l’autre site qui sera affiché.

  3. SCHMITT Jean-Luc

    Merci pour le retour

    Bonne journée

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

Share This