Global Color - Global Fonts - Typography - Root HTML REM - Elementor Wordpress Tutorial

If you understand Elementor's Settings for Global Colours, Global Fonts, Typography, and how to set the Unit Size for EM and REM - then you can build better and more efficient websites.

00:00 Intro
00:15 Site Settings
00:36 Global Colors
01:44 Applying Global Colors
05:30 Disable Default Settings or Not?
08:08 Text Link Color
09:33 Global Fonts
10:16 Adding Custom Fonts
10:59 Define the Global Fonts
14:07 Typography Settings
16:40 Font Size Units
18:46 Set the Default EM Unit to be 10px
20:25 Set the Root HTML for REM Unit to be 10px
23:55 Padding and Margin Units
28:22 Conclusion

Add to Custom CSS:
html {
font-size:16px;
}
@media only screen and (max-width: 600px) {
html {
font-size: 16px;
}
}

Global Color - Global Fonts - Typography - Root HTML REM - Elementor Wordpress Tutorial

We love to create - share - respond - and deliver.

Hire us to work on your Website!

[GusGoodwinCo]

It took me a few hours of struggls to find this video. Let's face it, elementor should just link to you. I fell like a professional web developer now. Thanks man.

[WassPogoreloff]

Finally, the mystery of the "Disable Default" ticks is revealed and the way Global Colours and Fonts work and inherit in Headings, Text, Buttons etc., etc.
Thanks again, Imran!

[fannycfc]

This is the most comprehensive and thorough explanation I found on this subject. Thank you for your hard work!

[marceloangelim]

This video is a hidden gem. OMG Great content!

[NickRama]

This is a great video Imran!! Live it when you do more in-depth videos like this! Thank you for always giving us lots of useful info.
Nick

[sSimoneenomiSs]

Very interesting! Thank you for the great video.

I always define my h1, h2 etc. as custom fonts in global fonts and then use these global fonts in the typography settings. That way I can use the global font styles also if I need them independently from the html tags.

[antonichristian]

excellent video Imran, clears up everything in the fairly confusing way elementor uses to setup global colors and typography!

[authentictechnologist]

Well done for making one of the clearest explanations of what I think is an unnecessarily confusing system - although it does perhaps provide maximum flexibility. Elementor should hire you to do their tutorials because the ones they have on their website barely explain the topic of global fonts/colours and typography at all. I mean, they tell you how to change the settings but not what they are actually for and what is the difference between the various ways of doing more-or-less the same thing.

[comleonmoto]

The tutorial I have been looking for for ages! It should be played in every elementary school (well, you what I mean!). Fabulous job, Imram.
Now, you just have to incorporage custom units 😂

[maddicares]

I was always confused with the Disable Default" Just did what you do! Thank's Imran

[kjburk]

Awesome instructions for using global settings & typography in Elementor! ~ Thanks for sharing this info. 😉

[MichelleHofer-Webdesign]

Thanks for this GREAT explications, really the best tutorial about this subject that I

[Melissa_Lawrence]

Was looking forward to seeing this video after u spoke about on the live this a.m.
Will be watching in now quickly because I simply can't not watch now that I've seen it posted and again in the morning when I turn on the laptop 😁

[marcelopignatta]

Thank you so much for this tutorial. It clarified a lot of the things I was having problems with. I don't know how you can make time for the videos, answering questions posted on Facebook, etc. but a huge Thanks!

[authentictechnologist]

The usefulness of having VW has a font-size setting comes into play quite nicely where you want text to grow with the screen size which I like to do with full-width cover / hero images and sliders. However, but the vw font sizes should always be set with the CSS clamp feature so that the text does not grow or shrink beyond a certain amount - otherwise the text gets ridiculously large or small on widescreen and mobiles. You just want the text to look better proportionally-sized to the size of the screen.

[KalamazooWebDesign]

Thank you for replying to my comment on your older video with this link. Such helpful information. And, I love your shirt!! ;)
So, are you saying that best practice for font sizing is to set only the pixels in the typography settings and not adjust the EM/REM there, as that should be done via html? I want to make sure I set up things correctly globally so I'm not tweaking every single text element.

[shirleyverstraete]

This is extremely helpfu! I think the most helpful was having a page set up with the Primary, Secondary, Text and Accent color columns then reviewing that page as you are deciding wether to tick or untick the Settings. Hmm - howd you do that? (that's a question from a beginner) Am I correct in that when ticked the page uses the Theme colors? So it seems that to really CONTROL the desired colors you would leave them unticked.

[kennyconfidence]

Nice tutorial as always ❤. Quick one, how did you create that tab 1 and tab 2 that's displays different content?

[akifalsancak]

Thank you for your wonderful video, best regards!

There is something I don't understand;

Under the typography menu, there are H headings from 1 to 6, and in the global fonts section, there are sections where we can set different fonts. Two of these are independent of each other and I still don't understand what to do and how to do it.

[adrianvillalobos]

Holy... how on Earth were we supposed to figure that one out!? (the boxes I mean). WTF Elementor?