Global Colors & Fonts: Creating a Design System

1. Intro:

Hi All, and welcome to this Special Global Colors and Fonts Webinar. I am Ziv, a web designer and Elementor’s Lead Educator. And Today we will build a 2 page mini site based on a free template from the Library.

We will focus on Elementor’s Design System features and see how to set up and apply Global Colors and Fonts.

As you know, Colors and Fonts are the building blocks of a web designer’s work.. and are assigned to elements consistently throughout your site. 

Elementor’s Design System features allow you to take control of your site’s colors and fonts more easily and save lots of time in the long run by creating a go-to-color palette as well as a collection of font styles, which you can assign to elements globally, and all from one place.

Okay so what exactly are we doing during this webinar:

We will:

• Create a homepage step by step, based on one of Elementor’s free templates. BTW I am using Elementor’s free and lightweight Hello Theme.
• We will see how to style the page with global colours and fonts, and understand how it works on existing as well as new sites.
• We will save the page as a template, with global styling already setup, and use it to create the contact us page.
• We’ll see how global fonts can be setup for mobile and tablet devices
• We’ll also check out some other global settings that come in handy
• Lastly we will go over Theme Style and see how it can be used together with Global Colours and Fonts to create an even more streamlined design system

Okay so I’ll go ahead and share my screen and let’s make a start

TRANSITION TO SCREEN SHARE

Okay enough babbling..let’s make a start! Feel Free to ask questions in the chat, we will try to answer all of them so don’t be shy!

Default system colours: P #6EC1E4, S #54595F, T #7A7A7A, A #61CE70

Fashion Insight

1. In WordPress dashboard > hold down cmd or ctrl + e to open the finder > type: add new page > hold down cmd or ctrl to open it in a new tab, so the dashboard tab remains open for later use.
2. Click on the settings cog in the bottom left to enter the page settings >
   1. Change Title: Home Page
   2. Explain that we see the Site Title and Description on top
      1. Let’s go to Site Settings > Site Identity and change the site title + description
         1. Change to: “Fashion Insight” | “Come See Our Collection”
         2. You can set your site logo and favicon here as well
      2. Save + Close Site settings
      3. We can hide the page title
      4. But I’ll  just change the Page layout: Canvas → with no header, no footer, only elementor – because we will use a template from the library
3. On the page  click Add template > from the Pages Tab Insert ‘Homepage – Restaurant – Page

First Section

1. Click on Hero section > Style >
   1. Background Type > Video 
   2. go back to dashboard tab > Media Library
   3. Copy & Paste Video Link: hp-hero.mp4
   4. End Time > Type 20
   5. Background Overlay > disable
   6. Border > Solid: 20px Bottom
      1. Custom Color: #1E1E1E
      2. we can also set it to be a global color > demonstrate Accent then Primary > we’ll come back to it soon

1. Click on Logo > Content > Click Choose Image > Select your Image > Click Insert Media
   1. Link > Custom URL > to link it to the home page let’s first publish this page
   2. Search for Home Page  > set it
   3. Style > Max-Width: 100%

Second Section

1. Edit Section > Content Width > Drag to 1220
2. Click Heading > Content > Type New Collection
3. Style > as you can see there’s a custom color already set in the template / this could be your website before updating to Elementor v3.0 
   1. change it to #1E1E1E 
   2. We will use this color on more elements across the site, so let’s turn it into a global color
      1. Save as “New Accent”
      2. Hover over global to show it’s set
4. Delete the Divider
5. Click on Basic Gallery
   1. change images: click delete icon > reset
   2. select 6 images SUMMER COLLECTION  
      1. create new gallery/insert 
   3. style > set border type: solid
      1. width: 4 
      2. color: new accent (demonstrates that you can assign and use these colours anywhere throughout the site)
   4. Go back to 1st section > Border > assign color to New Accent
      1. Now all 3 elements have the same color
      2. Let’s go to the Global Colors via this shortcut
      3. Let’s change New Accent and see how it affects the site > change to: E1C2B0 → cool it updates immediately
   5. we can also change our primary, secondary, text and accent colors + Give them a unique name. These are system colours and can’t be deleted.
      1. set Secondary color to WHITE
      2. Set Text to BLACK
      3. Because we will be using these soon

1. 1. Lastly, I’ll set the default accent color to the same as the the New Accent color, and delete the new one
      1. As you can see, there’s a notice explaining that all elements using this color will inherit a default one.
      2. Let’s delete it and see how it affects the site
      3. As you can see, the elements we assigned the Global New Accent color to,.. have inherited a default color.
      4. Depending on your setup .. this could be an Elementor Default color like the Primary color you see for the Heading
      5. Or from an unknown source, possibly your theme, or your browser, etc.
      6. I’ll go ahead and set them to the Global Accent color to get them back to how I want

1. Click on Text Editor >  Style
   1. change text to:  Amanda is our amazing fashion designer in Fashion Insight, creating an entire new collection each season. The unique style matches the needs of women for both daily and formal use. Take a peak of our new Autumn collection.
   2. set text colour to global: text →  the black we just added
   3. Alignment > Click Justified
2. Just to demonstrate I’ll Drag in a new Text Editor > as you can see by default it’s set to the system colour called text which we changed to black earlier > this is the default behaviour and for the same reason can’t delete system colours.. We can change their Color and rename them, not delete
3. Delete the text editor

1. Using the same logic as global colors, it’s Time to check out global fonts
2. Click on the Heading > Style 
   1. Like with the custom color, this template comes with some custom typography styles
   2. But we can also set them to primary, secondary, body, accent, back to primary.
   3. I’ll leave it on Primary, but change the style via this shortcut
   4. Click manage global fonts 
      1. Edit Primary 
         1. Family: EB Garamond
         2. Size 54(px)
         3. Weight 500
      2. Let’s also set the body text: Size 16(px) → we’ll use it later on
      3. Update and close
3. Delete Testimonials
4. Delete Breakfast

Third Section

1. Click on Section > Layout
   1. Type 1220 > I’ll delete the value
   2. Because instead of setting this manually all the time > go to site settings
   3. layout > content width: 1220 
2. While we are here, let’s also set the default page layout so when we create the contact page it’ll automatically be set to canvas already
   1. page layout: canvas
   2. update + close 
3. Back In section settings > Style 
   1. Choose Image ‘Presenting.jpg’ > Click Insert Media
   2. Click Background Overlay > Select Global Color “Accent’
4. Click Heading 
   1. Content: See Our Online Fashion Show 
   2. Style
      1. Global Text Color > Select Secondary 
      2. Global Typography > Select Primary
5. Click on Text Editor
   1. content: The best way to experience our new collection, live from your browser. Our 25th unique fashion show takes place in the heart of London and will be viewed through Zoom. Contact us for more information and bookings.
   2. Style >
      1. Global Text Color > Select Secondary >
      2. Global Typography > Select Body Text
6. Click on Image Carousel Widget
   1. Image Gallery Click the Reset Icon > Click Yes >
   2. Add new Images: Select Images (6 ‘Fs’ Images) > Click Create New Gallery > insert
   3. Slides to show: 4
7. Click on button >
   1. Text: Contact Us 
   2. Link > we’ll add the link to the contact pager after we create it → will come back here
   3. Size: medium
   4. Style 
      1. Text color Select Secondary
      2. Select Hover
         1. Text colour: Accent 
         2. Background Select Secondary 
         3. Border > Select Secondary
      3. Add Hover animation: grow
      4. Typography Select Accent Text
      5. click on Pencil > and tweak it: set to uppercase (explain that it’s not global anymore) [there’s a bug where uppercase doesn’t work directly]
8. Keep Visit Us Section
9. Delete Image Source Section

1. Click Update > Click Save Option > Save as Template
   1. Type: Contact Page Template > Hit Save
   2. We will save this page as a template because the visit us and hero section will be reused on the contact page. After saving the template we’ll delete the visit us section.
   3. Delete Visit Us Section > Click Update >
2. Open Finder (cmd or ctrl + e)> add new: page > hold down cmd or ctrl to open in new tab
3. Show it’s already set to canvas > let’s name it: Contact
4. Insert contact page template
5. Delete New Collection Section
6. Delete See our Fashion Show Section
7. Keep Hero Section > Change video to: contact-hero.mp4
8. Advanced > delete padding
9. Layout > min-height 50vh

Second Section

1. Advanced > delete padding
2. Layout >  min-height: 50vh
3. Click Heading > Content
4. Type Contact Us
5. Style 
   1. Global Text Color > Select Accent 
   2. Global Typography > Select Primary
6. Delete Divider
7. Edit Icon List > Content: delete last icon (only 3 in total)
8. Style
   1. Icon 
      1. Global Color Select Accent
   2. Text  
      1. text color: text
      2. Typography > body text
         1. Size 17(px) >Line Height 1.8 → explain it isn’t global anymore
9. Click on Maps > Advanced 
   1. border 
      1. width: 5
      2. color: Accent
10. Now that we’re done with both pages, let’s go back to global colours and make some changes, see how it affects the site.
    1. Change Accent to: 888D85 > update close >
    2. preview > click logo to Homepage > All colours are updated!
    3. On Homepage > add contact page link in button!
11. Go back to globals via Site Settings > Global Fonts
    1. Primary
       1. Font Family: Fredericka the Great
12. Preview > Homepage > click on contact button

Mobile responsive

1. On Homepage in Editor
   1. Change to tablet mode > heading > typo: shortcut to global fonts > show responsive handles > change size to 45px > this is now set globally so all Text Elements that have this global font style will receive the 45px size in responsive tablet mode, saving lotus of time > you can always tweak it for specific cases as well of course
2. Also, just so you know, Back in Site Settings > Layout > Breakpoints > you can set custom Mobile and Tablet breakpoints if you need to
3. Another cool global feature is Background 
   1. It allows you to set a default background style for your pages > so if you have a style that repeats itself ..just set it here ONCE instead of styling sections and pages over and over again.
   2. Choose custom color from picker > Light Grey > clear it
4. Update/Close > go back to Desktop Mode

Theme Style and Global Colors + Fonts

1. Drag in new heading
2. As you can see this widget gets the primary color and primary heading by default. This behaviour happens behind the scenes to make sure widgets and other elements always have a certain style by default.
3. And as you’ve seen during this webinar can be styled with global colors and fonts
   1. I can change it to another global color 
      1. set to accent 
   2. but when I clear the style it’ll automatically go back to its default settings, as you can see by the white tick mark.
   3. The same goes for typography 
      1. set to secondary > clear it!
4. You can take control over this design layer using Theme Style
   1. But Why do it?
      1. Make style changes across your site without coding.
      2. No need for the theme customizer. Change theme settings from within Elementor.
      3. Set the default style of plugin elements and Elementor widgets
      4. Maintain consistent design across the whole site, especially if you use it together with Global Colors and Fonts.. You’ll see soon.
5. If we go to the content tab > you can see that the heading widget is set to H2 by default. Once again, this is set behind the scenes, and is the widgets default setup. We can change the Headings tags for SEO purposes, but I’ll leave it as H2.
6. Let’s go to Site settings > Theme Style
   1. As you can see we can control the default styling of a couple of elements: Typography, Buttons, Images and Form Fields
   2. Let’s focus on the Typography settings
      1. You’ll get a notice to disable the default colors and fonts I was talking about earlier.. To make it work
      2. Click on it, don’t worry it opens in a new tab
         1. Check these 2 boxes > update
      3. Refresh page → to see changes
      4. Show Style: color and typo aren’t set
      5. As you can see the default colors and fonts aren’t applied anymore > giving the ability to control this with Elementor’s Theme Style settings
      6. Let’s go there again
   3. As you can see we can setup default fallback styles for all types of text styles on your site
      1. Body text, links, and headings
      2. Let’s go to H2 > since the heading widget is set to H2 by default
         1. We can set the typography and color
         2. Set color to custom: red
         3. Set typo to custom: Abril Fatface
      3. Lets update and close and see what we just did
      4. The heading widget now has a new default fallback style
         1. Dragging in a new heading widget will come with this style by default now
         2. But changing the H2 tag to H1 for example will change it, we haven’t defined H1 in Theme Style so it inherits another style from a different source ..such as your browser.
         3. Delete the 2 headings
      5. Click on the main heading > we can use Theme Style with Global Colors and fonts as well, giving you even more control
         1. Let’s reset the color and typography
         2. Go back to theme style
         3. Instead of setting custom colors and fonts > use the global ones
         4. Color: accent
         5. Typo: Primary [there’s a bug, the font-size isn’t applied]

[transition to big front shot]

Outro:

Okaaaaayyyyy well that’s it! Now you know how Elementor’s Design System features work and use them to set up and apply Global Colors and Fonts on your own site, improving your workflow and saving you lot’s of time.

I hope you learned a lot during this Webinar, and we managed to answer all of your questions.

I’d like to invite you to join our Facebook group for loads of helpful tips and tricks, if you haven’t already.

And become part of our huge Elementor community full of like-minded web creators.. all helping each other become better at what they do.

Also, don’t forget to subscribe to our Youtube channel, which is full of interesting tutorials to help you master Elementor

Aaaand, on our website, check out the help center for easy access to the knowledge base, FAQs, Docs, and more

Lastly, feel free to re-watch this webinar in your own time and create your own stunning designs.. And share them in the comments below!

Good luck!

And most of all ——–  enjoy being creative!!

Thanks for tuning in, ciao for now!

#####

which allows you to take over the global design layer normally handled by the theme..

This way you can set fallback styles for various (basic HTML) elements, such as, Headings, Buttons, Images and Form Fields.. No matter the theme you use.

These styles only come into play as a fallback, [visual: close site settings > click on button, clear background colour] if no definitions were set and can be used together with Global Colours and Fonts to create an even more streamlined Design System.

#####

———————–

Global Setup

Click the top left Settings Menu > Click Site Settings

Click Global Fonts > Edit Primary > Family > Select EB Garamond > Size 54(px) > Weight 500

Click Back > Edit Text > Family > Select Roboto > Size 16(px) > Weight 400

Click Back > Edit Accent > Family > Select Roboto > Size 13(px) > Weight 600 > Line Height > 1.2(em)

Repeat for Secondary and Accent

Click Update > Click the back button at the top left

Click Global Colors > hover over the default ‘Saved Color’ and click Delete

Click on ‘Primary’ color picker and type #1E1E1E

Click on ‘Secondary’ color picker and type #DADADA

Click on ‘text’ color picker and type #818181

Click on ‘Accent’ color picker and type #000000

Click Add Color, Type ‘Styling’ set it to #D8D8D8

Click Update then click the X button at the top right

________________________

Fashion Insight

In WordPress dashboard > Pages > Add New > Write A Title > (right click open in new tab) Edit with Elementor
Click the bottom right icon to view the page settings > Hide Title > Select Yes > Page Layout > Select Elementor Canvas
On the page  click Add template > from the Pages Tab Insert ‘Homepage – Restaurant – Page’

First Section

Click on header’s section > Style > Background Type > Video > go back to dashboard tab > library > Paste Video Link

https://fashioninsight.elementor.cloud/wp-content/uploads/2020/09/video.mp4
End Time > Type 20

Background overlay > Global Color > click Manage Global Colors > Click Add Color > Type ‘Styling’ set it to #D8D8D8 > Click update and hit the X button. Go back to background overl0000ay > select ‘Styling’ > Opacity > 0.1

*SO: hover over globe > currently set to custom (black in picker) > change to #D8D8D8, explain that we wan’t to save and re-use this colour throughout the design > save as global > Opacity > 0.1

• #D8D8D8: overlays on images and vids + dividers

]Click on Logo > Content > Click Choose Image > Select your Image > Click Insert Media > Link ‘Homepage’’ > Style > max-width > delete the value

Second Section

Edit Section > Content Width > Type 1220

Click Heading > Content > Type New Collection > Style > Global Color > click Manage Global Colors > set Primary to #1E1E1E > Update > X > Select

*assign “styling” to divider > go to globals and change the color to demonstrate

Primary> Global Typography > Select Primary

Click Divider > Style > Global Text Color > Styling (demonstrate that you can assign and use these colours anywhere throughout the site)

Click on Text Editor > Write your content > Style > Text Color > Select Text > Typography > Select Text > Alignment > Click Justified

Right Click on Basic Library Widget > Click Edit > Image Gallery Click the Reset Icon > Click Yes

Add new Images > Select your Images (6 ‘Summer Collection’) > Click Create New Gallery

*demonstrate global fonts, same logic

Delete Testimonials

Delete Breakfast

Third Section

Click on Section > Layout > Type 1220
Style > Choose Image ‘Presenting.jpg’ > Click Insert Media

Click Background Overlay > Select Global Color ‘Styling’ > Opacity Type 0.75

Drag Opacity handle to 0.6 > Then go to Border > Select Solid > Global Color Select Primary > Width > 0, 0, 50, 0 (px)

Click Heading > Content > Type New Collection > Style > Global Text Color > Select Primary > Global Typography > Select Primary

Click on Text Editor > Write your content > Style > Global Text Color > Select Accent > Global Typography > Select Text

Right Click on Image Carousel Widget > Click Edit > Image Gallery Click the Reset Icon > Click Yes > Add new Images > Select your Images (6 ‘F0’ Images) > Click Create New Gallery

Click on button > Type Contact Us > Link > Type ‘/Contact’ > Style > Typography Select Accent > Text color Select Accent > Select Hover > Background Select Primary > Border > Select Primary

Keep Visit Us Section
Delete Image Source (?)

Click Update > Click Save Option ?> Save as Template Type Page Template Hit Save

Delete Visit Us Section > Click Update > Click Top Left Menu > Exit to Dashboard > Click the Top Left WP icon > Add New > In the Title Type ‘Contact’ > Click Edit with Elementor

Click Add Template > My Templates > Click Insert ‘Page Template’ Click Yes Import Document Settings

Keep Header

Delete New Collection Section

Delete See our Fashion Show Section

Click Header’s Section > Advanced > padding > Type 100, 0, 100, 0 (px)

Second Section

Click on Edit Section > Style> Border > Select Solid > Global Color Select Primary > Width > 0, 0, 50, 0 (px)

Click Heading > Content > Type Contact Us> Style > Global Text Color > Select Primary > Global Typography > Select Primary

Click Divider > Style > Global Text Color > Secondary

Edit Icon List > Style > Global Color > Select Text > Typography > Size 17(px) > Weight 300 >  Line Height 1.8

Final Global Change

Click the top left Settings Menu Icon > Site Settings > Global Colors > Primary > #C53E74 > Update > Preview Changes

OR / AND

Click the top left Settings Menu Icon > Site Settings > Global Colors > Styling > #B73131 > Update > Preview Changes

———————–

Global Setup

Click the top left Settings Menu > Click Site Settings

Click Global Fonts > Edit Primary > Family > Select EB Garamond > Size 54(px) > Weight 500

Click Back > Edit Text > Family > Select Roboto > Size 16(px) > Weight 400

Click Back > Edit Accent > Family > Select Roboto > Size 13(px) > Weight 600 > Line Height > 1.2(em)

Repeat for Secondary and Accent

Click Update > Click the back button at the top left

Click Global Colors > hover over the default ‘Saved Color’ and click Delete

Click on ‘Primary’ color picker and type #1E1E1E

Click on ‘Secondary’ color picker and type #DADADA

Click on ‘text’ color picker and type #818181

Click on ‘Accent’ color picker and type #000000

Click Add Color, Type ‘Styling’ set it to #D8D8D8

Click Update then click the X button at the top right