Global Colors and Global Typography

What Are Global Colors & Typography?

Global Colors and Global Typography are design presets that apply instantly across all Elementor pages. When you update a global style, every element using that preset automatically updates.

Why Use Global Design Settings?

Using global settings offers several advantages:

• Brand consistency across your entire site
• Faster design workflow with reusable styles
• Simple future updates without editing individual pages
• Improved organization in the editor

Using Global Colors

Global Colors allow you to set brand-specific color presets such as primary, accent, neutral, or background colors.

How to Access Global Colors

1. Open a page → click Edit with Elementor.
2. Click the hamburger menu (top-left).
3. Select Site Settings → Global Colors.

Default Global Colors (may vary by theme)

• Primary – main brand color
• Secondary – supporting accent color
• Text – default text color
• Accent – used for buttons and highlights

How to Add Custom Colors

1. Click Add Color.
2. Name the color (e.g., “Brand Red,” “Dark Gray”).
3. Choose the hex or RGB value.

Using Global Typography

Global Typography controls your font choices, sizes, and weights for headings and body text.

How to Access Global Typography

1. Open Elementor → Site Settings.
2. Select Typography → Global Typography.

Default Typography Presets

• Primary Headline (H1)
• Secondary Headline (H2)
• Body Text
• Accent Text (buttons, callouts)

Typography Controls

• Font family (Google Fonts or system fonts)
• Font size (px, em, rem)
• Font weight (light, regular, bold)
• Line height
• Letter spacing
• Device-specific settings for tablet and mobile

How to Edit Global Styles

Steps

1. Open Edit with Elementor.
2. Click the hamburger menu → Site Settings.
3. Edit Global Colors and Global Typography.
4. Click Update to save changes.

All linked elements will automatically update across your entire site.

Assigning Global Styles to Widgets

Assigning global colors or typography ensures that widgets follow your branding automatically.

Assign Global Colors

1. Select any widget (e.g., Heading, Button).
2. Go to the Style tab.
3. Click the Global icon next to the color.
4. Select a global color (Primary, Secondary, etc.).

Assign Global Typography

1. Select a widget containing text.
2. Go to Style → Typography.
3. Click the Global icon.
4. Select a typography preset.

Activity: Set Up Your Global Design System

Complete the following tasks using Elementor Site Settings:

1. Add at least four global colors:
   • Primary brand color
   • Secondary color
   • Text color
   • Accent color
2. Set typography for:
   • Headings (H1–H3)
   • Body text
3. Edit a page with Elementor and assign your global styles to:
   • A heading
   • A paragraph block
   • A button

Assignment: Upload a screenshot of your Global Colors and Typography panels.

Best Practices for Global Styling

• Use no more than 3–5 main brand colors.
• Use global typography to enforce consistent font scale.
• Assign global styles to every heading and button for easy maintenance.
• Avoid manually applying colors unless necessary.
• Preview changes across multiple pages before finalizing.
• Use responsive typography settings for mobile readability.