The Divi 5 Design Device (unique to this Cyber Monday sale) is a complete, production-ready framework designed to show off the whole features of Divi 5’s trendy design infrastructure. It comprises loads of presets, whole web page layouts, Theme Builder templates, and a structured formula of Design Variables that shape the basis of scalable internet design the usage of Divi.

When you’ve got ever sought after to understand how all of Divi’s new options paintings in combination, that is the useful resource you’ve been looking forward to. You are going to see how Design Variables coalesce in Presets, and the way Presets will also be stacked/nested to create constant kinds throughout modules and points.

Get The Design System

How To Get The Divi 5 Design Device For Unfastened

Subscribe To Our Youtube Channel

The Divi 5 Design Device is to be had solely via Divi’s Black Friday/Cyber Monday sale. Any acquire made all over the sale length routinely grants get admission to to this one-of-a-kind useful resource. Qualifying purchases come with (however aren’t restricted to):

• New Divi Pro licenses and Chic Subject matters memberships
• Lifetime account upgrades
• Divi VIP, Divi Teams, Divi Cloud, and Divi AI plans
• Divi Marketplace bundles and person Market merchandise

After finishing a qualifying acquire, get admission to the formula in the course of the Chic Subject matters Individuals’ House. Navigate to the Perks section the place the obtain might be to be had for you.

The formula is delivered as a .ZIP document containing a couple of JSON recordsdata, which come with your complete preset library, layouts, and configuration knowledge. Those recordsdata combine with Divi 5’s local import programs. It simply takes a few mins to get it loaded on a brand new Divi set up. We propose the usage of a brand new, clean website, for the reason that import will upload loads of layouts, presets, international variables, and photographs on your Divi Library.

Preview The Design System

What’s Incorporated In The Divi 5 Starter Equipment & Design Device

The Design Device supplies 4 distinct classes of sources that paintings in combination to shape an entire design framework.

Presets: World Kinds Powered By means of Design Variables

The preset library bureaucracy the core of the Design Device. It comprises Part Presets for plenty of Divi modules and Option Group Presets that observe constant styling throughout more than a few module varieties. Those come with each Nested and Stacked Presets utilized in many layouts.

Each preset within the formula connects to design variables for colours, fonts, and spacing values. This connection manner converting a unmarried variable updates all presets that reference it, enabling site-wide design changes with out handbook preset modifying.

Segment Layouts: Premade Sections Constructed With Flexbox & Grid

Those segment layouts are pre-built the usage of more than a few packing containers and modules. The formula comprises dozens of layouts overlaying commonplace website online patterns: hero sections, characteristic grids, testimonial presentations, pricing tables, group member showcases, and call-to-action blocks.

Those segment layouts will also be changed within the Divi Library and added to any web page you create one day.

Every segment format demonstrates particular Divi 5 options. All layouts use CSS Grid or Flexbox for arranging sub-elements. Some use complex CSS gadgets (like clamp). All use Design Variables and Presets (as discussed). The layouts are absolutely responsive with device-specific configurations already constructed out.

Web page Layouts: Whole Pages Constructed From Sections

We created whole web page layouts to lend a hand jumpstart your use of those. Every is comprised of a medley of the Segment Layouts described above, organized to shape a complete web page. The formula comprises homepage permutations, about pages, products and services pages, portfolio presentations, weblog layouts, and phone pages.

Those Web page Layouts are simply an more straightforward technique to import a host of comparable Segment Layouts as you get started your subsequent web page design. Import a web page format, and you have got maximum the whole thing you want. In fact, if you desire to use a special FAQ segment, you’ll delete the only at the web page and change it with a special Segment Structure as an alternative.

Theme Builder Templates: Headers, Footers, Weblog & Store

The formula comprises whole Theme Builder templates for headers, footers, submit templates, archive pages, and WooCommerce product pages. The Theme Builder is without doubt one of the easiest portions about the usage of Divi, so we didn’t need you to fail to see those templates.

You’ll use any of those template assignments as-is, or you’ll replica and create extra template assignments from them as you want.

We’ve incorporated further Header and Footer sections layouts within the Divi Library. If you wish to change the one who is routinely incorporated because the World Header/Footer, you’ll delete the present segment and import one of the vital different header/footer layouts that higher fit your wishes.

Theme Customizer Settings (Not obligatory)

The Design Device comprises non-compulsory Customizer configurations that determine site-wide defaults for typography and colours. Those settings paintings together with design variables however function on the WordPress Customizer degree.

You’ll come with those, or just set your individual. Those customizer settings basically impact:

• Heading Font
• Frame Font
• Number one Colour
• Secondary Colour
• Heading Textual content Colour, and
• Frame Textual content Colour

Those are all issues that may be simply set with out this add within the Design Variable Supervisor.

How To Customise The Divi 5 Design Device For Your Emblem

The Design Device is a kick off point. You’ll use the design as is, nevertheless it’s a really perfect formula to change and make your individual. Doing so will assist you to grasp the brand new additions to Divi and assist you to see how the entire items have compatibility in combination.

Design variables give you the first layer of customization. The formula comprises variables for colours, fonts, font sizes, and spacing scales. Those design variables are utilized in nearly all presets, so whilst you trade a Design Variable, you might be converting a couple of presets. Get entry to the Design Variable Supervisor in the course of the continual left sidebar icon. The executive presentations all variables arranged via kind.

The Inspector software means that you can click on any part in a piece or web page format and think about the customizations used within the Design Device. From there, you’ll make adjustments to these changed kinds as wanted (even on Presets). Open a web page within the Visible Builder, then click on the Inspector icon within the toolbar or right-click any part and select Check up on to release the Inspector panel.

Create new Part Presets via configuring a module’s settings and saving the configuration with a descriptive title in the course of the preset chip on the most sensible of the settings panel. The brand new preset turns into to be had within the preset library along system-provided presets. The similar will also be executed with Choice Staff Presets.

The customization workflow follows a hierarchical means: get started via organising foundational values via design variables, create or adjust presets that make the most of those variables, after which construct/adjust layouts the usage of the preset formula. This means maintains the cascading consistency that makes the Design Device maintainable.

How To Import The Divi 5 Starter Equipment Into Divi 5

While you’ve downloaded the Divi 5 Design System, it’s time to import it. Set up makes use of Divi 5’s local JSON import programs. The .ZIP document incorporates a couple of JSON recordsdata for presets, sections, pages, Theme Builder templates, and Theme Customizer settings that you’ll add in only some fast imports.

Within the WordPress dashboard, navigate to Divi > Divi Library > Import & Export. The primary document to import is “Black-Friday-2025_Divi-5-Freebie_Presets.json.” You’ll want to test “Import Presets!”

In the similar position and means, import “Black-Friday-2025_Divi-5-Freebie_All-Sections_Layouts.json.” This document imports 40 layouts, one format for every segment kind, with a couple of premade sections in every.

In case you would reasonably have them personally loaded, you’ll import “Black-Friday-2025_Divi-5-Freebie_Individual-Sections.json” as an alternative, which imports 430 person segment layouts to the Divi Library, every consisting of a unmarried Segment Structure.

Once more, from the Divi Library, you’ll import the prebuilt Web page Layouts via importing “Black-Friday-2025_Divi-5-Freebie_Pages.json.” Those are preconfigured pages the usage of more than a few combinations of sections discovered within the segment recordsdata.

Those are great as a result of as an alternative of simply having the similar more or less segment, they’re thoughtfully created items that experience the entire other sections wanted for a web page.

There are the Theme Builder Layouts that you’ll additionally use. To import those, you will have to navigate to Divi > Theme Builder > ↑↓ to import the Theme Builder Templates. Import “Black-Friday-2025_Divi-5-Freebie_Theme-Builder-Templates.json” with Presets and allow them to override current assignments (for this reason you utilize this on new websites).

Finally, you’ll optionally import the Theme Customizer Settings. Cross to Divi > Theme Customizer > ↑↓. Within the conversation field, import “Black-Friday-2025_Divi-5-Freebie_Theme-Customizer.json” to load the World fonts and colours.

Get entry to imported layouts in the course of the Upload Structure interface when modifying pages. Segment layouts seem within the library sections, whole web page layouts seem within the premade layouts segment, and Theme Builder templates seem when modifying template varieties.

In case you come upon any problems with those imports, you’ll check with the clearer import instructions on our lend a hand website and phone our make stronger group for help.

Get The Divi 5 Design Device Sooner than The Sale Ends

The Divi 5 Design Device is to be had solely all over the Black Friday and Cyber Monday sale and can simplest be to be had till the promotion ends after Cyber Monday. Any qualifying acquire all over this era supplies everlasting get admission to to the Divi 5 Design Device.

This promotion coincides with Chic Subject matters’ maximum really extensive annual cut price. Divi Pro licenses, lifetime upgrades, and top class merchandise are to be had at decreased pricing, to be had simplest all over this restricted window.

The Design Device represents months of building paintings, organising a production-ready framework that displays off Divi 5’s whole characteristic set. Get entry to calls for a purchase order all over this promotional length. After the sale ends, the Design Device will now not be to be had.

The submit 🎨 Download The Ultimate Divi 5 Starter Kit & Design System seemed first on Elegant Themes Blog.

WordPress Maintenance Plans | WordPress Hosting

read more