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.

Download Package Contents

Each Layout Pack package contains multiple files. To make the template looking as on 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)
• Icons 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 download package window 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 locate to the download package 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 plugin.
2. Click “Install” and “Activate


3.  Go to Appearance/Import Demo Data
4. Upload appropriate files that can be found in the “Import Files” folder and click “Import Demo Data”


4. Set Primary Menu

After importing the demo content, our primary menu has not been assigned and in this step we will fix it.

1.  Go to Appearance/Menus
2.  Select “Primary Menu” box
3. Click “Save Menu” button


5. 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


6. 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 go to Settings/Reading
2. Select “A static page” box and select “Homepage” in the dropdown below


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”


7. 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 your Layout Pack download package. You can find the single-post-template.json file in 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.


8. 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.

3.  Go to Divi/Divi Pixel/Layout Injector
4. In Blog section, select “Blog Archive Header” for Archives, Categories and Search Results