Watch the full Getting Started with Elementor course here: elemn.to/gettingstarted
In this lesson we will build our design system for our website, to simplify the building process and guide us in styling our website's elements.
This lesson will cover:
✔︎ Configuring Site Settings
✔︎ Setting up Global Colors
✔︎ Setting up Global Global Fonts
✔︎ And much more!
Global Colors and Fonts used in this lesson:
COLORS:
Primary Color (rename: Grape) - 6759AA
Secondary Color (rename: Almond) - ffffff
Text Color (rename: Basil) - 3BBA97
Accent Color (rename: Raspberry) - EC465F
FONTS:
Primary Typography
Montserrat
Size: 65px
Weight: 800
Uppercase
Letter Spacing: -1
Secondary Typography
Montserrat
Size: 30px
Weight: 200
Transform: Uppercase
Line Height: 1
Letter Spacing: -1
Text Typography (rename - Body Text)
Montserrat
Size: 16px
Weight: 400
Accent Typography (rename: Button Text)
Montserrat
Size: 20px
Weight: 300
Transform: Uppercase
Letter Spacing: 0.8
+ Add Style
New Item #1 Typography (rename: Nav Menu)
Montserrat
Size: 16px
Weight: 400
Transform: Uppercase
+ Add Style
New Item #2 Typography (rename: Menu Titles)
Montserrat
Size: 25px
Weight: 800
Transform: Uppercase
Line Height: 1.2
Don’t forget to subscribe to our channel!
Get Elementor: elementor.com
Get Elementor Pro: elementor.com/pro
See also:
Everything you need to know about a Design System:
elementor.com/blog/design-system
How To Create a Complete Web Design Style Guide (Plus Template)
elementor.com/blog/web-design...
Chapters:
00:00 - Intro
00:18 - Design System overview
3:04 - Set up Global Colors
3:55 - Set up Global Global Fonts
Негізгі бет [03] Building the Design System
Пікірлер: 102