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

It's easy to get confused over Elementor's Global Colours, Global Fonts, and Settings, but once you watch this, you'll appreciate which setting to use when and how they impact on Headers and Text.
I've set up a page with example text to see how they change as we go along!
- Get Elementor Pro here --- elementor.com/?ref=25741
-- Of course, we're affiliated to them, but it helps to pay for resources to keep creating ace content for you :)
-- Book an Appointment/Consultation: calendly.com/info-28542
-- LinkedIn: / imran-siddiq-7320a74a
-- Instagram: / batswebsitedesign
-- Twitter: / imranwebsites
-- Facebook: / websquadrontraining
PS: websquadron.co.uk
PPS: Contact us at [e-mail]
PPPS: We only build with Elementor Pro

[@MichelleHofer-Webdesign]

Wow wow wow, just thanks a lot for this great tutorial, I finally understood the "secret" of the global fonts end fonts!

[@studentu05]

played this back 50 times...I'm left with header, header not the header 😅.Very helpful video. Thanks

[@mattrr565]

Had to watch each section a few times to get it, but SO glad you explained this. It has been making me crazy. I feel I have it now and will mark this page to come back to for reminders. Thanks!

[@EduardoPereira-iy7js]

The impression that I have is that Elementor´s mission is to drive us up to the wall. They simply establish parameters that simply don't make any sense. This Global colours and Fonts is an example. If for a smart guy like you, certain things are complicated, imagine for us simple mortals:) I have struggled with this Elementor system for a long time. The best solution I have found was using the ASTRA THEME and configuring colours and fonts through there. Its faster, a real time saving. In my opinion it will take some time until Elementor simplifies the whole process.

[@KevsGuide]

Astra theme in elementor ? Whats your load speed like?

[@EduardoPereira-iy7js]

@@KevsGuide Not that bad. Sometimes it hits 98/97 in Gtmetrix. You have to take into account that you will have to install some optimization plugins to make it better. I am using WP Fastest Cache and Autoptimize. The results are incredible.

[@ekot0419]

Do you know what I did? Embrassing. I waste a few weeks and I still couldn't use containers properly. I ended up learning about elementor from A to Z. took me a week and a proper course. Now I can make my own theme. A lot more to do. But. Well... I somehow chose the hard way and I can't turn back.

[@IELTSMANTRA-wy1rl]

Thank you so much … it was driving me nuts …. But your explanation was perfect and I have finally figured it out with your help …

[@carpathianshepherdess4990]

I've been looking everywhere for someone to explain this in a way that makes sense. Thank you!

[@AfricaTravelCentreBoulder]

This was the best explanation of global fonts, colors and typography ever. And most importantly the relationship between all these bits and pieces. And just the right amount of snarky geek. Thanks

[@danygingras7782]

thanks for this useful tutorial. I was totally lost before I watch

[@websquadron]

Great :) It actually helped me too when I was creating it!!

[@inspirereverie]

Exactly what I was looking for. Thanks for going through all that to help others. You helped me a lot. I was getting so frustrated! Subscribed!

[@GrantSpoon]

Thank god i'm not really insane. Such a simple thing but they make it impossible for normal people to understand. Thank you so much for taking time to share this. Mind Boggleing.

[@websquadron]

You can do it!

[@user-zd2pr6vn2z]

I can't thank you enough. It was so confusing for me and now everything is crystal clear thanks to this great video.

[@honeywavecreative2762]

You crack me up in these videos 😂 Love learning from you!

[@websquadron]

I'm so glad!

[@jcardenas48292]

Thank you!!! Elementors torture tutorial on this topic was useless. There own website looks like they don't understand global colors. Orange, Ruby and Forest green, Banana yellow. Hikes.

[@websquadron]

:)

[@samd4745]

OMG!! I always thought it was just me being a cottonheadedninnymuggins when it comes to global typography in Elementor!! Thank you for sharing your thoughts on this…now I know that I wasn’t being fick AND you’ve actually cleared it up for me! 🤯🙌🙏

[@authentictechnologist]

As long as your Global Fonts settings for Primary are set as Default (or empty), then your Typography h1...h6 settings will change the style of the Header widgets. (I'm not sure if this is something that was changed since you made the video.) There are so many convoluted and seemingly arbitrary rules between the different Site Settings that it takes aeons to work out the rules and then even longer to consistently remember them without reminders!

[@KalamazooWebDesign]

Finally! As confusing as that seems, it does make sense to me. LOL! Thank you! :)

[@websquadron]

Here's the better updated version :) kzbin.info/www/bejne/pYiyf3-IlMald5Ifeature=shared

[@Harrzack]

Great tune! Love your funny, friendly way of showing tech stuff which could be pretty dry. 🍺😍

[@joshoastler6504]

Nice walkthrough Imran!

[@websquadron]

Thanks. I need to update this as I use a better microphone and camera now.

[@user-hr1qe1jr5n]

Thank you so much. This was driving me crazy.

[@leenabel]

Informative and entertaining. Thank you!

[@websquadron]

See this, the much updated and much better video released 3 weeks ago: kzbin.info/www/bejne/pYiyf3-IlMald5I :)

[@kjburk]

Luv your enthusiasm! Thanks for sharing how to use the global settings in Elementor. 😊

[@websquadron]

Thanks, but do see this much updated version :) kzbin.info/www/bejne/pYiyf3-IlMald5I

[@nickcharlesworth1429]

Thanks so much for this video. Finally I understand global fonts and colors! A frustrating 2 days resolved! Something I noticed, when you have a global color for text, and try to change the color for H1 H2 etc, a cross appears in the H1 H2 color box - that was driving me nuts!

[@adied7725]

Thanks Imran the first guy who has explained this shit well.👍😊😊. . Its Elementor that has made this difficult for all its users, again to many settings that effect what you can't and don't see.... Sometimes less is more.... A lot more! Cheers I thought I was going mad too

[@donald3130]

I think the author does a nice job of explaining all the differences in the typography section; sure learned alot I want to use this as a reference video. Might want to slow down with the mouse a little

[@websquadron]

I’ll do an updated version soon

[@crowdyke220]

Thank you for posting. No disrespect to your presentation skills but it is going to take me some time to get that in my head. Initially I will follow your advise and set just Global Colours. This post explains why I am struggling so badly. Thanks again. Have subscribed.

[@websquadron]

You may want to see this updated video done with a much better microphone, camera and I clarify more. kzbin.info/www/bejne/pYiyf3-IlMald5I

[@itssimondigital]

At the risk of being a stalker and carrying on my comment from your other video (the one where you say Hello theme is the best). This is why I use Astra - to escape Elementor's Global Colours, Global Fonts, and Settings. This is convoluted!

[@websquadron]

I understand and you should always use what you prefer :)

[@ShahatabUddinKhan]

Marvellous job. Thanks bro.

[@susanfogarasi1555]

Thank you! I've been struggling with these settings and now finally understand the differences.

[@websquadron]

I was the same too :) Just to let you know that REM is best advised when selecting your font sizes. 1 REM is the same as 16px

[@bgckhinkali2421]

@@websquadron Is the REM always 16px or can this be changed in site settings for base font size?

[@websquadron]

@@bgckhinkali2421 See this about REM in more detail. You can alter it. kzbin.info/www/bejne/gofXfWWnedmsatU

[@amiebrown6361]

This tutorial is incredibly helpful. Much appreciated.

[@websquadron]

This is the much better and updated version. kzbin.info/www/bejne/pYiyf3-IlMald5I Released 2 months ago.

[@ruudYT2022]

VERRY helpful! Thanks.

[@ekot0419]

Thank you so much for the lesson brother.

[@stevemarrs3149]

Cheers Imran, great video as usual. You're fast becoming my go to channel for breaking this stuff down! I'm just setting up global colours and fonts for a new client site, so this is perfect.

[@websquadron]

Love hearing this and thanks for your continuous support!

[@websquadron]

Even more about EM and REM :) kzbin.info/www/bejne/gofXfWWnedmsatU

[@stevemarrs3149]

@@websquadron Perfect! I’ll be watching this while I put my little ones to bed later!

[@websquadron]

@@stevemarrs3149 Oh my, when the little ones go to bed is the only time I get to record and edit :))))))

[@stevemarrs3149]

@@websquadron I get anywhere between 25-40mins of silence when the 3 year old lies across me with her teddy and I scratch her brothers back till they’re both asleep… so I consume a fair bit of this type of content in that time!

[@ShahatabUddinKhan]

I think, the authority of Elementor needs to watch this video and take the necessary steps to make Elementor easier for all. Hey brother Imran, cordially asking, did you make any updated version for this? Thanks.

[@websquadron]

I did indeed. kzbin.info/www/bejne/pYiyf3-IlMald5I

[@jackharvey6191]

This is phenomenal ty for uploading this

[@Sunny-uf5nd]

I have been going absolutely mad trying to figure this out. Elementor had a done a poor job trying to simplify things on this part. Thank you for this clarification.

[@Sunny-uf5nd]

By the way, you're a funny dude -- I found the video quite hilarious.

[@websquadron]

Awesome :)

[@keithcommins]

Their explanation on how they work is quite frankly pathetic. No explanation on how they get applied to different tags, none whatsoever on things like hierarchy, what colours/fonts are applied before what else, etc.

[@mayanikolova8353]

Finally a human explanation about this hahah, Thank you!

[@websquadron]

You may prefer this updated and much better version kzbin.info/www/bejne/pYiyf3-IlMald5I .

[@mayanikolova8353]

@@websquadron Thank you. After years of Oxygen and now Bricks I am returning to Elementor for 1 project (using the Voxel theme) and so happy to find your channel :)

[@frn7979]

just what I was looking for, my brain was already boiling over this ...

[@websquadron]

Do watch the other video on REM for Fonts too - very important!

[@amberhoare4936]

Love this! Thank you for the explanation. I am not sure I completely understand difference between 'Header' & 'Text Header' / however its a great way to implement typography styles. **One issue I am having is I am in Elementor / using Hello Theme, and I have set all of my text styles to EM for best practices and easier Responsive Mode editing HOWEVER, my Site Settings keep defaulting to PX! Any way to fix this?**

[@pclalramenga304]

You are the best.

[@caffeinatedgenealogist8380]

finally someone I can understand. I think I identify spiritually with your your train of thought and presentation style. please for the love of all things learning, do you have a slidedeck or a printer ink friendlier idea than screenshots to handwrite notes on!?

[@websquadron]

Thanks

[@ilisam]

Amazing!!! Thank youuu!!!

[@20zakmorris]

Very helpful 👍🏻

[@websquadron]

Glad it was helpful!

[@nichart]

Thank you! Just made myself a document to remember this.

[@websquadron]

It’ll become second nature :)

[@nichart]

@@websquadron I'm sure it will! But I will be using "Typography" to set the sizes and letting-spacing of both headings-widgets and text headings. Make sense for me, because I like to make sure text H1-H6 are styled correct.

[@keithcommins]

Man oh man, whoever decided these "global colours/fonts" was a good idea should be fired immediately. Absolutely idiotic idea. Of course, they could have just stuck with basic CSS rules but no, some idiot had to be too clever for their good. Clown world stuff. But thanks for the explanation, you did a great job. Shouldn't need to be explained quite honestly, but many thanks!

[@WilhelmCazimirovici]

Great video! Less fog now 🙂

[@websquadron]

That's the plan!

[@websquadron]

And you may want to see this regarding REM Font. kzbin.info/www/bejne/gofXfWWnedmsatU

[@mariestankiewicz8015]

Thank you!

[@websquadron]

You're welcome!

[@katemcgain1125]

Thank you sooooo much.

[@websquadron]

No worries!

[@bestprintfactorytonercartr9949]

I always follow your video

[@websquadron]

So glad that you do :)

[@KieranBriggs]

Thanks for this video. Really helpful. I hope Elementor sort out the global styles and get them working correctly and intuitively, its a mess at the moment.

[@websquadron]

It’s one of those things that you have to be careful of as it can mess up your thought process. I just stick to Global Colour and Global Font - and then the Typography Link setting. And sometimes the Typography size. Definitely be cautious :)

[@EduardoPereira-iy7js]

Kieran! The funniest thing with these global fonts and colors is at those Elelementor Video Promo, everything seems to be so easy to work with. But when I put my finger on it, its a complete mess, indeed:)

[@Dhananjaynaidu91]

My man, I thought I was losing my mind.

[@websquadron]

No probs

[@MrStephensessions]

Hey Web Squadron. What happens if you create new H1-H6 in Global Fonts and then set all typography H1-H^ to match? Will that sync it up?

[@websquadron]

I have found conflict with what affects what, thus I just use the Global for the Font Family, and then use Typography for Size and Colour. At least then I know where I need to go for any changes.

[@k0secha]

Omg thank you

[@dominmax]

Thank You, Thank You, Thank You 😀 You've pulled me out from dark ages. I wonder why E-guys differ H1-6, Paragraphs etc. in text editor and in visual editor - this is where the mess starts. I have (and should have) only one H1 on a page. And do not want two different styles of any paragraphs. And when I use page templates and wp editor I want all headers look the same... I hope you've helped me to finish the struggle :)

[@websquadron]

:)

[@cameliaiosif1579]

Thanks s lot

[@apollocradles7874]

Hello Imran Another superb tutorial! Watching your videos I can finally see the mental fog lifting when trying to learn Wordpress and Elementor, having been a Dreamweaver user for the past 20 years. Do you have, or know where there's something like a pre-flight checklist of all the settings you need to define/change before starting building a site with Wordpress and Elementor? I think that would be super useful to us newbies. Thanks

[@websquadron]

That video is coming out on Monday (fingers crossed) that will cover EVERYTHING :)

[@apollocradles7874]

@@websquadron Fantastic news! I can't wait...

[@petmystery2661]

So you suggest that after making changes in global fonts and color; if we import elementor kit, will that accept global settings on his own??

[@websquadron]

I don’t use Elementor Kit.

[@maikendamsgaard9415]

I can't get my texteditor (on a page) to change textsize.... do you know why? I'm lost

[@websquadron]

Have you set it in the Global Settings > Typography? It should allow you to alter it on the page.

[@paulogorenstein770]

Thaks

[@Phoenix_Arise_J]

Thank you, Thank you, Thank you! I can't say enough of how much of a horrible job Elementor did for the site settings. Ive wasted 3 days running my work, redoing and just trying to figure out where am I going wrong with this! Site setting should mean your ability to control the basics from one place to speed up your work flow, but Elementor has messed this up really bad. What is this over riding the CSS setting across website just because you can't make use of the site settings? It's ridiculous how much excess css code is being used due to their wrong doing.

[@MysticPheonix369]

if everything is set as default typography and you need to change the font sizes globally for mobile... How come that's nonresponsive?

[@chujingxl]

Thank you for the detailed explanation. It's very informative and helpful. There's one thing that I don't understand. What is the difference between header and text header. Could you please explain that?

[@websquadron]

It's the name of the Widget as in Headline Text that may be H1 to H6, whereas the Text Widget is P (Paragraph).

[@chujingxl]

​@@websquadron Thank you for your quick response. I see the widget called "Heading" which I can drag to my page. It's default HTML tag is H2. And I can change the HTML tag from H1 to H6, and to div, span and p. I suppose this is the header group on the left in your video. I see the widget called "Text editor". The default form is Paragraph. And I can change it from Heading 1 to Heading 6, and to Preformatted. I suppose this is the text header group on the right in your video. Am I right?

[@websquadron]

@@chujingxl Yup, but watch this to better understand the fields: kzbin.info/www/bejne/lYLVd4Jon6uXZ9k

[@joseluisxyz]

Hello: what do you mean with “header header” and “text header”? Is text header, the text in a post?

[@websquadron]

You can convert text editor into a H1 tag

[@erling5148]

do you happen to have that page/style guide for download

[@websquadron]

No :(

[@patrycjasmietana]

This was amazingly helpful. However, suddenly all my headings are the same size. H1, H2, H3 - all the same size. I have no idea what happened. Do you happen to have a solution to that?

[@websquadron]

You’ll need to set the size in the typography

[@mogounusJ]

I think the crazyness comes from not disabling Global Colors and Fonts. Would be awesome if you could do the same setup with those disabled. From what I see it makes a lot more sense that way as Elemontor is not overriding the HTML element formatting unless you specifically tell it to. If you disable the Global Colors and Fonts you need to be sure to set the Typography settings otherwise it will default to theme settings.

[@websquadron]

Good point

[@BrockBarr]

Thanks for doing this and clearing it up. It really drives me absolutely nuts and coming from a coding background it's hmmm, kinda $h!t? Anyway, I will change the global colors and the global font face. From there I completely don't touch anything else and just do everything in the typography section. This gives you more consistency with other third-party widgets and custom HTML blocks etc. I don't know if Elementor can ever fix this because it would break a lot of sites. So I guess we're just stuck with this horrible mess. Thanks again for making this video though, awesome.

[@websquadron]

It is one of those things that you wish was easier and I hope they improve it over time.

[@reviews-44]

I can not change text color globally. What could be the problem?

[@websquadron]

Have you disabled the Theme's colours (with Elementor)? Care to share screenshots to [e-mail]

[@reviews-44]

@@websquadron it is unchecked "disable default color" and "fonts". What else could be checked so global text font and color wont overwrite. Screenshot is on email.

[@websquadron]

@@reviews-44 Care to email me on [e-mail] to have a quick look - would require Admin access- Just so i can check your Settings.

[@MuntzDesigns]

I've only starting using Elementor and Blocksy theme over the last two months and this is the biggest issue I have. Do I use Blocksy settings or Elementor? The struggle is real. Lol.

[@websquadron]

I would go with EL considering the amount of great support and (IMO) the creativity it offers.

[@MuntzDesigns]

@@websquadron Sorry for the confusion, if any but I'm using the Blocksy theme and building out with Elementor. I'm always starting a project and in my head I'm like where should I set my colors and type? Both? I just need to find the right work flow. Thx.

[@websquadron]

@@MuntzDesigns I would just do Colours. But if fonts are important, then do the global fonts too.

[@Dhananjaynaidu91]

Please do containers next

[@websquadron]

We have. Do a search for Flex Container in our videos. Or go to the site tutorials playlist :)

[@learnearn3166]

Oh my goodness, my head is spinning.

[@harbourdogNL]

3:28 So, a Header is a Header...what is/what do you use "Text Header"'s for? When I see the word Text and I think body copy, not a headline.

[@websquadron]

Just in case someone uses a Text Editor for the Header

[@harbourdogNL]

@@websquadron Aha, thank you. Guilty. Is there any way of exporting all Elementor settings at once to then import into a new install or a staging site?

[@jamieburchell]

I'm confused about why you say to uncheck the disable default colours and fonts in settings. Without those checked, a lot of the theme settings in Elementor doesn't seem to work. The docs say "In order for Theme Style settings to apply to most of Elementor’s elements and widgets as well, you will need to disable Elementor’s default colors and fonts"

[@websquadron]

Hello has a default stylesheet with basic styles. When you go to Elementor Settings and disable Default Fonts and Colors it inherits these basic styles from Hello instead of using Site Settings > Global Fonts and Global Colors (Primary, Secondary, Accent, etc). But if you go ahead and actually set specific styles for Site Settings > Typography, Forms, Buttons, etc, it will in theory override your theme styles.

[@jamieburchell]

Thanks for taking the time to reply. I found that by not checking those boxes the button styles etc in that area didn't get applied. The fun thing in this area is you never know if it's intentional or a bug.

[@donald3130]

At minute 1:48, how do you get to "elementor > settings"

[@websquadron]

Inside Wordpress - go to Elementor then settings

[@donald3130]

@@websquadron thanks

[@cliffordtuffs]

Would you please do a video on how to incorporate the "MyListing" theme? I am using Elementor Pro, and Hello Theme, I want to also implement the "MyListing" theme. I did see a video you made introducing it (which is fantastic), but I got lost, and couldn't follow along with how to implement and use. Thank you in advance! 😊 P.s. I liked this video and subscribed a few weeks ago! 😁🌊

[@websquadron]

Sure, do you want me to go into more detail? PS - was it this video you saw? kzbin.info/www/bejne/ZoWrfH6YjciHZq8

[@cliffordtuffs]

Yes, and yes :)

[@cliffordtuffs]

@@websquadron I'll actually also send you an email tomorrow to clarify more about what I need help with. LOVE that you're producing these videos! ❤️😁🌊

[@websquadron]

@@cliffordtuffs Look forward to that. [e-mail]

[@cliffordtuffs]

@@websquadron I have sent an email :)

[@antonyneeson7956]

Great info but please, what is the difference between a Text header and a Header Header?!?!

[@websquadron]

Heading Header uses the Heading Widget whilst the Text Heading uses the Text Editor Widget.

[@Clarity-808]

Wow I didn't realize how poorly Elementor did the typography section. I'm a huge fan of Elementor but this is straight-up embarrassing. Avoiding at all costs. Thanks for the vid!

[@rejbeau]

What a mishmash, good explanation but I had to watch it 3 times to understand. I decided to NOT use typography at all

[@DanielRRomani]

😵😵😵

[@MrAelish]

its nice but..... beginning is hard to understand .

[@websquadron]

Sorry about that. Any particular bits?

[@antonichristian5845]

love the video but think it highlights overall how totally messed up and confusing elementors design system is lol

[@websquadron]

Valid point indeed.

[@timemachinestudios8136]

Thanks for explanation but please speak less..

[@websquadron]

Come on - the speaking, the imagery, and my personality is all part of why we do what we do, and why people like our approach. If I speak less, then I'm not me, and I'm not me, then I become someone else. Keep watching and you'll get used to it :)