Divi Layouts guide (2020 update)

What are Divi layouts?

Divi Layouts are pre-made modules, rows, sections, and pages for you to load directly onto your page using the Divi builder. Divi comes pre-loaded with a large collection of free premade Divi layout packs and you can also import your own layouts using .json files. You can think of them as building-block templates.

Divi is a drag-and-drop visual page builder that utilizes sections, rows, and modules to build pages within your website. Any page, section, row or module can be saved as a Divi Layout in the Divi library that can then be exported and imported as a .json file for use on any site that is using the Divi Theme or the Divi Builder plugin.

The layout library (which was added in Divi version 2.4 on 06/17/2015) is a key feature of the theme and it allows you to save on development time by using pre-designed templates and re-use elements or whole pages without the need to create them from scratch. The system allows you to share designs between your own sites or with other web designers using Divi.

Divi layouts play a large role in making Divi the #1 selling WordPress Theme available in 2018 with over 1,000,000 websites using the theme.

There are 3 types of layouts in Divi

• Premade Layouts – Free multi-page layout packs built by Elegant Themes and come included with Divi
• Your Saved Layouts – Layout pages, sections, rows or modules you have saved or imported to your Divi library
• Your Existing Pages – Page, post or project layouts already being used on your Divi site that can be used for new content.

Divi Layouts: 1. Premade Layouts 2. Your Saved Layouts 3. Your Existing Pages

1. Premade Divi layouts from Elegant Themes

The free premade Divi layouts are created by Elegant Themes and are released twice a week as layout packs. Each pack usually includes between 6 and 9 full pages and each pack is designed for 1 specific niche. You can mix and match pages from different layout packs or grab sections as required by loading a layout into a new page then copy/pasting the layout sections you need.

These pre-made layouts also include 100% royalty-free stock images and icons that have been created by the Elegant Themes in-house photographer and design team.

At the time of writing, we currently have access to 64 multi-page layout packs (489 Total Layouts) which means that by the end of 2018 we should have close to 100 full site layout packs in the Divi Builder, so there really should be something to suit almost any niche.

These layout packs are built into the Divi Theme and Divi builder plugin and will be available in your Divi builder as soon as you install your Divi theme. 

Free layout pack built into the Divi Theme

2. Your Saved Layouts in the Divi library

The Divi Library is where you store all of your own layouts. You can save pages, sections, rows, and modules into the library from anywhere on your site to re-use anywhere else on your site. You can also import layouts into your Divi library that you have created on your other sites or layouts shared & sold by others.

Your Saved layouts tab will be empty when you 1st install the Divi Theme or Divi builder plugin as you need to either build a layout and save it to your library or import a layout .json file into your library.

Save pages, sections, rows, and modules to the Divi library

3. Your Existing Pages layouts

Since Divi version 3.7 ( updated 06-14-2018 ) you can load any of your published pages, posts or projects into another page, post or project. This workflow improvement allows you to easily copy the page, post or project formatting you have already created without having to 1st save them into the library and load that way.

Your Existing Pages layouts tab will be empty when you 1st install the Divi Theme or Divi builder plugin as you need to create and publish a page, post or project 1st. 

Use your existing pages, posts, and projects as templates for new content.

How to load the Divi layouts into your page

The pre-made layout packs can be loaded directly from the Divi Builder without having to download/import from the Elegant Themes website, but older layouts from Elegant themes and any other 3rd party layouts you may have will need to be downloaded and imported into your Divi library using a layout .json file before you can use them.

To load Divi layouts on your page you need to be using the Divi Builder (back-end builder) or Divi Visual Builder (front-end builder). 

1. 1. Add a new (Pages > Add New) and click the purple “Use The Divi Builder” button.
   2. You can then choose to work either in the back-end builder or the newer (and better IMHO) visual builder. To load the visual builder click the blue button labeled “Use Visual Builder”.
   3. As it is a new page, you will then have a pop-up which lets you choose if you want to “build from scratch” or “choose a premade layout” (the free layout packs that ship with Divi) or “clone an existing page”.
      
   4. You can also access all layouts at any time in the visual builder by clicking on the visual builders’ page settings (1) and then clicking on the load from the library icon (2). This will bring up the layouts pop-up (3) where you can choose what type of layout to use.
      
   5. Browse to the layout you wish to use and click on the “Use This Layout” (1). Be aware that there is a “Replace existing content” checkbox (2) that controls whether to replace any content that is already on your page. If this is unchecked then the layout will get added below the existing page content. (Tip: You can ctrl +z to undo if you replace your existing content by mistake!).When loading “your Saved Layouts” or Your Existing Pages” you just click on the layout and it will load without having to click any further buttons.
      

Where to find Divi layouts?

Find free layouts

There are now a huge number of free layouts for Divi with the pre-made Divi layout packs from Elegant Themes and the many 3rd party Divi layouts that are given away by designers to promote their premium products, services or brand… or just to be super nice and give back to the largest and most helpful WordPress Theme community around.

The best place to find all the free layouts is in the Free Divi Layouts category in the Divi Layouts directory.

This directory has the largest, most up-to-date collection of free (and premium) Divi layouts available. This layout directory lists searchable, favorite-able categorized and tagged layouts from Elegant Themes and 3rd party Divi developers all in 1 place which makes finding the perfect layout for your next project a lot easier.

Find premium layouts

The 3rd party premium layout market for Divi grew rapidly after the launch of the Divi layout system with many free and premium layouts becoming available each week. Since the twice-weekly release of free multi-page layout packs from Elegant Themes, the 3rd party layout providers have had to up their game or face severe difficulty in making any sales.

This is great news for Divi users as several layout providers have taken up the challenge and have been producing high quality, great value layouts, and layout packs. If you are looking to buy layouts, as with the free layouts above, the best place to find all the premium Divi layouts is in the Divi Layout Directory.

The layout directory has premium layouts from several different 3rd party designers, but I would recommend taking a good look at those offered by both Divi Den and Need Yesterday who consistently offer high-quality designs. Divi Den specializes mostly in providing large layout bundles that include multiple page layouts sections with custom CSS hover animations. Need Yesterday offers single sections that can be bought pick-and-mix style using their layout generator.

Divi Layouts Directory

Importing or saving layouts to your Divi library

In order to use “Your Saved Layouts” in the Divi library, you 1st need put them into there, as it is empty when you install Divi for the 1st time. To add layouts to the library you can either save a layout from a page you have already created on the site or import an external layout .json file.

Saving layouts to the Divi library

You can save any page, section, row or module from your page into the Divi library. When using the visual builder you can save the full page as a layout by opening up the page settings bar and clicking on the save to library icon (1). To save individual sections, rows or modules you can just right-click on any section, row or module and select “Save to Library” (2).

Importing layouts to the Divi library

If you want to import a layout you have created from another site. or one you have downloaded from a 3rd party you can;

1. Go to Divi > Divi Library (1) and click on the “Import/Export” button (2)
2. Select the Import tab (3) and choose your .json file and click “Import Divi Builder Layouts”.
3. Your layout will now be available to use in the Divi library.
   

Errors using Divi layouts

Why do I get “This file should not be imported in this context”?

If you are trying to import a layout using the portability option and you get a warning “This file should not be imported in this context” it is because you are importing the wrong type of layout.  Layouts can be a “layout”, “section”, “row” or “module” and only “layouts” can be imported here. Import your “section”, “row” or “module” into the Divi > Divi Library.

My layout is in the library but doesn’t show when I click on add from library

Again, this is because you are trying to use the wrong type of layout (which can be a “layout”, “section”, “row” or “module”) into the wrong area. Each type of layout can only be loaded into the correct area on the page. So, for example, a “row” layout can only be loaded into a section by clicking on the green “+” icon to add a section and then selecting load from library tab which will then only show your “row” layouts.