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

Подписаться 73 тыс.

Просмотров 7 тыс.

50% 1

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 RU-vid 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

Хобби

Опубликовано:

17 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 67

@marceloangelim 16 дней назад

This video is a hidden gem. OMG Great content!

@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!

@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.

@NickRama86 Год назад

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

@websquadron Год назад

My pleasure!

@kjburk Год назад

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

@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!

@websquadron Год назад

Hard work and managing website builds. But I love the feeling that it helps others.

@ShahatabUddinKhan Год назад

Thank you again for great work.

@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 😁

@websquadron Год назад

Take your time :)

@maddicares61 Год назад

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

@websquadron Год назад

Now we both know :) :)

@cameliaiosif1579 Год назад

very useful. thank you very much

@antonichristian5845 Год назад

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

@websquadron Год назад

The bit that is really interesting is the impact of ticking or unticking the 'Disable Default' Setting :0

@antonichristian5845 Год назад

@@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...

@websquadron Год назад

@@antonichristian5845 Me too. I leave them unchecked.

@authentictechnologist 8 месяцев назад

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.

@websquadron 8 месяцев назад

Many thanks

@BalloonSchool 8 месяцев назад

I agree... he can really good explain :)

@condostrata 2 месяца назад

You are amazing, thank you!!!

@websquadron 2 месяца назад

You're so welcome!

@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 😂

@websquadron Год назад

Of course :) search for our Clamp Calculation Generator :)

@comleonmoto Год назад

@@websquadron What do you think? That's the first thing I did 😁

@MichelleHofer-Webdesign 4 месяца назад

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

@websquadron 4 месяца назад

You're very welcome!

@TheJASDrummer Год назад

Wondefully presented :)

@websquadron Год назад

Many thanks!

@KalamazooWebDesign 8 месяцев назад

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.

@websquadron 8 месяцев назад

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/

@authentictechnologist 8 месяцев назад

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.

@websquadron 8 месяцев назад

Indeed. I prefer to use clamp() formulas for my fonts.

@kennyconfidence7567 Месяц назад

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

@websquadron Месяц назад

Activate the Nested Features and you'll then have the ability to add in varied content into the Tabs.

@shirleyverstraete5710 Год назад

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.

@websquadron Год назад

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.

@rguedel Год назад

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?

@websquadron Год назад

They've seen it and we can only hope that things will improve.

@Garreth888 9 месяцев назад

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?

@websquadron 9 месяцев назад

Technically yes unless you wanted to use responsive font clamp formulas

@Garreth888 9 месяцев назад

Thanks for the clarification!@@websquadron

@akifalsancak 8 месяцев назад

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.

@websquadron 8 месяцев назад

I wouldn't set the Fonts in the Typography unless it's just ofr the size.

@bbontubecentral1 4 месяца назад

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.)

@websquadron 4 месяца назад

Which theme are you using? Could be a setting but difficult to be sure from where I am.

@bbontubecentral1 4 месяца назад

I am using the blocksy theme and building from scratch

@BalloonSchool 8 месяцев назад

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?

@websquadron 8 месяцев назад

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.

@TomasMollaev 8 дней назад

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?

@websquadron 8 дней назад

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?

@TamasKAntal Год назад

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.

@websquadron Год назад

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.

@saucydee1 Год назад

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? 😵‍💫

@websquadron Год назад

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

@antoniomaria2012 Год назад

@@websquadron But you need to set disable font from the settings right?

@adrianvillalobos2944 Год назад

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

@websquadron Год назад

With Algebra and lots of sweat.

@adrianvillalobos2944 Год назад

It's not Unbunto, it's Ubuntu XD

@websquadron Год назад

I knew as I said it that I was getting it wrong :) :)

@adnankamen6470 10 месяцев назад

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..

@websquadron 10 месяцев назад

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.

@TomasMollaev 8 дней назад

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?

@websquadron 8 дней назад

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?

@TomasMollaev 8 дней назад

@@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!