[03] Building the Design System - Best Webhosting

Thanks! Share it with your friends!

URL

You disliked this video. Thanks for the feedback!

Sorry, only registred users can create playlists.

ULTRAFAST, CHEAP, SCALABLE AND RELIABLE! WE STRONGLY RECOMMEND ACCU WEB HOSTING COMPANY

[03] Building the Design System

Watch Wordpress Elementor Page Builder Video: [03] Building the Design System.
Watch the full Getting Started with Elementor course here: https://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

Don’t forget to subscribe to our channel!
Get Elementor: https://elementor.com
Get Elementor Pro: https://elementor.com/pro

See also:
Everything you need to know about a Design System:
https://elementor.com/blog/design-system
How To Create a Complete Web Design Style Guide (Plus Template)
https://elementor.com/blog/web-design-style-guide

Chapters:
00:00 - Intro
00:18 - Design System overview
3:04 - Set up Global Colors
3:55 - Set up Global Global Fonts

Published:
Category: Wordpress Elementor Page Builder
16 Views

Related Videos

  • 4 - Building the Header, Footer and Design System

    4 - Building the Header, Footer and Design System

    by Best Webhosting Added 24 Views / 0 Likes

    Learn how to set up a header and footer, and use the Elementor site settings. In this lesson, you will learn how to: • Create a website header with a site logo and navigation menu • Use custom positioning to align elements • Create a website footer • Use social icons • Add display conditions to your site parts • Use global styles to establish a design system

  • Client Work and Q&A - Building A Booking System

    Client Work and Q&A - Building A Booking System

    by Best Webhosting Added 76 Views / 0 Likes

    Multistreaming with https://restream.io/?ref=4Ky10

  • Copy My Link Building System: How to Get Backlinks "At Scale"

    Copy My Link Building System: How to Get Backlinks "At Scale"

    by Best Webhosting Added 53 Views / 0 Likes

    Want to learn how to get backlinks consistently? This tutorial shows you a link building system to scale and execute your strategies as a team or agency. Subscribe • https://www.youtube.com/AhrefsCom?sub_confirmation=1 This is an advanced SEO tutorial. So if you don’t have any experience with link building, then I highly recommend watching this series first. https://www.youtube.com/watch?v=nAIWG8883uo&list=PLvJ_dXFSpd2tjUTuAHpHidz5e2hAedP_m But if you

  • How to Create a Link Building System - 5.2. Link Building Course

    How to Create a Link Building System - 5.2. Link Building Course

    by Best Webhosting Added 17 Views / 0 Likes

    In this video, you’ll learn how to create a link building system to maximize your team’s effectiveness and efficiency. *************************************** Additional Link Building Resources [Playlist] Advanced Link Building Course by Ahrefs ► https://www.youtube.com/playlist?list=PLvJ_dXFSpd2t31nRDgkPZ7p1PDfHmaW8P [Previous Lesson] How to Structure and Hire Your Link Building Team - 5.1. Link Building Course ► https://www.youtube.com/watch?v=spAF3

  • Global Colors & Fonts: Creating a Design System With Elementor

    Global Colors & Fonts: Creating a Design System With Elementor

    by Best Webhosting Added 38 Views / 0 Likes

    Join Ziv, Elementor Educator • for a webinar on Creating a Design System with Global Colors and Fonts with Elementor. You'll learn how to: • Create a homepage step-by-step with Elementor. • Use Elementor’s free templates Library. • Build a design system with Global Colors and Fonts, and understand how it can be applied to existing as well as new sites. • Save the page as a template, with global styling already setup, and use it to create a contact us

  • The Best Web Design Software for Building Websites

    The Best Web Design Software for Building Websites

    by Best Webhosting Added 23 Views / 0 Likes

    Are you looking for the best web design software to make beautiful websites? Most experienced web designers have their own preferred software for different design tasks. However, if you’re just starting out, then it can take some time to find that perfect combination. In this article, we will show you the best web design software for different use-cases, so you can make the right decision for your need. 0:00 Intro 0:14 SeedProd 1:33 Beaver Builder 2:2

  • Introducing Divi Presets, The Game Changing Divi Design System!

    Introducing Divi Presets, The Game Changing Divi Design System!

    by Best Webhosting Added 50 Views / 0 Likes

    Learn more here: https://www.elegantthemes.com/blog/theme-releases/divi-presets Today we are excited to introduce Divi Presets, the new class-based design system that will change the way you design Divi websites forever. When you customize the style of a Divi module, row or section you can now save that custom style as Divi Preset. That preset can be applied to elements across your entire website so that they all share the same custom design. When you

  • Online Games System Design Frontend PART 1 | Online Game Software Architecture

    Online Games System Design Frontend PART 1 | Online Game Software Architecture

    by Best Webhosting Added 97 Views / 0 Likes

    If you’re a developer who loves in online games, or has ever wanted to know how massive multiplayer online games works? Also this a famous interview question !! This video is the first part of 2 series, here I have explained important game system design concepts. Donate/Patreon: https://www.patreon.com/techdummies

  • Header & Footer Design #2: Building Company

    Header & Footer Design #2: Building Company

    by Best Webhosting Added 97 Views / 0 Likes

    In this Speed Art Series, Elementor's designer David Markus creates beautiful headers & footers using Elementor's Theme Builder. Learn how to create them yourself and how to customize your design to mobile. 02:32 - Header mobile editing. 07:23 - Footer mobile editing. Subscribe to our Youtube channel and be the first to get the upcoming videos of our Headers & Footers Series. Use Dynamic Content, as well as many other features that will help you edit

  • Building my Header in Elementor Wordpress from an Adobe XD web design

    Building my Header in Elementor Wordpress from an Adobe XD web design

    by Best Webhosting Added 49 Views / 0 Likes

    He guys, in today's video we are designing the animated video header of my new portfolio website in the free version of Elementor for Wordpress with cool animations. My design was made in Adobe XD. So in this video we work from Adobe Xd to Wordpress. Interested in a discount for my upcoming Adobe Xd course? Grab the discount here: https://living-with-pixels.ck.page/dc21a2db58 If you want any other tutorials from me, let me know and I will try to creat

  • Wix.com Introducing Wix ADI | Artificial Design Intelligence | The Future of Website Building

    Wix.com Introducing Wix ADI | Artificial Design Intelligence | The Future of Website Building

    by Best Webhosting Added 96 Views / 0 Likes

    Introducing Wix Artificial Design Intelligence, the first-ever Artificial Intelligence that designs a stunning website for you. Wix ADI learns about you and applies this knowledge to create a website tailor-made for your needs. From billions of combinations including layouts, images, text, contact forms & more, Wix ADI selects the most stunning just for you - creating a one of a kind free website. Our mission is to give everyone the freedom to create

  • Budget Wireless Mic System Under $300 | Saramonic Wireless Lavalier Mic System Review

    Budget Wireless Mic System Under $300 | Saramonic Wireless Lavalier Mic System Review

    by Best Webhosting Added 78 Views / 0 Likes

    Review of the Saramonic UwMic9 96-Channel UHF Wireless Lavalier Microphone. A Budget Wireless Mic System Under $300 Buy the Saramonic Wireless on Amazon http://amzn.to/2cSA8UX The Saramonic UwMic9 96-Channel UHF Wireless is one of the Best Budget Wireless Mic Systems I've encountered. Disclaimer: Saramonic Sent me the Saramonic UwMic9 96-Channel UHF Wireless System to try out but is not paying me to do a review, all of these opinions are my own. The S

RECOMMENDED WEB HOSTING

FASTCOMET

Fastcomet

HOSTGATOR

HOSTGATOR

BLUEHOST

BLUEHOST

SITEGROUND

SITEGROUND

A2 HOSTING

A2 HOSTING

HOSTINGER

HOSTINGER

DREAMHOST

DREAMHOST

ACCU WEBHOSTING

ACCU WEBHOSTING

MILESWEB

MILESWEB

HOSTPAPA

HOSTPAPA


RSS