Elementor Global Kit Setup Guide
// Elementor Pro

Global Kit Setup
Guide

Site Settings → Global Kit
// 00 — Getting Started
Open Your Global Kit
01

Open Elementor Site Settings

From your WordPress dashboard, open any page with Elementor editor. Then click the hamburger menu (☰) in the top-left corner.

Elementor Editor → ☰ Menu → Site Settings
02

Navigate to Global Fonts & Colors

Inside Site Settings you'll find two key sections — Typography and Global Colors. We'll set both below.

// 01 — Global Colors
Color System
01

Go to Global Colors

Site Settings → Global Colors

Delete any existing default colors (Primary, Secondary, Text, Accent) and add these three instead:

White #FFFFFF
Black #0A0A0A
Gold Accent #E7C14A
Tip: Name them clearly — "Brand White", "Brand Black", "Brand Gold" — so they're easy to pick in the editor.
// 02 — Global Typography
Font System Setup
01

Open Global Typography

Site Settings → Typography

Elementor Pro has default font slots: Primary, Secondary, Text, Accent. Rename and configure each one as follows:

Slot / Role Font Family Weight Use For
Primary Heading Cormorant Garamond 400 Regular H1, H2, H3, H4
Secondary Accent Text JetBrains Mono 400 Regular Labels, Caps, Tags
Text Body DM Sans 400 Regular Paragraphs, General
Accent Button DM Sans 700 Bold Buttons, CTAs
Where to find fonts: When setting each font slot, click the font field and search the exact name. Elementor pulls from Google Fonts automatically — all four fonts (Cormorant Garamond, JetBrains Mono, DM Sans) are available there.
// 03 — Responsive Font Sizes
Sizes: Mobile · Tablet · Desktop

In Elementor, set these sizes inside each Typography slot using the responsive controls (the device icons). Switch between Desktop → Tablet → Mobile to set each value.

Cormorant Garamond — Headings
Element Desktop Tablet Mobile Line Height
H1 64px 48px 36px 1.1
H2 48px 36px 28px 1.15
H3 36px 28px 24px 1.2
H4 26px 22px 20px 1.3
DM Sans — Body Text
Element Desktop Tablet Mobile Line Height
Body / Paragraph 16px 15px 14px 1.75
Small / Caption 13px 13px 12px 1.6
JetBrains Mono — Uppercase / Labels
Element Desktop Tablet Mobile Letter Spacing
Section Label 11px 11px 10px 0.18em
Tag / Badge 10px 10px 10px 0.15em
DM Sans 700 — Buttons
Element Desktop Tablet Mobile Letter Spacing
Primary Button 14px 14px 13px 0.04em
How to set responsive sizes: In the Typography panel, click the desktop icon next to the "Size" field, enter the desktop value. Then click the tablet icon and enter the tablet value. Then mobile. Elementor saves each breakpoint separately.
// 04 — Button Defaults
Global Button Styling
01

Set Button Typography

Site Settings → Buttons → Typography

Font: DM Sans · Weight: 700 Bold · Size: 14px (desktop) / 13px (mobile) · Letter Spacing: 0.04em · Text Transform: None (or Uppercase if you prefer)

02

Set Button Colors

Site Settings → Buttons → Normal State

Background: #E7C14A (Gold) · Text: #0A0A0A (Black) · Border: None · Padding: 14px 28px (desktop) / 12px 22px (mobile)

03

Set Hover State

Site Settings → Buttons → Hover State

Background: #ffffff (White) · Text: #0A0A0A (Black) · Transition: 0.25s

// 05 — Preview
How It All Looks Together
// Section Label · JetBrains Mono
Elegant Heading in
Cormorant Garamond
Body text in DM Sans — clean, readable, and neutral. It supports your headings without competing for attention. Great for long paragraphs and descriptions.
Get Started
// 06 — Pro Tips
Final Checklist
✦ Always use Global Colors — Never type a hex code directly into a widget. Always pick from your Global Colors so changes apply site-wide.

✦ Apply Global Fonts via Style tab — For Heading widgets, set Typography → Font Family to inherit from the global slot instead of overriding per widget.

✦ JetBrains Mono = uppercase only — Always pair it with text-transform: uppercase and generous letter-spacing (0.15–0.2em). Use sparingly for labels and badges.

✦ Save your Kit — After all changes, click the green ✔ Update button. Changes are live immediately on the front end.