You found a section you like, filled in the download form, and now there is a ZIP file sitting in your Downloads folder. This guide covers what is inside it, how to import a Divi 5 layout into your Divi Library, what the import changes on your site, and how to place the section on a page. It takes a few minutes, and most of the questions people run into are answered in the troubleshooting part at the end.
What is inside the download
Every layout on Divi Design Kit downloads as a ZIP named after the layout, for example divi-design-kit-hero-12.zip. Inside is one JSON file. It is not a custom format: it is written by Divi's own exporter, the same one behind the Import & Export button in your Divi Library, so Divi reads it without any plugin.
That one file carries more than the section itself:
- The layout, built from core Divi 5 modules only.
- Its presets, such as the heading and button styles it uses.
- Its global colors and design variables, so the colors and repeated sizes arrive as named, editable values instead of loose hex codes.
- Its images, embedded in the file, so you are not hotlinking pictures from our server.
- Its category and tags, so it stays easy to find in your Library.
Good to know A few layouts need one small piece of CSS that native settings cannot produce. Those carry an amber "Native + CSS" badge on the library, and their ZIP has a second file, custom-css.txt, that names each module, tells you where to paste the CSS (Advanced > Custom CSS > Free-form CSS) and gives you the code. Layouts with the green "100% Native" badge have no such file because they need nothing extra.
Before you import
- You need Divi 5. These layouts are built in the Divi 5 format. Update Divi first if your site is still on Divi 4, and if it has existing Divi 4 content, follow Elegant Themes' guide How to Safely Migrate from Divi 4 to Divi 5 before you do.
- Use an administrator account. The import creates Library items, categories and tags, and it adds colors and variables to your site's design settings.
- Try it on staging if the site is live and busy. The import does not touch your existing pages, but it does add to your global colors, which is worth seeing once before you do it in production. More on that below.
Importing the layout, step by step
Unzip the file
WordPress will not accept the ZIP itself here. Extract it and keep the .json file somewhere you can find it.
Open the Divi Library
In your WordPress dashboard go to Divi > Divi Library and click the Import & Export button at the top of the screen. A window opens with an Export tab and an Import tab. Switch to Import.
Choose the file and decide on presets
Click Choose Files and select the JSON. You can select several JSON files at once if you downloaded more than one layout.
Under the file field there is a checkbox called Import Presets, and it is worth a second of thought because the two choices behave differently:
- Unchecked (the default): the preset styles are written straight onto the modules in the layout. The section looks exactly the same, but no new presets are added to your site. Choose this if you just want the section and plan to restyle it by hand.
- Checked: the presets are added to your site's presets and the modules stay linked to them. Choose this if you want to restyle every heading or button of that kind in one place later.
Run the import
Click Import Divi Builder Layouts and wait for the list to reload. The new item appears in the Library with its name, category and tags. Embedded images are uploaded to your Media Library during this step, so a layout with photos takes a little longer.
Not sure about presets? Neither choice is wrong. Leave Import Presets unchecked: it keeps your preset list clean, and the section still looks exactly the same.
What the import changes on your site
This is the part most tutorials skip, and it explains a few surprises later on.
- Global colors are merged into yours. The layout's colors (with names such as Ink, Body or Blue) are added to your Global Colors. If a color with the same internal ID already exists on your site, the value from the file replaces it. Divi's four Customizer colors (primary, secondary, heading and body) are never touched by the import.
- Design variables are merged the same way. Number, text, image, link, font and gradient variables from the file are added, and a variable with the same ID takes the file's value.
- Your pages are not changed. The layout goes into the Library only. Nothing appears on a page until you add it.
The merge rule matters if you rebrand a layout and later import another one from the same collection: shared colors come back with their original values. Our guide on rebranding a Divi 5 layout with global colors, variables and presets covers how to handle that.
Adding the section to a page
Open the page in the Visual Builder and insert a new section where you want it. In the window that opens, switch to the Add From Library tab, find the layout by name, category or tag, and click it. The section drops into the page with its content, images and styles.
From there it is an ordinary Divi section. Change the copy, swap the images and adjust spacing like any section you built yourself. Editing it on the page does not change the copy saved in your Library, so you can reuse the original as many times as you like.
If the layout came with custom-css.txt, open that file now and paste each snippet into the module it names. The file says exactly which module and which field.
When something does not go as expected
The import finished, but nothing changed
Divi skips an item whose title and slug both match an item already in your Library, and it leaves the existing one untouched. That usually means you imported the same layout before. Importing again is not an update: to replace the old copy, move it to the Trash first, then import.
WordPress refuses the file
Check that you selected the .json file and not the ZIP. The importer only accepts JSON.
Some colors on older pages changed
That happens when the layout shares a global color ID with one already on your site, as explained above. Open the Variable Manager in the Visual Builder, go to Colors and set the value back. It is one edit, and every place that color is used follows it.
Where you can use the layouts
Every layout is free to use on your own sites and on client sites. What is not allowed is reselling or redistributing the layout files themselves, for example bundling them into a paid pack.
Ready for the next one? Browse the hero layouts, pricing tables or footers, or the whole library. If the section you need is not there yet, request it for free.