Global Color - Global Fonts - Typography - Root HTML REM - Elementor Wordpress Tutorial
Vložit
- čas přidán 30. 07. 2024
- 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.
🧐 Learn with our Mastery Modules: websquadron.co.uk/web-design-...
👕 Get our Merchandise: websquadron.co.uk/merchandise
😃 Join our Facebook Group: / 3309523509284305
😃 Get Code Snippets Pro: r.freemius.com/10565/3304295/
😃 Get Elementor Pro: be.elementor.com/visit/?bta=2...
😃 Boost your CZcams Analysis: www.tubebuddy.com/websquadron
🥹 Support us: paypal.me/Websquadron
Hire us to work on your Website!
💌 info@websquadron.co.uk
👩💻 Visit websquadron.co.uk - Jak na to + styl
This video is a hidden gem. OMG Great content!
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!
Awesome instructions for using global settings & typography in Elementor! ~ Thanks for sharing this info. 😉
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.
This is the most comprehensive and thorough explanation I found on this subject. Thank you for your hard work!
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
My pleasure!
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 😁
Take your time :)
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!
Hard work and managing website builds. But I love the feeling that it helps others.
I was always confused with the Disable Default" Just did what you do! Thank's Imran
Now we both know :) :)
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.
Many thanks
I agree... he can really good explain :)
Thank you again for great work.
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.
Indeed. I prefer to use clamp() formulas for my fonts.
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 😂
Of course :) search for our Clamp Calculation Generator :)
@@websquadron What do you think? That's the first thing I did 😁
excellent video Imran, clears up everything in the fairly confusing way elementor uses to setup global colors and typography!
The bit that is really interesting is the impact of ticking or unticking the 'Disable Default' Setting :0
@@websquadron yes massive... personally i leave them unchecked as i want the style applied as soon as i add the text or whatever to the page... then i just adjust it to be more unique when necessary just makes more sense to me that way...
@@antonichristian5845 Me too. I leave them unchecked.
very useful.
thank you very much
Thanks for this GREAT explications, really the best tutorial about this subject that I found!!!!!
You're very welcome!
You are amazing, thank you!!!
You're so welcome!
Wondefully presented :)
Many thanks!
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.
Only the for the ROOT HTML.
You can set the Font EM/REM as well, but using a Clamp Calculation may be better:
learn.websquadron.co.uk/tools/
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.
Yup leave them unticked to control.
I just added headers and items into columns and then set the HTML tag (for each Header) to be H1, H2 etc. And to be honest I had to do some trial and error to know where to place them with regards to Primary, Secondary, etc.
Nice tutorial as always ❤. Quick one , how did you create that tab 1 and tab 2 that's displays different content?
Activate the Nested Features and you'll then have the ability to add in varied content into the Tabs.
Thx for a great video. As obviously there are some inherent problem within Elementor. Have you played this back to their support to find out if they have any plans to correct this or make it more useable?
They've seen it and we can only hope that things will improve.
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.
I wouldn't set the Fonts in the Typography unless it's just ofr the size.
Thanks for the awesome tutorial, Imran!
Just wondering, if we were to set the font sizes in CSS (e.g., Set the Root HTML for REM Unit to be 10px), wouldn't it be the same as setting sizes in px (in multiples of 10px)? Would it still be responsive to the user-preferred sizes?
Technically yes unless you wanted to use responsive font clamp formulas
Thanks for the clarification!@@websquadron
If you go now in Global Settings -> Theme Style -> Typography and want to change from the Headings, Body or Links the "Line Height, Letter spacing and Word spacing"... what do you use? Still rem or you change to px?
I now use Clamp () for Line Height, so if my Text is 2 rem, then I add either 0.3 rem or 0.4 rem to the line height; thus in this case the Line Height would be 2.3 rem. Letter Spacing is just PX and usually it's 0.5 or 1.
Holy... how on Earth were we supposed to figure that one out!? (the boxes I mean). WTF Elementor?
With Algebra and lots of sweat.
thank you for the tutorial. I am still having difficulty understanding how to assign my h1 tags. When I assign a text block for an h1, they revert back to the default setting of 16 pixels. I want to have the flexibility of my typography. I there an over ride setting that I have missed? (For example I have a subhead of 32 pixel, but I want it as an h1.)
Which theme are you using? Could be a setting but difficult to be sure from where I am.
I am using the blocksy theme and building from scratch
Is it just me or there is no responsive option for color settings in elementor? I would like to have the font and background colors flip in mobile view but the device picker icons never appear next to the color settings for some reason.
You can do that by adding Class Names into Site Settings, and then stating .classname {color: #ff050;} and use @media to assign a different colour for the mobile.
But you also have to make sure the color is not set in the style tab.
Hey there. I am facing a problem with the typography in Blog. For some reason, the body font size that was set in Typography doesn't affect the body font size of the blog articles. Does anyone know what might be causing that?
Have you already set the Bog/Single Post sizes in the template, or are they set elsewhere? Have you inspected to see what CSS style is applied?
I'm confused. I understand setting the font family in global font. That I understand. But setting the font size. Do I set that on each heading, text, element or should it pick up the size from the Typography site settings? 😵💫
It should pick it up from the typography settings. So when you set H1 to be size 20px then all future H1 will be 20px
@@websquadron But you need to set disable font from the settings right?
It's not Unbunto, it's Ubuntu XD
I knew as I said it that I was getting it wrong :) :)
Elementor made this pointlessly way too scattered/complicated.. And everyone seems to have a different understanding and way of working with global fonts and typography.. Imran says to set the Font Type in Global Fonts and the size and everything else in Typography. Rino is kind of doing the opposite, he is setting the Sizes and everything in GF (customised) and doesnt mess around with GTypography. Another Guy has linked the Global Fonts settings to the Typography Settings, And the Elementor Tutorial video is kind of lacking.. Its not fun watching all these videos when you want to clear it up in your head..
My true method is:
Set Family in Global Fonts.
Only touch the Typography for Links, Text and Heading after you have worked out your Clamp().
Remember, there are many ways to work, bake a cake, create art, record videos, and live life.
Find what works for you.
Hey there. I am facing a problem with typography in Blog. For some reason, the body font size that was set in Typography doesn't affect the body font size of the blog articles. Does anyone know what might be causing that?
Have you already set the Bog/Single Post sizes in the template, or are they set elsewhere? Have you inspected to see what CSS style is applied?
@@websquadron No CSS style was applied. I will try to investigate the Bog/Single Post sizes in the template. Thanks a lot for your response!