Learn how to link up your Custom CSS with Elementor’s Global Colours in Site Settings.

What does this mean?

It means no more trawling through your Custom CSS when you’ve needed to switch up a colour in your global palette. Save the time and go and get a cuppa instead.

Let’s get started!

Publish an element on the front of your website which uses a global colour

Go to the front end of your site and right click this element.  Click on ‘Inspect’.

Hovering over this element, find the value in the element’s CSS settings for which you used the global colour.  Background of a container is easiest.  It should look like the code below.  If it is a ‘custom’ global colour, it will have a reference number, instead of something like ‘primary’.

Copy this ‘var’ value.

Paste this in your Custom CSS, in place of a hex code.

Hit Update.

That’s it!

Here are the standard Elementor system colours.

If you’re not using ‘Custom’ global colours, you can simply use these codes and place them in your CSS!

				
					/* Global Primary */
var( --e-global-color-primary );
/* Global Secondary */
var( --e-global-color-secondary );
/* Global Text */
var( --e-global-color-text );
/* Global Accent */
var( --e-global-color-accent );