Step 1: Navigate to Site Settings in Elementor
From the WordPress dashboard, go to your Dev page (or any page created with Elementor).
Click Edit with Elementor.
Once inside the Elementor editor, click the Site Settings icon, next to the circular Elementor logo.
This is your global control center—everything you set here will apply site-wide unless specifically overridden.
Step 2: Set Up Global Colors
Click on Global Colors in the Site Settings panel. Here, you’ll define your core color palette:
- Primary #EBB325 (Golden Yellow)
- Secondary #FF5300 (Bright Orange)
- Text #32322D (Deep Charcoal)
- Accent #FF5300 (Same Bright Orange)
- Custom Color – Gray #F7F7F7 (Soft Background Gray)
Click Update (bottom left) when you’ve finished adding colors.
Why this matters: Setting global colors ensures you can use consistent brand colors throughout your site without memorizing hex codes. Just choose from your palette in any widget.
Step 3: Set Global Typography
Still inside Site Settings, click on Typography.
Body Text
Font Family: Rubik
Size: 17px
Line Height: 1.7em
Weight: Normal (400)
Transform: Default
Headings (H1–H6)
Set all heading styles to Roboto Slab.
H1
- Size: 50px
- Line Height: 1.1em
H2
- Size: 40px
- Line Height: 1.4em
H3
- Size: 30px
- Line Height: 1.3em
Leave H4–H6 at default or adjust later depending on your site’s needs.
Click Publish to save changes.
Why this matters: Setting these globally helps your headings look balanced and makes your site easier to scan and read.
Step 4: Style Your Buttons
Next, click on Buttons in the Site Settings panel.
Typography
Font: Rubik
Weight: 500 (Medium)
Size: leave default or adjust to your preference
Regular State
Text Color: #FFFFFF (White)
Background Color: #FF5300 (Orange)
Border:
Type: Solid
Width: 1px
Color: #FF5300
Border Radius: 50px (for a rounded, pill-style button)
Hover State
Text Color: #FF5300
Background Color: #FFFFFF (White)
Border:
Type: Solid
Color: #FF5300
Width: 1px (same as regular)
Brand Kit not displaying properly?
- Navigate back to the WordPress Dashboard > Elementor > Settings.
- Check the boxes to Disable Default Colors and Disable Default Fonts.
- Click Save.
Homework & Action Items
- Drop some headings, buttons, and text into your Dev page and preview them.
- Try changing one color in the Global Color settings and watch it update across all widgets that use that color.
- Up next: We’ll start building out your real Home page, putting your brand kit into action. To get the most out of the next set of lessons, please make sure you’ve played with the Containers and Style settings in your Dev page.