Divi 5 is our most enjoyable iteration but. It contains fashionable CSS Grid and Flexbox layouts. It makes use of tokenized values by the use of Design Variables. It additionally lets you cascade comparable kinds with Component and Option Group Presets.

The Divi 5 Design Gadget, to be had completely all the way through this Cyber Monday sale, supplies a production-ready framework that demonstrates those functions via loads of presets, designed phase layouts, and a structured variable gadget.

Construction a web page with the Design Gadget lets you compile pre-built elements that already incorporate Design Variables and Presets. That is like Wireframing with simple modifying get admission to to Design Variables and Presets, so you’ll be able to make the gadget your personal as you pass alongside.

This submit walks via construction an About web page the usage of Design Gadget elements, then demonstrates tips on how to customise the design via preset adjustments and variable changes. In case you are nonetheless suffering to make use of Divi 5 successfully, the program provides a hands-on strategy to studying from absolute best practices.

Preview The Design System

Putting in The Design Gadget Layouts

Earlier than construction pages, import the Design Gadget information into your Divi set up. The gadget is a ZIP record containing more than one JSON information that combine with Divi’s local import techniques. If you obtain them from the Member’s space beneath Perks, you’ll be able to unzip them.

Navigate to Divi > Divi Library > Import & Export for your WordPress dashboard. Import those information on this order:

1. 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 gadget.
2. Segment Layouts: Import both “Black-Friday-2025_Divi-5-Freebie_All-Sections_Layouts.json” for format teams (all timeline sections are imported as a unmarried web page with quite a lot of timeline sections, for example), or import particular person sections discovered within the “Particular person Sections” folder (this takes longer). The grouped model imports 40 category-organized layouts, whilst the person model imports 430 standalone sections.
3. Web page Layouts: Add “Black-Friday-2025_Divi-5-Freebie_Pages.json” so as to add whole web page templates which can be constructed with phase mixtures.

Those imports populate your Divi Library with labeled layouts that you’ll be able to pop at once into the Visible Builder’s ‘Upload Stored Format’ interface.

Read Import Guide

Growing Your About Web page Basis

There are two approaches you’ll be able to take with the design gadget. First, you’ll be able to import one in all our full-page builds. For an about us web page, you’ll be able to select the Web page Format “About” or “About 2.” Then again, you’ll be able to construct a web page via bringing in particular person phase layouts and mix and matching them your self (that is absolute best for those who import the sections in my opinion, fairly 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 admission to the Insert Format conversation. Make a choice Stored Format to open the Load From Library panel.

The “Your Stored Layouts” tab presentations all imported Design Gadget sections, arranged via class.

For an About web page, related classes come with:

• Hero (for opening sections)
• Textual content & Symbol (for corporate tale content material)
• Crew (for body of workers 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 all of the Hero sections. That is handy as it lets you scroll via them, make a selection the only you wish to have, and delete the others.

Now load the opposite sections that you wish to have to make use of in your About Us web page. Don’t Change Current Content material when loading next layouts onto your web page. In a different way, you are going to take away prior to now added sections.

As soon as whole, you’ll have a wireframe of your web page and be waiting to start making changes. Right here’s how ours grew to become out from merely uploading layouts from the Design Gadget.

Replace Content material (Non-compulsory)

In the event you construct web sites from a ‘content-first’ method, it will be advisable to revise the textual content of headings and frame paragraphs, in addition to incorporate genuine photographs into the format. Click on any module at the web page to open its settings in the appropriate sidebar contextual panel.

• Textual content Updates: Click on the headlines or paragraphs to get admission to the Content material tab. Change placeholder textual content together with your content material whilst conserving the prevailing formatting and preset programs.
• Symbol Replacements: Click on symbol modules to open their settings. Within the Content material tab, add your photographs or make a selection from the media library. The Design Gadget applies Possibility Crew Presets to pictures for constant border-radius, box-shadow, and spacing values.
• Button Adjustments: Click on button modules to replace hyperlink locations and button textual content.

Now comes the true energy of beginning off with a Design Gadget like this.

Making ready To Customise The Design Gadget

Earlier than making adjustments to the Design Gadget, it’s advisable to grasp the course you take. Accumulate your logo belongings and identify fundamental design alternatives that you are going to use as you alter the gadget in your wishes. This preparation prevents spinning your wheels.

1. Emblem Colours: Determine a number one logo colour, a secondary colour, and a impartial palette, if acceptable. If imaginable, observe which colours serve which functions (CTAs, backgrounds, accents).
2. Typography Choices: Make a choice your heading font and frame font.
3. Spacing Scale: Make a decision whether or not you’ll use mounted spacing values or fluid spacing. Divi 5 helps complex 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 lets you make assured, systematic adjustments fairly than regularly tinker. In the event you don’t have those, after all, you’ll be able to nonetheless experiment as you pass alongside.

Working out Design Variables In The Design Gadget

Design Variables give you the inner most 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 wish to have to begin modifying.

Click on the Design Variable Supervisor icon within the continual left sidebar. The executive presentations variables arranged via kind: Colours, Typography, Spacing, and others.

Colours

Extend the Colours phase to view all colour variables. The Design Gadget contains:

1. Number one and secondary logo colours
2. Textual content colour variables
3. Situational colours (borders, backgrounds, drop shadows)

Click on any colour variable to open the colour picker. Alter the colour price and follow real-time updates throughout all presets and modules referencing that variable. As an example, converting the “Number one Colour” updates all number one buttons, hyperlinks, accessory parts, and ornamental elements that use that colour variable.

Past Number one/Secondary and Heading/Frame textual content colour, you’ll have to make use of the Inspector to look precisely which variables other modules are the usage of. The Inspector is a point-and-click software that displays all of the edited kinds (together with those who use Design Variables and people who are implemented by the use of Presets).

The use of it makes it very fast to seek out Design Variables which can be used at the web page and module you might be operating on. As soon as you already know which of them give a contribution to a design, you’ll be able to then pass to the Design Variable Supervisor and make your edits there.

Typography

Extend the Typography phase to get admission to font circle of relatives and font dimension variables. Alter the heading font variable to replace all headlines throughout your web page concurrently.

Due to Divi’s International Font gadget, all of your website might be up to date together with your new font alternatives immediately.

Numbers & Sizes

The Spacing phase comprises variables controlling padding, margin, and hole values. Alter those variables to verify constant spacing throughout all layouts. The Design Gadget makes use of spacing scales (e.g., “Spacing – Small”, “Spacing – Medium”, “Spacing – Massive”) that care for proportional relationships when adjusted. It additionally has quite a lot of 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). In the event you sought after to simplify this, you’ll be able to edit the primary example of those to make use of clamp() purposes and depend much less at the Breakpoint gadget for typography.

How Presets Paintings In The Design Gadget

The Design Gadget’s preset structure operates at two ranges: Component Presets and Possibility Crew Presets. Working out the place those seem within the interface prepares you for systematic customization.

Component Presets: Click on any module and find the preset chip on the peak of the settings panel. This chip presentations the present Component Preset title (e.g., “Number one Button” or “Heading – Massive”). Component Presets include whole module configurations, together with some content material settings, design homes, and complex choices.

Possibility Crew Presets: If it makes use of OG Presets, you are going to see the Preset chip at the right-hand facet, subsequent to an Possibility Crew label. Some Modules will have Component and OG Presets (or Component Presets constructed with Nested Possibility Crew Presets).

Stacked Presets: Some modules observe 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 an entire aesthetic from part portions.

Get The Divi 5 Design Gadget Earlier than It’s Long past!

The Divi 5 Design Gadget is to be had completely all the way through the Cyber Monday sale. Any qualifying acquire made all the way through the promotional duration supplies get admission to to this framework.

• 🎉 Get Divi Professional for 80% Off — The ultimate Divi bundle! Comprises get admission to to Divi 5, Divi AI, Divi Cloud, Divi VIP, Divi Groups, Divi Sprint, the overall suite of DonDivi plugins, and a $50 Divi Market credit score. Lifetime and every year choices to be had — all long run Divi 5 updates integrated.
• 🎉 Repackage Your Club for As much as 80% Off — Current participants can repackage their current subscriptions right into a Divi Professional package to scale back subscription prices and unencumber extra options. Liberate Divi AI, Cloud, Groups, VIP Reinforce, DonDivi, and a loose $50 market credit score whilst decreasing your current subscription price via as much as 80%.
• 🎉 Get Divi AI for 70% Off — Divi AI designs, writes, and codes at once 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 quicker consumer supply.
• 🎉 Get Divi Groups for 44% Off — Collaborate easily with shared get admission to, roles, and permissions — absolute best for businesses.
• 🎉 Get Divi VIP for 44% Off — Enjoy 24/7 priority support 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 topics, advertising equipment, ecommerce options, and weblog upgrades in 5 Cyber Monday-only Divi 5-ready bundles to stage up your workflow.

After finishing a qualifying acquire, obtain the Design Gadget in the course of the Perks section for your Sublime Topics Contributors’ Space.

The Design Gadget represents months of construction paintings, organising patterns for Divi 5’s whole function set. Get right of entry to is in the stores all the way through this restricted promotional window; after Cyber Monday, the Design Gadget will not be to be had.

The submit How To Build A Page With The Divi 5 Design System (Cyber Monday Exclusive!) seemed first on Elegant Themes Blog.

WordPress Maintenance Plans | WordPress Hosting

read more