Select Page

Build Awesome Websites With Divi Pixel

How to Import Divi Pixel Layouts

Divi Pixel Layout Packs are available for free to all our customers. Each layout is using full potential of the Divi Theme and Divi Pixel plugin, so to have them working properly, Divi Theme and Divi Pixel plugin must be installed. In this article, we will show you how to import all template assets to have your page looking exactly as on our demo page.

Note: Some browsers, like Safari might not recognize .json files. It is recommended to use Chrome browser for importing layouts.

Download Package Contents

Each Layout Pack package contains multiple files. To make the template looking as on the demo page, we need to import all assets/settings that have been used and in this article, we will guide you through the process.

Each Package contains:
• Divi Pixel Settings Export file (.json)
• Divi Theme Options Export file (.json)
• Demo Content – Theme Customizer settings (.dat), Widgets (.wie) and Content (.xml)
• Icon Pack files
• Divi Builder Layouts folder (this is a backup in case you don’t want to import all settings)

 

1. Import Divi Pixel Settings

In this first step, we will import Divi Pixel plugin settings to our website.

 

  1. Go to Divi → Divi Pixel and click Export/Import icon located in the top-right window corner
  2. Click Select File in Import dialog window
  3. Navigate to the Layout Pack files and select layout-name-divi-pixel-settings-export.json
  4. Click Import

 

2. Import Divi Theme Settings

To import Divi Theme Settings please follow these steps:

 

  1. Go to Divi → Theme Options
  2. Click Portability icon located in the top right corner
  3. Switch to Import tab
  4. Click Choose File and select layout-name-divi-theme-options-export.json
  5. Click Import Divi Theme Settings button

 

3. Import Demo Content

In this step, we will be importing demo content with theme customizer settings and widgets. To do that we will use the One-Click Demo Import plugin from the WordPress repository. Once the content is imported, the plugin can be removed.

 

  1. Go to Plugins → Add New and search for One Click Demo Import
  2. Click Install and Activate
  1. Go to Appearance → Import Demo Data
  2. Upload appropriate files that can be found in the “Import Files” folder and click Import Demo

4. Set Primary Menu

After importing the demo content, our primary menu has not been assigned and in this step, we will fix it. If the Layout Pack comes with the Secondary Menu, that should be also assigned.

  1. Go to Appearance → Menus
  2. Select Primary Menu checkbox
  3. Click Save Menu button

 

5. Select Menu for CTA Button

Once you have assigned the primary menu for your website, you can now add CTA button. To do that you need to select the menu where CTA Button will be displayed.

 

  1. Go to Divi → Divi Pixel → General
  2. Scroll to CTA Button Settings and select the menu where the CTA Button should be displayed
  3. Click the Save Changes button

6. Remove Widgets

Our layout packs are using footer built with the Divi Builder, so there is no point to use widgets. In this step, we will remove Footer Widgets added to WordPress by default. You can skip this step if the widgets have been already removed or are not present.

 

  1. Go to Divi → Theme Customizer
  2. Navigate to Widgets → Footer Area #1
  3. Remove Archives, Categories and Meta blocks
  4. Click the Publish button

7. Set Homepage and Permalinks

By default, WordPress is displaying the post archive page on our homepage. In this step, we will set our layout landing page to be a homepage and will also tweak the permalinks settings, which by default aren’t SEO friendly.

 

  1. In your WP Dashboard got to Settings → Reading
  2. Select A static page box and select Homepage in the dropdown menu

In this step, we will change Permalinks settings to “Post Name”.

 

  1. Go to Settings → Permalinks
  2. Select Post name checkbox
  3. Click Save Changes

8. Import and set Single Post Template

Our website is nearly ready! In this step, we will import and set the Single Post Template.

 

  1. Go to Divi → Theme Builder
  2. Click the Portability icon located in the top right window corner
  3. Select the Import tab
  4. Click Choose File and navigate to Layout Pack package. The single-post-template.json can be  found in the Divi Builder Layouts folder
  5. Click Import Divi Theme Builder Templates

 

* If you already have some theme builder templates, then make sure to uncheck all the checkboxes in the Options section.

 

9. Using Divi Pixel Layout Injector

All Divi Pixel layouts have the footer and blog archives header section setup using the Divi Pixel Layout Injector. After importing demo content, your footer/blog archive header layout might not work and we need to fix it manually.

 

  1. Go to Divi → Divi Pixel → Layout Injector
  2. In Footer section, select Footer Layout

If the layout pack comes with Blog Archive Page, you will also need to inject archive page header layout.

 

  1. Go to Divi → Divi Pixel → Layout Injector
  2. In the Blog section, select Blog Archive Header for Archives, Categories and Search Results

If the layout pack comes with a 404 Error Page, you will also need to select the layout.

 

  1. Go to Divi → Divi Pixel → Layout Injector
  2. In the 404 Error Page section, select 404 Error Page