Since many people struggle with typography and custom fonts inside of Elementor I thought I would make a guide, because it can be quite confusing. I'm also tackling the px, rem, em and vw in this video and I'm giving you a guide on how to use fonts that scale automatically. I hope you like it!
Thanks Rino - another great tutorial! It works great for me until I look on a mobile phone - my Title 1 ends up looking way too small for some reason!?
Looking at the comments I now see that I wasn't clear about using the H1-H6 for blogposts. So don't get me wrong: I use the H1-H6 for blogposts to give it structure, and you can even change their sizes in the Typography section in the Site Settings, and you should also use them to give normal pages structure. But I just don't use them for styling purposed on non blogpost pages.
@@rinodeboer Hi Rino. Thanks for your reply. I figured out what was happing. Some default settings in Elementor were already set for tablet and mobile so once I cleared those settings out everything is perfect! Thanks again. Dan.
@@danstevens1974 hi daniel, can you please tell what those settings were? I am using rino's font sized, but it looks way to big on mobile and tablet mode. It was perfect before but suddenly it changed to something comepletly different
@@Mkfinancialsca Hi Manik - yes i noticed some of the headings were too big on mobile also. You can always change the clamp code to your preference. A bit of trial and error involved! cheers.
03:00 - Installing Custom Fonts 07:24 - Determining what values to use 11:00 - Rino's Spreadsheet 13:00 - #CSSClamp saves the day! 15:15 - How to set up the font sizes in Elemntor
About the 3 years: I feel you, after a year of using the manual way of defining fonts and duplicating it, with px as the default, last week I invested a whole day on learning how to use the GS in combination with REM the proper way. One day later your video went online. Would have saved a lot of time. On the other hand I'm happy about the free confirmation... :'] PS: The Clamp Generator is genius.
I hope this message finds you well. I wanted to take a moment to express my gratitude for the incredible help you provided me through your video. Your content was incredibly informative and well-structured, and it helped me to understand how should I setup font style and size on my website, in a way that I had not been able to before. Your passion and expertise truly shone through in your video, and I could tell that you put a great deal of time and effort into creating it. I am so grateful to have stumbled upon your video, and I wanted to let you know how much it has helped me. Your generosity in sharing your knowledge and expertise with the world is truly inspiring, and it has made a real difference in my life. Thank you once again for your hard work, dedication, and generosity. I wish you all the best, and I look forward to seeing more of your amazing content in the future.
Your videos are an exceptional resource for anyone looking to improve their skills with Elementor. Your clear and concise explanations make even the most complex concepts easy to understand, and your teaching style keeps me engaged throughout each video.
Loading fonts from Google also causes an issue with GDPR compliance! Userdata are sent to Google before the user has the ability to consent or deny. For this reason you should prevent loading from Google and host the fonts on your server. At least in Germany there are many dissuations which want penalty payments from site owners.
Exactly! Which is why I use the Custom font option exclusively, even if it means that I have to download the Google Font from Google and manually upload it to my site. It's safer, GDPR (or DSGVO) compliant and faster.
This tutorial is so well explained, I have to say I dont write many comments or engage very often but I felt the need to express how much I appreciate your guidance on this specific topic. Fonts are something I definitely struggle with, I'm better with graphics and general design. Your manner of explanation throughout the entire video is so calm and the instruction so clear, I was able to execute the changes on my website in a few minutes. Thank you so much!! You earned a sub.
Hey Rino, thank you for this nice video! I definitely understood the differences in the Global Fonts and Typography. One strange thing I discovered is that my 'clamp' code would not work, unless, I included the ';' semi-column at the end!!! Weird right?? 😌
I'm now finding out that, although the code works live when I input it under the 'pencil' icon/option, (by live I mean at the current set up Elementor offers with examples so you can see it as you change it), when I scale down to mobile, I don't see the changes taking effect. I've disabled the Global fonts at Elementor's settings of course too. The fonts I changed with the clamp code just remain the same when seeing the page and the line height doesn't work no matter how many REM's I put. Perplexed..!!!@@rinodeboer
thanks so much for this! like you said, I was just adding all the font details every single time i added new text to the website. You have saved me hours of work and made the site look much more professional at the same time.
I've been working with Elementor for years and thought I knew a lot--this video proved I have more to learn. Thank you for making this video--very easy to follow.
Using the Heading element, you can select a global font and thus have an H4 at the size of an H1. However, what would be the impact of headings used within a text element (e.g., in a blog post)? In my tests, the H- sizes use whatever is default in the theme.
Within the blogpost content box in Wordpress you are unfortunately limited by just using the styles from the H1-H6. Since you cannot separate the styling from the H tag in the WP content editor.
Once again, a very helpful video. Thank you. Quick newbie question. Should I also use rem for line height and spacing? In particular, when using clamp? Thanks.
@@rinodeboerthank you very helpful. When you say Clamp for Padding is that for all Positioning eg. Spacing of adjacent Containers, Widgets etc or just Padding associated with Text Widgets eg. Headings, CTA etc. Sorry for the dumb question:/
With padding I mean the padding top and bottom you use on all your background containers, so that it automatically becomes smaller on tablet and mobile. And sometimes I also use it on the inside of containers on all sides.
Hi Rino, awesome video thanks for sharing. Can you tell us what minimum and maximum viewport width you choose in the fontsize clamp generator to get those preffered values?
@@janstocke2231 Same. Bottom line the outputs do work well. I appreciate his worksheet and approach but without the viewport min/max settings I am left in the dark in how to adjust accordingly. For me I'll probably go with a 360 min and 1000 or 1120 max. I have seen it done a bunch of ways. I just depends on how much we want the max to grow as the screen gets wider and for me I have no interest in worrying about optimizing for a 42 inch wide screen. Good luck!!
Hi, I am wondering about why you are setting max width 1920px 14:50 instead of 1120px (your prefered default), especially if a whole page is "boxed". Some stats say that even in 1st world countries there are 360px up to 9% on mobile devices. Here I am with you. So my conclusion would be a range from 360 to 1120. Can you give your considerations for a best practice viewport width range?
@@StreamlineRoofingTx clamp defines a range. So there have to be two limits. Min and Max. Look what happens to your site , if you set a ridiculous max like 5rem for 1920 or for 1200 for example.
@@juleshumboldt7680 by no means am i an expert, so i might just not understand, but i have mine set for 5rem at 1920, but i dont have my content boxed, its all full width, so maybe thats why its ok?
Too easy... but only because you made it so. Excellent tutorial and well structured so that we understand what we are doing while availing ourselves of the shortcuts you so generously provide. Thank you so much!
This is yet another wonderful presentation Rino. My only question is what were the Min/Max Viewport settings you used in the Clamp Generator? When I use 360 & 1920 I do not seem to come up with the same values. Thank you in advanced :)
Hey Rino, we can even change the default html font size to 62.5% so that the base font size becomes 10px ( 1rem). Body font becomes 1.6rem. so its easier to do calculations as now just have to divide by 10 to get the rem value from px. Eg 52 px becomes 5.2rem
I thought he will be explaining in this video how to do you mentioned point. But disappointed. May be in custom Css of the Theme, we can keep html{font-size:62.5%} and would work all over website.
Good point, I will remember to include that in my course then. But for a baseline for headings 120/130% and for body fonts 180-200%. Using % is nice because you can also do that in Figma and they scale according to the size of the font. But make sure to select the custom unit selector (the little pencil icon) to put in % values.
Or you use for the line high multiple font size by 1.6. After That, round the Result to the nearest Full number. For some headers use 1.3 and for even larger sizes like 32px you can use 1.1 or even just 1.0
Thank you, you helped me a lot. I don't know if it's already been answered, but here it is: **Note that there is a difference between a regular page and a blog post. 1. on pages: Primary: Menus; Headings; Headings on tables; lists Headings and tabs Headings. Secondary: basically subheadings in few places, for example: price tables Text: text in general and "text on path"feature Accent: buttons 2. on blog posts: Primary: H1 Headings Text: H2 to H6 Headings and text in general.
THIS IS AMAZING! I struggled with fonts setup like this dog from "i don't know what i'm doing" meme. With no hope left, I watched this video and it changed everything! amazing, thanks!
Thank you for this complete guide to Elementor's typography. But what line-height or letter-spacing should be used? Do you simply use the default values?
Hello Rino! Thank you so much for this video. I have a question though. How were you able to calculate the line heights for each Titles. I saw you made use of ems for Line heights. Please how did you come up with that?
By no means am I am an expert but my own research I read line spacing at 130 to 150 percent the font size (i.e font size x150%= line height) is ideal for readability, but sometimes less or more is acceptable depending on your design...But for body text I find 130 to 150 works for me...
Rino - simply brilliant. I am just a user with 20 websites (not a developer) but I use Elementor and am always trying to find how to use it better. Your videos provide original insights and your explanations are unique. Great value - sign me up to your course!
Wow. I'm a novice with Elementor, but am pushing to learn more, and I had already noticed the few websites I've done are a mess on consistency. You've shown me howntonfix them, but more importantly WHY they're such a mess. Now I've got a few dozen pages to reconfigure, but I'm looking forward to them being RIGHT.
Great video... Two things, it would have been nice if you could have explained how to go about doing our own clamping a little more (like what values do I put in?). Also, I recommend 24px spacing for better readability and you should also explain EM for people to use to set their line height.
As always, your video was fantastic and incredibly helpful. I've probably built 30 corporate websites using Elementor over the past few years, and I still just bang away at all the font settings, and never seem to feel like I totally have a handle on what I'm doing. Thank you for clearing this up, it's terrific.
thank you Rino, I did get your response and since then, have reviewed your tutorial more and now have a better grasp for the global font settings. I do have one question; on the clamp settings, are these placed in the desktop settings? or does the clamp code need to be in all three; desktop, tablet, and mobile? Or just tablet. This is of course following your formula. thank you
Great educative content Rino, you have been a great inspiration! I still have a question though: you mentioned that "em" is a multiplier of all blocks it is nested within, not an innermost? Please clarify, would be grateful to you even more!
Very interesting approach. Personally I go with REM = 18px. Also, in some countries (like USA) you have to consider ADA Accessibility Standards, especially for font-size and color contrast.
Thanks Rino, excellent tutorial. One of the things that I have a hard time understanding in the Elementor settings options, in your video ~7:02 where the option is "Checking this box will disable Elementor's Default Fonts....." ok, I think I got that...maybe... But then it states: ...."and make Elementor inherit the fonts from your theme..." So currently I am using OceanWP theme and if I interpret that setting, "make Elementor inherit the fonts from your theme", by checking that box, my settings set in the OCeanWP customizer should be controlling the fonts, right? But if I want to use Elementor Site Setting, Global fonts, I should still leave it checked? If I don't want my theme involved shouldn't I uncheck it?
Hey Rino , Another clear and concise explanation. This issue has been bugging me ever since I started using Elementor a couple of years ago. I knew there had to be a better way but I've been too busy (Lazy?) to look for one. Now I'm pleased I didn't as you've explained not only the how to but also the why. Thank you for sharing your hard work & knowledge so readily. I'm really looking forward to you new Elementor Pro course.
This was so very helpful, thank you Rino! I've never really understood REM but this explained it clearly in a way I will remember and continue to understand, and also helped me tweak how I set up my elementor fonts in the future! Appreciate your tutorials.
Hey Rino, another valuable video from you. Thanks a lot. I also work with Elementor for most of my clients (98%?) and have been messing around with fonts, especially in making them responsive. This saves a lot of work and improves consistency over the whole website. Bedankt!
thanks for your very good tutorial, but i have a question about that you said that the google read H1, H2 etc, as the most important text on website while you didn't use it and use just a custom types of fonts
Hey! This video is great! I wish you would have showed us also how to use two of the different global typographies in the same h1 tag. I would like to create a design with two different sizes in the heading, however, they should be enclosed by the same h1 tag. I have been trying to figure it out, placing two different spans in my heading widget. Then I thought I could give those spans classes according to the global typographies we have set up. I haven't manage to do it, but I think I don't understand which classes to put. What are your thoughts? Could this be achieved?
Excellent video!! Sooo clear and easy to understand. I tryed the same values on the clamp calc, but the result is different from the one you get on the video, do you know why this could be?
I am not 100% sure but it could be that it has to do with the min and max value that you are putting into the width field. Try working with 1120 and 360. That’s what I used if I’m not wrong.
This has been my world, so thank you for video. Last week I lost all my custom uploaded fonts when we pushed two sites live. Colors and some H tag settings too 🙃
So good one again !! Thank you for your deep approach. I didn't figure out difference between EM et REM no it's clear ! Thank you . I would like to know how do you handle font size from Adobe XD to Elementor. That's my biggest struggle! :)
Like it and I am updating my staging server. However... your instructions "only" cover when you use the heading elements. I use blog posts and the text editor, and there there I need to change the styling of the actual H1-H6, and not rely on custom fonts, right?
Thank you so much ... got quite frustrated about fonts and global/theme settings and now realized I have been doing it wrong or really inefficiently for so long 😁
This is a great tool Rino! I have just put it to good use and want to make one comment, the semi-colon after the closing parenthesis is necessary when using the CSS clamp in Elementor global fonts. Thanks again for making my life easier!
Great Video! Thank you. Our developers has made a desktop and mobile Wordpress (Elements) site version so after adding the Clamp to the desktop Global Font settings, it doesnt change the mobile version. Do I need to do the same settings to the mobile version as well?
Thank you very much Rino. Once again a very valuable video from you. Thank you for sharing your insights with the community. I have also dealt with this topic extensively. Your video shows me that I had the same thoughts as you and I already am well positioned with my projects. I have already worked with REM Font Sizes and created a scaling table (but I like yours even better, especially the new feature that now covers all responsive views!) I also didn't know what I needed the typography section for (currently I only set the link colour there). Concerning the global font uploads, there is another important reason besides pagespeed to host the fonts yourself. As a web designer in Germany, I always have to pay attention to the DSGVO, which is very strict here. A few months ago, there was a veritable wave of warnings from pseudo-lawyers who found a loophole with externally hosted Google Fonts. The use of the US Google servers was interpreted as a data protection violation. Maybe this is also an issue in other countries? Finally, thanks again for your efforts and keep up the good work! I look forward to every new video from you! Many greetings from the Black Forest, Jennifer
Hey this is great info. The only question i have is how about using the page content element or text widget. In the text you are working with H1 , H2 etc.
Great Video! does something also need to be done to the line height as well? When I add the custom font types, for some reason my style sheet does not reflect the different sizes, however when using them on the site, the fonts are adjusted according with exception of the line height which remains way too large ?
Rino - I have followed you for a loooooong time now and frankly your efforts are great! HOWEVER, whatever you are doing in your post filming / editing is ending up with you jumping around a bit. VERY difficult to follow. I am sure there are many that may disagree with what I am saying here, but there are those of us that are a bit slower than others and need to be cradled a bit more into where all of these settings are. I suppose I need to buy into your new course. As soon as I have the dollars, I will be doing so. I am desperately trying to set up something you sort of quickly mentioned in at least one of your videos - and that is setting up sort of a "master file" that can be uploaded for any new Elementor sites. Getting all of this stuff out of the way out of the gate would save an amazing amount of time but, perhaps more importantly, since modifying0 all of the initial site settings is not something that is always being thought of, it would help to ensure that something is not being missed and/or forgetting about in the first place! An issue I seem to have more and more as Elementor becomes more powerful. Anyway, thanks for doing all that you do. I remain a huge fan of just about all of your efforts, and will become a client of yours soon as I will be buying into your course. For now, though, if you have anything already online that could offer a few hints as to how to where the initial global settings are hiding and where to actually apply the font instructions you have included here:... livingwithpixels.com/resources/font-sizes/ ...you would be even more appreciated (grin). Sincerely and without hesitation, Max
at 17:49 you have two fonts in POPP and one font in OPSA CON. So, you use a total of three fonts for an entire website? I ask because I want to know what is the best practice. Finally, what fonts did you use? Cause POPP and OPSA are no actual google fonts. Thanks in advance, and you did a great job explaining everything. If I can understand it, you did something really right.
Thank you 🙏🏻. Those names are just shorter versions of the real names: Poppins and Open Sans Condensed. I would say don’t go further than 2 fonts per website. 3 max.
I am starting my website design not long ago. So glad to watch this awesome video, I will watch all your videos one by one. Could you please help to explain: Body, Body bold, Body big, Body small. In which situation shall I choose which type? Thanks for your kind help.
This may automate sizing across devices but one still needs to pay attention to line height and manually adjust it accordingly across breakpoints. Unless I'm missing something of course. Always appreciate and enjoy your videos Rino, many thanks for all the hard work and effort you put into creating them.
@@BasDumoulin use the pencil and type in 100%; - don't forget to put the ; after the clamp values too they are missing from the copy and paste page provided.
Thanks a lot Rino! the Line Height didnt explained in the beautiful tutorial. I guess we should use EM depending on the font we are working with. Can anyone confirm?
@LivingWithPixels This is revolutionary forme! Thank you so much for digging into this. It makes a lot of sense. However, not sure I love your Title 1 class. It seems to scale quite differently from the other fonts. Can you explain?
Awesome to hear! Thank you. The Title 1 scales more aggressively than the other ones because it's the biggest. It's actually exponential the bigger the font becomes. But if you think it's too much then you can just change the REM values on the font clamping website. It also depends on the fonts, because some look bigger than others. I hope this makes sense.
@LivingWithPixels, just wanted to let you know that I changed the clamp size. Thanks for suggesting that it might need to be adjusted on a font-by-font basis. I'll keep experimenting with it. Keep up the great work!
Oke yea, makes sense. Some fonts require different settings. I just wanted to give everyone a good starting point, but ofcourse feel free to create your own systems. Thanks again!
Great video. Would you mind posting the json template with all the typography examples? That would be a great resource without having to rebuild the wheel. Thanks!
Rino, as usual an excellent write up. Still trying understand the H1..H6 and he custom font settings. I'm using a 1280px width, is that fine. The 1140px default is what and can that be changes. Helping understand this will be helpful. Thanks again for the wonderful tutorials.
Excellent explanation! But I have a question: How do you tell Google if it is an H1, H2, H3 heading...? because if you set the fonts from "global fonts", in the configuration you do not indicate at any time whether it is H1, H2... Thank you so much!
Very informative tutorial, thanks. One question to ask: I uploaded a Chinese font under the Elementor Customer Font function. It was successful, and I can choose the font from the dropdown in typography. But it just does not show the appearance... I'm wondering if this customer font function is not user-friendly for those languages that are not alphabetical?
which Minimum and maximum viewport width did you choose to go with this template? Cuz I want to use different font sizes, suppose I want my H2 size for desktop - 38 PX which will be 32PX in mobile.
Hello! Do you go deeper in font settings in your Elementor Pro course ?( which I have bought and just started) because I am still real confused after this lesson, maybe i will have to watch it again. For example, if i would change the base font for REM (16 px) in Elementor, how could I do that? And again, it wolud be possible to have your spreadsheet as you showed in the video? I mean the Excel Sheet. Thank you !
You can make the REM values less confusing by slightly adapting the approach using the "site settings > custom CSS" to set the following: html { font-size: 62.5%; // Sets the default font-size to 10px } body { font-size: 1.6rem; // Sets the default font-size _back_ to 16px but using REM } What this will then allow you to do is use REM values like so: 1.6rem = 16px 1.8rem = 18px 2rem = 20px 2.4rem = 24px For me this is so much easier to work with because the "real" numbers are not obscured; I can still easily see what the standard font size is in pixel value (so getting from design to code is simpler), and there is no need to use any calculations to work out what the font size should be in REM. All of the benefits of using REM are still in place (accessible resizing etc). @livingwithpixels - I'll definitely try the approach of not setting the primary, secondary and accents, while turning off the elementor font styles
Rino, I was just racking my brains to find the right way to manage typography and suddenly you upload a video about. It's too much of a coincidence lol Thanks for the great content you publish. 😊👍🏽
Hi, nice tuto video. can u explain or make a video on why hero section shows differently using safari vs google chrome. Even using the same computer and making the zoom to 0.
Thanks for creating such an informative video. I was wondering. Are there a way for me to set colors to custom fonts? If I need to use quick CSS that's completely fine, but I can´t find the correct classes for my custom fonts. Not only would it be practical if I wanted to change all the header colors down the line, but by giving them a temporary bright color it would also be a great way to make sure all text elements are given the correct custom font.
Not that I know of, colors and fonts are separate in Elementor, and honestly I would recommend to keep it that way, because most websites do require a dark and light version of the font for light and dark backgrounds. Not sure if you can do this with CSS
Thanks for this video! I've used you clamp settings for a few elementor websites and they worked a treat, but they aren't working on a new website I'm setting up. It is using the new Elementor flex containers - are these incompatible with clamp maybe? I can't figure out why the clamp values aren't working. Thank you!
Really appreciate this video, especially the "clamp" solution to scaling. I knew the importance of using h tags properly (I was taught to treat them as you would when writing an outline because that's how search engines look at them), so your system of setting their appearance, and not locking in their styling, makes much more sense. The first time I played with getting the global settings setup it turned into a convoluted mess. As I'm just started to rebuild a site from the ground up; this information is going to help me a lot. Thank you.
Rino this is so helpful!! Follow up question...how would you go about using mixed fonts in Elementor though? I'm seeing this trend a lot lately and have a client I'm using it for. So, an H1 headline that had two different fonts (and sizes) within it. Thanks!!
Thank you! In that case I would just create an extra custom font in the Site settings and give it another font and sizes. Then you can decide whether you turn it into an H1 or H2 and so on.
Thanks so much for your reply,@@rinodeboer - is there something I might be missing from your explanation? If you use the Elementor text editor, there are only H1-6 options in the dropdowns to choose from if you highlight certain words/text in the WYSISYG. Do you have to use style or span tags in the "text" html editor tab to change each work, and then make the whole section H1, H2, etc?
Hello Rino, as for the Rem, I think they are calculated based on the value entered in "site settings/ typography / body", it is not necessary to use css.
Great video Rino! Thanks for sharing your font size cheat sheet, it's a huge time saver and also keeps font sizes consistent and legible on all devices.
Hi Rino, awesome video super usefull. Btw I've some doubt, Idk if elementor has changed in the meanwhile, if I use clamp on desktop view it doesn't seems to affect the tablet and mobile view. Those views need a value too. Am I doing it wrong?
Hello and thank you for a great video I have one question about the clamps and the viewports - if I wanna make the h1 to be 4.rem how to i determinate it?
Since many people struggle with typography and custom fonts inside of Elementor I thought I would make a guide, because it can be quite confusing. I'm also tackling the px, rem, em and vw in this video and I'm giving you a guide on how to use fonts that scale automatically. I hope you like it!
Thanks Rino - another great tutorial! It works great for me until I look on a mobile phone - my Title 1 ends up looking way too small for some reason!?
Looking at the comments I now see that I wasn't clear about using the H1-H6 for blogposts. So don't get me wrong: I use the H1-H6 for blogposts to give it structure, and you can even change their sizes in the Typography section in the Site Settings, and you should also use them to give normal pages structure. But I just don't use them for styling purposed on non blogpost pages.
@@rinodeboer Hi Rino. Thanks for your reply. I figured out what was happing. Some default settings in Elementor were already set for tablet and mobile so once I cleared those settings out everything is perfect! Thanks again. Dan.
@@danstevens1974 hi daniel, can you please tell what those settings were? I am using rino's font sized, but it looks way to big on mobile and tablet mode. It was perfect before but suddenly it changed to something comepletly different
@@Mkfinancialsca Hi Manik - yes i noticed some of the headings were too big on mobile also. You can always change the clamp code to your preference. A bit of trial and error involved! cheers.
03:00 - Installing Custom Fonts
07:24 - Determining what values to use
11:00 - Rino's Spreadsheet
13:00 - #CSSClamp saves the day!
15:15 - How to set up the font sizes in Elemntor
About the 3 years: I feel you,
after a year of using the manual way of defining fonts and duplicating it, with px as the default, last week I invested a whole day on learning how to use the GS in combination with REM the proper way. One day later your video went online. Would have saved a lot of time. On the other hand I'm happy about the free confirmation... :']
PS: The Clamp Generator is genius.
I hope this message finds you well. I wanted to take a moment to express my gratitude for the incredible help you provided me through your video. Your content was incredibly informative and well-structured, and it helped me to understand how should I setup font style and size on my website, in a way that I had not been able to before. Your passion and expertise truly shone through in your video, and I could tell that you put a great deal of time and effort into creating it. I am so grateful to have stumbled upon your video, and I wanted to let you know how much it has helped me. Your generosity in sharing your knowledge and expertise with the world is truly inspiring, and it has made a real difference in my life. Thank you once again for your hard work, dedication, and generosity. I wish you all the best, and I look forward to seeing more of your amazing content in the future.
This comment made my day. Thank you so much 🙏🏼
Finally I've found a good explanation of how to define typography and what is what in Elementor. A very big thank you!
Your videos are an exceptional resource for anyone looking to improve their skills with Elementor. Your clear and concise explanations make even the most complex concepts easy to understand, and your teaching style keeps me engaged throughout each video.
indeed!
Loading fonts from Google also causes an issue with GDPR compliance! Userdata are sent to Google before the user has the ability to consent or deny. For this reason you should prevent loading from Google and host the fonts on your server. At least in Germany there are many dissuations which want penalty payments from site owners.
Ahh oke! You are so right. I forgot to mention that. Thank you for sharing.
Digital fascism, Germany always leading in directions no one needs or cares about.
Exactly! Which is why I use the Custom font option exclusively, even if it means that I have to download the Google Font from Google and manually upload it to my site. It's safer, GDPR (or DSGVO) compliant and faster.
Remove google fonts plugin or hostlocally plugin
I'm so glad we don't have GDPR in the USA!
I would love to have Rino in Elementor UI team . The way he explaining and give arguments with calm is something you want to have in your team .
This tutorial is so well explained, I have to say I dont write many comments or engage very often but I felt the need to express how much I appreciate your guidance on this specific topic. Fonts are something I definitely struggle with, I'm better with graphics and general design. Your manner of explanation throughout the entire video is so calm and the instruction so clear, I was able to execute the changes on my website in a few minutes. Thank you so much!! You earned a sub.
Glad it was helpful! Thanks for commenting 🙏🏻
Hey Rino, thank you for this nice video! I definitely understood the differences in the Global Fonts and Typography.
One strange thing I discovered is that my 'clamp' code would not work, unless, I included the ';' semi-column at the end!!!
Weird right?? 😌
That's definitely weird, but good that you found that. And thank you for the compliment 🙏
I'm now finding out that, although the code works live when I input it under the 'pencil' icon/option, (by live I mean at the current set up Elementor offers with examples so you can see it as you change it), when I scale down to mobile, I don't see the changes taking effect.
I've disabled the Global fonts at Elementor's settings of course too.
The fonts I changed with the clamp code just remain the same when seeing the page and the line height doesn't work no matter how many REM's I put.
Perplexed..!!!@@rinodeboer
OH MY GOOOOOOOOOD, Thank you so much. I was trying to figure out what the issue was for the past hour :D
thanks so much for this! like you said, I was just adding all the font details every single time i added new text to the website. You have saved me hours of work and made the site look much more professional at the same time.
Thank you for the video! Should I use REM for my line height and letter spacing also? REM or EM?
same question @LivingWithPixels
I've been working with Elementor for years and thought I knew a lot--this video proved I have more to learn. Thank you for making this video--very easy to follow.
Using the Heading element, you can select a global font and thus have an H4 at the size of an H1. However, what would be the impact of headings used within a text element (e.g., in a blog post)? In my tests, the H- sizes use whatever is default in the theme.
Within the blogpost content box in Wordpress you are unfortunately limited by just using the styles from the H1-H6. Since you cannot separate the styling from the H tag in the WP content editor.
Once again, a very helpful video. Thank you. Quick newbie question. Should I also use rem for line height and spacing? In particular, when using clamp? Thanks.
I recommend using % for line height since it scales when the font becomes bigger. I use clamp for fonts and padding, that’s it
@@rinodeboerthank you very helpful. When you say Clamp for Padding is that for all Positioning eg. Spacing of adjacent Containers, Widgets etc or just Padding associated with Text Widgets eg. Headings, CTA etc. Sorry for the dumb question:/
With padding I mean the padding top and bottom you use on all your background containers, so that it automatically becomes smaller on tablet and mobile. And sometimes I also use it on the inside of containers on all sides.
Hi Rino, awesome video thanks for sharing. Can you tell us what minimum and maximum viewport width you choose in the fontsize clamp generator to get those preffered values?
Did you ever figure it out. I can't get the generator to mimic his outputs. He should have quickly noted that as it is critical to the clamp values.
@@TheJASDrummer Hi, no i could't figure it out yet and also couldn't mimic the exact outputs... :(
@@janstocke2231 Same. Bottom line the outputs do work well. I appreciate his worksheet and approach but without the viewport min/max settings I am left in the dark in how to adjust accordingly.
For me I'll probably go with a 360 min and 1000 or 1120 max. I have seen it done a bunch of ways. I just depends on how much we want the max to grow as the screen gets wider and for me I have no interest in worrying about optimizing for a 42 inch wide screen. Good luck!!
Hi, I am wondering about why you are setting max width 1920px 14:50 instead of 1120px (your prefered default), especially if a whole page is "boxed". Some stats say that even in 1st world countries there are 360px up to 9% on mobile devices. Here I am with you. So my conclusion would be a range from 360 to 1120. Can you give your considerations for a best practice viewport width range?
Good question
why would the max size matter? As long as it scaled down to 360?
@@StreamlineRoofingTx clamp defines a range. So there have to be two limits. Min and Max. Look what happens to your site , if you set a ridiculous max like 5rem for 1920 or for 1200 for example.
@@juleshumboldt7680 by no means am i an expert, so i might just not understand, but i have mine set for 5rem at 1920, but i dont have my content boxed, its all full width, so maybe thats why its ok?
Too easy... but only because you made it so. Excellent tutorial and well structured so that we understand what we are doing while availing ourselves of the shortcuts you so generously provide. Thank you so much!
this tutorial is fire, was overwhelmed with the font options in elementor!
This is yet another wonderful presentation Rino. My only question is what were the Min/Max Viewport settings you used in the Clamp Generator? When I use 360 & 1920 I do not seem to come up with the same values. Thank you in advanced :)
Great content. I missed something, How do I set all the Heading fonts please, Title 1, Title 2, Title 3 and so on? ... thanks
Hey Rino, we can even change the default html font size to 62.5% so that the base font size becomes 10px ( 1rem). Body font becomes 1.6rem. so its easier to do calculations as now just have to divide by 10 to get the rem value from px. Eg 52 px becomes 5.2rem
I thought he will be explaining in this video how to do you mentioned point.
But disappointed.
May be in custom Css of the Theme, we can keep html{font-size:62.5%} and would work all over website.
@@DevPalliSri in the Elementor CSS settings :root { /*Set 1rem equal 10px*/ font-size: 62.5%;}
Thank you! What about line height?
good question!
you can also use clamp on line-height or any CSS property that uses units. (padding, margin, letter-spacing, border-radius, etc...)
@@franktielemans6624 Thank you very much, thats good to know! Do you have any values to start with? 👍🏼
Good point, I will remember to include that in my course then. But for a baseline for headings 120/130% and for body fonts 180-200%. Using % is nice because you can also do that in Figma and they scale according to the size of the font. But make sure to select the custom unit selector (the little pencil icon) to put in % values.
Or you use for the line high multiple font size by 1.6. After That, round the Result to the nearest Full number. For some headers use 1.3 and for even larger sizes like 32px you can use 1.1 or even just 1.0
Thank you, you helped me a lot. I don't know if it's already been answered, but here it is:
**Note that there is a difference between a regular page and a blog post.
1. on pages:
Primary: Menus; Headings; Headings on tables; lists Headings and tabs Headings.
Secondary: basically subheadings in few places, for example: price tables
Text: text in general and "text on path"feature
Accent: buttons
2. on blog posts:
Primary: H1 Headings
Text: H2 to H6 Headings and text in general.
Awesome! Thanks for doing research on this.
THIS IS AMAZING! I struggled with fonts setup like this dog from "i don't know what i'm doing" meme. With no hope left, I watched this video and it changed everything! amazing, thanks!
Thank you for this complete guide to Elementor's typography. But what line-height or letter-spacing should be used? Do you simply use the default values?
Hello Rino! Thank you so much for this video. I have a question though.
How were you able to calculate the line heights for each Titles. I saw you made use of ems for Line heights. Please how did you come up with that?
By no means am I am an expert but my own research I read line spacing at 130 to 150 percent the font size (i.e font size x150%= line height) is ideal for readability, but sometimes less or more is acceptable depending on your design...But for body text I find 130 to 150 works for me...
I love the attention to nuances and problems, and the best way to navigate them. Great material!
This video is by far the best tutorial for setting up the fonts. You come up with the best systems. Can you do one for global colors?
Dankjewel Rino, dit is een van de meest hulpvolle video's van een lange tijd! Groetjes uit Zwolle
Rino - simply brilliant. I am just a user with 20 websites (not a developer) but I use Elementor and am always trying to find how to use it better. Your videos provide original insights and your explanations are unique. Great value - sign me up to your course!
Wow. I'm a novice with Elementor, but am pushing to learn more, and I had already noticed the few websites I've done are a mess on consistency. You've shown me howntonfix them, but more importantly WHY they're such a mess. Now I've got a few dozen pages to reconfigure, but I'm looking forward to them being RIGHT.
That's awesome to hear, because that was exactly the goal with this video. To give people structure and clarity in their workflow.
Great video... Two things, it would have been nice if you could have explained how to go about doing our own clamping a little more (like what values do I put in?). Also, I recommend 24px spacing for better readability and you should also explain EM for people to use to set their line height.
Again, how about the weight settings? Which weight shall I choose for each above font setting please?
As always, your video was fantastic and incredibly helpful. I've probably built 30 corporate websites using Elementor over the past few years, and I still just bang away at all the font settings, and never seem to feel like I totally have a handle on what I'm doing. Thank you for clearing this up, it's terrific.
thank you Rino, I did get your response and since then, have reviewed your tutorial more and now have a better grasp for the global font settings. I do have one question; on the clamp settings, are these placed in the desktop settings? or does the clamp code need to be in all three; desktop, tablet, and mobile? Or just tablet. This is of course following your formula.
thank you
The clamp automatically scales down from Desktop to Mobile, so you will only have to set it up once and then it works on all device sizes.
Great educative content Rino, you have been a great inspiration! I still have a question though: you mentioned that "em" is a multiplier of all blocks it is nested within, not an innermost? Please clarify, would be grateful to you even more!
Very interesting approach. Personally I go with REM = 18px.
Also, in some countries (like USA) you have to consider ADA Accessibility Standards, especially for font-size and color contrast.
Thanks Rino, excellent tutorial. One of the things that I have a hard time understanding in the Elementor settings options, in your video ~7:02 where the option is "Checking this box will disable Elementor's Default Fonts....." ok, I think I got that...maybe... But then it states: ...."and make Elementor inherit the fonts from your theme..." So currently I am using OceanWP theme and if I interpret that setting, "make Elementor inherit the fonts from your theme", by checking that box, my settings set in the OCeanWP customizer should be controlling the fonts, right? But if I want to use Elementor Site Setting, Global fonts, I should still leave it checked? If I don't want my theme involved shouldn't I uncheck it?
Mamma mia! What a great content Rino, thank you very much for your effort putting it together 🫶🏻
Hey Rino ,
Another clear and concise explanation.
This issue has been bugging me ever since I started using Elementor a couple of years ago. I knew there had to be a better way but I've been too busy (Lazy?) to look for one.
Now I'm pleased I didn't as you've explained not only the how to but also the why.
Thank you for sharing your hard work & knowledge so readily. I'm really looking forward to you new Elementor Pro course.
Thank you so much for your comment as well 👌🏼
This was so very helpful, thank you Rino! I've never really understood REM but this explained it clearly in a way I will remember and continue to understand, and also helped me tweak how I set up my elementor fonts in the future! Appreciate your tutorials.
Hey Rino, another valuable video from you. Thanks a lot. I also work with Elementor for most of my clients (98%?) and have been messing around with fonts, especially in making them responsive. This saves a lot of work and improves consistency over the whole website. Bedankt!
Thanks for sharing! Will " Clamp" do the heavy lifting and set all font sizes?
Love the clean and structured concept. Only question: clamp is not supported by older browsers. Should there be a Fallback?
thanks for your very good tutorial, but i have a question about that you said that the google read H1, H2 etc, as the most important text on website while you didn't use it and use just a custom types of fonts
Hey! This video is great! I wish you would have showed us also how to use two of the different global typographies in the same h1 tag. I would like to create a design with two different sizes in the heading, however, they should be enclosed by the same h1 tag. I have been trying to figure it out, placing two different spans in my heading widget. Then I thought I could give those spans classes according to the global typographies we have set up. I haven't manage to do it, but I think I don't understand which classes to put.
What are your thoughts? Could this be achieved?
FR - Très fort pour rendre nos procédures d'intégration plus efficaces ! Merci Rino
Excellent video!! Sooo clear and easy to understand.
I tryed the same values on the clamp calc, but the result is different from the one you get on the video, do you know why this could be?
I am not 100% sure but it could be that it has to do with the min and max value that you are putting into the width field. Try working with 1120 and 360. That’s what I used if I’m not wrong.
This has been my world, so thank you for video.
Last week I lost all my custom uploaded fonts when we pushed two sites live. Colors and some H tag settings too 🙃
Finally I understand the complaints of our SEO agencies ;-)
So good one again !! Thank you for your deep approach. I didn't figure out difference between EM et REM no it's clear ! Thank you . I would like to know how do you handle font size from Adobe XD to Elementor. That's my biggest struggle! :)
17:45 how did you add your logo on the left top side in backend?
Like it and I am updating my staging server. However... your instructions "only" cover when you use the heading elements. I use blog posts and the text editor, and there there I need to change the styling of the actual H1-H6, and not rely on custom fonts, right?
Thanks for the clear explanation. For example, for features like line height, do you also use the REM? Or do you leave that on PX?
For line height I use % because it scales beautifully and is also available on Figma
Thank you so much ... got quite frustrated about fonts and global/theme settings and now realized I have been doing it wrong or really inefficiently for so long 😁
This is a great tool Rino! I have just put it to good use and want to make one comment, the semi-colon after the closing parenthesis is necessary when using the CSS clamp in Elementor global fonts. Thanks again for making my life easier!
Great Video! Thank you. Our developers has made a desktop and mobile Wordpress (Elements) site version so after adding the Clamp to the desktop Global Font settings, it doesnt change the mobile version. Do I need to do the same settings to the mobile version as well?
Thank you very much Rino. Once again a very valuable video from you. Thank you for sharing your insights with the community. I have also dealt with this topic extensively. Your video shows me that I had the same thoughts as you and I already am well positioned with my projects. I have already worked with REM Font Sizes and created a scaling table (but I like yours even better, especially the new feature that now covers all responsive views!) I also didn't know what I needed the typography section for (currently I only set the link colour there).
Concerning the global font uploads, there is another important reason besides pagespeed to host the fonts yourself. As a web designer in Germany, I always have to pay attention to the DSGVO, which is very strict here. A few months ago, there was a veritable wave of warnings from pseudo-lawyers who found a loophole with externally hosted Google Fonts. The use of the US Google servers was interpreted as a data protection violation. Maybe this is also an issue in other countries? Finally, thanks again for your efforts and keep up the good work! I look forward to every new video from you! Many greetings from the Black Forest, Jennifer
Hey this is great info. The only question i have is how about using the page content element or text widget. In the text you are working with H1 , H2 etc.
Great Video! does something also need to be done to the line height as well? When I add the custom font types, for some reason my style sheet does not reflect the different sizes, however when using them on the site, the fonts are adjusted according with exception of the line height which remains way too large ?
Rino - I have followed you for a loooooong time now and frankly your efforts are great! HOWEVER, whatever you are doing in your post filming / editing is ending up with you jumping around a bit. VERY difficult to follow. I am sure there are many that may disagree with what I am saying here, but there are those of us that are a bit slower than others and need to be cradled a bit more into where all of these settings are.
I suppose I need to buy into your new course. As soon as I have the dollars, I will be doing so. I am desperately trying to set up something you sort of quickly mentioned in at least one of your videos - and that is setting up sort of a "master file" that can be uploaded for any new Elementor sites. Getting all of this stuff out of the way out of the gate would save an amazing amount of time but, perhaps more importantly, since modifying0 all of the initial site settings is not something that is always being thought of, it would help to ensure that something is not being missed and/or forgetting about in the first place! An issue I seem to have more and more as Elementor becomes more powerful.
Anyway, thanks for doing all that you do. I remain a huge fan of just about all of your efforts, and will become a client of yours soon as I will be buying into your course. For now, though, if you have anything already online that could offer a few hints as to how to where the initial global settings are hiding and where to actually apply the font instructions you have included here:...
livingwithpixels.com/resources/font-sizes/
...you would be even more appreciated (grin).
Sincerely and without hesitation,
Max
Just the case i was wondering with the rem values. Thanks. Waiting the course to launch.
at 17:49 you have two fonts in POPP and one font in OPSA CON. So, you use a total of three fonts for an entire website? I ask because I want to know what is the best practice. Finally, what fonts did you use? Cause POPP and OPSA are no actual google fonts. Thanks in advance, and you did a great job explaining everything. If I can understand it, you did something really right.
Thank you 🙏🏻. Those names are just shorter versions of the real names: Poppins and Open Sans Condensed. I would say don’t go further than 2 fonts per website. 3 max.
@@rinodeboer thank you very much for your prompt response. Would you mind telling me which Poppins/Open Sans Condensed you used in this example?
I am starting my website design not long ago. So glad to watch this awesome video, I will watch all your videos one by one. Could you please help to explain: Body, Body bold, Body big, Body small. In which situation shall I choose which type? Thanks for your kind help.
This may automate sizing across devices but one still needs to pay attention to line height and manually adjust it accordingly across breakpoints. Unless I'm missing something of course. Always appreciate and enjoy your videos Rino, many thanks for all the hard work and effort you put into creating them.
When you use % for line height then it automatically scales according to the font size, so you don’t have to worry about that as well 👌🏼
When you use % for line height then it automatically scales according to the font size, so you don’t have to worry about that as well 👌🏼
@@rinodeboer Wait - there is no option for % in the line height? Or can I just put in 100% there?
@LivingWithPixels @@BasDumoulin same questions here
@@BasDumoulin use the pencil and type in 100%; - don't forget to put the ; after the clamp values too they are missing from the copy and paste page provided.
You helped a lot, mate! I'm new to wordpress+elementor and this was an awesome content.
Thanks a lot Rino! the Line Height didnt explained in the beautiful tutorial. I guess we should use EM depending on the font we are working with. Can anyone confirm?
Rino, please don't stop making videos! You're the best in YT with Elementor! Keep up w/ the great work! Best regards from Brazil!
@LivingWithPixels This is revolutionary forme! Thank you so much for digging into this. It makes a lot of sense. However, not sure I love your Title 1 class. It seems to scale quite differently from the other fonts. Can you explain?
Awesome to hear! Thank you. The Title 1 scales more aggressively than the other ones because it's the biggest. It's actually exponential the bigger the font becomes. But if you think it's too much then you can just change the REM values on the font clamping website. It also depends on the fonts, because some look bigger than others. I hope this makes sense.
@LivingWithPixels, just wanted to let you know that I changed the clamp size. Thanks for suggesting that it might need to be adjusted on a font-by-font basis. I'll keep experimenting with it. Keep up the great work!
Oke yea, makes sense. Some fonts require different settings. I just wanted to give everyone a good starting point, but ofcourse feel free to create your own systems. Thanks again!
Great video. Would you mind posting the json template with all the typography examples? That would be a great resource without having to rebuild the wheel. Thanks!
Rino, as usual an excellent write up. Still trying understand the H1..H6 and he custom font settings. I'm using a 1280px width, is that fine. The 1140px default is what and can that be changes. Helping understand this will be helpful. Thanks again for the wonderful tutorials.
Excellent explanation! But I have a question: How do you tell Google if it is an H1, H2, H3 heading...? because if you set the fonts from "global fonts", in the configuration you do not indicate at any time whether it is H1, H2... Thank you so much!
When you drag a heading in elementor to page you can define the html tag under the content tab. 16:46
Very informative tutorial, thanks. One question to ask: I uploaded a Chinese font under the Elementor Customer Font function. It was successful, and I can choose the font from the dropdown in typography. But it just does not show the appearance... I'm wondering if this customer font function is not user-friendly for those languages that are not alphabetical?
It's really helpful, one question, how we could manage the line height?
which Minimum and maximum viewport width did you choose to go with this template? Cuz I want to use different font sizes, suppose I want my H2 size for desktop - 38 PX which will be 32PX in mobile.
Great, Greater, Living with pixels! Thank you for support
Great video, thanks! Do you set up the global font settings from scratch for each new website? Or do you pre-install it as a kit or template?
Hello! Do you go deeper in font settings in your Elementor Pro course ?( which I have bought and just started) because I am still real confused after this lesson, maybe i will have to watch it again.
For example, if i would change the base font for REM (16 px) in Elementor, how could I do that?
And again, it wolud be possible to have your spreadsheet as you showed in the video? I mean the Excel Sheet.
Thank you !
You can make the REM values less confusing by slightly adapting the approach using the "site settings > custom CSS" to set the following:
html {
font-size: 62.5%; // Sets the default font-size to 10px
}
body {
font-size: 1.6rem; // Sets the default font-size _back_ to 16px but using REM
}
What this will then allow you to do is use REM values like so:
1.6rem = 16px
1.8rem = 18px
2rem = 20px
2.4rem = 24px
For me this is so much easier to work with because the "real" numbers are not obscured; I can still easily see what the standard font size is in pixel value (so getting from design to code is simpler), and there is no need to use any calculations to work out what the font size should be in REM. All of the benefits of using REM are still in place (accessible resizing etc).
@livingwithpixels - I'll definitely try the approach of not setting the primary, secondary and accents, while turning off the elementor font styles
Great explanation, congratulations and thanks for clarifying things for me.
Thanks Rino :-) On your website you only have "REM 1.2" on the Subheading, but in your RUclips video you operate with a "clamp" value.
so when are you gonna change living with pixels to living with rem?
This is so helpful! What do you use for the line height on all of these?
You can set line height to 100%
Just click the pencil and type 100%
Rino, I was just racking my brains to find the right way to manage typography and suddenly you upload a video about. It's too much of a coincidence lol
Thanks for the great content you publish. 😊👍🏽
I feel you! Haha, what a coincidence! Thank you 🙏🏻
Hi, nice tuto video. can u explain or make a video on why hero section shows differently using safari vs google chrome. Even using the same computer and making the zoom to 0.
Thanks for creating such an informative video. I was wondering. Are there a way for me to set colors to custom fonts? If I need to use quick CSS that's completely fine, but I can´t find the correct classes for my custom fonts. Not only would it be practical if I wanted to change all the header colors down the line, but by giving them a temporary bright color it would also be a great way to make sure all text elements are given the correct custom font.
Not that I know of, colors and fonts are separate in Elementor, and honestly I would recommend to keep it that way, because most websites do require a dark and light version of the font for light and dark backgrounds. Not sure if you can do this with CSS
Thank you for your quick reply :) @@rinodeboer
Thanks for this video! I've used you clamp settings for a few elementor websites and they worked a treat, but they aren't working on a new website I'm setting up. It is using the new Elementor flex containers - are these incompatible with clamp maybe? I can't figure out why the clamp values aren't working. Thank you!
Thank you. But I actually made the clamps in the container, so it should work perfectly. Not sure exactly what the issue is.
Oh btw: Try to add a ; at the end. Maybe that will help.
@@rinodeboer Adding ; helped, thank you!
Thanks alot for this Rino. This is very helpful to my web design. I appreciate all the videos you make.
Great Video. I have the mistake, that my H1 changes the font so do i need to make any adjustments to the H1 aswell?
Really appreciate this video, especially the "clamp" solution to scaling. I knew the importance of using h tags properly (I was taught to treat them as you would when writing an outline because that's how search engines look at them), so your system of setting their appearance, and not locking in their styling, makes much more sense. The first time I played with getting the global settings setup it turned into a convoluted mess. As I'm just started to rebuild a site from the ground up; this information is going to help me a lot. Thank you.
hello, I tried to put the function in the size section however, when I update the website all this font setting are deleted. Can you please advise?
Rino this is so helpful!! Follow up question...how would you go about using mixed fonts in Elementor though? I'm seeing this trend a lot lately and have a client I'm using it for. So, an H1 headline that had two different fonts (and sizes) within it. Thanks!!
Thank you! In that case I would just create an extra custom font in the Site settings and give it another font and sizes. Then you can decide whether you turn it into an H1 or H2 and so on.
Thanks so much for your reply,@@rinodeboer - is there something I might be missing from your explanation? If you use the Elementor text editor, there are only H1-6 options in the dropdowns to choose from if you highlight certain words/text in the WYSISYG. Do you have to use style or span tags in the "text" html editor tab to change each work, and then make the whole section H1, H2, etc?
FOLLOW UP - SOLVED - I created a custom class and just used span tags around the specific words. Any reason not to do it that way?@@rinodeboer
I also sometimes use a Span tag, so there is nothing wrong with that. It just requires some little code.
great vid, what about line height?
Hello Rino, as for the Rem, I think they are calculated based on the value entered in "site settings/ typography / body", it is not necessary to use css.
Great video Rino! Thanks for sharing your font size cheat sheet, it's a huge time saver and also keeps font sizes consistent and legible on all devices.
Amazing video! Thanks for the detailed explanation! I am really a huge fan of you!
Hi Rino, awesome video super usefull. Btw I've some doubt, Idk if elementor has changed in the meanwhile, if I use clamp on desktop view it doesn't seems to affect the tablet and mobile view. Those views need a value too. Am I doing it wrong?
Hello and thank you for a great video
I have one question about the clamps and the viewports - if I wanna make the h1 to be 4.rem how to i determinate it?
Great video! Do you have a video on improving site speed using Elementor (like disabling Google fonts, etc). Would be a great video!