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 toDivi → Divi Pixeland clickExport/Importicon located in the top-right window corner
  2. ClickSelect Filein Import dialog window
  3. Navigate to the Layout Pack files and selectlayout-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 toDivi → Theme Options
  2. ClickPortabilityicon located in the top right corner
  3. Switch toImporttab
  4. ClickChoose Fileand selectlayout-name-divi-theme-options-export.json
  5. ClickImport Divi Theme Settingsbutton

 

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 toPlugins → Add Newand search forOne Click Demo Import
  2. ClickInstallandActivate
  1. Go toAppearance → Import Demo Data
  2. Upload appropriate files that can be found in the “Import Files” folder and clickImport 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 toAppearance → Menus
  2. SelectPrimary Menucheckbox
  3. ClickSave Menubutton

 

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 toDivi → Divi Pixel → General
  2. Scroll to CTA Button Settings and select the menu where the CTA Button should be displayed
  3. Click theSave Changesbutton

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 toDivi → Theme Customizer
  2. Navigate toWidgets → 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 toSettings → Reading
  2. SelectA static pagebox and selectHomepagein the dropdown menu

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

 

  1. Go toSettings → Permalinks
  2. SelectPost namecheckbox
  3. ClickSave 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 toDivi → Theme Builder
  2. Click thePortabilityicon located in the top right window corner
  3. Select theImporttab
  4. ClickChoose Fileand navigate to Layout Pack package. The single-post-template.json can be found in theDivi Builder Layoutsfolder
  5. ClickImport 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 toDivi → Divi Pixel → Layout Injector
  2. In Footer section, selectFooter Layout

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

 

  1. Go toDivi → Divi Pixel → Layout Injector
  2. In the Blog section, selectBlog Archive Headerfor 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 toDivi → Divi Pixel → Layout Injector
  2. In the 404 Error Page section, select404 Error Page