8.1 Import & Export JSON Layouts in Divi (+ Free Download)

Download the layout for The Divi Crib »

One of Divi’s most powerful features is the ability to export and import your layouts, making it easy to use them across different websites. This feature isn’t limited to just page layouts; it can also be applied to your Divi Theme Builder templates, including global headers, footers, category pages, and more. Here’s how to do it:

Step 1: Download the Layouts

First, you’ll need to download the layouts you want to import. The download links can be found in the description below the video. Once on VictorDuse.com.com, select the English version of Divi from the menu. Go to “Resources” and then click on “Download Divi Layouts.” Scroll down, and you’ll find the “Divi Crib Complete Website” layout. Click on “Download Layout.”

You’ll be prompted to subscribe to the Divi Mundo newsletter to access the free download. You can unsubscribe at any time, and your email address won’t be shared.

Step 2: Import the Layouts

– Download the files provided. You’ll typically have two zip files, one for page layouts and another for theme builder layouts.

– Make sure you have a clean Divi installation on your WordPress website, and ensure that you’re using the Divi theme.

– Go to your WordPress dashboard and navigate to the “Divi > Theme Builder” section.

– Start with the theme builder layouts. Click on the portability icon (an arrow up and down) to the top right. Choose the “Import” tab.

– You can configure settings such as overriding the default website template, allowing imports to override existing assignments, and importing presets for fonts, colors, and designs. Consider the presets carefully since they may override your existing settings.

– Upload the zip file you downloaded. Then, click to import the Divi Theme Builder templates.

– Save the changes, and you should see the imported layouts, including the global header and footer, category pages, post assignments, search results, and the 404 page.

Step 3: Create Menus

After importing the layouts, you’ll notice that your pages are empty. You will also need to recreate your menus. To create a menu:

– Go to “Appearance” in your WordPress dashboard and select “Menus.”

– Create your primary menu and add the pages you need to include in the menu. Save your menu.

– Make sure to assign this menu as your primary menu.

Step 4: Import Page Layouts

For each page layout you want to import, you can follow these steps:

– Navigate to the respective page and edit it.

– Download the .zip file for that page layout.

– Click “Edit with the Divi Builder” to activate the Divi Builder.

– Choose “Build from Scratch.”

– Open the portability icon by clicking the purple circle at the bottom and import the .json file from your downloaded .zip.

– Replace the existing content if needed.

– Import any presets as required.

– Once the import is complete, save your changes and exit the visual builder.

This process will populate your pages with the content from the imported layouts. Make any additional modifications as necessary.

Step 5: Export Layouts (Optional)

If you want to export your designs and use them on other websites, you can follow a similar process to what you did for importing. Go to the Divi Theme Builder or the page you want to export, click on the portability icon, and choose “Export.” Give your export a name and select which templates or layouts you want to export. Download the .json file and keep it for future use.

This makes it simple to both import and export layouts in Divi, allowing you to reuse your designs and save time on website development.