Divi 5 introduces a new Unit Picker system that separates values from units inside numeric fields. This gives you full control over both the value and the unit while adding support for CSS math functions and common CSS keywords.
Unit Picker Overview
In Divi 5, numeric fields now have two parts:
Value input
Unit selector
Clicking the unit picker opens a dropdown with:
All supported units
Math functions like
calc()orclamp()CSS keywords like
auto,none,unsetandinheritCSS variables
CSS Math Functions
You can now assign CSS math functions directly to numeric fields:
calc()
clamp()
min()
max()
Once a math function is used, the input field turns off arrows and value scrubbers (no hover adjustments). After applying a math function, the field is cleared if you select a different unit.
Example:
You can use the clamp function to create a fluid typography without the need to use breakpoints. For example, clamp(5rem, 10vw, 15rem) scales your text smoothly as the width of the viewport changes, but it ensures that the text will never become too small or too large.
CSS Keyword Values
The supported CSS keywords:
auto
none
inherit
unset
When a keyword is assigned:
The field fills with the keyword as text.
The unit displays as an em dash (—).
Opening the unit picker shows the actual keyword as the selected item.
Divi will assign the default unit for that field after validation if you type a numeric value but skip the unit. If no default unit is available, the em dash stays until you manually pick a unit.
Switching from a keyword to a standard unit will also clear the field.
CSS Variables
Divi 5 supports CSS variables in these fields (e.g., --my-variable). The CSS variables can be defined in the following locations:
Divi → Theme Options → Custom CSS - those will be available side-wide.
Page Settings → Advanced Tab → Custom CSS - those will only be available for the page where they were defined.
Element Settings → Advanced Tab → Custom CSS → Free Form CSS - those will only be available on the element they were defined for.
Once the CSS variables are defined, you can use them in any field that supports the new unit picker:
Advanced Fields Adjustments
Several advanced design fields have been adjusted to support this new Unit Picker logic:
Spacing fields: Now displayed as a 2x2 grid.
Border Radius fields: Stack above and below the preview.
Transform fields: Move previews below with range sliders removed.
Supported CSS Properties & Units
These fields support the following units where applicable:
Unit | Supported |
px | ✅ |
em | ✅ |
rem | ✅ |
% | ✅ |
vw | ✅ |
vh | ✅ |
grad | ✅ |
rad | ✅ |
turn | ✅ |
ch | ❌ |
ex | ❌ |
vmin | ✅ |
vmax | ✅ |
Notes on Behavior
Math function and keyword fields automatically clear if a standard unit is selected afterward.
The unit picker visually reflects all state changes (e.g., showing an em dash when no unit is defined).
Default units will only apply automatically when possible.
Practical Tips
Use the Unit Picker to swap between quickly
px,%,em, and more without retyping values.Leverage
calc()orclamp()for responsive designs.Remember, keyword values like
autowill override any previous value-unit pair.