There are several ways you can import our Designs. Importing designs through .JSON files is one of the most common and easy that you will find here, and in this document we will explain how to do it.
The first thing is to understand how many types of .JSON files there are for Divi.
JSON File Types on Divi #
- 1.- JSON files of designs exported directly from pages
- 2.- JSON files with Divi options settings
- 3.- JSON files of designs exported from the Theme Builder or Theme Generator
- 4.- JSON files of designs exported from the library
- 5.- JSON files of Divi theme customizer options
This is important because Divi’s portability system works like this: Each Json file must be imported directly into the context from which it was exported.
In other words, if a design was exported directly from a page, the JSON file that generates that export must be imported directly into a page. In the same way that happens with the files exported from the library, Theme Options or Theme Builder.
Our JSON files will be correctly identified according to the context from which they were exported:
In this way, you will be able to know to which context you will be able to import the files.
Import JSON to Pages #
To import a page layout, you just have to create the page in question, and open the Divi Builder. Once you do, you will open the import file option in the lower context menu:
On the next screen, you will click on the “import” tab, and you will choose the page JSON file you want to import:
And then you will click to import design file in the lower Blue button.
The import process will take time depending on the size of the JSON file and the number of images it will import. It will also depend on the ability of your server to process these files. You must have a server with sufficient capacity to process these files; otherwise the import will not take place.
Once the import process is complete, you will see the final design ready and complete on your page.
Import JSON to Divi Theme Options #
This file mainly works to import the presets into the Divi theme. Many of our designs have these settings, as we consider them important for you to have a fully functional site with our recommended settings.
To import this file, you must go to the Divi theme options and select the icon of the arrows in the main menu of the same:
Then you must do the same import process as above, select the import tab, select the file marked as “Divi theme options” and click on import file.
Once the import process is done, the Divi theme settings will be the same as the ones we use in each of the demo of our designs.
Import JSON from Theme Builder #
These files, like the previous ones, will be correctly identified, and you must import them in the context of the Divi theme Builder.
To import these files, you must go to Divi > Theme Builder > Import.
Here, you can click on the import button, and carry out the import process of each of the Theme Builder files that you have:
Important: Here you will see several options, such as overriding the default site template or allowing import to override existing assignments. This means that if you leave these options selected, and you have a template assigned to this element that you are trying to import, it will overwrite this template and delete it.
For example: If you have already designed a custom Header with the Theme Builder, and you import a new design that is configured to be assigned to your «Header», the one you had designed will be removed. This will be overwritten by this new one.
It is recommended that you leave these options active because that way you will have the designs assigned to what corresponds and without errors.
Once you import an element, you can repeat the process for the rest of the templates that you have downloaded from our portal, which correspond to the context of the Theme Builder.
JSON of layouts exported from library #
These files were exported directly from the library. We mentioned that it is an occasional file because you will find it only in some of our downloadable designs. To import them, all you have to do is go to Divi > Divi Library > Import and there import the complete file that you will find when downloading the templates from our site (if any)
JSON with Theme Customizer Options (occasional) #
This JSON is rare, and you will find it in some layouts. Above all, in templates or sites where we use the settings globally for the entire site. We mentioned that it is an occasional file because you will find it only in some of our downloadable designs.
You must know that if you import the layouts individually but do not see the styles as in the demo, it is because you need this Divi theme customizer options file to import all these settings globally.
It is also important that you know that when importing this file, all the settings that you have previously made in it will be overwritten, so you must be sure to perform this step.
To import this file, you must go to Divi > Theme Customizer > import
And when you click on the button, click on import, and then section the file that you have downloaded from our site.
And ready! With this, you will have the general adjustments that we have given to the subject globally on your site.
Layouts in online stores (Important to read) #
As you know, online stores are highly complex ecosystems to manage. That is why we recommend that for these types of site, you load the complete site in your WordPress installation and from there you start working.
However, we know that some people will want to use only the design that is in each .JSON that they have downloaded in their purchase, and we have good news for you, you can import them without problem 😎
Here it is only important to have several considerations:
- 1. The designs made in our online stores use plugins to generate functionality and styles that will not be imported if you only import a .JSON layout
- 2. You must have a site created, with Woocommerce installed and products already created and categorized so that, when importing the .JSON layouts, the design looks like the demo.
- 3. Finally, you must have installed the plugins that the design needs to look like the demo. You can see the list of plugins that each site has in the product page of each design, at the end of the description, for example:
In our designs, we have this document where you can see the documentation of each plugin used according to the template you have purchased. Consult it to obtain the necessary resources to edit or manage the plugins used in our designs.
Jeff M. Founder of uxdivitemplates.com
Taking these considerations into account, you can only use the .JSON layouts to give your online stores a design and appearance so that they have a design as great as the one in the demo of our products.
On the other hand, in online stores we surely use custom CSS that you will find in the .JSON layouts of the theme builder, of pages such as my account, cart, or checkout.
To change these styles, you should know some CSS code, and check each layout in options> body template configuration> advanced> Custom CSS, this is where you will find all the CSS that touches the classes of the buttons and modules we modify with custom CSS, we leave you a guide picture:
Errors or problems when importing. #
If you follow the previous instructions, it is difficult for you to have an error, but if it is, the most common thing that can happen is that you are trying to import a file in a wrong context.
If you get this error, it is because you are trying to import a JSON file in a context that is not allowed. An example of this would be if you are trying to import a page to the library, or a Theme Builder file to a page.
To correct it, you just have to check the type of file to which it belongs, if it is a page layout, Divi or Theme Builder options, and go and import it in the corresponding context, following the previous steps.
On the other hand, if the error appears when trying to import the layout directly onto the page, like this:
It is likely because you don’t have enough resources assigned to your website from your hosting provider for it to function properly. To check this, you can go to Divi > Support Center and verify the resources assigned to your website from the hosting provider:
To fix this, you need to assign the missing resources to your website from your hosting provider. You can learn more about this in this guide, where we discuss the resources that Divi needs to function properly (spanish).
