The Divi 5 Design Device (unique to this Cyber Monday sale) is a complete, production-ready framework designed to exhibit the whole features of Divi 5’s fashionable design infrastructure. It comprises loads of presets, entire web page layouts, Theme Builder templates, and a structured components of Design Variables that shape the basis of scalable internet design the usage of Divi.
When you’ve got ever sought after to know the way all of Divi’s new options paintings in combination, that is the useful resource you’ve been looking forward to. You’ll see how Design Variables coalesce in Presets, and the way Presets will also be stacked/nested to create constant kinds throughout modules and features.
How To Get The Divi 5 Design Device For Loose
Subscribe To Our Youtube Channel
The Divi 5 Design Device is to be had solely thru Divi’s Black Friday/Cyber Monday sale. Any acquire made right through the sale duration robotically grants get right of entry to to this one-of-a-kind useful resource. Qualifying purchases come with (however aren’t restricted to):
- New Divi Professional licenses and Sublime Subject matters memberships
- Lifetime account upgrades
- Divi VIP, Divi Groups, Divi Cloud, and Divi AI plans
- Divi Market bundles and person Market merchandise
After finishing a qualifying acquire, get right of entry to the components throughout the Sublime Subject matters Contributors’ House. Navigate to the Perks phase the place the obtain can be to be had for you.
The components is delivered as a .ZIP report containing a couple of JSON recordsdata, which come with all the preset library, layouts, and configuration information. 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 web site, because the import will upload loads of layouts, presets, international variables, and photographs in your Divi Library.
What’s Incorporated In The Divi 5 Starter Equipment & Design Device
The Design Device supplies 4 distinct classes of assets that paintings in combination to shape an entire design framework.
Presets: World Kinds Powered Through Design Variables
The preset library paperwork the core of the Design Device. It comprises Part Presets for plenty of Divi modules and Possibility Workforce Presets that observe constant styling throughout quite a lot of module sorts. Those come with each Nested and Stacked Presets utilized in many layouts.
Each and every preset within the components connects to design variables for colours, fonts, and spacing values. This connection method converting a unmarried variable updates all presets that reference it, enabling site-wide design changes with out handbook preset enhancing.
Phase Layouts: Premade Sections Constructed With Flexbox & Grid
Those phase layouts are pre-built the usage of quite a lot of packing containers and modules. The components comprises dozens of layouts masking commonplace web site patterns: hero sections, function grids, testimonial shows, pricing tables, crew member showcases, and call-to-action blocks.
Those phase layouts will also be changed within the Divi Library and added to any web page you create at some point.
Every phase format demonstrates particular Divi 5 options. All layouts use CSS Grid or Flexbox for arranging sub-elements. Some use complicated CSS devices (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: Entire Pages Constructed From Sections
We created entire web page layouts to assist jumpstart your use of those. Every is made out of a medley of the Phase Layouts described above, organized to shape an entire web page. The components comprises homepage permutations, about pages, products and services pages, portfolio shows, weblog layouts, and get in touch with pages.
Those Web page Layouts are simply an more uncomplicated option to import a number of similar Phase Layouts as you get started your subsequent web page design. Import a web page format, and you’ve got maximum the whole lot you wish to have. After all, if you want to use a unique FAQ phase, you’ll be able to delete the only at the web page and change it with a unique Phase Structure as a substitute.
Theme Builder Templates: Headers, Footers, Weblog & Store
The components comprises entire Theme Builder templates for headers, footers, submit templates, archive pages, and WooCommerce product pages. The Theme Builder is likely one of the best possible 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 be able to reproduction and create extra template assignments from them as you wish to have.
We’ve integrated additional Header and Footer sections layouts within the Divi Library. If you wish to change the one who is robotically integrated because the World Header/Footer, you’ll be able to delete the prevailing phase and import one of the crucial different header/footer layouts that higher fit your wishes.
Theme Customizer Settings (Non-compulsory)
The Design Device comprises non-compulsory Customizer configurations that determine site-wide defaults for typography and hues. Those settings paintings together with design variables however perform on the WordPress Customizer stage.
You’ll come with those, or just set your personal. Those customizer settings essentially 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, but it surely’s a really perfect components to switch and make your personal. Doing so will mean you can grasp the brand new additions to Divi and mean you can see how all the items have compatibility in combination.
Design variables give you the first layer of customization. The components comprises variables for colours, fonts, font sizes, and spacing scales. Those design variables are utilized in nearly all presets, so while you alternate a Design Variable, you’re converting a couple of presets. Get entry to the Design Variable Supervisor throughout the chronic left sidebar icon. The executive shows all variables arranged through sort.
The Inspector device permits you to 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 be able to 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 make a choice Investigate cross-check to release the Inspector panel.
Create new Part Presets through configuring a module’s settings and saving the configuration with a descriptive identify throughout the preset chip on the best 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 carried out with Possibility Workforce Presets.
The customization workflow follows a hierarchical means: get started through setting up foundational values thru design variables, create or alter presets that make the most of those variables, after which construct/alter layouts the usage of the preset components. This means maintains the cascading consistency that makes the Design Device maintainable.
How To Import The Divi 5 Starter Equipment Into Divi 5
If you’ve downloaded the Divi 5 Design Device, it’s time to import it. Set up makes use of Divi 5’s local JSON import programs. The .ZIP report accommodates a couple of JSON recordsdata for presets, sections, pages, Theme Builder templates, and Theme Customizer settings that you’ll be able to add in only a few fast imports.
Within the WordPress dashboard, navigate to Divi > Divi Library > Import & Export. The primary report to import is “Black-Friday-2025_Divi-5-Freebie_Presets.json.” You should definitely test “Import Presets!”
In the similar position and approach, import “Black-Friday-2025_Divi-5-Freebie_All-Sections_Layouts.json.” This report imports 40 layouts, one format for every phase sort, with a couple of premade sections in every.
When you would quite have them personally loaded, you’ll be able to import “Black-Friday-2025_Divi-5-Freebie_Individual-Sections.json” as a substitute, which imports 430 person phase layouts to the Divi Library, every consisting of a unmarried Phase Structure.
Once more, from the Divi Library, you’ll be able to import the prebuilt Web page Layouts through importing “Black-Friday-2025_Divi-5-Freebie_Pages.json.” Those are preconfigured pages the usage of quite a lot of combos of sections discovered within the phase recordsdata.
Those are great as a result of as a substitute of simply having the similar more or less phase, they’re thoughtfully created items that experience all of the other sections wanted for a web page.
There are the Theme Builder Layouts that you’ll be able to additionally use. To import those, you should 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 present assignments (for this reason you utilize this on new websites).
Finally, you’ll be able to optionally import the Theme Customizer Settings. Move to Divi > Theme Customizer > ↑↓. Within the conversation field, import “Black-Friday-2025_Divi-5-Freebie_Theme-Customizer.json” to load the World fonts and hues.
Get entry to imported layouts throughout the Upload Structure interface when enhancing pages. Phase layouts seem within the library sections, entire web page layouts seem within the premade layouts phase, and Theme Builder templates seem when enhancing template sorts.
When you stumble upon any problems with those imports, you’ll be able to consult with the clearer import directions on our assist web site and get in touch with our toughen crew for help.
Get The Divi 5 Design Device Sooner than The Sale Ends
The Divi 5 Design Device is to be had solely right through the Black Friday and Cyber Monday sale and can most effective be to be had till the promotion ends after Cyber Monday. Any qualifying acquire right through this era supplies everlasting get right of entry to to the Divi 5 Design Device.
This promotion coincides with Sublime Subject matters’ maximum considerable annual bargain. Divi Professional licenses, lifetime upgrades, and top class merchandise are to be had at decreased pricing, to be had most effective right through this restricted window.
The Design Device represents months of building paintings, setting up a production-ready framework that presentations off Divi 5’s entire function set. Get entry to calls for a purchase order right through this promotional duration. After the sale ends, the Design Device will now not be to be had.
The submit 🎨 Obtain The Final Divi 5 Starter Equipment & Design Device seemed first on Sublime Subject matters Weblog.
WordPress Web Design