How do I import-export a Divi layout?

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

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

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:

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

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:

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