Elementor V4 Classes and Variables: set up a design system

A V4 design system has three working parts: Variables hold single values, Classes hold whole styles, and local styles handle the one-offs. I build every V4 template on the same set of names, changing only the values, so this is the setup I use, step by step, plus the parts Elementor’s help doesn’t cover: which style wins a conflict, what to keep local, and what happens when you paste an element into another site. Tested on Elementor 4.3, October 2026.

What are Classes, Variables and local styles in Elementor V4?

A Variable is one named value, such as a brand color or a font. A Class is a reusable set of styles, such as a button or a card, that you apply to any element. A local style belongs to one element only. Elementor’s own summary is a good one: “Variables define the value, while Classes define the scope”.

Layer	Holds	Where you set it	Wins over
Variables	One value: a color, font or size	Design System > Variables	Nothing on its own; it’s used inside the layers below
Default Styles	A style for an HTML tag (h2, p, div)	Design System > Defaults	The element’s built-in defaults
Classes	A whole style, reused across the site	The Classes field in the Style tab	Default Styles
Local styles	Styles on one element (the pink local chip)	The Style tab, with local selected	Every class

Everything lives in the Design System panel: the half-filled droplet icon in the editor’s top bar (under the three dots when the window is narrow). Save the page before you open it, or Elementor won’t let you in. Its three tabs, Defaults, Variables and Classes, are the order I set things up in, starting with Variables.

If you’d rather see a finished V4 section first, the Elementor V4 components in Element UI, the Elementor component library, are built on atomic elements with local styles, for a reason I’ll get to at the end.

Step 1: create your Variables

Variables first, because Default Styles and Classes both use them. Color and font Variables are free; size Variables, including fluid clamp() and calc() values, need Elementor Pro.

1. Open Design System > Variables.
2. Click + and choose Color, Font or Size.
3. Rename the new row (it starts as color-1) and set the value.
4. Click Save changes.

You can also create one from any style control: click the Variables icon next to the control, then +, fill in Name and Value, and click Create. Either way, Variables go live as soon as you save them, not when you publish the page.

Name Variables by role, not by value, so the name still makes sense after a rebrand: color-primary, not blue. These are the names I use on every project, and only the values change:

Group	Variables
Brand colors	color-primary, color-primary-hover, color-accent
Text colors	color-heading, color-text, color-text-muted, color-on-dark
Surfaces	color-canvas, color-surface, color-surface-dark, color-border
Fonts	font-heading, font-body
Sizes (Pro)	space-xs to space-4xl, text-h1 to text-xs, radius-sm to radius-pill, container-width, section-space

Two things that caught me out. A font Variable holds one font family name, with no fallback list. And the font has to load: a family in Elementor’s font list loads whether you use it through a Variable or directly, but one that isn’t in the list never loads, so upload it as a custom font (an Elementor Pro feature). A font installed on your own computer hides this problem, because your screen shows it anyway.

Don’t make a Variable for a value that’s truly unique to one place. Variables are for values you’ll change in one go later.

Step 2: set your Default Styles

Default Styles (added in Elementor 4.3) style an HTML tag across the whole site, which makes them the base layer of the system. The first thing I set is a reset: the Div Block, Flexbox and Grid all start with 10px of padding, which is never what I want.

1. Open Design System > Defaults.
2. Type a tag in the Tag field, for example div.
3. Style it, then click Save changes.

What I set on every site:

Tags	Default
div, section, header, footer, nav, article, aside, main	Padding 0 and minimum width 0, nothing else
h1 to h6	font-heading, a weight, a line height and a size Variable per level. No color
p	font-body, text-base and a line height. No color

Leave color off the text tags. Set the text color on the section’s class instead (a light section and a dark one), and every heading and paragraph inside inherits the right color without a single local style. And never give the a tag a hover color in Default Styles: in my builds it overrode link colors set by classes.

Step 3: build Classes on your Variables

A Class bundles a whole style so you can apply it anywhere, and it should use your Variables for its values, so a brand change flows through every class at once.

1. Select an element and open the Style tab.
2. In the Classes field, type a name and pick Create “name”. The chip turns green: you’re now editing the class, not the element.
3. Style it. On any color, font or size control, click the Variables icon and pick a Variable instead of typing a value.
4. For hover, click the three dots on the chip, then choose Hover under States, and style that state. Click the chip to go back to normal.
5. For tablet and mobile, switch the device in the top bar while the chip is active. The class stores separate values per device.

Already styled something locally and want to reuse it? Click the three dots on the local chip and choose Convert to global class. Elementor moves every local value, for every device and state, into a new class and asks you to name it.

Watch the chip colors as you work. Pink means you’re editing this element only; green means you’re editing a class, and the change lands everywhere that class is used. Class edits made this way go live when you publish the page.

The pattern I use most is a base class plus a modifier on the same element: button-base sets the shape, padding and font every button shares, and button-primary or button-secondary adds the colors. The same goes for section with section-dark, and card with card-dark.

Step 4: put your Classes in the right order

When two classes set the same property, the one higher in the Class Manager wins. The order you add classes to an element doesn’t matter: the chips on the element always follow the Class Manager’s order. Properties that don’t conflict simply merge, and a local style beats every class. Try it in the demo at the top of this post.

To reorder, open Design System > Classes, clear any filter, drag a class by its handle, and click Save changes. Changes made in the Class Manager publish straight away.

Keep every modifier above its base: button-primary above button-base, section-dark above section. Then check where new classes land. A class you create in the Style tab goes to the top of the list, so it wins straight away. Classes that arrive with an imported template, or that an AI tool creates through the Elementor MCP, are added at the bottom instead, so a new modifier can lose to its base until you move it up.

One more trap. A local desktop value beats a class’s tablet and mobile values, because local wins at every size. If you override something locally, set its tablet and mobile values too, or the class’s responsive values never show.

What should stay local?

Only what’s truly one-off. Before I add a local style, I ask four questions: is the value already a Variable, is the pattern already a Class, will it appear again, and would I want to change it in one place later? A yes to any of them means it goes in the system.

Fine as local styles	Never local
A unique hero composition	Widths, gutters and section padding
A one-off image crop or position	Type sizes
A decorative element positioned absolutely	Button styles, common corner radii, standard gaps
An art-directed overlap	Any color that appears more than once

The test I run at the end of every build: change color-primary, section-space and the button-primary class, and every page should follow, with no stray color left behind. Anything that doesn’t follow is a local style that should have been part of the system.

How should you name Classes and Variables?

By purpose, not appearance: section-heading, not big-blue-text. Elementor’s own guidance for AI tools says the same. Use lowercase words joined by hyphens, and keep the same names on every project so you never have to think about them.

Elementor’s rules for class names: start with a letter, no spaces, only letters, numbers, hyphens and underscores, no double hyphens, and 50 characters at most. container and local are reserved, and duplicates are blocked regardless of capitals.

Also avoid names that themes and plugins already style, or their CSS will hit your elements too: button, btn, row, col, and Hello Elementor’s own site-header, site-footer, site-main, page-header and page-content. Hello centers .site-header at 1140px, which cut one of my template headers short until I renamed it header-bar. That’s also why I use button-base and layout-container. card is fine.

And don’t make a class for a single property. A class earns its place by bundling a style you repeat.

What happens when you copy a V4 element to another site?

Its Classes and Variables stay behind. When you copy an element, Elementor puts only the element on the clipboard, with references to classes and variables but not the classes and variables themselves. Pasted into another site, the element shows “Some classes are missing”, and any style that came from a missing class or variable is gone. Local styles travel with the element, so they survive.

To move a whole design system between sites, use Design System > three dots > Export, then Import on the other site, where you choose whether to keep or replace existing values. Inserting a saved template is friendlier too: Elementor asks whether to use the site’s styles, keep the template’s styles as local values, or add the template’s classes and variables to the site.

This is why the V4 components in Element UI use local styles only. Pasted into any site, they arrive looking exactly as designed and add nothing to the site’s Class Manager or Variables. They’re lightly styled with placeholder content, so once one is on the page, connect it to your own system: swap its colors for your Variables and apply your classes.

Can V3 widgets use V4 Classes and Variables?

No. Classes and Variables only work on atomic elements, and V4 elements can’t use V3 Global Colors either. What Elementor offers is a one-way sync for colors, from V4 to V3: in Design System > Variables, open the three dots on a color Variable and choose Sync to Global Colors. Synced colors appear in V3’s color pickers, and editing them in V4 updates the V3 side. Nothing syncs the other way.

Typography doesn’t sync. Add the same fonts to V3’s Global Fonts by hand, then set Body and H1 to H6 in Site Settings > Typography to use them, so blog posts and other content not built in Elementor match the rest of the site. For the V3 side on its own, see global styles in Elementor, and for why V4 is built around this system at all, Elementor V4 and the atomic editor.