import-export layout Divi

How do I import-export a Divi layout?

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

1,562 words

6

Import-export a Divi layout? Nothing could be easier with the import/export functionality provided by the Divi theme and the Divi Builder. This is certainly my favourite one!

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

Here is the programme:

  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 recognise. The classic links are in purple and sponsored links are in pink.

1 - Why import-export a Divi layout?

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

If you regularly create websites, you are probably 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 canvas), 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 knowledge of web design, will quickly get a "beautiful" and consistent site.

Do you want to move up a gear? Get the Divi theme now!

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

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

In a nutshell, these are layouts designed by the developers/designers of ElegantThemes 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 find out how much the Divi theme costs) and don't forget to enter your licence key (API key) at the Update tab.

Read also: 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 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 consists of several layouts. Generally, you will be able to import a different layout per page (one for the home page, 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-hand side of the window.
  6. If you are happy with it, just click on "Use this layout.

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

Here is a video of the procedure:

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 if 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 so using the icons at the bottom of the screen as you can see in the video above.

Clicking on the "+" icon will take you to the Layout Import window.

4 - How do I 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 BuilderThis is also possible and 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 be exported. For example "contact page",
  3. Click on "Export Divi Builder Page 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 wish 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 specialised sites.

My Resources for Divi is precisely made to give you good tips on this subject, don't hesitate to consult 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 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. The layout must be present on your computer and must be imported in a .JSON format (not zipped, i.e. unzipped).
  5. Note: there is an option to save the current layout as 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 stage, your page has loaded the various modules that make up the imported layout. All you have to do is modify your texts, images, colours etc...

Here is the import procedure in video version:

6 - How do I save a Divi layout in 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 to your library, do the following:

sauvegarder un layout dans la bibliothèque Divi
  1. Go to the page containing the layout you want to save 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 to do 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...

This 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 Select "Import".
  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 return 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's 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!

Find out what you can do with the Divi theme

import-export layout Divi
obtenir divi bouton
quizz divi bouton
newsletter bouton
formation divi bouton
guide divi pdf bouton
bouton support divi

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

5 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

  4. Waguet

    Bonjour Lycia,

    Tout d’abord grand merci pour toutes ces infos toutes plus utiles les unes que les autres. J’ai une petite question concernant l’import de layouts.

    Comme tu l’as indiqué, je tente de passer par la Bibliothèque Divi pour se faire et le message erreur« ce fichier ne devrait pas être importé dans ce contexte », apparait tout de même.

    Il s’agit bien d’un fichier Json provenant de Divi Express.

    Selon toi, d’où pourrait venir le problème?

  5. Lycia Diaz

    Hello ! Cela peut venir de l’endroit où tu veux l’insérer et de l’endroit d’où il provient. Si un layout a été exporté depuis une page, alors il doit être réimporté dans une page. Idem pour la bibliothèque. Ensuite il faut faire gaffe : on ne peut pas importer une mise en page si c’est un module ou une section, et vice-versa. Donc le souci que tu as provient sûrement d’un conflit de ce genre. Vérifie bien et essaye toutes les méthodes. Ça va finir par fonctionner 😉

Soumettre un commentaire

Votre adresse e-mail 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