Make Sense of Elementor's Global Colours, Global Fonts and the Typography Settings with Examples

global colors global fonts tie to the peat d-o-g-r-a p-h-y typography what does it all mean custom fonts custom colors do you ever get confused when you have all these settings available to you in your theme or your template or something else or elementor and you start to think well if i pick a color or a font for x and i pick it for y which one takes precedent and do i even need to use them we're going to start looking into that in a little bit more detail and going through some examples and see how it changes on the page hey i'm imran web squadron i hope you like subscribe and follow us so you can keep up to date with so much glorious stuff about elemental and wordpress to help you your clients and your business okay that's what we're all about make sure you like and subscribe i know lots of you are not subscribing or liking and it hurts well not really but you know it hurts okay so what i'm showing you over here is that i've already opened up a brand new page in elementor i've completely reset this wordpress site so that we didn't have any previous typographies infecting the site because we had some preset settings what i've got is i've set some global colors obviously to do global colors you go over to here you go to site settings you hit global colors and you pick your colors i've got primary red secondary is blue text is like a dark charcoal colour an accent is great and i'll explain those in a moment but before you do anything with any of your fonts or colors or typography what you really want to be doing with elementor especially if you're using hello is go over to your wordpress settings basically your dashboard elemental settings go to the general tab it's going to be the first tab you open and make sure you have unticked the default colors and default fonts because if this is ticked you are now disabling the elementor default colors and fonts and there is a chance that when your theme or whatever updates there is always a chance that could override what you have in elemental fonts and colors okay it can happen and if i ever hear anyone go i just updated elementor or my theme or something and the colors all went well usually not all the time but usually it's because you haven't unticked these boxes here so make sure you do that okay i'm not gonna say it again but make sure you do it right now let's just go back to the colors don't worry about the fonts we have here at the moment okay or the styling over here we have headers this is literally the header tab here is heading and i've duplicated it this is h1 this is the exact same thing as above but this time h2 h3 h4 and we go down to div span paragraph okay pretty self-explanatory there all the different headers over here we have now the text from here text editor and again when i went into when i pulled this over i decided to give them category i went down all of these categories here okay so text header one two three four five six pre-formatted and paragraph yep are we good with that i then added in a icon because the colors do affect different elements and widgets i also added an accordion so this is the accordion closed it's red you open it it goes a gray color and you got some text there i also added in a list the icon list which is like a list item right and there's two there and i also added in a button and we have the button grey background white text yeah are we good so far now if we go back over to our hamburger mmm it makes me hungry hamburger we got a site settings global colors there's our colors now the primary color touches your headers and your icons so watch this if i go over here to the red and i now change this to be an orange color look at that all of the headers changed doesn't matter if it was a span or a paragraph it's using the header i um widget they changed even the icons changed and the icons over here so your primary is for your headers okay and it does a few other stuff but i'm focusing on what 99 of us use headers icons change let's just put that back to red okay what about the secondary well look here's a clue it's it it touches subheadings as well but it's this list items it mainly touches so if i go over here and i change this to be green look at that the icon list has now changed so again i hope that is clear so the secondary doesn't change a huge amount in relation to the primary it's just changing the list item so you could go well what's the point of that because you might not be using icon list but that's all it does the text one obviously changes the text but watch this i'm gonna go in and make this pink right like so so there you go you can now see the text has all changed because it's the text editor and the text that sat in the accordion right because that is technically text as well within them so you've got to get your head around the fact that your primaries your headers and your icons your secondary is your list items your text is your text and the accent let's put this one back to like the dark color there the accent is gonna be your buttons and the headers for your toggle and your accordion and things like that so if i change this accent to now be a dark green color or like that the accordion title or header has changed to green as has the buttons so i hope this clarifies the global colors of course whatever global colors you pick here you can modify on the fly so i might go yeah i've picked it there but i'm going to go into this button and i'm going to make it a red button and this is a yellow button and this is an orange button but from the off when you add in a new button it will always go to that green color let's just put that back to a light gray like so okay so that's what that image is there i know it's not exactly the same but it's getting you to understand global colors this is what they do are we okay and understood with that great you can all go away now no let's crack on what about global fonts now this is a bit of a funny one if i go to my primary i've already set this to be roboto condensed okay so look i am but right sorry let me backtrack i've set this to be roberto condensed if i change it to be uh what is that one uh rochester rochester yeah rochester look did you see the headers all changed the icon doesn't change but the um yeah so the head has all changed if i put it back to roboto condensed like that there the headers go back again all right so are we clear there that is how you set your font but what is interesting is that if i start to change the size nothing happened isn't that peculiar nothing actually happened so i'm just going to put this back to be just delete there's no size there all it did was change the font you can also affect the weighting of the font so there you go i'll put it to 200 we'll put it back to 600. i could go over here and do transformation but watch this it did not change so there are some aspects of it where it's a little bit weird in what it does so it's good for setting the standard font and the waiting remember that global colors for the color the global font is more about the family and the waiting okay yeah you can do the i mean even here letter spacing it's not doing anything so it's kind of a bit of a like a brain freeze moment you go well why is it not doing it i know that you wouldn't get it well no you can't really fix it because that's just the way it is okay so that's your primary the secondary i've changed i'm going to change this now remember this right this is meant to touch your risk your list item okay i'm gonna change this to b let's pick something really weird let's go for racing sans one i've picked racing sans one nothing has changed there so the secondary global color touched this here but look it's not changed so now i go to like 700. the list item is still the same one and this is where my brain really like goes what is going on but that's just the way it is so when it comes to global settings i don't worry too much about the secondary i find the secondary color and the secondary font is a little bit for me negligible i don't really bother with it too much okay it's a little bit like move on walk on by don't worry about it okay let's now go to the text the text one obviously it's currently roboto let's change this to be um let's go for racing yeah let's go for racing sounds one you see that now aha now the list item has changed so this is where you like you go wait right so the secondary color changes the list item but if you want to change the text you got to use the text and i don't know if that's like uh an after four or why is that like that but that's just the way it is but look it's changed your text your paragraph and the text within your accordion okay the pre-formatted never does anything the pre-formatted is just like hey let's throw a typewriter into elementor and it is we will never change because from the beginning of time this is how typewriters work that's just how it is let's leave the race the text as racing sounds for now so we can see it in action okay if i now go back to my secondary sorry no go back to the text we can also affect the font size as well it's not going to do much because it's racing sand so that was a bit of a bad choice now the accent if we now go over here i've already picked rock salt okay so i'm now going to pick um let's go for revalia bavalia and the font there it's a little bit faint it's gray but that's now changed to be the revelia font and i can go in and change the size of it as well so i could go in here there you go you probably can't tell but 900 it's now made it bolder let's just put it to 400 for now okay so in effect that is what the primary secondary text and accent global fonts are doing yeah okay so global colors yep pretty easy global fonts yeah it doesn't work completely how you think it's going to work but you know what it's doing that now means across your website you've got consistency and if you or your client goes oh man i don't want red i want orange fine you pick it and wherever you use that primary color ding ding ding ding ding it changes they might come back and say i don't want roboto condensed i want montserrat fine done it saves you having to go through page after page elements columns you know imagine you've got a 100 page website and you haven't used templates you gotta go through systematically changing it oh dear that's gonna take a long time right so why don't you do it here save yourself the time and become the master of what you're doing right now let's go to the typography because again people go well you got global fonts you pick your typography why have i now got typography again and this is the one that really got me going well do i even need to touch that because now i've done my global fonts and global colors if i want to change it on the fly i'll change it on the fly when i'm working on the page well that should be enough but let's investigate and see what this does so if i go to body and i pick text color well i can e i can pick one of my colors let's pick primary nothing's really happened there okay what about my typography right i'll tell you what let's pick a primary again nothing has happened there and this is a bit of a strange one i find in that if you've got say like a post widget that you're using for your content this is where it can often change that content so you've got a post widget if i change that to now be the primary color and the primary font it will apply that to the post widget so you've got to get your head around with where is this working and this is why sometimes i do stay clear of the typography setting now let's move on to the link if you had a link i haven't got a link in here so shall we add one in uh let's save change let's just add a link in okay just so we understand this better in fact we'll do it to text header six we're gonna click on here we're going to click a link and we're just going to go for in fact we don't even have a page on it because i reset everything didn't i awesome this page is called awesome by the way right so that now has a particular color because hello will give it like this turnipy rhubarbi whatever color turnip is that kind of color i think it's not turnips rhubarb isn't it oh i don't know i don't know right let's go back into our site settings it's got a typography okay i've now got a link if i go over here and i click here and i pick blue my link is now my primary color of course when you have global colors and global fonts you're not stuck to just the four they give you you can add more colors and more fonts you do know this right you can add another like five six seven eight nine ten different variations for fonts and global colors and double click it and give it a name you can do that so i've now decided to give it a primary color i could go to my typography and i could if i want pick um a completely different typography now so i'm now overwriting so i've gone to ariel or i could go over here and i could pick secondary so or let's not go for secondary let's go for accent so that's now the revalia font remember so you can use your global fonts and colors to start assigning things to particular types of settings so every time i bring in a link it will be blue and it will have that font applied is that making sense what about our header one right i'm gonna go to header one and i'm gonna pick blue now pay attention with this okay i'm then going to change my typography to be let's go for something totally weird let's go for here we go one of these fonts curly calligraphy right and i'm now also going to give it a size of 50. no let's go for um let's go for 100. that was ridiculous let's not do 100. let's go 450. okay now blink and you miss it moment what has that done when you changed the color it only changed the color for the text where you've made it a header one it didn't do it for header header one get your head around this when i changed the typography the font family it changed it for the text header so the color and the font that i changed only did it on the text header but if i go over to typography and i say okay let's just make it 10 in size oh sorry i did that for the link then that wasn't meant i wasn't meant to do that for the link let me do it over here let me just make the header 110 it changes the size for the header header one and the text header one again you gotta get your head round thinking about this and i find that if you start doing typography and doing this there is a chance that you can start to blow your brain up a little bit and go whoa well what have i changed now so just pay attention that if you set a size here we'll go over 40 it's gonna change it to the header one across the board but when you change the color and the font it will only do it for the text header not header header right so if i go to header two and i now pick black no not black let's pick um the light gray it changes it for the text header not the header header if i change the font family to be let's go with alpha slab one it changes it for the text header not the header header but if i go in and i now say right i'm going to give you a size of 20. it does it for both right you may want to play this back multiple times and just stare at the screen you know get the biggest tv screen you can find a cinema screen put this on zoom and just stare at this and get your head around it okay it can mess your brain up but this is how it operates and the same goes with three four five and six so if i start to modify the colors on here or the font family it touches the text headers not the header headers but if you touch the size it touches both so let us conclude in this wonderful moment today the global colors you start with four and you can add more okay and if for anyone out there that's not used to doing that add color i'm gonna give it a name and say whoa and i'm gonna give this a green color like so right same with um global font you're not you don't have to use just what they give you you could click here give it a word and you might say a button font or whatever and then you're going to pick a font assign it and when you come to buttons you might pick a particular font size or style for it when you come to typography though you can pick global colors or global fonts using the globe to keep things consistent and that is what i recommend you do and i recommend that the only time you touch this button here the typography is when you are now starting to mess around with the size but what you got to remember is that the colors only touch the text header and not the header headers but it does not matter because when you're designing a website let's just click update okay back to header when you go to say header 3 i'll go to style and i'll say okay i want it to be green or i'll pick a completely different color whatever i want okay and i can change the style as well so let's go for risque and let's just do that size there so you're not restricted to the global colors and fonts that is your starting point and then what you do is you can do it on the fly and i find that is easier to do for me do your global colors and font i don't bother with the typogra typography setting i do that on the fly why because once i've done this once okay i can just copy this and i might go okay i'm going to use it in another section so let's go to this section here let's zoom me down and i'm going to paste it here so every time i now use that header anywhere on my website it's always going to look like that right i can put it on another page another column wherever i want i've made it consistent my way that was out of tune wasn't it my way but anyway that's what you would do so global colors and fonts important use them typography not so much in fact the only time i use typography is what i want to mess around with when i've put a link because i don't want that that purply murky color i want it to be a little bit more vibrant and hey click me i want it to be a bit more exciting okay but that's you you're going to do it to the style you want to set with your website so i hope that has clarified a little bit about global colors and fonts and typography and how maybe the typography is not so important do it on the fly and then when you copy and paste you're going to have consistency i hope that helps you please please do comment if you don't like what i said or how i deliver this please let us know in the comments don't just don't dislike this video please let us know we want to learn and improve but if you like like subscribe and subscribe and follow you know i'll i'll look over my shoulder and i'll i'll see you in away but do follow and i'll see you soon

Channel: Web Squadron

Views: 578

Keywords: Imran, Siddiq, Imran Siddiq, WebSquadron, Website, Squadron, Elementor, Elementor Pro, Tips, Hints, Wordpress, Elementor 101, Elementor Course, Web, Web Design, How to build a website, Global Colours, Global Fonts, Typography, Elementor Typography, Font Settings, Colour Settings, Elementor's Global Colours, Global Fonts and the Typography Settings

Id: lMW7pyjmNNc

Length: 20min 57sec (1257 seconds)

Published: Fri Sep 17 2021