How to Add, Edit and Use Global Colors

Table of Contents

How to Access Global Colors

Global colors and global fonts are set in Site Settings tab in your Elementor admin. You can open it when editing any page or post with Elementor, just click the settings menu icon in the top left corner, and then in Site Settings choose the Global Colors tab:

Settings Menu
1. Open Settings Menu
Elementor Settings
2. Proceed to Site Settings
Site Settings
3. Open Global Colors tab

You can also quickly access global colors, along with other site settings, in your WordPress dashboard. For this checkout the YourWay tab in your dashboard and then proceed to Theme Settings:

WP Dashboard Settings
Theme Settings in WP Dashboard

After clicking the Theme Settings you will be redirected to a default kit preview with Elementor Settings menu, this ensures convenient editing with visual reference.

How Global Colors are Applied

The theme comes with seven predefined global colors (see the image below), which are set in theme’s stylesheet, but are also overriden once you choose one of the demos.  These predefined colors are: Primary, Secondary, Text, Accent, Background, Alternate Background, Border. These colors cannot be deleted from a swatch, but can be changed. 

Global Colors
Site Settings / Global Colors
Primary
Main color-scheme defining color, mostly used on links and buttons
Secondary
H1-H6 headings
Text
Main content text color
Accent
Button hover
Background
Background color for most of content
Alternate Background
Background color for some content sections
Border
Most borders and dividers

How To Set Global Colors

To change any global color:

  1. Open Site SettingsGlobal Colors
  2. Click on the swatch you need to change
  3. Use the color picker to select a new color
  4. Or simply add a color number in the field
  5. Click Update to save your new settings.
Set Global Color
How to Set Global Color

How To Add Custom Global Colors

Custom Global Color
Custom Global Colors

Besides the seven predefined colors, you can add as many custom colors as you like.  To add a custom global color to the swatch:

  1. Click the Add Color button
  2. Add color name
  3. Choose the color itself
  4. Click Update to save the settings

You can add custom colors when you need to use them repeatedly through your website, for instance for additional type of buttons, or highlighted blocks or any other repeated elements. This is more convenient than choosing such colors locally for each instance, and is also great when you need to do a quick redesign for your website – you simply put your new colors in globals, and they are applied throughout the site at once!

How To Use Global Colors

Global colors are basically your color palette to use throughout your website. They can be used either

  • in theme settings: for a certain type of elements, like all links, all tables, form fields etc.; or on certain page elements like header, footer; on certain page types, like archives, search etc.
  • in widgets: whenever there is a color setting in a widget you use, you will be able to choose one of the predefined global colors (which is handy!).

Using Global Colors in Theme Settings

Theme settings (open article) contain settings for different website elements. Here you can define appearance for main structure elements like website header and footer, default button design, all texts and links, forms and much more. Along with other settings, colors for all these elements are set here. These will be default colors for these elements, yet of course you can change then for any specific instance locally. 

We recommend following these steps:

  1. First set your global colors in Site SettingsGlobal Colors tab;
  2. Then use this color palette to set default colors for website elements in Site SettingsTheme Settings tab;
  3. If you need to set a custom color for any element later on page/post, just edit its color locally in a widget.
Global Colors in Widget
Global Colors in Widget

Using Global Colors in Widgets

Any global settings can be overriden for a specific element when needed. When applying a color locally, you have two options:

  • either choose a custom color using the color picker tool – this is a good option if you need a completely custom setting that is not repeated widely through your website;
  • or select from one of the global colors (including your custom globals!) – this is the best solution if you need a specific color that is different for the default one, but is repeated occasionally through your website. Have fun!