Divi 5 is our most fun iteration but. It comprises fashionable CSS Grid and Flexbox layouts. It makes use of tokenized values by way of Design Variables. It additionally permits you to cascade similar types with Part and Possibility Crew Presets.
The Divi 5 Design Machine, to be had solely all over this Cyber Monday sale, supplies a production-ready framework that demonstrates those functions via masses of presets, designed phase layouts, and a structured variable machine.
Development a web page with the Design Machine permits you to compile pre-built parts that already incorporate Design Variables and Presets. That is like Wireframing with simple modifying get entry to to Design Variables and Presets, so you’ll make the machine your individual as you cross alongside.
This submit walks via construction an About web page the usage of Design Machine parts, then demonstrates methods to customise the design via preset adjustments and variable changes. If you’re nonetheless suffering to make use of Divi 5 successfully, the program provides a hands-on solution to finding out from very best practices.
Putting in The Design Machine Layouts
Sooner than construction pages, import the Design Machine recordsdata into your Divi set up. The machine is a ZIP report containing more than one JSON recordsdata that combine with Divi’s local import programs. If you obtain them from the Member’s house below Perks, you’ll unzip them.
Navigate to Divi > Divi Library > Import & Export on your WordPress dashboard. Import those recordsdata on this order:
- Presets: Add “Black-Friday-2025_Divi-5-Freebie_Presets.json” with the “Import Presets” checkbox enabled. Those presets shape the root for all layouts within the machine.
- Segment Layouts: Import both “Black-Friday-2025_Divi-5-Freebie_All-Sections_Layouts.json” for structure teams (all timeline sections are imported as a unmarried web page with more than a few timeline sections, as an example), or import particular person sections discovered within the “Person Sections” folder (this takes longer). The grouped model imports 40 category-organized layouts, whilst the person model imports 430 standalone sections.
- Web page Layouts: Add “Black-Friday-2025_Divi-5-Freebie_Pages.json” so as to add entire web page templates which are constructed with phase mixtures.
Those imports populate your Divi Library with classified layouts that you’ll pop without delay into the Visible Builder’s ‘Upload Stored Structure’ interface.
Growing Your About Web page Basis
There are two approaches you’ll take with the design machine. First, you’ll import considered one of our full-page builds. For an about us web page, you’ll make a selection the Web page Structure “About” or “About 2.” However, you’ll construct a web page by means of bringing in particular person phase layouts and mix and matching them your self (that is perfect in the event you import the sections in my view, quite than within the grouped structure).
Create A New Web page
Create a brand new web page in WordPress and release the Visible Builder.
Click on the + icon within the continual left sidebar to get entry to the Insert Structure conversation. Choose Stored Structure to open the Load From Library panel.
The “Your Stored Layouts” tab presentations all imported Design Machine sections, arranged by means of class.
For an About web page, related classes come with:
- Hero (for opening sections)
- Textual content & Symbol (for corporate tale content material)
- Staff (for workforce introductions)
- CTA (for conversion movements)
We imported the sections as pages, so after we load a Hero Segment from the library, we’re in truth loading the entire Hero sections. That is handy as it permits you to scroll via them, make a choice the only you need, and delete the others.
Now load the opposite sections that you need to make use of in your About Us web page. Don’t Substitute Present Content material when loading next layouts onto your web page. Differently, you’ll take away prior to now added sections.
As soon as entire, you’ll have a wireframe of your web page and be waiting to start out making changes. Right here’s how ours grew to become out from merely uploading layouts from the Design Machine.
Replace Content material (Non-compulsory)
For those who construct web sites from a ‘content-first’ means, it could be really useful to revise the textual content of headings and frame paragraphs, in addition to incorporate genuine photographs into the structure. Click on any module at the web page to open its settings in the correct sidebar contextual panel.
- Textual content Updates: Click on the headlines or paragraphs to get entry to the Content material tab. Substitute placeholder textual content together with your content material whilst conserving the prevailing formatting and preset packages.
- Symbol Replacements: Click on symbol modules to open their settings. Within the Content material tab, add your photographs or make a choice from the media library. The Design Machine applies Possibility Crew Presets to pictures for constant border-radius, box-shadow, and spacing values.
- Button Changes: Click on button modules to replace hyperlink locations and button textual content.
Now comes the actual energy of beginning off with a Design Machine like this.
Making ready To Customise The Design Machine
Sooner than making adjustments to the Design Machine, it’s really useful to understand the course you’re taking. Accumulate your emblem property and determine fundamental design alternatives that you’re going to use as you regulate the machine in your wishes. This preparation prevents spinning your wheels.
- Logo Colours: Identify a number one emblem colour, a secondary colour, and a impartial palette, if acceptable. If imaginable, notice which colours serve which functions (CTAs, backgrounds, accents).
- Typography Choices: Select your heading font and frame font.
- Spacing Scale: Come to a decision whether or not you’ll use fastened spacing values or fluid spacing. Divi 5 helps complicated CSS gadgets, together with clamp() for responsive spacing that routinely adjusts between minimal and most values throughout viewport sizes. Use a typography generator to nail the ones down.
This preparation allows you to make assured, systematic adjustments quite than regularly tinker. For those who don’t have those, after all, you’ll nonetheless experiment as you cross alongside.
Figuring out Design Variables In The Design Machine
Design Variables give you the private customization layer, permitting site-wide design updates via single-value adjustments. Those Design Variables are used during the website in a large number of Presets. So that is the primary position you need to begin modifying.
Click on the Design Variable Supervisor icon within the continual left sidebar. The chief presentations variables arranged by means of kind: Colours, Typography, Spacing, and others.
Colours
Amplify the Colours phase to view all colour variables. The Design Machine comprises:
- Number one and secondary emblem colours
- Textual content colour variables
- Situational colours (borders, backgrounds, drop shadows)
Click on any colour variable to open the colour picker. Regulate the colour price and practice real-time updates throughout all presets and modules referencing that variable. For instance, converting the “Number one Colour” updates all number one buttons, hyperlinks, accessory parts, and ornamental parts that use that colour variable.
Past Number one/Secondary and Heading/Frame textual content colour, you will have to make use of the Inspector to peer precisely which variables other modules are the usage of. The Inspector is a point-and-click instrument that displays the entire edited types (together with those who use Design Variables and people who are carried out by way of Presets).
The usage of it makes it very fast to search out Design Variables which are used at the web page and module you might be running on. As soon as you already know which of them give a contribution to a design, you’ll then cross to the Design Variable Supervisor and make your edits there.
Typography
Amplify the Typography phase to get entry to font circle of relatives and font measurement variables. Regulate the heading font variable to replace all headlines throughout your web page concurrently.
Due to Divi’s International Font machine, all of your website shall be up to date together with your new font alternatives immediately.
Numbers & Sizes
The Spacing phase comprises variables controlling padding, margin, and hole values. Regulate those variables to make sure constant spacing throughout all layouts. The Design Machine makes use of spacing scales (e.g., “Spacing – Small”, “Spacing – Medium”, “Spacing – Huge”) that care for proportional relationships when adjusted. It additionally has more than a few situational numbers added (for border radius, button padding, line peak, and others).
It additionally makes use of px values for all heading ranges and frame textual content sizes for 3 breakpoints (cell, pill, desktop). For those who sought after to simplify this, you’ll edit the primary example of those to make use of clamp() purposes and depend much less at the Breakpoint machine for typography.
How Presets Paintings In The Design Machine
The Design Machine’s preset structure operates at two ranges: Part Presets and Possibility Crew Presets. Figuring out the place those seem within the interface prepares you for systematic customization.
Part Presets: Click on any module and find the preset chip on the peak of the settings panel. This chip presentations the present Part Preset identify (e.g., “Number one Button” or “Heading – Huge”). Part Presets comprise entire module configurations, together with some content material settings, design houses, and complicated choices.
Part Presets are discovered within the top-right nook, and there is also more than one outlined by means of the Design Machine
Possibility Crew Presets: If it makes use of OG Presets, you’ll see the Preset chip at the right-hand aspect, subsequent to an Possibility Crew label. Some Modules will have Part and OG Presets (or Part Presets constructed with Nested Possibility Crew Presets).
This column has a border carried out by way of an Possibility Crew Preset. This OG Preset is usable on any module or container!
Stacked Presets: Some modules practice more than one Possibility Crew Presets to other choice teams concurrently. A hero phase would possibly stack “Background – Darkish”, “Spacing – Hero”, and “Textual content – Mild” presets to create a whole aesthetic from element portions.
This Symbol makes use of Stacked Presets, one so as to add rounded corners and one so as to add a definite peak
Get The Divi 5 Design Machine Sooner than It’s Long past!
The Divi 5 Design Machine is to be had solely all over the Cyber Monday sale. Any qualifying acquire made all over the promotional duration supplies get entry to to this framework.
- 🎉 Get Divi Professional for 80% Off — Without equal Divi package deal! Comprises get entry to to Divi 5, Divi AI, Divi Cloud, Divi VIP, Divi Groups, Divi Sprint, the whole suite of DonDivi plugins, and a $50 Divi Market credit score. Lifetime and once a year choices to be had — all long term Divi 5 updates incorporated.
- 🎉 Repackage Your Club for As much as 80% Off — Present contributors can repackage their current subscriptions right into a Divi Professional package deal to cut back subscription prices and liberate extra options. Free up Divi AI, Cloud, Groups, VIP Give a boost to, DonDivi, and a unfastened $50 market credit score whilst decreasing your current subscription value by means of as much as 80%.
- 🎉 Get Divi AI for 70% Off — Divi AI designs, writes, and codes without delay in Divi. Generate layouts, content material, and photographs immediately.
- 🎉 Get Divi Cloud for 44% Off — Save and reuse your layouts any place. Cloud-sync all of your Divi Library for sooner shopper supply.
- 🎉 Get Divi Groups for 44% Off — Collaborate simply with shared get entry to, roles, and permissions — best for companies.
- 🎉 Get Divi VIP for 44% Off — Revel in 24/7 precedence fortify with 30-minute reaction occasions and 10% off all Market merchandise.
- 🎉 Save 70% on Cyber Monday Market Bundles — Get curated collections of Divi modules, kid subject matters, advertising equipment, ecommerce options, and weblog upgrades in 5 Cyber Monday-only Divi 5-ready bundles to degree up your workflow.
After finishing a qualifying acquire, obtain the Design Machine in the course of the Perks phase on your Chic Subject matters Individuals’ House.
The Design Machine represents months of building paintings, organising patterns for Divi 5’s entire characteristic set. Get admission to is in the stores all over this restricted promotional window; after Cyber Monday, the Design Machine will now not be to be had.
The submit How To Construct A Web page With The Divi 5 Design Machine (Cyber Monday Unique!) seemed first on Chic Subject matters Weblog.
WordPress Web Design