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 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”


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


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


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


6. Import and set Single Post Template

Our website is nearly ready! In this last 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.