🎉 Divi 5 Launch Gift: A Free Design System (Download Now!)

The official launch of Divi 5 is here, and we’re celebrating with a free, production-ready Design System you can import into any new Divi 5 site.

This Design System is built to show how Divi 5’s modern design infrastructure fits together in a real project. It includes hundreds of presets, complete page layouts, Theme Builder templates, and a structured system of Design Variables that power everything.

If you have ever wanted to see how Design Variables flow into Presets, how Presets can be stacked and nested, and how that consistency carries across layouts, this is the cleanest example we can give you.

How To Get The Free Divi 5 Design System

The download comes as a .ZIP file containing multiple JSON files. These files are designed to work with Divi 5’s native import systems, so setup is quick once you’re on a fresh Divi 5 installation.

Download the Files

Download For Free

Join the Divi Newsletter and we will email you a copy of the ultimate Divi Landing Page Layout Pack, plus tons of other amazing and free Divi resources, tips and tricks. Follow along and you will be a Divi master in no time. If you are already subscribed simply type in your email address below and click download to access the layout pack.

DOWNLOAD

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

We recommend using a new, blank site first. This Design System imports a large preset library, lots of layouts, global variables, and supporting assets into your Divi Library, so starting clean makes it easier to explore and avoid conflicts.

What’s Included In The Divi 5 Design System

The Design System includes multiple resource types that work together as one consistent framework.

Presets: Global Styles Powered By Design Variables

The preset library is the core of the system. It includes Element Presets across many Divi modules, plus Option Group Presets that apply consistent styling patterns across module types. You’ll also see Nested Presets and Stacked Presets used throughout the layouts.

Every preset ties back to Design Variables for colors, typography, and spacing. That means you can change a single variable and see those updates ripple across presets and layouts that reference it, without manually reworking everything.

Section Layouts: Premade Sections Built With Flexbox And Grid

The system includes a large library of premade Section Layouts built for common website patterns such as hero sections, feature grids, testimonial sections, pricing sections, team sections, blog sections, and call-to-action blocks.

These layouts live in your Divi Library, so you can modify them once and reuse them across future pages.

Each section layout highlights Divi 5 features in practice. Layouts use CSS Grid and Flexbox for structure, rely on Design Variables and Presets for consistency, and include responsive configurations so they work across devices right away.

Page Layouts: Complete Pages Built From Sections

We also included complete page layouts that combine multiple sections into finished pages. These help you start faster by importing a whole page at once, then swapping sections as needed.

For example, you can import a full page layout, then replace the FAQ section with a different FAQ Section Layout from the library while keeping the rest of the page intact.

Theme Builder Templates: Headers, Footers, Blog, And Shop

The Design System includes Theme Builder templates for key template types such as global headers and footers, post templates, archive templates, and WooCommerce templates (when applicable).

You can use the assignments as-is on a new site, or duplicate templates and create new assignments as your project grows.

Global Variables: Design Variables That Power The System

The system includes a structured set of design variables for:

• Colors
• Fonts
• Font Sizes
• Spacing Scales

These variables are the foundation. Once you adjust them to match your brand, the presets and layouts update quickly because they’re built to reference those variables.

Theme Customizer Settings (Optional)

The ZIP also includes optional Theme Customizer settings. These establish baseline defaults for typography and core colors at the WordPress Customizer level.

You can include these, or simply set your own. These Customizer settings typically affect:

• Heading Font
• Body Font
• Primary Color
• Secondary Color
• Heading Text Color
• Body Text Color

These are all things that can be easily set without importing this file in the Design Variable Manager.

What’s Inside The ZIP

The download includes multiple JSON files that map to Divi’s import areas.

Core System Files

• Divi-5-Launch-Freebie_Global-Variables.json
• Divi-5-Launch-Freebie_Presets.json
• Divi-5-Launch-Freebie_Theme-Builder-Templates.json
• Divi-5-Launch-Freebie_Theme-Customizer.json

Layouts

• Divi-5-Launch-Freebie_Premade-Layouts.json
• Divi-5-Launch-Freebie_Preset-Pages.json
• Divi-5-Launch-Freebie_Pages.json

Section Layouts

• Divi-5-Launch-Freebie_All-Sections_Layouts.json
• Divi-5-Launch-Freebie_All-Individual-Sections.json

How To Import The Divi 5 Design System Into Divi 5

Once you’ve downloaded the ZIP, you can import it using Divi 5’s native import tools. We recommend importing in this order on a new site.

1. Import Presets

Go to Divi > Divi Library > Import & Export.

Import Divi-5-Launch-Freebie_Presets.json and make sure Import Presets is checked.

2. Import Global Variables

In the same place, import Divi-5-Launch-Freebie_Global-Variables.json so your Design Variables load before you start using layouts.

3. Import Section Layouts

Import Divi-5-Launch-Freebie_All-Sections_Layouts.json to add the grouped section layouts.

If you prefer individual sections instead, import Divi-5-Launch-Freebie_All-Individual-Sections.json, which loads the full library of individual section layouts into the Divi Library.

4. Import Page Layouts

Import Divi-5-Launch-Freebie_Pages.json to add complete page layouts built from the sections.

5. Import Theme Builder Templates

Go to Divi > Theme Builder > ↑↓.

Import Divi-5-Launch-Freebie_Theme-Builder-Templates.json with Presets enabled, and allow it to override existing assignments if you’re working on a new site.

6. Import Theme Customizer Settings (Optional)

Go to Divi > Theme Customizer > ↑↓.

Import Divi-5-Launch-Freebie_Theme-Customizer.json to load the baseline fonts and colors.

How To Customize The Divi 5 Design System For Your Brand

In the upcoming days, we will publish a guide on mastering Divi 5’s Design System, so stay tuned to learn more!

This Design System is meant to be a starting point. You can use it as-is, but it’s also a great framework for customization and building your own, which helps you learn Divi 5 faster.

Start with Design Variables. The system includes variables for colors, fonts, font sizes, and spacing scales. Because presets reference these variables, changing a variable updates multiple presets at once.

Then adjust the presets that matter most to your brand, and finally refine layouts using those presets. That workflow keeps your changes consistent and maintainable as your site grows.

Get Started With Divi 5 Today!

The Divi 5 official launch is the perfect time to start fresh with a complete, modern framework you can learn from and build on.