Changing colors & fonts in Elementor
Learn how to change the color and font of any element in Elementor, and understand when to use element-level settings vs. global styles.
Colors and fonts shape how your brand comes across online. This guide explains how to change them on individual elements in Elementor, and when you should use global settings to update the whole site at once.
Quick summary
To change the color or font of a specific element, click it, go to the Style tab, and update the typography or color settings. For site-wide changes, use Global Colors and Global Fonts from the hamburger menu instead.
What you'll need
Beginner 5 minutes- The Elementor editor open
Changing a text color
Click the text element (Heading or Text Editor widget) you want to change.
Click the Style tab in the left panel.
Find the "Text Color" field and click the color swatch next to it.
A color picker opens. You can:
- Click the color wheel to choose a custom color
- Type a hex code (e.g.,
#1a1a1a) for an exact brand color - Click one of your Global Colors if your site has them set up
Click anywhere outside the picker to close it. The color updates on the canvas.
Changing font (typography)
Click the text element and go to the Style tab.
Find the "Typography" section and click the pencil icon to expand its controls.
Adjust the settings you want:
- Font Family — the typeface (e.g., Open Sans, Playfair Display)
- Weight — how bold the text is (100 = thin, 700 = bold, 900 = black)
- Size — the text size in pixels, em, or rem
- Line Height — the space between lines of text
- Letter Spacing — the space between individual letters
- Transform — uppercase, lowercase, or capitalize
Changing fonts on individual elements overrides global styles
If your site uses Global Fonts (a recommended approach), changing a font on one element creates a local override that will not update when the global font changes. Only override individual elements when you have a specific reason.
Changing a section background color
Click the section (hover over it and click the grey section handle, not a widget inside it).
Click the Style tab.
Expand the Background section and set the background type to Classic.
Click the Color swatch and choose your color.
Changing button colors
Click the button, go to Style, and adjust the Background Color and Text Color fields. See Editing buttons & links for full details.
Global Colors vs. local colors
There are two ways to manage color in Elementor:
| Approach | Best for | How to access |
|---|---|---|
| Global Colors | Brand colors used across the whole site | Hamburger menu → Global Colors |
| Local / inline color | A one-off override on a specific element | Style tab on the element |
We strongly recommend using Global Colors for your primary brand palette. When a global color is updated, every element using that color updates automatically — saving a huge amount of time.
See Global colors & fonts for how to set them up.
Responsive typography
Font sizes can be set differently for desktop, tablet, and mobile. Look for the device icons (desktop, tablet, phone) next to the font size field. Click the device you want and set the size for that screen.
Common questions
Related guides
- Global colors & fonts
- Editing buttons & links
- Spacing, margin & padding
- Copying & pasting styles
- Making your page look good on mobile
Need a hand?