Elementor Units Explained - How and When You Should Use PX, REM, EM, %, VH and VW - WordPress
Вставка
- Опубліковано 7 чер 2023
- Elementor Global Settings Explained - How to Correctly Set up the Site Settings for a Great Workflow: • Elementor Global Setti...
Get Elementor: be.elementor.com/visit/?bta=2...
Hosting I love and recommend for most clients and for those on a budget: www.hostg.xyz/SHBd2
🧙 Wizards of Webcraft - A series where I’ll be reviewing your websites - www.reialesa.com/wow/ Apply now!
Pixels, REM, EM, percent, VH, VW. These CSS units, so the units we use when we're building websites, can be confusing. And knowing when to use which to get the best result is something a lot of us struggle with.
Which makes sense, since a lot of these units can be used interchangeably. How and when you use them is going to depend a lot on what you want to achieve. Understanding the basics will allow you to make informed decisions, instead of choosing randomly and hoping it's the correct option.
Pixels are useful for icon sizes, image heights, padding, margins and all kinds of details, such as border radiuses or drop shadows. I also use them for the width of my containers and in turn, the width of my website, because they are the perfect unit when you want something to be consistent. Use them when you want something to look identical on every screen.
Percentages are amazing for padding, because the padding will stay relative to the parent element, meaning, as the screen gets smaller and your parent containers get smaller with it, the padding will also get smaller.
VH and VW are relative to the viewport. If you want something to take up all of the available space, or a certain amount of the available space, they are a good option. You can even use VW to control the width of your website. I generally avoid them, though.
REM is the perfect unit for font sizes. It is based on the font size set in the HTML, which is 16 pixels by default and I do not recommend you change it. REM will adapt to the user's system and browser preferences, while pixels will not. If somebody has trouble with their vision and they set their browser's font size to more than 16 pixels, REM will adapt and get bigger. Understanding the proportions between different sizes is also much easier than with pixels, there's just less math involved. REM will not scale up or down depending on the screen size.
EM is based on the font size of the parent element. Because of that, it can get messy and it can produce some unexpected, unwanted results. But it's perfect for the line height. Because it's based on the font size, 1 EM equals the exact font size. Meaning, 1.5 EM equals 150% of the font size, 1.25 equals 125% and so on. It's a multiplier. Once you set your line height to EM, it doesn't matter what you do to the font size. The proportions between the font size and the line height are always going to stay the exact same.
Another thing EM is great for is button padding. If you set your button padding to EM, it's always going to scale up or down relative to the font size of the button. This makes it easy to create buttons that scale up automatically, helping you keep the visual consistency intact with minimal effort required.
#elementor #units #css
Get in touch:
www.reialesa.com/youtube/
Don’t be shy! Let me know what you’d like to see next, ask me anything related to design or just simply say hi.
Please note that some of the above are affiliate links, which means I earn a commission if you make a purchase, at no additional cost to you. Thank you very much if you decide to use them!
Great video! I’ve been trying to find something that explained all these and this has been the best explanation I’ve found so far. Thank you.
I'm very happy to hear that. Thank you for your kind words and for your support, I appreciate it! 🙌🙏
I've seen dozens of videos about wordpress and elementor in general.
This one is BY FAR the most helpful, clear and concise out of them all.
Congratulations buddy, this video will be a mantra for years to come.
Thanks a lot !
Wow, that's awesome to hear. Your comment made my day. I'm really grateful that you took the time to reach out with something so positive and encouraging. Thank you very much! 🙏🙌
This is a brilliant vid. Full of useful information and very well presented. You deserve more views. Great content like this should have 1m views. Sometimes there’s just no justice.
Thank you very much! I'm just happy the video exceeded your expectations. And even though growth takes a lot of time and patience, reading comments like yours makes it all that much easier and more fun. I really appreciate your support! 🙌💪
This is concise, and packed with useful information. In one video i've understood everything i needed to, I mean even chatgpt didn't explain it this well😂. Nice👌
I'm doing my best to beat AI! 😂 I'm glad you found the video useful, thank you very much for your kind comment and for your support, I appreciate it. 🙌
@cdney8285 I totally agree !!!! Very helpful !!
Exactly what I need now for responsive webs,
Now I understand how they work together. Thanks so much bro.
Keep it up, nice tutorial.
Hi, thanks for this video. Very well explained the key elements. Kept it simple and worked around actual utility. No noise and non-sense. Wish you gain more subscribers bro. 🙏
Thank you very much for your positive feedback! I'm glad you enjoyed the video and found it useful. I appreciate your support! 🙌🙏
you are the only guy i would buy a elementor pro course from because of stuff like this. all the other guys just make like a simple site but there is much more to web development
Great explanation. Thanks for the guidelines!
clear explanation and good practical examples. Thank you sooo much!!
Thank you for your kind comment and for your support, I really appreciate it! 🙏
Great job, it's super easy to understand with your help and lots of examples, thank you!
That's what I was hoping for, so thank you for letting me know I succeeded in explaining things well. And thank you for your support, I appreciate it very much! 💪
This was explained so well thank you!
Great video! I would like to contribute important information. What is defined as 1px will not always correspond to a physical pixel on the screen. On smaller devices with high density, this relationship can change according to the initial-scale, the pixel density of the screen and even the zoom level applied by the user.
great video. thanks. I subscribed. love your charts too!
That's awesome to hear, I'm glad you liked the video. Thank you for your support and for your kind comment, I appreciate it a lot! 🙌
Thanks for the video. Very helpful. I subscribed!
That is awesome, thank you very much. I appreciate the support! 🙌
useful and clear explaination.
Reialesa, amazing content, as always. Thanks a lot.
I'm very happy you liked it - and even more so to read your amazing comment. Thank you very much! 🙌
Thanks! This video was very useful.
Awesome, I'm glad you found it useful. Thank you for your support! 🙌
Thanks you so much. Great video. Very helpfull
I'm glad you found the video helpful. Thank you very much for your support, I appreciate it! 🙌
Literal hero, thank you very much.
Best explain ever. Thanks!
I'm glad you think so. Thank you very much for your support! 🙌
I really like this video, thanks for it.
That's very kind of you, I'm happy you liked the video. Thank you for your support! 🙏
a m a z i n g. Thank you!!! Keep going!!!⭐⭐⭐⭐⭐
Thank you very much, Iliana! I really appreciate the encouragement and the fact that you took the time to show your support. 🙌🔥
Very helpful, thank you 👍
That's great to hear, thank you for your support, I appreciate it! 🙏
What width do you use for a widescreen breakpoint? Breakpoint width size? And font size used in rem for widescreen??
Very helpful 🤩🤩
🥰🙌
amazing content, thank you
I'm very glad you found it helpful. Thank you for your support and for an amazing comment! 🙌
I have some questions: Should I set the border radius in pixels or em? In pixels, with the same size the corners will look smaller on a large button and rounder on a small button, correct? Should I then use em for the corner roundness? But 1 em is too much, and it seems to only accept discrete numbers and not like 0.75... I want the button to look exactly the same no matter how big or small I make it
Nice Tim. New sub earned :)
Thank you very much for your support, I appreciate it! 🙌🙏
This was awesome!
I'm glad you think so! Thank you very much, I appreciate it. 🙌
Thank you
Thank you for your support! 🙌
great content and usefull❤
I'm happy you found the video useful. Thank you for your great comment! 🙏
gread vidoe!
I'm little confused about line-height.
isn't em supposed to set by parent's font-size?.
if line-height attribute is attached to "text", shouldn't it has to compare size with parent element's font-size not the text's font-size?
Thank you! As far as I've tested, setting the line-height to em is always directly equal to a multiplier or using no unit at all (which, again, acts like a multiplier). I've not yet come across a situation where I've had issues when using em for the line-height in Elementor.
I just tested it out by creating a container, giving it a class and giving that class a font-size. What happens is, the text with the line-height set to em has the line-height still adapt to the original font size set directly in Elementor. The text gets bigger and the line-height gets too small, because it's connected to the original font size set in the widget. The text where I added in no unit had the line-height scale up properly. And for headings it didn't matter what I did in the CSS, the line-height stayed the same, whether it was in em or without a unit.
So, it's safe to say it would be better to use no unit, BUT - it's highly unlikely you'll be giving your containers a font-size property via CSS. And if you don't do it via CSS, you can't do it. Basically, there are no settings ''fighting'' you when you use em for fonts. It's entirely connected to the font itself, unless you specifically target that container by giving it a class and giving that class a font-size.
If in doubt, however, not using a unit at all is reliable because it's a direct multiplier of the font. For line-heights it works the exact same as em in Elementor, but if you're worried about parent elements, it's a great choice as well.
Thank you for your support! 🙌
Thank you❤
I'm happy to help, thank you very much for your support! 🙌
Thanks!
Wow, that's incredibly kind of you. I really appreciate your support, thank you very much! 🙌🙏
what did you use for checking the padding with mouse click and drag at 2.32
Good question! It's a browser ruler extension. In my case, I'm using Mozilla Firefox and this extension: addons.mozilla.org/en-US/firefox/addon/browser-ruler/
It's really useful for measuring things and checking if everything is properly aligned.
Hey there, thanks for the video. Why are you using pixels for the width but vh for the height? You say you get more consistent results. But I cannot fathom how. Setting a fixed pixel width results, at least in my way of thought, to different results on different screens. Could you elaborate? Thanks :)
Hi! Great question. Let's say you have a screen width of 2000 pixels and I have a screen width of 1500 pixels. Our browsers are both full screen. If the width is set to 1200 pixels, we're both going to see it as 1200 pixels. So will everyone else, except for people with screens smaller than 1200 (if we ignore the padding).
If the width is set to 90vw, you're going to see a width equivalent to 1800 pixels and I'm going to see a width equivalent to 1350 pixels. And every other screen width will see a different size as well. Which can be great for responsiveness - but it is much less consistent.
For vh, it's another story. Setting something to, let's say, 50vh, it's going to look huge on something like a 4K screen. Because it's going to take up at least 50% of the total height of the viewport. Which might be exactly what you want, but it might lead to a lot of empty space on the top and bottom of your container. If you have a lot of content, or, rather, tall content, there won't be as much space as if you have just a little bit of content. But the height of the container is going to be the same - at least 50vh.
In this case, using % for padding (or even pixels) makes more sense, because the amount of space on the top or bottom can be consistent across different areas of your website. The padding itself won't depend on the amount of content. 100 pixels is going to be 100 pixels no matter the viewport height, and % is going to adjust accordingly based on the viewport width (not height).
With vh, the amount of empty space just might depend on the content - if the content isn't tall enough to fill out the minimum height. But sometimes you might want to have a container cover up the full height of the screen. Or at least a certain amount of the screen, let's say 50%. In those cases, setting it to 100vh or 50vh respectively will ensure that.
I hope I answered your question. 🙌
I use rem, too, with Elementor. However I noticed that if I increase the font size in Chrome under the settings (for people with bad eyes for example) I notice the font doesn't get bigger as it does on px font websites. Still haven't figured that out.
So basically the opposite of what it should do for accessibility.
what PLUGIN or extendtion did you use to measure the dimension of website in this video?
It's a ruler browser extension. Just search for ''ruler browser extension'' and you'll find one for whichever browser you're using. They're very useful and easy to find. 💪
I have a question , I’m trying to build a webpage that can’t go over or under a fixed px size and all the ones in between there can resize , it’s for a pc app not mobile or tablet
2:35 How can the measurement be carried out? What is the keyboard shortcut for it?
That's a ruler browser extension. If you just search for a 'ruler browser extension', you'll easily find one for whichever browser you're using. It's a really handy tool when designing or building websites! 👌
Tim, I don't undestand what this % is based on (only for top and bottom padding). Could you explain with more detail?
Ah, that is a great question! Now that you mention it, I wish I mentioned it in the video.
Anything that uses % is calculated based on the width of the parent element. This allows you to achieve equal spacing on all 4 sides, even if the child element isn't perfectly square. Let's say you have some text, which is most often wider than it is tall, and you want to give its container an equally sized % padding on the left, right top and bottom. If it calculated the height, you'd get different padding on the top and bottom and on the left and right. It would be incredibly difficult to get the sizes right and it would be impractical to work with.
The actual height of the parent element is irrelevant.
It's all about the width of the parent element. So, as the screen gets smaller horizontally, percent based padding, on all sides, also gets smaller - but if you make the screen smaller vertically, the padding remains the same. Still, it's a great option for responsiveness, because as screen sizes get smaller, they usually get smaller both vertically and horizontally.
I hope that I answered your question! 💪
@@Reialesa Oh man, you certainly have the touch to teach. It's perfectly clear now. Please keep bringing us new content. Thank you so much.
Thank you very much, that means a lot to me. I really appreciate your support and I will do my best to keep providing good content! 🙌💪
Great
Thank you, I appreciate it! 🙏
0:29 - px
1:30 - %
4:09 - vh and vw
5:49 - rem and em
11:02 - Summary
which software or website is it
Hi! I'm not quite sure what you mean - this is a video for Elementor, a WordPress plugin. 😁 You can find out more about it here: be.elementor.com/visit/?bta=27702&nci=5349
You show an image where you say Px are good for paddings and then you say oh...but I exclusively use %....that's confusing.
I'm sorry you found it confusing! Yes, pixels are good for padding. If you use them, the padding is just going to be the same size on every screen. Which is why I also pretty much exclusively use %. It's more responsive.
The thing is, it's not black and white. Pretty much any unit can be used anywhere and it's up to you what you prefer. Hopefully, the video gave you some idea on what's best to use where and why. 🤞
@@Reialesa thanks gor replying on a Sunday. Keep up the good work.
I'm happy to help! Thank you for your kind words, I appreciate it. 🙌
REM is not the way to create responsive font sizes imo
Hi! It's definitely not the most responsive option available. It's still, in my opinion, significantly better than pixels, however. Especially because of accessibility. Using the clamp function would be more responsive but also a whole lot of extra work. Which I feel is often unnecessary and impractical, because you can get great results by just adjusting the font sizes for different devices, especially if you combine it with some CSS media queries if needed.
Which solution do you prefer to use? 🙌
Oh man ur so cute i got a crush on you LOL
Hii there, this video is very useful video..loved the way of presentation too.. will be helpful if you can focus on doing videos related with unique content related with Elementor Guide Process and share project video examples for the reference and learning purpose. ❤
Very helpful tutorial. Thanks!
I'm glad you found the video helpful. Thank you for your support, I appreciate it! 🙌😁