Get Started

How to import Demos to Divi library and pages

Estimated reading: 3 minutes 33 views

Importing Divi layouts into the Divi Library and then using them on a page can greatly streamline the process of creating and managing web pages. Below is a step-by-step guide on how to import Divi layouts from a JSON file into the Divi Library and apply them to a page.

1. Importing Divi Layouts into the Divi Library

Step 1: Access the Divi Library

  1. Log in to your WordPress admin dashboard.
  2. Navigate to the Divi menu item in the left-hand menu.
  3. Click on Divi Library.

Step 2: Import the Layout

  1. On the Divi Library page, click the Import & Export button at the top.
  2. In the Import & Export pop-up window, switch to the Import tab.
  3. Click Choose File and select your Divi layout JSON file from your computer.
  4. You can choose to check or uncheck options such as:
    • Download backup before importing (recommended for safety).
    • Override existing layouts (if you want to replace existing layouts with the same name).
  5. Click the Import Divi Builder Layouts button.
  6. Wait for the import process to complete. You should see a confirmation message once it’s done, and the new layouts will appear in the Divi Library.

2. Adding the Imported Layout to a Page

Step 1: Create or Edit a Page

  1. Go to Pages in the WordPress dashboard.
  2. You can either create a new page by clicking Add New or edit an existing page by clicking on its title.

Step 2: Enable Divi Builder

  1. On the page edit screen, click on the Use Divi Builder button to enable the Divi Builder.

Step 3: Load the Layout

  1. Once the Divi Builder interface loads, you can choose to Build From Scratch, Choose A Premade Layout, or Clone An Existing Page.
  2. To use a layout from the library, click the Load from Library icon (usually represented by a plus icon in the menu).
  3. In the Load from Library pop-up, go to the Your Saved Layouts tab to find the layout you imported earlier.
  4. Click on the layout you want to use, and it will load onto the page.

Step 4: Customize the Layout

  1. After loading the layout, you can customize it using the Divi Builder. Edit text, images, sections, modules, and other elements as needed.
  2. Utilize the design settings and advanced settings in each module for further customization.

Step 5: Save and Publish

  1. Once you are satisfied with the layout and design, click the Save button to save your changes.
  2. Finally, click Publish (or Update if editing an existing page) to make the page live.

Additional Tips

  • Backup: Always make sure to back up your website and Divi Library before importing new layouts, to avoid any potential data loss.
  • Testing: After applying the layout, check the page on different devices and browsers to ensure it displays correctly.
  • Optimization: Use Divi’s built-in performance optimization features to ensure that the imported layouts do not slow down your website.

By following these steps, you can easily import and use Divi layouts from a JSON file, enhancing your website with professionally designed pages.

Table of Content