A VERY underrated channel! The amount of value / content quality packed here exceeds by far that of many overhyped channels put together. Thank you A LOT for all your help and contribution mate. Highly appreciated!
Oooh Boi....great work! I installed your add on this morning and instantly love it. The elementor guys should look closely. Awesome work and tutorials!
almost thought "we" lost you mate great seeing you back now wondering if you would upload the typography page (the one that your saying your working on) would really like to see that one live on site ( and to work with) and see how your setting are overall on the page and in elementor maybe it can be used as ("my") new "elementor site settings standart"
Thank you so much for showing this! Especially how to find the emt code (elementor-kit-XX and --e-global…). Nevertheless I'd prefer to use the --e-global styles to define the h1 to h6 and not elementor-kit-12 h1 and so on, because in your solution the styles of my headlines were changing, when I changed the h-tags. If you use the --e-global styles instead, you can change the h-tags and the headlines won't change. I also extended the css with @media queries to have a higher font-weight on small devices.
This video is a good starting point. The tweak with .elementor-kit-4 h1 only works or is neccessary, if a value has been set at site settings/typography/h1. By the way we are up to .elementor-kit-7 right now. I am also working on a solution that does not depend on the elementor kit classes. Nobody will tell us, when they raise up to 8 by the next update ;-) Furthermore we have now the "pencil" to paste the clamp code directly in settings/typography/h1 and so on. Thus the custom code css should not be neccessary anymore.
Just a note that in newer versions of Elementor, you can enter clamp() values for font sizes in the site settings, eliminating the need for the custom CSS code page.
Welcome back, happy to you again I am experimenting oh animator to create awesome interactions but some of the are not working like clip path on scrolling, pls. Make one video on oh animator
Not quite, at least not for me. It's easier to use the real editor (rather than a mini replica) and most important: you can enqueue at will (priority sometimes matters!).
You are a god. Thank you! You are the reason i like Elementor ^^ Are you looking forward into adding a native Clamp System into Elementor's Typography Settings?
Great to have you back! can you please share the style code here for easy copy/paste? and also, what do you do if you want to have a big title in the website? its not in the global font so you use h2,h3 etc? thanks a lot!! 🙏🙏
You simply define how the special type of heading is supposed to look like and then add it as new custom font. H1, H2, H3 ... etc. these have nothing to do with the font-size, these are rather SEO related, so it depends where you use your "big title" content-wise. Cheers!
I found it very interesting and informative and want to try it, can you tell what plugin are you using to add this custom CSS Code to the Website @4:36?
I'm a bit confused about the "body" font, is that the same as the Paragraph in a widget? If I choose in a widget "global" font settings to "text" then it becomes the body font or / the Paragraph font? And when you in the custom code set the body font in the clamp in the video is it like this then?: --e-global-typography-text-font-size: clamp(1rem, 0.9694rem + 0.1531vw, 1.1875rem);
Thank you for this! quick question, why did you choose 2280px as the maximum viewport width in the generator? does it make a huge difference if you change it to the actual website width ie. 1220px....
Let's just call it a sweet spot. I tested with more than one max width (it's not a max-width for real tho) and it turned out to be OK - considering the full range between the mobile and wide-screen view. Some other max width could work equally well but in that case you might want to consider a different scale type; maybe a Minor Third or Perfect Fifth (type-scale.com/).
Hey Oooh -- Is it necessary that I also set the responsive breakpoints in global typography settings, or can I just use "clamp" in the custom CSS file and get on with it? Thanks for this video, it really made my day :)
No need for media queries if you use clamp() hence it takes the viewport width into account. Like I said, Elementor's breakpoint system is totally outdated when it comes to typography.
@@OoohBoi Thanks! I saw you input the values into the h1 to h6 global typography variables and thought we have to do both (i.e. settings in global typography AND the fluid typography settings in global custome CSS file).
Yes it is possible, why not. The only problem is a font-size property that's been set per widget. In general, any other font property that's been set per widget overrides global styles.
hello oohboi I can't find the IDs, but the code works directly without more modifications, I imagine if only the hello theme is used, it's fine. for my part I don't need fluid typography for custom fonts (subhead, small, and text , etc) they are fixed and identical for all screens. I also opted for (Scale 1.333 to 1.125) it is more ideal in my opinion h1 {font-size: clamp(1.802rem, 0.9602rem + 4.209vw, 4.209rem); } h2 {font-size: clamp(1.602rem, 1.0582rem + 2.7191vw, 3.157rem); } h3 {font-size: clamp(1.424rem, 1.0935rem + 1.6525vw, 2.369rem); } h4 {font-size: clamp(1.266rem, 1.0873rem + 0.8936vw, 1.777rem); } h5 {font-size: clamp(1.125rem, 1.0523rem + 0.3637vw, 1.333rem); } h6 {font-size: clamp(1rem, 1rem + 0vw, 1rem); } thanks again for this tip 😃 I was expecting it from another youtuber who promised to give the tip for fluid typography for elementor but you are the first to show it :)
