The Divi 5 Design Machine (unique to this Cyber Monday sale) is a complete, production-ready framework designed to show off the total functions of Divi 5’s fashionable design infrastructure. It contains loads of presets, whole web page layouts, Theme Builder templates, and a structured method of Design Variables that shape the basis of scalable internet design the usage of Divi.
In case you have 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 ahead to. You’re 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 features.
How To Get The Divi 5 Design Machine For Unfastened
Subscribe To Our Youtube Channel
The Divi 5 Design Machine is to be had solely via Divi’s Black Friday/Cyber Monday sale. Any acquire made all the way through the sale length robotically grants get admission to to this one-of-a-kind useful resource. Qualifying purchases come with (however aren’t restricted to):
- New Divi Professional licenses and Chic Subject matters memberships
- Lifetime account upgrades
- Divi VIP, Divi Groups, Divi Cloud, and Divi AI plans
- Divi Market bundles and particular person Market merchandise
After finishing a qualifying acquire, get admission to the method in the course of the Chic Subject matters Participants’ Space. Navigate to the Perks segment the place the obtain might be to be had for you.
The method is delivered as a .ZIP record containing a couple of JSON recordsdata, which come with your entire preset library, layouts, and configuration knowledge. Those recordsdata combine with Divi 5’s local import methods. It simply takes a few mins to get it loaded on a brand new Divi set up. We suggest the usage of a brand new, clean web site, for the reason that import will upload loads of layouts, presets, international variables, and photographs in your Divi Library.
What’s Integrated In The Divi 5 Starter Equipment & Design Machine
The Design Machine supplies 4 distinct classes of sources that paintings in combination to shape a whole design framework.
Presets: International Kinds Powered Through Design Variables
The preset library paperwork the core of the Design Machine. It contains Component Presets for lots of Divi modules and Possibility Staff 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 and every preset within the method connects to design variables for colours, fonts, and spacing values. This connection way converting a unmarried variable updates all presets that reference it, enabling site-wide design changes with out guide preset enhancing.
Segment Layouts: Premade Sections Constructed With Flexbox & Grid
Those segment layouts are pre-built the usage of more than a few boxes and modules. The method contains dozens of layouts masking commonplace site patterns: hero sections, function grids, testimonial presentations, pricing tables, crew 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.
Each and every segment structure 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 totally 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. Each and every is created from a medley of the Segment Layouts described above, organized to shape a complete web page. The method contains homepage permutations, about pages, products and services pages, portfolio presentations, weblog layouts, and call pages.
Those Web page Layouts are simply an more straightforward method to import a number of similar Segment Layouts as you get started your subsequent web page design. Import a web page structure, and you have got maximum the entirety you want. In fact, if you would like 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 method contains whole Theme Builder templates for headers, footers, submit templates, archive pages, and WooCommerce product pages. The Theme Builder is without doubt one of the highest portions about the usage of Divi, so we didn’t need you to fail to notice those templates.
You’ll be able to use any of those template assignments as-is, or you’ll reproduction 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 robotically incorporated because the International Header/Footer, you’ll delete the prevailing segment and import probably the most different header/footer layouts that higher fit your wishes.
Theme Customizer Settings (Not obligatory)
The Design Machine contains non-compulsory Customizer configurations that identify site-wide defaults for typography and hues. Those settings paintings together with design variables however perform on the WordPress Customizer stage.
You’ll be able to come with those, or just set your personal. Those customizer settings basically have an effect on:
- 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 Machine For Your Emblem
The Design Machine is a place to begin. You’ll be able to use the design as is, however it’s an excellent method to switch and make your personal. Doing so will allow you to grasp the brand new additions to Divi and allow you to see how the entire items have compatibility in combination.
Design variables give you the first layer of customization. The method contains variables for colours, fonts, font sizes, and spacing scales. Those design variables are utilized in virtually all presets, so while you trade a Design Variable, you’re converting a couple of presets. Get admission to the Design Variable Supervisor in the course of the continual left sidebar icon. The chief presentations all variables arranged through sort.
The Inspector instrument permits you to click on any part in a bit or web page structure and examine the customizations used within the Design Machine. 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 make a selection Check out to release the Inspector panel.
Create new Component Presets through 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 achieved with Possibility Staff Presets.
The customization workflow follows a hierarchical method: get started through organising foundational values via design variables, create or regulate presets that make the most of those variables, after which construct/regulate layouts the usage of the preset method. This method maintains the cascading consistency that makes the Design Machine maintainable.
How To Import The Divi 5 Starter Equipment Into Divi 5
While you’ve downloaded the Divi 5 Design Machine, it’s time to import it. Set up makes use of Divi 5’s local JSON import methods. The .ZIP record comprises a couple of JSON recordsdata for presets, sections, pages, Theme Builder templates, and Theme Customizer settings that you’ll add in only a few fast imports.
Within the WordPress dashboard, navigate to Divi > Divi Library > Import & Export. The primary record to import is “Black-Friday-2025_Divi-5-Freebie_Presets.json.” Remember to test “Import Presets!”
In the similar position and means, import “Black-Friday-2025_Divi-5-Freebie_All-Sections_Layouts.json.” This record imports 40 layouts, one structure for every segment sort, with a couple of premade sections in every.
In the event you would quite have them in my view loaded, you’ll import “Black-Friday-2025_Divi-5-Freebie_Individual-Sections.json” as an alternative, which imports 430 particular 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 through 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 (that is why you utilize this on new websites).
Finally, you’ll 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 International fonts and hues.
Get admission to imported layouts in the course of the Upload Structure interface when enhancing pages. Segment layouts seem within the library sections, whole web page layouts seem within the premade layouts segment, and Theme Builder templates seem when enhancing template varieties.
In the event you stumble upon any problems with those imports, you’ll seek advice from the clearer import directions on our lend a hand web site and call our toughen crew for help.
Get The Divi 5 Design Machine Sooner than The Sale Ends
The Divi 5 Design Machine is to be had solely all the way 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 all the way through this era supplies everlasting get admission to to the Divi 5 Design Machine.
This promotion coincides with Chic Subject matters’ maximum considerable annual cut price. Divi Professional licenses, lifetime upgrades, and top class merchandise are to be had at diminished pricing, to be had most effective all the way through this restricted window.
The Design Machine represents months of construction paintings, organising a production-ready framework that displays off Divi 5’s whole function set. Get admission to calls for a purchase order all the way through this promotional length. After the sale ends, the Design Machine will now not be to be had.
The submit 🎨 Obtain The Final Divi 5 Starter Equipment & Design Machine seemed first on Chic Subject matters Weblog.
WordPress Web Design