Table of Contents
You have the option to set Global Colours and Fonts in Elementor, these allow you to modify the whole website with a few clicks. Once you have edited your global colors and fonts you can see the changes immediately on your page (all being well!).
After you have set the styles and colors you can easily update and change this later.
Note: If you set colors or fonts for the particular text then this will override the global settings and it will need to be reset before it takes effect.
Accessing the Global Colors & Fonts
Getting to the Elementor Global Style Settings is quite easy.
- You will need to be editing the page with Elementor to have the available options.
- Click the Hamburger menu icon in the top left of the Elementor sidebar.
- Navigate to Site Settings
- From here you can access the following sections-
- Additional Settings
In this guide, we will focus on the Design System which covers Global Fonts and Global Colors.
After setting your colors click Update
Global colors are an easy way to make changes to large parts of the site at the same time; this is an efficient way to work, especially on big sites. Elementors Global Colors are not just restricted to text; they can also be used anywhere that you need to add color, such as:
- Text & headings
- Hover effects & links
Predefined Global Colors
By default, your theme’s CSS pre-populates the predefined colors (primary, secondary, text, and accent). You can change it to override the settings of your theme.
New Global Colors
You can add any color you choose to the global color palette. These can be used across the site just the same as the predefined colors.
- Edit Color: Click on the color swatch, drag the color control to the color you’d like or add a hex number. You can edit the name of the color, so it is easy to remember in the future.
- Add Color: To add the new global, click the Add Color button.
- Delete Color: Hover your cursor over the color swatch and then click the trash can icon that shows.
- Update: Once you have added, edited, and deleted the global colors you need, hit Update, just as you would when editing a page in Elementor.
Adding Global Colors to Widgets
In order to add your chosen global color to a certain widget you will need to be back on the Elementor editor page rather than in the Global Settings.
- Select the element
- Go to the Style tab.
- Click on the Blue Globe Icon to see the list of global colors.
- Choose the global color you wish to link the widget to.
- Once done this widget will now change whenever the global color is updated in the global settings.
Note: The default Elementor Color Palette is suggested to be used in certain areas –
- Primary – This is good for main Headings.
- Secondary – List items, and Subheadings.
- Text – This is used for the main body of text on the site.
- Accent – Links, Button Backgrounds, Tabs, and Accordions.
In Elementor Site settings, there are 4 predefined Global Typographic styles. They come with the same labels as in Global Colors.
Click the hamburger menu in the top-left corner of the widget panel on any Elementor page or post-editor. Then navigate to Site Settings > Global Fonts to add or change the default font and typography for each of these.
- Edit Global Font Style: Select typography options for any existing text style by clicking the pencil icon. Changes to the Style Names are also possible. To change the name, just click it. You may, for example, change Primary to Main, Accent to Highlight, and so on.
- Add Global Font Style: To add a new custom text font, click the Add Style button.
- Delete Global Font Style: Hover over the text style’s pencil icon and choose the trash can icon that shows.
Adding Global Fonts to Widgets
- In order to add your chosen global color to a certain widget, you will need to be back on the Elementor editor page rather than in the Global Settings.
- Select the element and go to the Style tab.
- Find Typography and click on the Blue Globe Icon to see the list of global colors.
- Choose the font type you would like to link the element to, once done this widget will now change whenever the global font is updated in the global settings.
Problems with Global Colors and Fonts in Elementor
Note: The first thing you should try is to view your webpage in Incognito Mode or in a Private Browser. If you can then see the changes appear then it is likely a local caching issue. If they do not then it is either something wrong on the page or a server caching issue.
There can be various reasons that the style has not appeared on the front end I will go through many of them here.
This is an easy issue to check. Navigate to the widget in question and go to the part which is not working, Global Color etc. You can then see if that has a small blue globe, if the globe is not blue then you'll need to reset it to default by clicking the little icon that has arrows going in a circle.
If you cannot see the styles after saving them in the Elementor Editor then it could be a local caching issue. You should first regenerate the CSS files in Elementor.
- WordPress Dashboard > Elementor > Tools > Regenerate CSS
- You can then recheck the site. Now recheck the site.
- If you still have an issue proceed to clearing the local cache.
Your cache holds a saved version of many of the elements of your website. Sometimes it will not see the most recent changes and needs to be cleared/ renewed in order to see them.
You should clear all forms of cache that you have.
- Browser Cache
- WordPress Cache (if you are running a cache plugin).
- Server Cache (if you have one). Contact your hosting provider if you need help with this.
Sometimes a theme can override the code given to it by Elementor. This can affect almost anything on the site. If it is affecting only one particular area then it is worth double-checking.
- Back up your site. Refer to our backup guide if you need.
- Switch to a default WordPress theme such as Twenty Nineteen, if that resolves the issue then contact the developer of the theme informing them of the issue.
You could also try switching the print method for the CSS. To do this, WordPress Dashboard > Elementor > Settings > Advanced.
If you use another page builder then there could be issues with it overriding the content built with Elementor. You should try saving the page as a template and then import that onto a new page.
It is not recommended to keep switching back and forth between the two. This can ultimately lead to content issues as Elementor is a website builder and the Classic Editor is an editor. The way that the two are setup to handle content is different.
Go to WordPress Dashboard > Settings > General and ensure that both the WordPress Address (URL) and Site Address (URL) are the same, and that both are either http:// or https://. If you have http/https mixed content problems, then you will often see missing images or missing icons on your live site. Please be sure you can fix this if you have an issue as it can require some changes in the database to fix.
You no longer need to go through the entire site and change each individual element. You can simply set up and configure your global colors and fonts to have a site-wide impact. It does require some forward planning as it is easier to change colors and fonts as you go in the beginning but once the site is larger it is worth the effort involved with setting it all up.