Global Colors & Fonts: Creating a Design System With Elementor

[Music] so [Music] [Music] hi all and welcome to this special global calisthenics webinar i am ziv a web designer and elementals lead educator and today we're going to be building a two-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 they 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 you can do all of that from one place okay so what exactly are we going to be doing during this webinar we will create a home page step by step based on one of elementor's free templates by the way i'm using elementor's free and lightweight hello theme we'll see how to style the page with global colors and fonts and understand how it works on existing as well as new sites we'll save the page as a template with global styling already set up and use that template to create the contact us page we'll also see how global fonts can be set up for mobile and tablet devices and we'll check out some other global settings that can come in handy lastly we will go over theme style and see how it can be used together with global colors 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 also feel free to ask any questions in the chat we'll try to answer all of them so don't be shy okay so i'll just go ahead and start in the wordpress dashboard and i'll hold down command or control plus e this opens up the finder and i'll just type in add new page and i also hold down command or control when i click add new page so it opens up in a new tab as you can see i just opened up the new page in a new tab and i'm doing this so that the dashboard will still be accessible in a different tab because we're going to be coming back to that um okay so in this page i'll just go ahead and click the settings cog over here and i'll change the title to home page okay so as you can see this is the home page and we can hide the title if we want we can do that like that and over here you can see new elemental sites just another wordpress site this is the site title and the site description now i'm just going to change that so what i'll do is i'll just click on the menu icon here in the top left and i'll just go to site settings and i'll go to site identity okay so this is where i'm just going to change it to a new website that i'm creating the site name is going to be fashioninsight and the site description come see our collection over here you can also set the site logo and the site favicon and when you're done you can just update and close it and when you refresh the page you'll see it's updated over here fashion insight come see our collection okay so i'll just go back to this page settings over here and i'll change the page layout okay so what i'm going to do i'm going to change it to elemental canvas so this excludes the header and the footer and we'll just have a blank page basically and we're doing this because i'm going to be using a template from the library so i'll just go to the library like that and the page that we're going to be using is this page so i'll just go ahead and insert that and let's just start off in the first section so i'll just click on the section over here to enter its settings and what i'll do is i'll change the background image to a background video so i'll just go to style and i'll just change that background type to video and over here this is where we're going to be adding either a youtube link a vimeo link or a link to a video file that's in your media library which is what i'm going to be doing so i'll just go back to the dashboard and i'll go to media library and i'm going to be using this video so i'll just go ahead and copy this link and i'll paste it over here and the moment i do that already starts playing also what i'll do is i'll control the end time so i set that to 20 seconds so that's great and if you want you can also toggle play on mobile to play the video on mobile and set a background full back if for any reason the video doesn't play um so that's great now the next thing that i'll do is i go to background overlay and i'll just disable that i don't want the background overlay and what i am going to do is i'm going to add a border to this section i'm going to set the border type to solid and i'll just unlink the width and only set the border on the bottom over here i'll set that to 20 pixels as you can see and i'm going to be adding a custom color so i'll just click on the color picker over here and just paste that color code over there and as you can see it's such a custom but what we can also do is we can set it to one of the global colors as you can see like so which we'll get back to very soon okay so i'm just gonna set it back to this custom color and let's just click on the logo over here i'll change the logo so i'll enter the library and i'll change it to my logo okay and for link i'm just going to set it to a custom url and i'm going to link it to the home page now we are busy building the home page so in order for that to work we first need to publish the page so i'll just go ahead and publish that and the moment that it's published we search for home we can just add it like that very easily and the reason that i'm doing this now already is because i'm going to be saving this page as a template and reuse it on the contact ash page so it's already going to be set up with the logo linking automatically to the home page let's just go to style and fix the max width over here set it to 100 okay great now let's move on to the second section i'll just click on the second section settings and what i'll do is i'll just drag the content width to 1200 i'll just increase that like that and i'll click on the heading and i'll change the title this is going to be new collection there we go and let's just check out the style okay so what we're doing now is we're using a template so it already has some custom styling uh to it okay as you can see uh there's this custom color over here that's already set in the template and i'm just going to show you how you can uh use these custom colors and turn them into global colors uh and decide exactly what's going to be best for you for your website um so what i'm going to be doing over here is i'm also going to be changing this color to that dark color just gave the border so i'll just go over here and change it like that and because we're going to be using this color a lot more throughout the site i'm going to be turning it into a global color okay so what i will do is in the color picker after adding the color as you can see here you can press the plus to create a new global color okay so that's what i'll do and i'll just rename it i'll call it new accent and i'll just click create and as you can see right now the globe is turned blue indicating that there's a global color active called new accent and that's exactly the color that i just added okay so i just added a new global color okay great so next i'll just go ahead and delete the divider and i'm just going to change the images over here in the basic gallery so in order to do that i'll just click delete and i'll reset the gallery and i'll click here to enter the library to create my own gallery um so i'll just go ahead and select these six images and i'll click create new gallery and insert gallery okay cool and the next thing that i'll do is i'll go to style and i'll set the border type to solid as well so i'm adding a border to this gallery and i'll just change the width over here i'll just increase that i'll set that to four and for the color what i'm going to do is instead of giving it a custom color i'm going to give it the new accent color the global color that we just added okay so now this border here set to the new accent color this heading is set to the new accent color and let's just go back to the section over here and we'll go to border and instead of having this custom color set which is the same color as the global new accent color that i gave i'll just go ahead and change it and set that to new accent as well okay so that's three elements on this page they all get the same color um uh so i just decided to set that to a new the new global color so we can control that more easily um okay so let's just go to the global color settings via the shortcut okay so if you click on the globe here we can click on manage global colors and let's just change we'll go to global colors and i'm just going to change the new accent color just to see exactly what happens so i'll just go ahead and change that color like so and as you can see it just changes all of the elements that we assign this new global color to it changes it instantaneously and it's really cool um okay so what we can also do is we can change our primary secondary and text and accent colors if we want to we can just select that over here and change that but we can't delete these system colors okay because these system colors they're used for other elements in elemental so we can't delete these but we can change the color and we can rename them as well if we want to okay so what i'll do is i'll just set the secondary to white because i'm going to be using these colors later on as well and i'll set the text color i'll set that to black okay and i'm not going to be using this green accent color so instead of just having accent and new accents what i'll do is i'll just copy this and i'll just set the accent color to the new color that i added and just i'll delete the new global color that i added now i just want you to pay attention to the pop-up that we see over here there's a notice explaining that all elements using this color they'll inherit the default one okay so i'm just going to go ahead and delete that and see exactly how that affects or what we just set up as you can see the elements that we assigned the global new accent color to they have inherited a default color okay so let's just check out this heading over here and as you can see the text color it's undefined it says that there's an invalid global color and depending on your setup the colors that you see by default it could either be an elemental default color or you know it can be from an unknown source maybe your theme or your browser and so what i'll just do is i'll just go ahead and set this text color back to accent and i'll do the same for the border and also for the image gallery over here so that's what happens when you delete a global color and certain elements were assigned to it okay so now that we set that up properly again what i'll do is i'll just go to the text editor over here and i'll change the text and what i'll do is i'll just go to style and for the text color i'll set it to the new black text color that i just added before so i'll set that to text and i'll just set it to justified as well and just to demonstrate what i'll do is i'll just drag in a new text editor widget over here and as you can see by default it's already set to the system color called text which we changed to black earlier now this is the default behavior and for the same reason we can't delete system colors what we can do is we can change their color and we can rename them but we can't delete them because they're assigned to widgets and other elements by default as a fallback okay so i'll just go ahead and delete this and using the same logic as global colors it's time to check out global fonts okay so what i'll do is i'll just go to this heading over here and i'll go to style typography as you can see this template comes with a custom typography and its typography settings already for this heading but what we can also do is we can set it to the global primary the secondary the text or the accent but what i'm going to do is i'm just going to leave it as primary and i'm going to actually change the primary uh font family and all of its settings uh in a global fonts okay so i'll click manage global fonts over here and i'll go to global fonts and i'll change the primary over here okay so i'll just set this to a different font family and change some other settings as well and what i'll also do is i'll just go to text okay and also change uh the typography settings for text because we're going to be using it later on as well so the only thing that i'll do over here is i'll just change the text size i'll change that to 16 and i'll just leave the rest as is now what i'll do is i'll update and close so now as you can see when it refreshes it's automatically already changed the typography settings that i just added in primary okay let's carry on i'm going to delete the testimonials widget and also this breakfast widget so we can focus on this third section okay so what i'll do is i'll just go to the section settings and in layout um i'm just gonna change the content width also to 1200 just like we did before but seeing that all of our content with width is 1200 instead of setting this up manually all the time i'll just remove this um what i'll do is i'll just go to site settings and i'll just set it up once and it will be applied automatically so what i'll do is i'll just go to layout and over here in content width i'll set that to 1200 120. so now it's automatically set and it's going to save a lot of time in the long run as well i'll just go ahead and update that and while we're here let's just also set the default page layout uh so that when we create the contact page it will automatically be set uh to canvas okay so i'll set the default page layout to canvas and i'll update as well okay let's just close out of site settings and let's go back to this section over here and what i'll do is i'll just go to style and i'll change the background image i'll change that to a new image and for the background overlay what i'll do is i'll assign the new global color that we added the accent color so we've got this theme going on over here okay next let's just click on the heading and i'll change the text over here and in style what i'll do is i'll i'll set the text color to the secondary which was white that i set before and i set the global typography i'll set that to primary as you can see it updates automatically the next thing that i'll do is i'll go to the text editor and i'll just change the content and in style i'll set the text color i'll set that to secondary as well so the white and the global typography i'll just set that to to body text to tip to text there we go okay cool now i'll just go to the image carousel over here and i'll just delete gallery over here and create a new one okay i'll just add these six images and i'll insert that and i'll just change the slides to show to four so it's just a little bit smaller cool okay let's just move on to the button and i'll just change the text to contact us and the link that we're going to be adding here is the link to the contact page okay so after we create it we're going to be coming back over here and i'll just set that link over here so i'll change the size to medium and let's style it a bit so in style i'll go to a text color and i'll change that to secondary and on hover what i'll do is i'll change the text color to the accent color that we just added and now what we need to do is change the background color i'll set that to secondary and the border color to secondary as well so it's all white and we've got the text on have a turn into the accent color as well so we're really keeping this theme going with uh with these global colors assigned here to the elements and another thing that i'll add is a hammer animation so i just set that to grow on hava giving it this nice effect and next what i'll do is i'll just go to typography over here and i'll set that to accent and i'm not going to keep this global typography style i'm just going to click on the pencil over here and i'm going to set the transform to abacus okay cool now we're going to be keeping the visit as for now because we're going to be using this section on the contact the contact us page but i'm just going to delete this section over here and i'll just click update and i'm going to save this page as a template like i mentioned before so we can use it on the contact us page so i'll just call this the contact page template save as you can see it's saved over here so i can use it on the contact us page and it's important to know that all of the settings that i set up all of the global colors and global fonts and changes that are made over here it's all going to be saved in that template so i just have to insert that template in the contact us page and we'll be able to change these global colors and fonts very very easily and it will be applied on all the pages that we use this template for okay so as i said we save this page as a template we're going to be using the visit us and the hero section on the contact page um but we don't need the visit ask section on the home page anymore so i just delete that and update again and now it's time to create a new page so just open up the finder again command or control e add new page i'll hold down the command or control key so that it opens up in a new tab so we can just tab through them very easily and as you can see it's already set up as the page layout is already set to um to canvas we set that up in site settings and as you can see it's already set up automatically and the content width also is set up as 120 which we said before okay so let's just insert the template we just created go to my templates and insert that and call it contact so this is the contact page and as you can see we've got all of the sections of the home page over here now we don't need all of them we need um the hero section which is what we're going to be keeping so i'll just delete this new collection section we don't need that and we don't need this section either and here's the visit us section that we saved as well before now let's just change the background video over here so i just go to style and i'll go back to my media library and i'll choose this video so i'll just copy the url i can copy it here as well and i'll just insert that over here cool and then what i'll do is i'll go to advanced and i'll also delete the padding okay so i'll just link all the values together and delete them very easily like that and now what i'm going to do is i'm going to go to a layout okay so i'm in the section settings and i'm just going to change uh the height okay so it's there's a min height i'm going to change that to a vh which stands for viewport height and i'm going to set that to 50. okay so now this section takes up 50 percent of the viewport's height okay and what i'll do i'll just do the same with this second section as well so i'll just go to layout and i'll set the height to min height and i'll change that to 50v edge and i'll delete the padding here as well so i'll link them together to delete all of them in one go and that's it so when we hide the panel the two sections together make up 100 of the edge which is exactly what we want for this contact us page okay so let's just change the heading over here this is going to be saying contact us and in style i'll just go and set the text color i'll just go ahead and set that to accent and i'll change the typography i'll set that to the global primary okay so it's just like we have on the the home page i'll go ahead and delete the divider and for the icon list i'll just delete the fourth icon so we only have three and i'll go to style icon and i'll set the color to the accent as well now for the text what i'll do is i'll set the text color to text and for typography i'll also set that to text and i'll tweak it just a little bit i'll increase it to 17 pixels and i'll just change the line height a bit i'll set that to 1.8 okay cool now let's go to the maps widget and what i'll do is i'll just go to advanced and over here i'll go to border and i'll set that to solid and i'll set the width to 5 and the color to accent as well okay so now that we're done with both pages i'll just go ahead and publish this and i'll just go back to the global colors and i'll just make some changes okay so i'll just make some changes so you can see exactly how it affects the site manage global colors and what i'll do is i'll change the accent color cool as you can see it updates all of the elements that we assign this global color to i'll go ahead and click update and just close this and what i'll do is i'll just go to preview this page and i'll click the logo because the logo we set to link back to the home page so now we're on the home page and as you can see all of the elements we assigned that accent the global color to it's all updated you can see on hover the contact as text the text color the overlay it's all updated automatically okay so now we need to set the contact uh ask button on the home page uh to link to the contact us page okay so let's just go back to this page over here let's just refresh the editor as well so the colors are updated as you can see and we'll go to the button and now for link when we search for the page that we created the contact page we can very easily select and just update like that okay now let's just go back to site settings and we'll go to global fonts and we'll see exactly what happens when we change the global font so what i'll do is i'll just go to primary and i'll change this font family to to this font family here and as you can see it automatically updated so i'll go ahead and update and i'll close this let's just go back to the preview just refresh the page as you can see it's updated automatically and the contact us button works very nicely and brings us to the contact us page and here as well the global font is updated as well the primary font okay let's just go back to the editor over here and what i'll do is i'll go to uh the responsive tablet mode okay i just want to show you over here that if you click on the heading and you go to style we have the typography over here it's set to primary so let's just go to the global fonts and as you can see we have the responsive handles over here now it's set to tablet so what we can do is we can change this so i just go ahead and set that to look good on a tablet okay so this is now set globally okay so all of the text elements that have this global font style which is the primary one they'll receive the 45 pixel size uh in responsive tablet mode okay so this will save a lot of time and you can always tweak it for specific cases also just so you know i'll just go back and um i'll just go to layout over here and i just want to show you that you can go to breakpoints and over here you can set uh you can set your custom mobile and tablet breakpoints if you need to okay so this is just another uh thing that you can do in sight settings that might come in handy and another cool feature is background which basically allows you to set a default background style for your pages so if you have a style that repeats itself so you can just set that once over here instead of styling all of your sections and your pages uh over and over again okay so for example i can just style that over here and it will automatically be set as the background color across your site okay so what i'll do is i'll just click update and i'll close and let's just talk about theme style and we're going to be talking about theme style and the global colors and fonts together okay so to start off what i'll just do is i'll just drag in a new heading i'll drag it under the original heading over here okay so let's go to style and as you can see this widget gets the primary text color and gets it by default okay so this behavior happens behind the scenes to make sure that widgets and other elements they always have a certain style by default and as you've seen during this webinar they can be styled with global colors and fonts so for example i can change it to a new color like we did before but the moment that i clear this color okay then it will automatically be set back to its default setting which in this case is the primary as you can see by the white tick okay and the same goes for typography the typography is automatically set to the primary global font and i can change that the moment that i reset it you can see that it's automatically set to primary by the tick again now you can take control over this design layer by using theme style okay but why would you do that first of all it allows you to make style changes across your site without using code and there's no need for the theme customizer so if you're using a different theme and you want to change some some of this default behavior for some other elements on your website you can use a theme style to do that it also allows you to set the default style of plugin elements and elementor widgets just like we saw and it also allows you to maintain consistent design across your entire site especially if you use it together with global colors and fonts which you'll see soon okay so i just want to show you that if we go to the content tab by default it's automatically set to the h2 tag okay so i can change this html tag if i want for seo purposes but i'll just leave it at h2 i just wanted to make a note about that for when we're going to be using theme style okay so let's go there i'll go to site settings and as you can see we've got theme style over here which basically allows us to control the default styling of a couple of elements as you can see we've got typography buttons the images and form fields and it allows us to set a fullback style let's focus on the typography settings so i'll click on that and as you can see you'll get a notice to disable the default colors and fonts that i was talking about earlier this needs to be done to make it work okay so i'll just go ahead and click the settings page don't worry it opens up in a new tab and just make sure that you disable default colors and default fonts and click save changes now let's just go back to the page and what i'll do is i'll just update and refresh the page and as you can see over here in the heading that we just dragged in in style color and typography they're on set and the default colors and fonts they aren't applied anymore so now we have the ability to control this with elementor's theme style settings so let's just go back over there and check out the typography as you can see we can set up default fullback styles for all types of textiles on your site as you can see over here for the body links and the headings okay so let's just go to h2 since the heading widget is set to h2 by default okay so over here what we can do is we can set the color and we can set the typography so i'll just go ahead and set the color to red and as you can see it already changes automatically and the typography i'll just set that actually i'll just change the font family okay let's just update and close and see exactly what we just did the heading widget now has a new default for back style so if we drag in a new heading widget for example it will automatically come with this style by default but the moment that we change the html tag to h1 for example it won't be the same it's because we haven't defined h1 in theme style so it inherits another style from a different source okay i'll just go ahead and delete these two headings and i'll click on the main heading that we have over here and i'll do that to show you how we can use theme style with global colors and fonts uh giving us even more control okay so what i'll do is i'll just go over here to style and i'll just reset the text color and i'll reset the typography so it's set back to default and now let's go back to theme style and typography and change the h2 heading tag and instead of using custom colors and typography we're going to be using the global ones that we set up before okay so for the color what i'll do is i'll set it to accent and for typography i'll set it to primary cool as you can see it applies everything automatically and that's the way to use theme style together with the global colors and fonts so you can really create a streamlined design system if you're using theme style okay well that's it now now to use elementor's design system features and use them to set up and apply global colors and fonts on your own site improving your workflow and saving you a lot of time i hope you learned a lot during this webinar and that we managed to answer all of your questions also 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 a huge elemental community full of like-minded web creators everybody's really helping each other out 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 and on our website also check out our help center for easy access to our knowledge base faqs docs and a lot more lastly feel free to rewatch this webinar in your own time and create your own stunning designs and then you can share them in the comments below so i wish you good luck and most of all enjoy being creative thanks for tuning in and ciao for now you

Channel: Elementor

Views: 44,899

Keywords:

Id: OvETB43I7_w

Length: 38min 19sec (2299 seconds)

Published: Wed Oct 14 2020