How to set Global Colors and Fonts in Elementor

Global Colors & Fonts in Elementor

In this WPDesigns article, we will discuss how to set global colors and fonts in Elementor.

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.

Download Elementor Pro

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.

1. You will need to be editing the page with Elementor to have the available options.
2. Click the Hamburger menu icon in the top left of the Elementor sidebar.
3. Navigate to Site Settings
4. From here you can access the following sections-
   1. Design System
      1. Global Colors
      2. Global Fonts
   2. Theme Style
      1. Typography
      2. Buttons
      3. Images
      4. Form Fields
   3. Settings
      1. Site Identity
      2. Background
      3. Layout
      4. Lightbox
      5. Custom CSS
5. 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

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
• Backgrounds
• Borders
• Buttons
• 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.

1. 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.
2. Add Color:  To add the new global, click the Add Color button.
3. Delete Color:  Hover your cursor over the color swatch and then click the trash can icon that shows.
4. 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.

1. Select the element
2. Go to the Style tab.
3. Click on the Blue Globe Icon to see the list of global colors.
4. Choose the global color you wish to link the widget to.
5. 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.

Global Fonts

In Elementor Site settings, there are 4 predefined Global Typographic styles.  They come with the same labels as in Global Colors.

1. Primary
2. Secondary
3. Text
4. Accent

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.

1. 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.
2. Add Global Font Style: To add a new custom text font, click the Add Style button.
3. 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

1. 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.
2. Select the element and go to the Style tab.
3. Find Typography and click on the Blue Globe Icon to see the list of global colors.
4. 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.

Conclusion

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.