Your site’s look and feel—its vibe—is shaped by your fonts and colors. In this lesson, you’ll learn how to change them globally so every page looks consistent without having to edit each one individually.

🔑 Why Use Global Fonts and Colors?

🧭 Step-by-Step: How to Do It in Elementor

🔹 1. Open Any Page in Elementor

• Log into your website dashboard

• Go to Pages

• Right-click on any page and choose Edit with Elementor

Don’t worry which page—this change affects the whole site.

🔹 2. Go to “Site Settings”

• On the Elementor sidebar, click the menu icon (☰) in the top left

• Click Site Settings

You’ll now see options for Global Colors and Global Fonts.

🎨 Changing Global Colors

🔸 3. Click on “Global Colors”

• You’ll see color swatches like “Primary,” “Secondary,” “Text,” and “Accent”

• These are the colors used throughout your site

⚠️ Pro Tip Before Changing:

Always save a backup of your current colors first.

• Copy the hex codes (like #F35A5A) and save them in a document

• Label each one: Primary, Secondary, etc.

This way, if anything looks off, you can restore the original colors easily.

🔸 4. Change the Colors

• Click on a color swatch (e.g., Primary)

• Choose a new color or paste in your brand hex code

• Repeat for the rest (Secondary, Text, Accent)

• Click Update to save

You’ll instantly see parts of your site update with the new colors.

✍️ Changing Global Fonts

🔸 5. Click on “Typography”

You’ll now see options for:

• Primary Font (Headings)

• Secondary Font (Subheadings)

• Text Font (Paragraphs)

• Accent Font (Buttons, links, hover effects)

🔸 6. Customize Each Font

• Click on a font to change it (choose from the dropdown list)

• Adjust the size, weight, line height, or letter spacing

• Preview changes live as you edit

For example:

• Change your Primary font to Playfair Display for a formal look

• Increase line height on the Text font for easier reading

🔸 7. Save and Preview

Once you’re happy:

• Click Update

• Refresh a few pages to see the new look

🧠 Important Notes:

• Some page sections might not change—these were likely customized individually

• You’ll learn how to edit those in later lessons

• Always test your changes on multiple devices (desktop + mobile)

✅ Quick Recap