Practical projectsLesson 5 of 8 · 5 steps

Set brand colors and fonts

Use Brand Kits and global styles with a clear understanding of their site-wide effect.

Video coming soon

Your next step is ready.

Follow the complete written guide below.
The video will join it here when it’s ready.

Start the written lesson

Before you start

A verified AI connection.
Elementor active and selected in Page Builders.
A practice site or draft page.

Let’s do this, step by step.

Step 01

Read the current design

Ask the AI to inspect the active Elementor kit and identify which colors and fonts pages use.

Global styles are shared. Before changing them, see what already depends on them. For a single experimental page, use page-local styles instead.

Step 02

Preview a Brand Kit

Open Library → Brand Kits. Search and preview a kit. On a practice site choose Apply kit; the screen automatically saves a restore point before applying.

Preview the colors and font pair first. Applying a kit changes shared styles and automatically saves the previous settings. Free includes starter kits; Pro adds the larger library and AI actions.

Step 03

Choose custom or system styles

For individual custom swatches or presets, inspect update-global-colors or update-global-typography. The four system slots use the Pro replacement tools or Elementor Site Settings.

Custom colors and fonts are separate from the four built-in system slots. Ask the AI to identify which you want to change before saving. Use the matching action and preserve the other values.

Step 04

Use variables when supported

On Elementor 4.2+ with Variables active, inspect available types before creating a named color, font, or size variable.

Variables are reusable design values. The AI should read the current version before changing a batch; if someone else edits them, it needs to read again.

Step 05

Review and restore when needed

Check several pages at desktop and phone widths. Use Restore previous and confirm to undo the latest kit apply. Tick Also restore custom colors and fonts only when those should return too.

Check headings, body text and buttons across the site. Restore previous goes back one saved kit at a time. Choose whether custom colors and fonts should be restored too.

You’re done when…

Shared styling is deliberate, checked across pages, and has a documented recovery option.

Keep the reference handy.

The docs cover tool details and requirements for this lesson.