How to import JSON layout to a Divi theme?

by | Jul 14, 2020 | Divi, Themes, WordPress

Howdy Divi friends!

On this post I’m going to show you how to import a layout to your Divi template. There are various ways to import a design to your page when using Divi theme.

Duplicate (WordPress)

Copy (Divi)

Import/Export (Divi)

Let’s see the options in detail!

Duplicate Plugin

One way is to use Duplicate plugin. Duplicate plugin is great when you are on the same website and you want to import the entire layout (template). And it doesn’t really matter if you are using Divi Themes. It duplicates the page. But if you would like to add a module or a section to your Divi template, you can use a few tricks!

You can download this plugin from here. It’s a very useful plugin if you have a lot of pages to copy and make based on a similar design!

Copy Function

select the element that you want to copy

If you are Divi user, you should be using this function a lot! Because it’s so easy! After you select the element, click on the hamburger icon (•••) and click on Copy Section, Row. Module.

Image 1
When you click on the Copy Row, you can easily paste it by clicking on another hamburger icon or + icon when you add a new element (Section, Row, Module)

Export/Import Function

Another way of copying when you’re not copying from a page to another page on the same website is to use Import/Export.

Export a layout

To export a layout and maybe save the content for later or import it to another website you can do the following:

1. Look for the ••• icon to open up the settings and buttons (not sure why this is collapsed by default)

Image 2

2. Once it is clicked, you can see the other options:

Image 3

3. Click on the last icon on the right with two arrows (two way arrows). And a little window pop up for you to choose a name for the layout.

Image 5

4. Choose a name for your file and then it will be downloaded! It will be saved in JSON format. Remember, the assets (images/files) will not be exported with the JSON file. It will be downloaded by the Divi Plugin later when you import it.

Import a layout

1. Same steps as above (export): ••• icon, arrows, but in the popped window, click on Import tab so you can upload the file first.

Image 6

2. Try to drag and drop the file in there or click on NO FILE SELECTED and upload it in there.

  • Replace existing content: if you want to add the content into the page ONLY. The layout will be added after your existing content.
  • You can also Download a backup by clicking the checkbox Download backup before importing.
  • If you want to import presets from the file, you can click on that too. (If you know what I’m talking about)

You can learn more about this process by watching this video.

Need Help With Your Website?

Related Posts

How to Customize the “Choose File” Button in HTML Forms

How to Customize the “Choose File” Button in HTML Forms

Step 1: The HTML StructureStep 2: CSS to Hide the Default InputStep 3: Add Custom Button DesignStep 4: Display the Selected File's NameStep 5: Add the JavaScriptWrap-Up When designing web forms, you may come across the need to customize the look and feel of the...

Subscribe To Our Newsletter

Join our mailing list to receive the latest news and updates from our team.

You have Successfully Subscribed!

Pin It on Pinterest

Share This