Divi 5 is our most fun iteration but. It contains fashionable CSS Grid and Flexbox layouts. It makes use of tokenized values by means of Design Variables. It additionally lets you cascade similar kinds with Component and Possibility Staff 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 features via masses of presets, designed phase layouts, and a structured variable device.
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 enhancing get right of entry to to Design Variables and Presets, so you’ll make the device your personal as you move alongside.
This submit walks via construction an About web page the usage of Design Gadget elements, then demonstrates the way 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 option to studying from very best practices.
Putting in The Design Gadget Layouts
Ahead of construction pages, import the Design Gadget information into your Divi set up. The device is a ZIP report containing a couple of JSON information that combine with Divi’s local import techniques. While you obtain them from the Member’s house underneath Perks, you’ll unzip them.
Navigate to Divi > Divi Library > Import & Export on your WordPress dashboard. Import those information on this order:
- Presets: Add “Black-Friday-2025_Divi-5-Freebie_Presets.json” with the “Import Presets” checkbox enabled. Those presets shape the basis for all layouts within the device.
- Phase 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 quite a lot of timeline sections, as an example), or import 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.
- Web page Layouts: Add “Black-Friday-2025_Divi-5-Freebie_Pages.json” so as to add entire web page templates which might be constructed with phase combos.
Those imports populate your Divi Library with categorised layouts that you’ll pop at once into the Visible Builder’s ‘Upload Stored Format’ interface.
Developing Your About Web page Basis
There are two approaches you’ll take with the design device. First, you’ll import one in all our full-page builds. For an about us web page, you’ll make a choice the Web page Format “About” or “About 2.” Then again, you’ll construct a web page by means of bringing in person phase layouts and mix and matching them your self (that is best in case you import the sections in my view, moderately than within the grouped layout).
Create A New Web page
Create a brand new web page in WordPress and release the Visible Builder.
Click on the + icon within the chronic left sidebar to get right of entry to the Insert Format conversation. Make a selection Stored Format to open the Load From Library panel.
The “Your Stored Layouts” tab presentations all imported Design Gadget 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)
- Group (for workforce introductions)
- CTA (for conversion movements)
We imported the sections as pages, so after we load a Hero Phase from the library, we’re in fact 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 to 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 in the past added sections.
As soon as entire, 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 (Not obligatory)
Should you construct internet sites from a ‘content-first’ manner, it might be recommended 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 precise sidebar contextual panel.
- Textual content Updates: Click on the headlines or paragraphs to get right of entry to the Content material tab. Change placeholder textual content together with your content material whilst protecting 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 selection from the media library. The Design Gadget applies Possibility Staff Presets to photographs 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 Gadget like this.
Getting ready To Customise The Design Gadget
Ahead of making adjustments to the Design Gadget, it’s recommended to grasp the path you take. Accumulate your emblem belongings and identify elementary design possible choices that you are going to use as you adjust the device for your wishes. This preparation prevents spinning your wheels.
- Emblem Colours: Identify a number one emblem colour, a secondary colour, and a impartial palette, if appropriate. If conceivable, observe which colours serve which functions (CTAs, backgrounds, accents).
- Typography Alternatives: Make a selection your heading font and frame font.
- Spacing Scale: Come to 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 moderately than frequently tinker. Should you don’t have those, in fact, you’ll nonetheless experiment as you move alongside.
Working out Design Variables In The Design Gadget
Design Variables give you the private customization layer, permitting site-wide design updates via single-value adjustments. Those Design Variables are used all over the web site in a large number of Presets. So that is the primary position you wish to have to begin enhancing.
Click on the Design Variable Supervisor icon within the chronic 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 Gadget contains:
- 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 follow 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 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 peer precisely which variables other modules are the usage of. The Inspector is a point-and-click instrument that presentations all of the edited kinds (together with those who use Design Variables and those who are implemented by means of Presets).
The usage of it makes it very fast to seek out Design Variables which might be used at the web page and module you might be running on. As soon as which of them give a contribution to a design, you’ll then move to the Design Variable Supervisor and make your edits there.
Typography
Amplify the Typography phase to get right of entry to font circle of relatives and font dimension variables. Regulate the heading font variable to replace all headlines throughout your web page concurrently.
Due to Divi’s International Font device, your whole web site will likely be up to date together with your new font possible choices right away.
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 Gadget makes use of spacing scales (e.g., “Spacing – Small”, “Spacing – Medium”, “Spacing – Huge”) that take care of proportional relationships when adjusted. It additionally has quite a lot of situational numbers added (for border radius, button padding, line top, and others).
It additionally makes use of px values for all heading ranges and frame textual content sizes for 3 breakpoints (cell, pill, desktop). Should you 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 device for typography.
How Presets Paintings In The Design Gadget
The Design Gadget’s preset structure operates at two ranges: Component Presets and Possibility Staff 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 height of the settings panel. This chip presentations the present Component Preset title (e.g., “Number one Button” or “Heading – Huge”). Component Presets include entire module configurations, together with some content material settings, design houses, and complex choices.
Component Presets are discovered within the top-right nook, and there could also be a couple of outlined by means of the Design Gadget
Possibility Staff Presets: If it makes use of OG Presets, you are going to see the Preset chip at the right-hand aspect, subsequent to an Possibility Staff label. Some Modules can have Component and OG Presets (or Component Presets constructed with Nested Possibility Staff Presets).
This column has a border implemented by means of an Possibility Staff Preset. This OG Preset is usable on any module or container!
Stacked Presets: Some modules practice a couple of Possibility Staff Presets to other possibility teams concurrently. A hero phase would possibly stack “Background – Darkish”, “Spacing – Hero”, and “Textual content – Mild” presets to create a whole aesthetic from part portions.
This Symbol makes use of Stacked Presets, one so as to add rounded corners and one so as to add a definite top
Get The Divi 5 Design Gadget Ahead of It’s Long gone!
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 right of entry to to this framework.
- 🎉 Get Divi Professional for 80% Off — Without equal Divi package! Contains get right of entry 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 term Divi 5 updates incorporated.
- 🎉 Repackage Your Club for As much as 80% Off — Current participants can repackage their present subscriptions right into a Divi Professional package to scale back subscription prices and free up extra options. Unencumber Divi AI, Cloud, Groups, VIP Improve, DonDivi, and a unfastened $50 market credit score whilst decreasing your present subscription price by means of 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 pictures right away.
- 🎉 Get Divi Cloud for 44% Off — Save and reuse your layouts any place. Cloud-sync your whole Divi Library for sooner shopper supply.
- 🎉 Get Divi Groups for 44% Off — Collaborate simply with shared get right of entry to, roles, and permissions — highest for businesses.
- 🎉 Get Divi VIP for 44% Off — Revel in 24/7 precedence improve 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 and marketing 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 phase on your Chic Issues Contributors’ Space.
The Design Gadget represents months of building paintings, setting up patterns for Divi 5’s entire function set. Get admission 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 Construct A Web page With The Divi 5 Design Gadget (Cyber Monday Unique!) seemed first on Chic Issues Weblog.
WordPress Web Design