I’m excited to introduce a brand new stage of suppleness for Divi 5 variables: mix them, nest them inside of different variables, and use them without delay in calculations inside of your settings. 🎉
Create spacing relationships that keep attached as your design adjustments. Construct fluid sizes from shared minimal and most values. Combine reusable textual content, dynamic content material, and your individual phrases in the similar box.
This expands on Design Variables and works along Relative Colours, turning reusable values into the construction blocks of extra attached designs and content material.
Let’s check out the way it works. 👇
Create Design Relationships With Variable Math
A host variable can now be a part of a calculation. Insert your variable right into a supported quantity box, then mix it with different values the use of addition, subtraction, multiplication, or department.
Believe a bit with padding managed through a Spacing variable. You wish to have a picture inside of that segment to increase past its edge. Use the similar variable multiplied through -1 for the picture’s margin, and the ones two settings keep attached. Alter the unique spacing, and the adverse margin follows.
You’ll use the similar way to create comparable values all through a design:
- Give a big card two times your usual padding.
- Set a smaller hole to part your base spacing.
- Subtract a shared gutter from a container’s width.
- Offset a component the use of a calculation in line with its surrounding spacing.
You make a decision whether or not a dating belongs in a single box or merits its personal reusable variable. A one-off adjustment can stick with the part, whilst a steadily used calculation can transform a part of your website online’s sizing device.
Construct Variables From Different Variables
Variables can now comprise different variables, together with references inside of quantity purposes and combos inside of textual content variables.
Open the Variable Supervisor from the builder’s sidebar and edit a host or textual content variable. Its price box now comprises variable insertion controls, permitting you to construct a price from different variables relatively than repeating their contents.
Divi’s Complex Devices already toughen purposes akin to clamp(). This replace means that you can insert quantity variables into the ones purposes the use of editable chips.
As an example, create Minimal Heading and Most Heading variables, then reference each inside of a Fluid Heading variable the use of clamp(). The center price controls how the heading scales with the viewport, whilst your shared variables determine its limits.
Practice Fluid Heading anyplace you wish to have that dimension. When your shopper requests a bigger most heading dimension, exchange the supply variable, and the dependent price will practice.
The serve as stays obtainable throughout the box’s unit selector, and its arguments stay editable across the variable chips.
Compile Reusable Textual content
Nesting additionally works with textual content variables.
Create Criminal Identify and Yr variables, then nest them inside of a reusable Copyright textual content variable: “Copyright © [Year] [Legal Name]. All rights reserved.”
Reuse the Copyright variable in footers and different spaces throughout your website online whilst conserving its particular person items centrally controlled.
Whilst you replace the Criminal Identify or Yr variable, the exchange carries via to the dad or mum Copyright variable and each position apparently in your website online.
Mix Variables, Dynamic Content material, And Your Personal Phrases
Each commonplace and wealthy textual content fields can now comprise dynamic content material and variables intermixed with static content material.
A weblog put up data segment is an easy instance: sort “Through,” insert the put up’s writer from the dynamic content material menu, then upload the put up date and remark rely along with your most well-liked textual content and separators. You’ll construct a line like “Through Jane Smith · October 27, 2026 · 12 Feedback” in one Textual content Module. Every dynamic supply remains independently editable inside of the similar box.
Position your cursor the place the following supply belongs, open Insert Dynamic Content material, and make a selection it. You’ll additionally spotlight present textual content ahead of opting for a supply to exchange simply that variety.
In rich-text fields, the encircling formatting remains a part of your content material. Daring the writer’s title or italicize the date whilst combining a number of dynamic content material chips as a substitute of assigning one supply to all of the box.
This additionally works in Loop Builder, the place the similar put up data line can show every put up’s writer, put up date, and remark rely whilst conserving your textual content, separators, and formatting intact.
Stepped forward Variable Chip UI
We’ve advanced Divi’s variable chip UI to show you how to insert, rearrange, and edit more than one variables inside of a unmarried box.
Simply Insert, Transfer, and Organize Variables Inside of Textual content Fields
Operating with a number of variables will have to really feel like enhancing one coherent price. Every supply now seems as its personal chip, so you’ll engage with the piece you need to switch.
- Click on a chip to open choices for that prevalence.
- Exchange, take away, or detach one supply whilst protecting the encircling content material.
- Drag chips to a brand new place inside of abnormal inline fields.
- Make a selection the textual content for substitute, then proceed typing round present chips.
- Hover over chips to investigate cross-check their values or nested expressions.
Variable picker previews additionally display nested references as readable chips. Seek can fit the names of referenced variables, making composed values more straightforward to seek out.
Insert Variables From The Keyboard
Kind {{ in a supported textual content, URL, or CSS quantity box to open the picker at your cursor. Make a choice a supply, then proceed enhancing after the inserted chip.
It’s a handy shortcut whilst you’re assembling a sentence or including a number of variables to a calculation.
Did You Pass over Divi 5’s New Icon Supervisor?
We just lately presented the Icon Supervisor for Divi 5, a central position to import customized SVGs and icon fonts, get them organized into collections, and make a selection which collections seem when you construct.
Create a set in your shopper’s logo, arrange your favourite icons, and choose them without delay from Divi’s icon picker. Take a look at the announcement for a complete walkthrough!
Extra Divi 5 Updates Are On The Means
The options stay coming, and we aren’t slowing down anytime quickly!
If you’re taking part in those updates, do us an enormous prefer through liking this video and leaving a remark. It way so much to us to look you cheering Divi on, and it’s very important to feed the set of rules and unfold the phrase.
Don’t omit to practice us on YouTube and subscribe to the Divi e-newsletter so that you by no means pass over an replace. I’ll see you quickly for some other Divi 5 function announcement, which I promise shall be proper across the nook.
The put up Nested Variables, Variable Math & Variable Combos for Divi 5 gave the impression first on Sublime Issues Weblog.
WordPress Web Design