How do I import-export a Divi layout?

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

Import and export a Divi layout? It's easy with the import/export feature provided by the Divi theme and the Divi Builder. It is certainly the one I prefer!

The ability to import or export a layout will save you a lot of time . And if you're not using 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 Divi version 4.0.

Here is the program:

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

Announcement: 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-export a Divi layout?

Divi's import/export feature 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're talking about a layout, not a design, which 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 theme templates provided by Divi 4.0.x.

I think the biggest advantage of importing and exporting a Divi layout is its ease of use, but more importantly, the idea that any user, even without any WebDesign knowledge, will quickly get a "beautiful" and consistent site.

Do you want to take it to the next level? Get the Divi theme now!

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

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

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

At the time of writing, there are 139 packs offering 1029 layouts to download and the range is growing every week!!!

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

Also read: how to update your Divi theme?

Now let's see how the 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 Click on "Download Template"..
  2. Choose the tab "Premade Layout.
  3. View the various layout packages and select the one that suits your project.
  4. Each pack is composed of several layouts. Generally, you will be able to 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 in your page.
  5. You can view it in its entirety on the left side of the window.
  6. If it suits you, you will only have to click on "Use this layout.

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

Here is the procedure in video:

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

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

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

So 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 layout screen appears and you just have to make your choice.

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

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

4 - How do I export a Divi layout?

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

With the Divi BuilderIt is also possible and it is as simple 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 window opens. Enter the name of your layout to export. For example "contact page",
  3. Click on Click on "Export Divi Builder Layout".,
  4. Wait for the export,
  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 an external layout 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 made 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.

My Resources for Divi is precisely made to give you 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'll click on the discrete icon with a double arrow,
  2. A popup window will open. Select the "Import" tab,
  3. Click on 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. unzipped).
  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 Click on "Import Divi Construction Layout". to start the import
  7. Wait until the import is complete.

At this point, your page has loaded the various modules that make up the imported layout. You just have to modify your texts, images, colors etc...

Here is the import procedure in video version:

6 - How do I save a Divi layout to the library?

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

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

To save a layout in your library, here is 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 Click on "Save to Library".
  2. Name your layout
  3. Click on Click on "Save".
  4. In 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 an external layout to your Divi site, you may get 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 should do:

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

8- Conclusion...

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

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

There is a lot more to say about this, including the fact that we can do the same kind of import/export with Divi modules, so imagine the power of these uses!

See what you can do with the Divi theme

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

1,562 words

6

You should 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...

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 )

    Merci
    Jean-Luc

  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 e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

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.

Pin It on Pinterest

Shares
Share This