How to Set Global Colors and Fonts on Elementor
Quick Answer
Access Elementor Site Settings from the dashboard or editor, configure Global Colors and Global Fonts palettes, then save changes for site-wide application. Elements linked to globals update automatically. Use globe icons in widgets to apply them.
Get Deal →
Partner
Prerequisites
- Elementor plugin installed and activated
- Access to WordPress dashboard
- Basic familiarity with Elementor editor
- A page or template to edit
Step-by-Step Instructions
1
Access Site Settings from WordPress Dashboard
From your WordPress Dashboard, navigate to
Elementor > Editor. In the Jumpstart your web-creation section, click Customize under Global Colors or Global Fonts to open the Site Settings panel directly.2
Access Site Settings from Elementor Editor
Edit any page or template by clicking Edit with Elementor. Click the hamburger menu (three horizontal lines) in the top-left corner, then select Site Settings (wrench icon) to open the Design System panel with tabs for Global Colors and Global Fonts.
This method keeps you in the editor workflow.
3
Configure Global Colors
In Site Settings, click the Global Colors tab. Edit the default palette: Primary (main brand color, e.g., #6EC1E4 for buttons), Secondary (e.g., #F4F5F7), Text (e.g., #373A3C), Accent (e.g., #61CE70 for links). Click a swatch, use the color picker for HEX/RGB/HSL, or enter values like
#007CBA. Add custom colors with + Add Color, name it (e.g., 'Dark Red'), and save. Globals ensure brand consistency across the site.
4
Set Primary and Secondary Colors
Focus on Primary for headings and buttons, and Secondary for backgrounds or supports. Test shades using the built-in preview to match your theme. Changes apply to all elements using these globals.
5
Configure Global Fonts
Switch to the Global Fonts tab. Set defaults: Primary for headings (e.g., Roboto font, 45px H1 size, 600 weight), Secondary for subheadings (30px), Text for body (15px, 1.5em line-height), Accent for links (13px). Select Font Family (Google Fonts or system), Size (px/em), Weight (300-900), Style (normal/italic), and Fallback Font (e.g., sans-serif). Add new styles via + Add Style.
Choose web-safe fallbacks for reliability.
6
Customize Typography for Headings H1-H6
In Global Fonts, expand the Headings section. Assign styles to H1-H6 (e.g., H1 uses Primary font and color at 45px, scaling down to H6 at 20px). Link to global colors for unified design.
This ensures responsive scaling across devices.
7
Save Your Global Changes
Click Update at the bottom of the Site Settings panel. Changes apply site-wide to all elements using global styles, marked by a globe or pink icon in widget panels.
Save frequently to avoid losing work.
8
Apply Globals to Widgets and Elements
Edit a widget, go to the Style tab, and select global options via the globe icon (e.g., 'Primary' color tooltip). Widget-level overrides take priority over globals if needed.
Existing elements update automatically if linked.
9
Preview and Test Site-Wide Changes
Exit the editor and preview your site frontend. Verify globals on buttons, headings, text, and forms. Use
Edit with Elementor on multiple pages to confirm consistency.10
Override Globals with Custom CSS if Needed
For theme conflicts, add custom CSS in Site Settings under Custom CSS or via
Appearance > Customize. Target classes like .elementor-primary-color for fine control. Globals match Elementor Pro/Free themes by default.
Common Issues & Troubleshooting
Cannot access Elementor Settings page
Deactivate conflicting plugins like Download Manager that share menu slugs; clear browser/WordPress cache and try a different browser.
'Edit with Elementor' button missing
Verify Elementor is active, enable it for posts/pages in Elementor > Settings > General, and check user role permissions.
Global changes not applying site-wide
Ensure elements use globe icons in Style tabs; regenerate CSS files via Elementor > Tools > Regenerate CSS and clear all caches.
Editor fails to load or fonts/colors not previewing
Enable Safe Mode in Elementor > Tools to bypass theme/plugin conflicts; disable browser extensions.
Custom fonts not loading or colors inheriting wrongly
Check Google Fonts availability, set proper fallbacks, and test in incognito mode; override widget-specific styles if globals conflict.
Prices mentioned in this guide are pulled from current plan data and may change. Always verify on the official Elementor website before purchasing.