Variables in Elementor V4: design tokens for normal people

What design tokens are, without the jargon

A Variable is a named value. That is the whole concept. Instead of typing the hex code #3B82F6 into 47 different elements across your site, you create a Variable called "color-primary" and set its value to #3B82F6. Then every time you need that color, you reference the Variable instead of typing the hex code.

The payoff comes when the color needs to change. Update the Variable value from #3B82F6 to #2563EB, and all 47 elements update automatically. No hunting through pages. No missing one button that is still the old blue.

Design system people call these "design tokens." It is the same thing. A named reference to a value. Elementor calls them Variables, which is more straightforward. Use whichever term you prefer when talking to clients. "Variable" usually confuses them less.

How V4 Variables work in the editor

Open the Elementor editor on any page. Click the hamburger menu (top left), then Site Settings. You will see a section called Variables (it might be under Design System depending on your Elementor version). This is where you create and manage all Variables for the site.

To create a Variable: click the add button, give it a name, set its type, and assign a value. Once created, the Variable becomes available in every property field across the editor. When you are setting a color for any element, you will see your Variables listed alongside the built-in color options.

Variable types V4 supports

Colors. The most commonly used Variable type. Hex values, RGB, HSL. You can reference color Variables in any color picker field: backgrounds, text colors, borders, shadows, overlays.

Font sizes. Numeric values with units (px, em, rem). Reference these in any font-size field. Useful for maintaining a consistent type scale across the site.

Spacing. Margin and padding values. Set a Variable for section padding and reference it everywhere. When you decide sections need more breathing room, update one Variable.

Font families. Store your primary and secondary font families as Variables. If the client decides to switch from Inter to Plus Jakarta Sans, you change one Variable instead of editing every text element.

As of April 2026, these are the supported types. Elementor has indicated they plan to expand Variable types in future V4 updates, potentially including border radius, box shadows, and transition values. But for now, colors, sizes, spacing, and fonts cover the majority of use cases.

The relationship between Variables and Global Styles

If you used V3, you had Global Colors and Global Fonts. You could set a primary color, secondary color, text color, and accent color globally, and reference them from any element. V4 Variables replace this system with something more flexible.

The differences matter:

V3 Global Colors were limited to a fixed set (Primary, Secondary, Text, Accent, plus custom slots). You could not name them meaningfully. Variable slot 1 was "Primary" whether you wanted that label or not.

V4 Variables have no preset slots. You create as many as you need, name them whatever you want, and organize them by purpose. "color-primary," "color-cta-hover," "space-section-lg" — the naming is entirely yours.

V3 Global Fonts allowed you to set Primary, Secondary, Text, and Accent typography presets. Each preset included font family, size, weight, and style. These were useful but inflexible.

V4 Variables let you separate font family from font size from font weight. You can have a font-family Variable used across different size Classes. This separation gives you more control.

If you are migrating a V3 site to V4, your existing Global Colors and Fonts should transfer during conversion. Check that the values map correctly to V4 Variables after migration. Sometimes the naming gets generic ("Variable 1," "Variable 2") and you will want to rename them.

Setting up Variables for a real project

Here is the minimum set of Variables for a typical client site. You can add more as needed, but starting with fewer is better than starting with too many. A Variable system with 50 entries is harder to maintain than one with 15.

Color Variables (8-10)

• color-primary — Main brand color. Buttons, links, accents.
• color-primary-dark — Darker variant. Hover states, active states.
• color-primary-light — Lighter variant. Backgrounds, badges, highlights.
• color-secondary — Secondary brand color. Used sparingly for variety.
• color-text — Main text color. Usually dark gray (#1F2937), not pure black.
• color-text-light — Secondary text color. Captions, metadata, supporting text.
• color-bg — Main background color. Usually white or near-white.
• color-bg-alt — Alternate section background. A slightly different shade for visual separation.
• color-border — Border and divider color. Light gray.
• color-white — Pure white. For text on dark backgrounds.

Spacing Variables (4-5)

• space-section — Vertical padding between major sections. 80-120px is typical for desktop.
• space-block — Space between content groups within a section. 40-60px.
• space-element — Space between individual elements. 16-24px.
• space-small — Tight spacing. Icon gaps, tag margins. 8-12px.
• space-container — Horizontal content padding (page gutters). 20-40px.

Typography Variables (3-4)

• font-heading — Font family for headings.
• font-body — Font family for body text.
• text-base-size — Base font size. 16px or 18px.
• text-line-height — Base line height. 1.5 to 1.7.

The Variable naming system

There are two naming approaches. Both work. Pick one and use it consistently on every project.

Semantic naming describes purpose: color-primary, space-section, font-heading. This is easier for clients and team members to understand. "color-primary" tells you what the Variable is for, even if you do not remember the exact color value.

Descriptive naming describes the value: blue-600, gap-80, inter-regular. This is closer to how design tools like Figma handle tokens. It is precise but less intuitive for people who are not designers.

For agency work, semantic naming wins. When a client says "we want to change our primary color," you know exactly which Variable to update. With descriptive naming, you would need to remember that "blue-600" is used as the primary color, then search for everywhere it is referenced.

Variables and Snapelement V4 components

Snapelement V4 components are designed to work with Variables. The components reference common Variable names (color-primary, color-text, space-section, font-heading) in their style structure. When you copy a Snapelement component into your site, it automatically uses your Variable values if you have matching Variable names set up.

If your Variable names differ from Snapelement's defaults, the component falls back to its inline values. You can then manually update the component's elements to reference your Variables. This takes a few minutes per section but only needs to happen once per component.

The practical workflow: set up your Variables first (30 minutes), then start copying Snapelement components. Most components will pick up your brand colors and spacing immediately, and the rest need a quick manual connection. This is faster than building sections from scratch and styling every element individually.

When Variables are not enough

Variables hold single values. One color. One number. One font name. They do not hold combinations of properties.

When you need a reusable combination (a button that has specific padding, background color, text color, border radius, font weight, and hover state all bundled together), you need a Class, not a Variable. The button Class can reference Variables for its individual property values (background: color-primary, text: color-white, padding: space-element), but the Class itself is the bundle.

Think of it as layers: Variables are the raw ingredients. Classes are the recipes. A recipe (Class) uses ingredients (Variables), but an ingredient on its own is not a recipe.

The most common mistake people make is trying to do everything with Variables or everything with Classes. You need both. Variables define the design language (what colors, what spacing, what fonts). Classes define the patterns (what a button looks like, what a card looks like, what a section looks like). Together, they form a design system that keeps your site consistent and your workflow fast.