> ## Documentation Index
> Fetch the complete documentation index at: https://skelementorcss.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Variables

> How Elementor Variables act as shared design tokens and how they work alongside Skelementor utilities.

## Overview

In Elementor, Variables are shared design values you can reuse across a site instead of repeating the same raw value everywhere. They work like design tokens for colors, typography, and sizes.

## Why variables help

* They keep repeated values consistent across pages and components.
* They make global updates easier when a brand value changes.
* They keep custom CSS cleaner because shared values come from tokens instead of scattered literals.
* They help Elementor styling decisions and Skelementor utilities stay aligned.

## In Elementor

### 1. Open the variable picker

<img src="https://mintcdn.com/skelementor/m7NX_RzMgRHsVrCy/images/variable-button.png?fit=max&auto=format&n=m7NX_RzMgRHsVrCy&q=85&s=29768dedd677cf8d98bb29e16828363d" alt="The Elementor variable icon inside a control." className="block w-full max-w-md rounded-xl border border-zinc-200 dark:border-zinc-800" width="798" height="341" data-path="images/variable-button.png" />

Click the **variable icon** in a supported control to open Elementor's variables popup window.

### 2. Use the variables popup window

<img src="https://mintcdn.com/skelementor/m7NX_RzMgRHsVrCy/images/variable-list.png?fit=max&auto=format&n=m7NX_RzMgRHsVrCy&q=85&s=e75f7081c076aae43d5af27754437b68" alt="The Elementor variables popup window listing available variables." className="block w-full max-w-2xl rounded-xl border border-zinc-200 dark:border-zinc-800" width="1926" height="2016" data-path="images/variable-list.png" />

This popup is the variable list Elementor shows for that field. It lets you:

* search available variables
* pick an existing variable for the current control
* create a new variable with the `+` button
* open the **Variables Manager** from the settings cog

Skelementor-imported variables show up here too, so this is where the imported token set becomes usable inside the editor.

### 3. Manage variables centrally

<img src="https://mintcdn.com/skelementor/m7NX_RzMgRHsVrCy/images/variable-manager.png?fit=max&auto=format&n=m7NX_RzMgRHsVrCy&q=85&s=eb22ed595bf00dae1d009f80f06af255" alt="The Elementor Variables Manager panel." className="block w-full max-w-md rounded-xl border border-zinc-200 dark:border-zinc-800" width="715" height="1704" data-path="images/variable-manager.png" />

The **Variables Manager** is Elementor's central panel for managing variables. Based on Elementor's current docs, this is where you can:

* search variables
* create new color, font, or size variables
* edit existing variable values
* delete variables you no longer need
* save changes and update variable-driven styling across the site

## With Skelementor

* **Utilities** apply layout and styling behavior.
* **Variables** provide the reusable values behind those decisions.
* Together, they keep classes expressive while centralizing the values that matter.

Use a **variable** when the value itself should be reusable across many places. Use a **class** when you want to apply a styling pattern or behavior to an element.

## Related

<CardGroup cols={2}>
  <Card title="Border width" icon="border-all" href="/borders/width">
    `var(--border-*)` and the border scale
  </Card>

  <Card title="Colors" icon="palette" href="/concepts/colors">
    Semantic palette and utility naming
  </Card>
</CardGroup>