Guides
Variables
Variables hold your design choices: colors, fonts, text sizes, spacing and more. Change one, and everything that uses it changes with it.
The categories
Color
Brand, text, background, surface, border and status colors.
Font
The heading, body, accent and quote fonts.
Text
Text sizes, from fine print to display headings.
Spacing
Space steps for section padding and large gaps.
Size
Smaller steps for gaps, icons and elements.
Layout
Content widths, from a narrow column to the full site.
Radius
Corner radius steps, from square to round.
Aliases
Variables named by purpose, such as card padding.
Change a variable
1. Find it
Choose a category on the left, or search for a variable by name.
2. Change it
For a color, select its swatch, adjust it and select Done. For anything else, edit its value in the editor under the list.
3. Import it
Select Import Variables. Elementor updates every element that uses the variable.
Nothing reaches Elementor until you select Import Variables, so you can try a change first.
Color tools
Beside each color, Generate tints and shades adds lighter and darker steps of it. The trash icon deletes the color and its steps.
More tools
Add from Elementor
Brings in variables you made in Elementor itself. It never replaces V4 Studio's own.
Reset a category
The reset icon at the top of the panel brings back the category's defaults, after you confirm.
Common questions
Why didn't my change show in Elementor?
Select Import Variables. Changes stay in V4 Studio until you do.
Can I add my own variables?
Yes. Add a line such as --color-brand: #2457a7; to a category's editor, then select Import Variables.
What are aliases?
Variables named by purpose that point at another variable, such as --padding-card: var(--space-sm). Change an alias to restyle everything that uses it.
Next
Classes
Reusable styles for buttons, cards, text and layout.