Variable Math and Inline Content change how Design Variables and Dynamic Content work inside a field. Adding a variable no longer replaces the entire field. It drops in as a chip right where your cursor is, so you can type text around it and add more variables or dynamic content to the same field.

This article shows you how to combine text with variables, work with the chips, open the variable picker from the keyboard, do math with number variables, and build new variables out of existing ones.

Divi 5 - Variable Math and Inline Content in Divi 5

What's new

Text and variables in one field - Type static text before, between, and after variables and dynamic content in the same field.
Several variables per field - Add as many text variables and dynamic content sources to one field as you need.
Editable chips - Each variable or source is its own chip that you can replace, move, copy, or delete without touching the rest of the field.
Variable math - Combine number variables with plain numbers using addition, subtraction, multiplication, and division, or place them inside calc(), clamp(), min(), and max().
Nested variables - Build a Number or Text variable out of other variables, so it updates whenever the variables it uses change.
A keyboard shortcut - Type {{ in a supported field to open the variable picker without leaving the keyboard.

Add variables and dynamic content to a text field

Text fields, link (URL) fields, and rich text fields, such as the Body of a Text module, all support inline content.

Open the module's settings by clicking the Gear Icon or the module itself.
In the Content tab, click inside a text field, such as the Heading field in the Text group of a Heading module, and place your cursor where the variable should go.
Hover over the field and click the Insert Dynamic Content icon.
Choose a variable or a dynamic content source from the list. Text variables are listed under My Global Strings, and sources such as Site Title are listed under Dynamic Content.

The chip appears at your cursor, and the rest of the field stays as it was. Keep typing to add text around it, or repeat the steps to add more chips.

![Screenshot: The dynamic content list open from the Heading field, showing My Global Strings]

For example, a heading can combine static text with two dynamic content sources:

Welcome to [Site Title] - [Site Tagline]

Each part in brackets is a chip. If you change your site's title in WordPress, the heading updates automatically, and the surrounding text stays the same.

You can build longer lines the same way. For a post info line in the Body of a Text module, type By , insert Post Author, then add Post Publish Date and Post Comment Count with your own separators:

By [Post Author] · [Post Publish Date] · [Post Comment Count]

In rich text fields like this one, your formatting stays in place around the chips. You can bold the author's name or italicize the date without giving the whole field to a single source.

Pro tip: To swap a word for a variable, select the word first, then pick the variable. The variable replaces only the selected text.

Work with chips

Every variable or dynamic content source in a field is a separate chip. Click a chip to open its menu:

Variable Settings - Opens the chip's own settings, such as text to show before or after it. This only appears for sources that have settings.
Detach From Variable - Replaces the chip with its current value as plain text, so it no longer updates. Loop dynamic content can't be detached.
Remove Variable - Deletes the chip and leaves the rest of the field as it is.
Any other variable or source in the list - Replaces only this chip with the one you pick.

You can also:

Preview a value - Hover over a chip to see what it holds. A dynamic content chip shows its value on the current page, and a variable chip shows the variable's value. If the variable is built from other variables, you see how it's built instead, such as Base Spacing * 2.
Move a chip - Drag a chip to a new spot in the field. Dragging works in ordinary text fields, not in rich text editors.
Copy, cut, and paste - Select chips along with any text and use the usual keyboard shortcuts. Pasted chips stay chips.
Undo and redo - CMD + Z on a Mac or CTRL + Z on a PC undoes chip changes along with your typing.

If a chip shows a small warning symbol, the variable behind it is nested too deeply or produces too much content for Divi to work out. Simplify the variables it uses to clear the warning.

Open the variable picker with the keyboard

Type {{ (two opening curly brackets) in a supported text, URL, or number field.
The variable picker opens with its search box ready, so you can type part of a variable's name to filter the list.
Press Enter or click a result to replace the two brackets you typed with the variable.

Do math with number variables

Number variables can now be part of a calculation instead of being the whole value. This lets you create relative sizes, much like relative colors build on a base color. Change the base variable once, and every calculated value follows.

For example, if a section's padding uses a Base Spacing variable, you can:

Give an image inside it a margin of [Base Spacing] * -1, so it reaches past the section's edge by exactly the padding. Change Base Spacing, and the negative margin automatically gets recalculated based on the new Base Spacing value.
Give a large card twice the standard padding with [Base Spacing] * 2.
Set a smaller gap to half the base spacing with [Base Spacing] / 2.
Subtract a shared gutter variable from a container's width.

Pro tip: Keep one-off adjustments in the field that needs them. If you use the same calculation in several places, turn it into its own variable instead, as shown in Build variables from other variables below.

Add math to a number field

Open the module's settings and go to a number field in the Design tab, such as Padding in the Spacing option group.
Hover over the field, click the Insert Dynamic Content icon, and choose a number variable.
Click inside the field next to the chip and type the rest of the calculation.

Example:

If a number variable named Base Spacing is 20px, typing * 1.5 after its chip gives you a padding of 30px. Divi turns the calculation into valid CSS for you.

You can use these operators:

+ (add) and - (subtract) - Put a space on each side, such as [Base Spacing] + 10px.
* (multiply) - At least one side must be a plain number with no unit, such as [Base Spacing] * 2.
/ (divide) - The number you divide by must have no unit, such as [Base Spacing] / 2.
( ) (parentheses) - Group parts of a calculation. Every opening bracket needs a closing one, or the field shows Parentheticals must be closed.

Use variables inside calc(), clamp(), min(), and max()

Click the unit next to a number field to open the unit picker.
Choose calc, clamp, min, or max. The field now shows the function name in place of the unit.
Click inside the field and add variables with the Insert Dynamic Content icon or by typing {{.
Type the rest of the arguments around the chips, separated by commas.

For example, setting Heading Text Size in the Heading Text option group to clamp([Minimum Size], 10vw, [Maximum Size]) creates a size that scales with the screen width but never goes below your Minimum Size variable or above your Maximum Size variable. To learn more about these functions, see Advanced Units, CSS Functions, and Variables For Divi 5.

Note: Divi doesn't check the unit inside a variable. If a variable holds a unit that doesn't suit the calculation, such as px on both sides of a multiplication, the result won't apply on the page.

Build variables from other variables

Number and Text variables can now use other variables in their value. A variable built this way, called a nested variable, updates whenever the variables it uses change.

Open the Variable Manager by clicking its icon in the left toolbar.
Expand the Numbers or Text drawer and add a new variable, or click the value of an existing one.
Hover over the value and click the Insert Dynamic Content icon.
Choose the variable you want to use. Only variables appear in this list, not dynamic content sources.
Type any text or math around the chip.
Click Save Variables.

Here are three examples:

A spacing scale - Create a Number variable named Base Spacing with the value 20px. Then create Large Spacing with the value [Base Spacing] * 2 and Small Spacing with [Base Spacing] / 2. Change Base Spacing to 24px, and update the other two to 48px and 12px everywhere they're used.
A fluid size - Create Number variables named Minimum Size and Maximum Size. Then create Fluid Heading, click the unit next to its value, choose clamp, and enter [Minimum Size], 10vw, [Maximum Size]. The middle value controls how the size scales with the screen, and your two variables set its limits. Use Fluid Heading for your heading sizes, and when you need a larger maximum, change Maximum Size once.
A reusable sentence - Create Text variables named Legal Name and Year. Then create Copyright Notice with the value Copyright © [Year] [Legal Name]. All rights reserved. Use it in your footer and anywhere else you need it. When you update Legal Name or Year, every copyright notice on the site updates automatically.

The list greys out any variable that would create a loop. A variable can't use itself, or any variable that already uses it. For example, when you open the list on Base Spacing, Large Spacing and Small Spacing are greyed out because they're built from Base Spacing.

Notes:

You can pick variables you've added or changed in the Variable Manager before saving.
Searching the Variable Manager, or the variable list in a field, also finds variables that use the name you search for. Searching for Base Spacing shows Large Spacing and Small Spacing too.
In the variable list, a nested variable shows the variables it uses as chips, so you can see how it's built before you pick it.
When you export a variable, Divi includes every variable it depends on, so it works on the site you import it into.

Things to know

Responsive and hover settings - Chips and calculations carry over from desktop to tablet and phone, and to the hover and sticky states, the same way any other value does.
Loop Builder - Fields inside a Loop Builder layout keep their mix of loop dynamic content, variables, and text.
Deleted variables - If you delete a variable that another variable still uses, the dependent variable keeps working until you change it. See Working with Archived Variables in Design Variables in Divi 5.
Existing designs - Fields that already use a single variable or dynamic content source keep working as they did. You can now type around those chips too.