How to change your website colours and fonts in Elementor Print

  • fonts, elementor, branding, site settings, global colours
  • 0

Your website uses global colours and global fonts, so the same brand colours and text styles are used everywhere. Changing them in one place updates the whole site.

Open Site Settings

  1. Open any page in Elementor.
  2. Click the Elementor menu at the top left and choose Site Settings.

Change a global colour

  1. In Site Settings, click Global Colors.
  2. Click the colour swatch you want to change (for example Primary or Accent) and pick a new colour or paste a hex code such as #1D8BF8.
  3. Everything using that colour updates across the site.
  4. Click Save Changes (or Update).

Change a global font

  1. In Site Settings, click Global Fonts.
  2. Click the pencil icon next to a style (such as Primary, Secondary or Text) and choose a new font family, size or weight.
  3. Save your changes.

The Typography section in Site Settings also controls the default styles for body text, links and headings H1–H6.

Other useful Site Settings

  • Site Identity: site name, description, logo and favicon (the small icon in browser tabs).
  • Buttons: default button colours, corners and fonts.
  • Layout: page width and default spacing. Please check with us before changing these.

Why not just change the colour on each widget?

You can, but the change only affects that one element, and your site soon starts to look inconsistent. Using the global settings keeps everything on-brand.

Elementor 4 note: newer sites may also use Variables and Classes. These work in the same way: change one and every element using it updates.

Need a hand?

If something doesn't look right, don't worry. We can usually put things back from a backup. Open a support ticket or call us on 01384 387 025.


Was this answer helpful?

« Back