I’m excited to introduce a new level of flexibility for Divi 5 variables: combine them, nest them within other variables, and use them directly in calculations within your settings. 🎉
Create spacing relationships that stay connected as your design changes. Build fluid sizes from shared minimum and maximum values. Mix reusable text, dynamic content, and your own words in the same field.
This expands on Design Variables and works alongside Relative Colors, turning reusable values into the building blocks of more connected designs and content.
Let’s take a look at how it works. 👇
Create Design Relationships With Variable Math
A number variable can now be part of a calculation. Insert your variable into a supported number field, then combine it with other values using addition, subtraction, multiplication, or division.
Imagine a section with padding controlled by a Spacing variable. You want an image inside that section to extend beyond its edge. Use the same variable multiplied by -1 for the image’s margin, and those two settings stay connected. Adjust the original spacing, and the negative margin follows.
You can use the same approach to create related values throughout a design:
- Give a large card twice your standard padding.
- Set a smaller gap to half your base spacing.
- Subtract a shared gutter from a container’s width.
- Offset an element using a calculation based on its surrounding spacing.
You decide whether a relationship belongs in one field or deserves its own reusable variable. A one-off adjustment can stay with the element, while a frequently used calculation can become part of your website’s sizing system.
Build Variables From Other Variables
Variables can now contain other variables, including references inside number functions and combinations inside text variables.
Open the Variable Manager from the builder’s sidebar and edit a number or text variable. Its value field now includes variable insertion controls, allowing you to build a value from other variables rather than repeating their contents.
Create Fluid Sizes With Shared Limits
Divi’s Advanced Units already support functions such as clamp(). This update lets you insert number variables into those functions using editable chips.
For example, create Minimum Heading and Maximum Heading variables, then reference both inside a Fluid Heading variable using clamp(). The middle value controls how the heading scales with the viewport, while your shared variables establish its limits.
Apply Fluid Heading wherever you need that size. When your client requests a larger maximum heading size, change the source variable, and the dependent value will follow.
The function remains accessible through the field’s unit selector, and its arguments remain editable around the variable chips.
Assemble Reusable Text
Nesting also works with text variables.
Create Legal Name and Year variables, then nest them inside a reusable Copyright text variable: “Copyright © [Year] [Legal Name]. All rights reserved.”
Reuse the Copyright variable in footers and other areas across your website while keeping its individual pieces centrally managed.
When you update the Legal Name or Year variable, the change carries through to the parent Copyright variable and every place it appears on your website.
Combine Variables, Dynamic Content, And Your Own Words
Both normal and rich text fields can now contain dynamic content and variables intermixed with static content.
A blog post info section is a simple example: type “By,” insert the post’s author from the dynamic content menu, then add the publish date and comment count with your preferred text and separators. You can build a line like “By Jane Smith · October 27, 2026 · 12 Comments” in a single Text Module. Each dynamic source stays independently editable inside the same field.
Place your cursor where the next source belongs, open Insert Dynamic Content, and choose it. You can also highlight existing text before choosing a source to replace just that selection.
In rich-text fields, the surrounding formatting stays part of your content. Bold the author’s name or italicize the date while combining several dynamic content chips instead of assigning one source to the entire field.
This also works in Loop Builder, where the same post info line can display each post’s author, publish date, and comment count while keeping your text, separators, and formatting intact.
Improved Variable Chip UI
We’ve improved Divi’s variable chip UI to make it easier to insert, rearrange, and edit multiple variables within a single field.
Easily Insert, Move, and Manage Variables Within Text Fields
Working with several variables should feel like editing one coherent value. Each source now appears as its own chip, so you can interact with the piece you want to change.
- Click a chip to open options for that occurrence.
- Replace, remove, or detach one source while preserving the surrounding content.
- Drag chips to a new position within ordinary inline fields.
- Select the text for replacement, then continue typing around existing chips.
- Hover over chips to inspect their values or nested expressions.
Variable picker previews also show nested references as readable chips. Search can match the names of referenced variables, making composed values easier to find.
Insert Variables From The Keyboard
Type {{ in a supported text, URL, or CSS number field to open the picker at your cursor. Choose a source, then continue editing after the inserted chip.
It’s a convenient shortcut when you’re assembling a sentence or adding several variables to a calculation.
Did You Miss Divi 5’s New Icon Manager?
We recently introduced the Icon Manager for Divi 5, a central place to import custom SVGs and icon fonts, organize them into collections, and choose which collections appear while you build.
Create a collection for your client’s brand, organize your favorite icons, and select them directly from Divi’s icon picker. Check out the announcement for a full walkthrough!
More Divi 5 Updates Are On The Way
The features keep coming, and we aren’t slowing down anytime soon!
If you are enjoying these updates, do us a huge favor by liking this video and leaving a comment. It means a lot to us to see you cheering Divi on, and it’s essential to feed the algorithm and spread the word.
Don’t forget to follow us on YouTube and subscribe to the Divi newsletter so you never miss an update. I’ll see you soon for another Divi 5 feature announcement, which I promise will be right around the corner.
The post Nested Variables, Variable Math & Variable Combinations for Divi 5 appeared first on Elegant Themes Blog.