Skip to main content
The Variables Manager lets you create and maintain the CSS design tokens that power your Elementor site. Changes apply globally — update a color variable once and every element using that variable updates automatically across all pages. This makes the Variables Manager the best place to start when setting up a new design system or rebranding an existing one.

​
Variable Types

AtomicKit organises variables into four tabs. Each tab is tailored to a specific kind of token with an input designed for that value type.

Colors

Enter a hex color string directly or use the live color picker that syncs alongside the text field. Any valid hex value is accepted, including shorthand (#fff).

Fonts

Choose from a curated Google Fonts dropdown: Inter, Roboto, Outfit, Playfair Display, Fira Code, and System Default. The selected family is saved as a CSS variable you can reference in Typography settings.

Sizes

Enter numeric values with any CSS unit (px, rem, em, %). Use this tab for consistent spacing, line heights, border radii, or any scalar measurement in your system.

Custom

Write freeform values including viewport units (vw, vh), clamp() expressions, or any complex CSS value. Use this tab for fluid typography scales, responsive spacing, and other non-trivial tokens.

​
Creating a Variable

1

Open the Variables Manager

In your WordPress admin, go to Elementor → AtomicKit and select the Variables Manager tab.
2

Select the correct tab

Choose Colors, Fonts, Sizes, or Custom depending on the type of token you want to create.
3

Click Add and enter a name

Click the Add Variable button. Enter a descriptive name using lowercase letters and hyphens — for example, primary-color or spacing-lg. This name becomes the CSS custom property name (e.g. --primary-color).
4

Set the value

Enter the value in the provided input. For Colors, the live color picker updates as you type. For Fonts, select from the dropdown. For Sizes and Custom, type the value directly.
5

Save the variable

Click Save. The variable is now registered in Elementor and available in every design control that supports CSS variables.
Use a naming convention that reflects role, not appearance. Prefer --color-primary over --blue-500 so the token stays meaningful if you rebrand. Hyphens are required — spaces and underscores are not valid in CSS custom property names.

​
Editing a Variable

To change the value of an existing variable, click its row in the Variables Manager list. The input field becomes editable inline. Make your change and press Save. The updated value propagates immediately to every Elementor element that references the variable. Renaming a variable (changing its name, not just its value) generates a new CSS custom property. If you rename, update any hardcoded references in your classes or custom CSS to use the new name.

​
Deleting Variables

​
Delete a Single Variable

Click the Delete icon (trash can) next to any variable row. The variable is removed from Elementor immediately. Any classes or elements that were referencing it will fall back to the browser default for that property.

​
Wipe All Variables

The Wipe All button removes every variable in the currently active tab in a single action.
Wipe All is destructive and cannot be undone from within the Variables Manager. Create a Snapshot before using this action so you can restore your variables if needed.

​
Using Variables in Elementor

Once a variable is saved, you can reference it anywhere Elementor exposes a design control:
  1. Open any element’s style settings in the Elementor editor.
  2. Look for the CSS Variable picker icon in a supported control (color swatches, typography fields, spacing inputs).
  3. Select the variable from the picker — Elementor inserts the var(--your-variable-name) reference automatically.
Variables are also available in the AtomicKit Class Creator, where you can drag them from the Design Tokens sidebar directly into property value fields.
Combine variables with utility classes for a two-layer design system: variables define your raw tokens (colors, sizes, fonts), and classes apply those tokens as patterns (e.g. a btn-primary class that references --color-primary and --spacing-md). This keeps both layers easy to update independently.