Importing Layouts, Sections and Templates

Purchasing the yearly or lifetime subscription gives you access to the entire library of DiviWP layouts, sections and files. 

You can access these files in three different ways:

  1. Via the Layouts pages on the website
    1. For example, clicking on Page Layouts → Home Pages
  2. Via the Sections pages on the website
    1. For example, clicking on Sections → Hero Sections 
  3. Via your account dashboard in your File Downloads section. 
    1. For example, clicking on Account → File Downloads

Please review common issues with importing files here: 

Here's an introduction video demonstrating importing layouts and sections:

1. Importing via the individual layout page 

Importing a layout directly into my page

One of the best features of DiviWP is the ability to import layouts and sections directly into your pages without having to first upload to the Divi Library. 

On each layout and section you will see a button titled " Divi Builder Layout (direct import)". 

If we use our Home Page 1as an example, clicking on the "Divi Builder Layout (direct import) button downloads the following file:

Homepage 1 Page Import.json

Notice how the name of this file doesn't have any mention of "Library" but rather says "Page Import". 

That's because this file can simply be dragged-and-dropped directly into your page!

As dragging the file on your desktop,  Homepage 1 Page Import.json, into the Divi Builder, you'll notice this screen:

You will then see the following settings modal:

You can optionally select "Replace existing content" if you want to remove any of your sections you've already designed. If you do not check this option then the layout will load beneath your last section. 

Finally, clicking on " Import Divi Builder Layout" will import your layout to your page. 

If you're not comfortable dragging and dropping the json file into your page, then you can import files directly into your pages via the Divi Builder. 

If you're editing on the front-end then clicking on up and down arrow will open the Portability options. 

If you're editing on the back-end then clicking on up and down arrow will open the Portability options. 

You can then follow the directions above. 

2. Importing via the individual Section pages 

When viewing an individual section page will notice buttons at the top of each page:

Using the Hero Sections as an example, Clicking the "Page Builder Layout (direct import)" button on the right-hand side will download a file to your desktop titled:

Hero All Sections Page Import.json

The file contains all of the sections along with their titles as a page layout you can import. 

Please Note: This file does not contain all of the individual sections as seperate files. It is a layout of a page with all the sections listed with their titles. This is useful as you can import this page into your website and use it as your own library gallery to browse variations of sections and then create your own presets,  copy/paste or save to your library. 

To download the file with all of the individual sections you can access that from your  Account → File Downloads or by browsing to any section on diviwp.com and then downloading it from there.

Note: The file will be named according to the section you are viewing. For example, if you're on the Blurb Section then this file will be named " Blurb All Sections Page Divi Library Layout.json".

Don't be alarmed by the .json file extension. json stands for "Javascript Object Notation" and is the mechanism Divi uses for importing and exporting layouts and sections within its theme framework. 

Once you have downloaded the file, you can follow the tutorial outlined above on   Adding Divi Library Layouts to your page.

Here is an example of what this page layout looks like after it's been imported in a new page on a website:

Follow the tutorial above on directly importing into your page.

Importing a specific section file

If you want to import a specific section then you must download the specific file associated with the section. 

If we use our Hero Section example again, you'll notice that scrolling down the page lists all of the sections along with their specific layout files. 

Clicking on the "Divi Builder Layout (direct import)" will download a file titled:

Hero Section 1 Page Import.json

You can now follow the prompts as per the instructions above to import a layout directly into your page.

3. Importing via your account dashboard in Account → File Downloads 

Visiting your Account →  File Downloads lists the .zip file that you can download which has every single layout, section and template download in the folder. 

You can unzip the file on your desktop and then browse through the folders to find the layout or section you'd like to import.

Screenshots of every layout and section are included in the ZIP download.

Screenshots of the folder with the Home Pages selected to show you an example of what's included:

Here's an example of the Blurb Sections:

The .zip library file will be updated as new Layouts, Sections and Templates are added.