Global Variables in Divi 5 (called Design Variables in the interface) are reusable values you define once and use everywhere on your site. They can store colors, fonts, numbers, images, links, and text. When you change a variable, every place that uses it updates automatically.
You manage all Global Variables from a single Variable Manager inside the Visual Builder, which makes them the backbone of a Divi 5 design system.
Where to find the Global Variables Manager
You create and edit Global Variables in the Visual Builder inside the Variable Manager.
To open the manager:
Enable the Divi 5 Visual Builder on any page.
Click the Variables Manager icon
.
This opens the Variable Manager, where you will see tabs for Numbers, Text, Images, Links, Colors, and Fonts.
From the Variable Manager, you can add, rename, and change variables for your entire site.
What types of Global Variables can you create
Divi 5 supports six main types of Global Variables. Each type is a simple name plus a value you set in the UI.
Color variables
Reusable colors and gradients for brand palettes, text colors, backgrounds, borders, and more.Font variables
Font family choices you want to reuse (for example, Heading Font, Body Font, Links Font).Number variables
Numeric values like font sizes, spacing, border radius, or any other size-related value, including advanced units like clamp() or calc() when needed.Image variables
Logos, background patterns, and other images you want to reference in multiple places.Text variables
Reusable text strings like taglines, addresses, phone numbers, and business hours.Link variables
URLs you use often, such as social profiles, contact links, or key landing pages.
Each variable is global. Once you define it, you can apply it anywhere that accepts that type.
How to create a Global Variable
You create Global Variables from the Variable Manager, not from module settings.
Open the Visual Builder and click the Variable Manager icon
.Choose a tab based on the type you want (for example, Colors).
Click the + Add Global Color button to add a new variable.
Type the name of the variable.
Type in the value of the color you want to use, or use the Color Picker to select the color
Click on the Save Variables button to save your variables.
From now on, that variable appears in relevant fields across your site.
How to apply Global Variables in your designs
You apply Global Variables using the Dynamic Content icon
inside module settings.
Open the settings for any section, row, column, or module.
Go to the option you want to control (for example, Background Color (in the Content Tab) or Text Color (in the Design Tab).
Hover over the field until you see the Dynamic Content icon
and click on it.In the pop-up, choose the Global Variable you want to apply.
The field now references the variable instead of a hard-coded (static) value.
If you later change that variable in the Variable Manager, every field using it updates across your site. You use the same flow for all six variable types.
How Global Variables behave
A few key points about how Global Variables work in Divi 5:
They are sitewide
A variable created in one page is available everywhere in your site, including Theme Builder templates and new pages.They are simple name/value pairs
You do not need CSS syntax. You choose a type, give it a name, and set a value in the UI.They stay editable
When you adjust a variable, all elements using it update automatically.They work with responsive values
Number variables can hold advanced units like clamp(), so you can handle responsive typography and spacing from a single variable.They build on Dynamic Content
Global Variables plug into the same dynamic content system that modules already use, so you always access them via the Dynamic Content icon.
Using Global Variables with presets and your design system
Global Variables make the most sense when you combine them with presets:
Element Presets control a module's default design.
Option Group Presets control specific groups of settings (for example, all button styles).
Global Variables provide the actual reusable values for things like colors, fonts, and spacing.
A common workflow:
Define your Global Variables in the Variable Manager (brand colors, main fonts, spacing steps, core text strings, and important links).
Use those variables when building Option Group Presets and Element Presets.
Use presets when building pages so most styles and recurring content come from variables and presets instead of static values.
This gives you a layered system:
Change a variable to adjust the raw value.
Change a preset to adjust how that value gets used across modules.
Override on a single module only when you need a one-off.
Practical examples
Here are a few simple ways to use Global Variables in real Divi 5 sites.
Example 1: Brand colors
Create color variables for "Primary", "Secondary", "Accent", and basic text colors.
Apply them to buttons, backgrounds, links, and headings via the Dynamic Content icon.
When your brand colors change, update the variables once and let the site update itself.
Example 2: Sizing and spacing system
Create number variables for spacing (for example, 4px, 8px, 16px, 24px, 32px) and name them clearly (Space XS, Space S, etc.).
Use them in padding, margin, and gap fields across your presets.
If a scale feels too tight or too loose, adjust the variables instead of editing every module.
Example 3: Typography
Create font variables for Heading Font and Body Font.
Create number variables for heading sizes using clamp() (for example, H1 Size, H2 Size).
Apply them to heading and body text fields in your presets and templates.
Tuning your typography later becomes a matter of adjusting those variables.
Example 4: Repeated content and links
Create text variables for your phone number, address, business hours, or legal text.
Create link variables for your main CTA, contact page, and important landing pages.
Apply them to footers, contact sections, and CTAs across your site.
When a phone number or URL changes, update it once in the Variable Manager.
Export and reuse behavior
Right now, Global Variables live inside your site, not as a separate export file. But when you export layouts that use them, any variables that are in use in that layout are bundled into the JSON and imported into the new Divi 5 website along with the layout.
That means you can still share and reuse your design system by exporting layouts, presets, and templates that depend on your variables.
Tips for using Global Variables effectively
A few simple habits will keep your Global Variables easy to work with:
Start small
Define variables for your core brand pieces first: main colors, fonts, and base spacing. Expand later as needed.Name them clearly
Use names that describe their purpose, not just their value (for example, "Primary Button Background" instead of "Blue 1").Update variables before tweaking modules
When you want a global design change, try editing variables and presets first instead of editing individual modules.Avoid overloading variables
Do not reuse one variable for unrelated purposes. It is better to have two clear variables than one confusing one.
Once you get used to Global Variables in Divi 5, most of your design and content updates become a quick edit in the Variable Manager instead of a long session of manual changes across multiple modules and pages.