Divi 5 introduces Design Variables, a powerful feature that allows you to reuse values such as numbers, strings, images, fonts, links, and colors across your site.
You assign them using the dynamic content menu and manage them from one place: the Variable Manager.
What Are Design Variables?
Design Variables let you define reusable values you can assign to different fields throughout Divi. This goes beyond global colors. You can now create and manage:
Numbers (with units)
Strings (text)
Images (via URL)
Links
Colors
Fonts
Each variable has a name and a value. Once created, you can assign them anywhere dynamic content is supported.
Accessing the Variable Manager
You can open the Variable Manager in two ways:
From the left toolbar - Click the Design Variable icon
to open the manager with all drawers closed.
From any supported field - Open the dynamic content menu and click Manage Variables. This opens the manager with the relevant variable type drawer expanded.
Managing Design Variables
Inside the Variable Manager, you can:
Add new variables
Edit names and values
Delete variables (archived until saved)
Reorder variables
You must click Save to commit changes. Closing or canceling the modal discards any unsaved edits.
Adding and Editing Design Variables
When adding a variable, both the name and value must be filled out. Edits on existing Design Variables, which are also assigned to various fields, can be previewed in the Visual Builder but are not stored until you save.
NOTE: Variable names can change at any time. Therefore, the system doesn’t use "pretty" CSS variable names.
Deleting and Restoring
Variables aren’t fully deleted until saved. Deleted variables become archived and can be restored. Assigned instances still work and will prompt a Restore Variable option when editing.
Reordering
Drag and drop variables using the handle that appears on hover. Reordering does not require saving.
Variable Types
Numbers - Support all CSS units. If a variable’s unit isn’t compatible with the field, it simply won’t apply.
Strings - Basic text content used in any text-supporting field. Displayed as a chip with a tooltip preview.
Images - In version 1, you paste in a URL string. Future updates will add uploads and previews. Used in the image dynamic content dropdown.
Links - Same UI as images. Can include full URLs or relative paths.
Colors - Fully integrated with global color UI. Each color must have a name. Existing global colors (Primary, Secondary, etc.) will appear in the Variable Manager but can’t be renamed, deleted, or reordered.
Fonts - The font picker allows you to create design font variables. It also exposes the heading and Body fonts defined in the Theme Customizer.
Assigning Variables to Fields
Fields that support dynamic content now also support design variables. When hovered over, the Dynamic Content icon
appears. Clicking it shows a drop-down of available variables.
Once assigned, the field displays a variable chip:
String — shows name; value on hover
Number — shows value; name on hover
Image — behaves like existing dynamic image fields
Link — shows name; URL on hover
Font — shows name; font on hover
Color — uses the existing global color UI
Clicking the chip opens the dropdown. You can:
Detach from the variable (reverts to static value)
Replace with a different variable
Manage variables directly from the dropdown
Working with Archived Variables
If you assign a variable that gets deleted, it stays visible. When editing those fields, you’ll see a Restore Variable option in the dynamic content menu. Archived variables don’t show up anywhere else.
Unified Dynamic Content
The dynamic content menu works the same way for design variables and traditional dynamic sources (like post titles or featured images). After assigning one, the field shows a chip, which you can click to open options.
You can:
Edit the variable
Detach it
Switch to a different variable or content source