Variables hold your design choices: colors, fonts, text sizes, spacing and more. Change one, and everything that uses it changes with it.
Brand, text, background, surface, border and status colors.
The heading, body, accent and quote fonts.
Text sizes, from fine print to display headings.
Space steps for section padding and large gaps.
Smaller steps for gaps, icons and elements.
Content widths, from a narrow column to the full site.
Corner radius steps, from square to round.
Variables named by purpose, such as card padding.
Choose a category on the left, or search for a variable by name.
For a color, select its swatch, adjust it and select Done. For anything else, edit its value in the editor under the list.
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.
Beside each color, Generate tints and shades adds lighter and darker steps of it. The trash icon deletes the color and its steps.
Brings in variables you made in Elementor itself. It never replaces V4 Studio's own.
The reset icon at the top of the panel brings back the category's defaults, after you confirm.
Select Import Variables. Changes stay in V4 Studio until you do.
Yes. Add a line such as --color-brand: #2457a7; to a category's editor, then select Import Variables.
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.