How to set Global Colors and Fonts in Elementor

how to set global colours and fonts in Elementor

Share This Post

Share on facebook
Share on twitter
Share on linkedin
Share on email
Share on whatsapp

Table of Contents

Elementor Logo

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.

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.

Set Global Colours And Fonts In Elementorolours And Fonts In Elementor
Set Global Colors and Fonts in Elementor

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 Hamburgericon 1 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.

Graphics 2
Toggle Icon To Change The Site Setting
1. Click the Hamburger Widget
Site Setting Option Under Toggle Bar
2. Click Site Settings
Global Colors
3. Click Global colors
Global Colors Palates
4. Edit, Add, or Delete the colors on the Global colors palette

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.
How To Apply Global Color In Heading
Apply Global Colors to the Heading widget
Toggle Icon To Change The Site Setting
1. Click the Hamburger Widget
Site Setting Option Under Toggle Bar
2. Click Site Settings
Global Fonts
3. Select Global Fonts
Global Fonts
4. Choose the Global Fonts to edit

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 Hamburgericon 1 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.
How To Apply Global Font In Heading
Adding Global Font to a Heading

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.

Back To Default

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.

  1. WordPress Dashboard > Elementor > Tools > Regenerate CSS
  2.  You can then recheck the site.  Now recheck the site.
  3. 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.

  1. Browser Cache
  2. WordPress Cache (if you are running a cache plugin).
  3. 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.

  1. Back up your site. Refer to our backup guide if you need.
  2. 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.

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.

Search

Social Media

Recent Posts

Josh

Typically replies in minutes

Hi there,

Feel free to message me if you have any questions.