How To Import A Pre-made Divi Template

What are Divi layouts?

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

Divi is a drag-and-drop visual folio architect that utilizes sections, rows, and modules to build pages within your website. Any folio, department, row or module can be saved every bit a Divi Layout in the Divi library that can then be exported and imported equally a .json file for utilise on any site that is using the Divi Theme or the Divi Builder plugin.

The layout library (which was added in Divi version two.4 on 06/17/2015) is a key characteristic 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 demand to create them from scratch. The organisation allows yous 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 bachelor in 2018 with over one,000,000 websites using the theme.

At that place are 3 types of layouts in Divi

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

Divi Layouts: i. Premade Layouts two. Your Saved Layouts 3. Your Existing Pages

i. Premade Divi layouts from Elegant Themes

The complimentary premade Divi layouts are created by Elegant Themes and are released twice a week as layout packs. Each pack unremarkably includes between 6 and ix total pages and each pack is designed for 1 specific niche. You tin can mix and match pages from dissimilar layout packs or grab sections every bit required by loading a layout into a new page then copy/pasting the layout sections you lot demand.

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

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

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

Costless layout pack congenital into the Divi Theme

2. Your Saved Layouts in the Divi library

The Divi Library is where you lot store all of your own layouts. You can salve pages, sections, rows, and modules into the library from anywhere on your site to re-employ anywhere else on your site. Y'all 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 y'all need to either build a layout and save it to your library or import a layout .json file into your library.

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

3. Your Existing Pages layouts

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

Your Existing Pages layouts tab will exist empty when you 1st install the Divi Theme or Divi architect plugin every bit you need to create and publish a page, postal service 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 tin can be loaded direct from the Divi Builder without having to download/import from the Elegant Themes website, but older layouts from Elegant themes and whatsoever other 3rd party layouts you may have volition demand to be downloaded and imported into your Divi library using a layout .json file before you tin use them.

To load Divi layouts on your page y'all need to be using the Divi Builder (dorsum-end builder) or Divi Visual Builder (front-stop architect).

1. Add a new (Pages > Add New) and click the purple "Use The Divi Architect" button.
2. You lot tin then choose to work either in the dorsum-stop builder or the newer (and better IMHO) visual builder. To load the visual builder click the bluish button labeled "Utilize Visual Builder".
3. As information technology is a new folio, yous volition so accept a popular-up which lets you choose if you desire to "build from scratch" or "choose a premade layout" (the free layout packs that transport with Divi) or "clone an existing page".
4. You lot can also admission all layouts at any time in the visual architect past clicking on the visual builders' folio settings (ane) and then clicking on the load from the library icon (ii). This will bring upwardly the layouts pop-up (3) where you can choose what type of layout to use.
5. Browse to the layout yous wish to use and click on the "Use This Layout" (i). Exist 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 disengage if you replace your existing content by mistake!).When loading "your Saved Layouts" or Your Existing Pages" yous only click on the layout and it will load without having to click any farther buttons.

Where to find Divi layouts?

Find free layouts

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

The best identify to notice all the free layouts is in the Free Divi Layouts category in the Divi Layouts directory.

This directory has the largest, nigh upwardly-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 third political party premium layout market for Divi grew chop-chop after the launch of the Divi layout organisation with many complimentary and premium layouts becoming bachelor 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 confront astringent difficulty in making any sales.

This is great news for Divi users every bit several layout providers accept taken upwardly the challenge and have been producing high quality, great value layouts, and layout packs. If y'all are looking to purchase layouts, as with the costless layouts above, the best place to notice all the premium Divi layouts is in the Divi Layout Directory.

The layout directory has premium layouts from several different 3rd political party designers, just I would recommend taking a expert look at those offered past both Divi Den and Need Yesterday who consistently offer high-quality designs. Divi Den specializes mostly in providing big layout bundles that include multiple folio layouts sections with custom CSS hover animations. Need Yesterday offers single sections that can be bought selection-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 information technology 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 y'all have already created on the site or import an external layout .json file.

Saving layouts to the Divi library

You tin can save whatsoever page, department, row or module from your page into the Divi library. When using the visual architect you tin save the total page equally a layout by opening upward the folio settings bar and clicking on the save to library icon (ane). To relieve individual sections, rows or modules you tin can just right-click on any section, row or module and select "Salve to Library" (two).

Importing layouts to the Divi library

If you want to import a layout you accept created from another site. or ane you take downloaded from a 3rd political party you lot tin can;

Get to Divi > Divi Library (one) and click on the "Import/Export" button (2)
Select the Import tab (3) and choose your .json file and click "Import Divi Builder Layouts".
Your layout will now be available to utilize in the Divi library.

Errors using Divi layouts

Why do I go "This file should not exist imported in this context"?

If yous are trying to import a layout using the portability option and you become a alert "This file should not be imported in this context" it is because you are importing the incorrect type of layout. Layouts can exist a "layout", "section", "row" or "module" and simply "layouts" can be imported hither. Import your "department", "row" or "module" into the Divi > Divi Library.

My layout is in the library but doesn't evidence when I click on add from library

Over 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 case, a "row" layout can only be loaded into a section past clicking on the green "+" icon to add a section and then selecting load from library tab which will and then but evidence your "row" layouts.

Source: https://www.divithemeexamples.com/divi-layouts-guide/

Posted by: tuttlementir.blogspot.com