I found a way to never use Pixels again in Elementor
Вставка
- Опубліковано 20 вер 2024
- Is this the perfect way to work with Elementor's container when you want to make your designs pixel perfect? I think I got something interesting here. Let me know if you have any feedback for my new system so that I can implement any improvements in the course.
Btw, you can download the template here → living-with-pi...
Video I mentioned about the 1140/1120 grid → • Elementor’s default 11...
→ Software I recommend
Hostinger for affordable webhosting: livingwithpixel...
Siteground for premium webhosting: livingwithpixel...
Elementor for no-code web-development: livingwithpixel...
Figma for Web Design: livingwithpixe...
All recommended software & discounts: livingwithpixe...
→ Full A-Z Courses
Elementor Pro Mastery Course: livingwithpixe...
Figma Design Mastery Course: livingwithpixe...
Business Course: livingwithpixe...
→ Starter Guides for Beginners
Elementor Starters Guide: livingwithpixe...
Figma Design Starters Guide: livingwithpixe...
→ My Social Media
Tiktok: / rinodeboer
Instagram: / rinodeboer
Twitter / X: / rinodeboer
Some of the links above are affiliate links, which means that I earn a commission when you make a purchase via my link. Thanks a lot if you decide to do that! I couldn't make all these videos without it.
Is this the perfect way to work with Elementor's container when you want to make your designs pixel perfect? I think I got something interesting here. Let me know if you have any feedback for my new system so that I can implement any improvements in the Elementor Pro course. Btw, you can download the template here: living-with-pixels.ck.page/ea81ccad85
i downloaded the file, but it shows 2 jason file only
@@exterminatic So? You need to import either one or both into Elementor, in there you will find the containers with this layouts.
@@uncodedlife Apologies for confusion, I am new to elementor, where do i need to import the files.
@@exterminatic on every random page. There is a red plus or the folder icon next to it. That is where to import the template.
@@uncodedlife I downloaded the file and trying to import. I keep getting invalid file.
Well done Rino! Now you have to change you business name to Living with Percentages! --And now it's time to learn REM instead of pixels for font sizes. :)
Hey, is it really that good working with REM instead of pixels for font sizes? I have heard that its better but is it really that good in comparaison?
@@imlivid2746 yeah it is REALLY good working with REM because browsers respond well with REM. When you use REM, for example if someone has eyesight problem and they go to their browser settings and edit the default browser font size, your website will respond to that. If the fonts are in px it will not respond to that adjustment.
Then again if you have set the default font sizes of your desktop, tablet and mobile to be in different percentage sizes, then when building and use REMs, the responsiveness on text will be automatic across your website. This does not work with pixels because you have to set it everywhere to make it responsive.
Best comment of the day XD
Living with Fractional Units!
😄
Responsive design is one of the most important skills a web developer can have but also complecated! Please create more videos like this about responsiveness using elementor. Thank you for this video!
Hey Reno, when Elementor release it properly and you finaly do the full Container tutorial, it would be brilliant if you could base it on the Hello theme. Ferdy has done a great 4 hour tutorial but it's based on Blocksy (he's got to feed the family!) and we'd like to stick with Hello as we use it a lot. Keep up the great work!
agreed
I just did something similar today. I found that if you remove the "Gap between elements" and you set the main container to "Wrap" you can use the right % (like 50%, 33.3333%, 20% etc) since all containers already have a 10px padding around them it leaves a nice spacing. That is how Elementor does it by default when you add a new container with multiple columns.
That is not really correct way how to take advantage of the container.
@@jcwebtech the correct way is to code custom themes and not use Elementor haha
@@integrateur You will be still using Flexbox when you custom code. I can code but I choose not to because clients want editable sites. I ditched Elementor for bricks though.
@@jcwebtech I know, I use Bootstrap 4 for the grid but there's less annoyings paddings/margins than Elementor to take into consideration :)
the reason the layout breaks is because flexbox doesn't take gap into account it doesn't subtract it from 100% width... and by default the gap is set at 20px... so for example a 3 column layout with a 20px gap is: 33.33% plus 20px gap + 33.33% + 20px gap + 33.33% so its almost 100% width plus 40px gap... and because elementor doesn't allow you to use calc in the width field you can't subtract the gap... the best solution i have found is to use a plugin which allows you to use calc in the width field... then on each container within the parent container you can set each width to: calc(33.33% - 40px) and it will work perfectly... then on tablet if you want a 2 column layout you can use: calc(50% - 20px) and 1 column on mobile just set it to: calc(100%)... if you use different a different gap amount you can just adjust that in the calc.. hope that makes sense... i have not tested out your method but if you alter the gap to like 10px for example does it still work?
Yea, that’s what I explained right? Or am I missing something? Nevertheless with these numbers you can just change the gap and it will still work! I have tested this from 12px to 30px in the 1140 grid (most websites stay within this range) and it still works. So this is even less work I believe because you can change the same % from 12px to 30px of gap.
@@rinodeboer oh yes nothing wrong with your explanation and i have tested your template and it works all fine which is great but i was just suggesting another solution... i think what this really highlights though is how bad flexbox is for structural layout, css grid is so much better and easier and will allow for much more complex layouts... flex is great for content layout though... i don't imagine we are going to get css grid anytime soon in elementor 😂
Ahh yea, I see. Let's hope that the CSS grid will come soon.
You can now use custom units as of 3.10. I'm currently using calc to solve this problem.
This concept covers at least 90% of use cases and is still flexible enough to adapt. Thanks for taking a complex concept and making it simple enough for this old rock to understand!
Glad it was helpful!
Thank you for sharing this.
The part I like most is you showing the Figma design as well.
Well done 👍
I am so stoked for this functionality! As always, you explain tings in a very clear way. Looking forward to more videos about this! Cheers.
So will you change your channel name to LivingWithPercentages? 🤣
I should 😅
Great video! I’m hoping Elementor can somehow add CSS grid inside the designer grid and give the ability to use all unit sizes like REM, EM, CH on every element like Webflow does and give us more creative control over the container because I pride myself on being consistent while saving time and I dig Elementor 😭
We work so much with it and always discover something new! Thanks for sharing and your perspective, Reno! Keep on! ✌😊
The problem I personally found with using grids, is that my work ended up looking too corporate even when I was doing work for clients who wanted things to look'funky'. Learn this and then forget it and pull it out when you need it.
I don't know what I would do without your videos!! Thank you!!
i just want to say -thank you Rino, for all your excellent content. You are a true master at your craft.
I love this concept. When Elementor goes live with the flexbox I would love to see you do a more in-depth how to video of this for us advanced amateurs.. =)
This is just amazing, thank you so much for putting up quality content like this!
Absolutely BRILLIANT! Great idea - thank you! Looking forward to your upcoming Elementor Container video tutorials.
Thank you so much! You save my life! Love the way you say containersh, numbersh, dollarsh....
Happy to help! Haha and sorry for my accent
True, I find it funny 😂
Very cool, Reno! Thank you for putting in all your time on this and making it easy for the rest of us.
Very nice. I appreciate your attention to details and clear explanations. Well done!
You're a genius! I was so confused and I was also playing around with percentages and couldn't quite wrap my head around it but was getting around to this I think
Watching it again, still the most useful and in-depth explanation!!! You saved my bacon!!!
Great vid Rino.... Most of us love designing for desktop - but then want to cry when we have to deal with mobile optimization. Elementor or someone should make an AI based site optimization calculator tool plugin that allows you to auto-optimize your entire site (based upon your selected inputs) for the ultimate optimization experience. (how you want certain sections to be - PX/%/REM/EM/VH etc etc. Would be a massive time-saver to have a tool to put in all settings/inputs to test on 1 section at a time on elements like main container, sub-containers, width, height, margins, paddings, typography (REM/EM/PX), etc etc so you can see what the section looks like as it scales up/down. Once those settings are right for your "test" section - you could then apply to rest of site to yield a similar effect without having to manually adjust every, single element - which is a painstaking process for anyone who's ever tried to design a custom site.
Great tutorial! Thanks for the sharing!
i understand so many things all at once. it was a several lightbulb moment in my head. thank you very much
As always your videos help to understand the enormity of website design for us novices. One question though. I noticed @ about the 11:35 mark you figure out the width of a container in Elementor. What did you do to display that measurement? Thanks for taking the time to produce these videos.
He's using the screen shot function. Press Shift+Command+4. Click and drag the crosshair and you'll see values around it. Once you let go of the click, your computer will take a screen shot of what's in the box you dragged out. To stop this just hit the esc button before letting go of your mouse and the crosshair will disappear. This is on Mac, I'm not sure how you do it on Windows.
Thanks very much. Really shows how much effort you have Bern put to make this video.
Love love love this! thank you for sharing! look forward to you tutorial when container are made official in Elementor!
This is great Rino
I've been experimenting with that a lot as well and this really also works well for me and my websites. Thanks a lot!
I Love your videos! They are always helpful to me as a web designer who uses Figma, WordPress and ElementorPro!
Hi Rino, Very well explained. I thoroughly enjoy your video., Can't wait to see your full container video.
Thank god you figured this out so I can learn from you lol
I loved your 1120 system. Stoked to learn this model and use it now :D long live flexbox
Magician Rino! I was watching and trying to get knowledge about px,em,% videos in yt, now got in fav channel!
Thanks Rino! Could you please post the Breakpoints for all these Devices?
You are in good luck because the next video is exactly about this. I will show you how you can even add extra breakpoints.
5:20 Holy crap, I'm trying to keep up with your explanation and am getting confused...I can't imagine saying all that, and that quickly, in a language that's not one's first language, like you do!! Well done!
such good fundamentals! Really hard core which we love!!! Thank u
Have just moved back to Elementor from another Block Builder for latest site to simplify layouts - hadn't thought of using the grow setting to simplify percentages👍
This content should cost money. This is gold.
Dude, you are simply incredible. Thanks
Soooo LivingWithPercentages from now on? :) Keep up the good work, cheers
Thanks a lot, I have been trying to figure out why the 50% cause the flex items to wrap within the parent but you have explained it perfectly. Thanks a lot
Hi Rino, great video as always! But, i always wondering the extension you use to measure pixel by dragging the cursor at 2:19 . Thank You!
I would love to know as well
Looks like osx screen capture feature crosshairs
I use an extension named "measure it". Does the job
Hi Rino and thanks for those suggestions and explanations. I'm just confused (my fault) on where I should set the 1120 instead of 1140. Probably this is a stupid question but should I change it on Site Layout Setup to apply to the whole site automatically? Or, can I leave the 1140 on Site Layout Setup and put 1120 on each Container I need to align?
Will you rename to LivingwithPercentages now? 😂😂❤
just spent a bunch of time on containers and this is awesome!
You introduced me to Bricks through your video about Black Friday deals. I think it’s a million times better, at the very least in potential, than Elementor. I would like to see your opinion and overview of it! Elementor is barely getting flexbox and Bricks already has it with Grid on the way. It also lets you easily choose which format to use (px,rem,vw,etc) and can even implement CSS calculations. It’s easily replaced 6 plugins for me.
Awesome to hear! What plugins did you save?
@@rinodeboer I know it's different for every project and some features are now new or in beta on Elementor, but I was able to remove all of Crocoblock but I kept Jet Engine, which is compatible with Bricks. But off the top of my head just with Croco I was able to reduce plugins for tabs and sliders and possibly others I'm not quite familiar with which plugin has which features I use. I was also able to remove Ele Custom Skin and a performance plugin. I know loop is now in Elementor, but I haven't experimented with its integration. I hear it's not too robust. The latest update for Bricks just added interactions, which is awesome - less JavaScript writing now. I think it would be cool to see your take on this since you're far more familiar with Elementor than I probably am.
Love your commitment… thanks for all your help in this website Dev journey I am on…
Hello Rino! I don't know if you've come across this dilemma at some point... because it's exclusively for Windows. How do you deal with the 125% zoom that Windows brings by default? It has happened to me that website designs end up looking much bigger on the screen than they really are because of that damn client-side zoom.
By the way, excellent as always the information you give us!
Hey Rino. Great video as always. I also played with these types of layouts and came to the same conclusions with Flexbox.
I ended up creating utility classes for CSS Grid instead. Grid is so much easier to predict and manage for layouts.
Elementor and Bricks don't yet have a UI for Grid, but it is easy enough to add utility classes for this and override as needed.
Let me know if you want me to do and share a quick video showing how to do this.
Yes please!
I would love to! Always interested in learning more easy ways. Could you email the video to rino@livingwithpixels.com? Thanks so much 🙏🏻
@@rinodeboer Hey Rino, I will email you as requested.
@@steala Hey Kalpesh, :) I have reached out to Rino. I won't post a link here, I think it is bad manners to post video links on other people's channels. I'll let Rino decide what to do with that.
You can post the link here! The reason I asked for email is because I wasn’t sure it was a UA-cam vid.
Hi, A. Michel is right, why use "elementor gap", and in place, % + container justify "space between", it will leave a natural gap between elements.
Well I am a beginner but thoroughly enjoyed this episode and cannot wait for more. Thanks so much.
Thanks. The science of flex container. Very complex.
you can use css for the box size problem, box-sizing: border-box;
Great video! Well done Rino!
Muchísimas gracias Rino... Te ganaste un nuevo suscriptor. El contenido de tu canal es buenísimo. Muchas Gracias.
Fantastic work. Just a few thoughts after spending time with your amazing template:
I have a layout that consists of 6 boxes in total: 2 boxes of 35% in the first row, and directly below them 4 boxes of 20% each on the second row. This causes an issue where the second 35% box shrinks to allow space for one 20% to its right, so I have 3x3 boxes instead of the 2x4 that I need. This doesn't occur when you put something of 100% width between the two rows though.
Also, the dividers in your template aren't set to 100%, so the layout breaks, creating uneven looking boxes. I might very well be missing something, but I thought you should know.
But great work, thank you for your generosity.
I am so excited to start using bricks and will use this there and in my current project in elementor
Hi Rhino I'm using grids for this kind of layouts (utility classes). But still I'm very curious how you prevent the last item in the list to become 100% width. I watched the total video a few time but can't figure out how you did that.
What is going on here? Why are we using Flexbox for situations that Grid was designed for? Just use Grid and none of this insanity needs to happen…
Thank you so much!!! Awesome work… greets from Austria 🇦🇹
This solution is much better than working with pixels. It's crazy that there isn't an option for column gap or row gap.
❤🎉 thanks for sharing, very nice job, I thought that my elementor comprehension about container was a mess to fit 2x 48%. You make my day ,good job
Hey Rino, I'd love to see an approach on hero images, seems like I'm never happy with the proportions of it
Can't wait for your elementor course btw
Great vid! "Slightly" off topic: My nr.1 challenge now are: What are some of the best ways to display long texts (of course also mobile and tablet friendly!)... For example long-ish intro texts, even on the front page.
PS: Thrilled to buy courses from you, too. Please include at least three "hacks"/ tricks/ ideas for long text sections in your course! -thanks
Thank you for the explanation that revolutionizes my approach to elementor
And thank you very much for the models ✌
Finally, someone is doing it like me, top! I go even further and set all my margin and paddings in %.
great watching you share your learning, great energy.
what is tool for measure width ?
Hi Rino, what kind of measuring tool (for seeing the pixels) are you using here? It's not within Elementor right? are you using a chrome extension?
Really good explanation of the Flexbox and Elementor's implementation of it, thanks Rino. Can you share the settings you have for the additional breakpoints please? I have 2 customers who always say that the layouts don't work so well in landscape on their mobiles
Your work is phenomenal
Fantastic! thank you Rino!
Amazing Tutorial Rino! Does this scale well with Height as well? Especially with images or do we need a clamp() solution?
Absolutely brilliant. Thanks!
Great video. I hope make more complex tutorial like directory site.
Thanks for this tutorial 😊
New YT name.. Living With Growth
This is awesome. Thanks for sharing!
Remarkable tutorial! Thanks for sharing your findings and your excitement!
One of the areas closely tied seems to be image sizes such as for headers. I didn't see any videos addressing this; have you done any? How do image sizes need to tie into containers?
Thanks so much for the great advice and the templates, Rino!
Really appreciate the time and effort you invested in learning about the container behaviour 😉
I just started to get to know the container system and need some input:
I created 2 horizontal containers with the exact same settings. I added text widgets to both, also with the exact same settings. Breakpoints are set by Elementor but when I drag the desktop window (viewport) to reach the tablet breakpoint the text alignment/text on desktop changes all the way with every minor decrease in VW. In other words, the text block does not stay the same, it changes constantly until it reaches the next breakpoint and then snaps to those settings.
Are there any specific settings I have missed to keep the text block fixed until it reaches the next breakpoint?
Hi Rino, excellent content as usual. I just have a question about those rules: as I'm following your channel, are those rules "compatible" with one of your latest video, i.e. Easily Manage your Container Width from here in Elementor released about 1 month ago?
Great work on this. Very helpful
great! thanks! you put in a lot of time to make this easy for us.
Use flex box and max-width media queries. Can also put in custom code if you are Davy with flex box.
i recall him saying that he wants to design without coding, no idea if he knows html/css at all, but yea flex box is kinda what he wants :D
thanks rino!! this is super cool
Could you please clarify your your boxed page width. In other videos you mentioned the 1140px width is not ideal. But I also see graphics outlining a total boxed width of 1140px with 10px gutters on the right and left, bring the useable space down to the easily gridable number of 1120px. But I also thought I read that you suggest changing the total boxed with in Global settings to 1120px. Could you please clarify if the width field of the content main content area should be globally set to 1140px or 1120px?
Globally it's better to set it to 1120, so that you don't have to mess with 10px left and right when you leave it at 1140. So the content area then becomes 1120.
Genius Rino - thanks
this channel is a blessing lol
Amazing video! Ty Rino
thanks for all your hard work man
did any of you try this method recently ? i tried to apply this on a current project and it does not work pretty sure i follow every step, the container is 1120 and so on...
when i tried using 50% for 2 columns and 33% for 3 columns it worked!! i think we no longer have to calculate the gap in between, Elementor maybe does it itself, can anyone confirm or deny this statement please ?
Bro is there any chance to u make complete video how design WordPress website for client and submit
Hi @rinodeboer, Thanks for the detailed video explaining everything that someone should know about using px/percentage. I have a 4 column layout on desktop. I wish it to break 2*2 for tablet. But When I set the width for tablet 35% it makes each column 35% but does not break to 2*2. It still displays 4 columns in a row. What mistake I am making? Please pardon my ignorance, using Elementor for the first time.
Great tutorial!!
Thanks for your video. I really appreciate your clear and smart explanation of this container concept and percentages etc. (I downloaded your template but I got an error in Elementor (Pro) saying "Invalid File" when trying to import it as a template.)
I really needed this thanks
You nailed it!
Thanks Rino! Great tutorial!
Thank you 🙏🏻
Hi Rino, this video is full of wonderful tips! Please make a video tutorial about it if you can, we would all appreciate it
Hi Rino. Top uitleg. Ga de komende dagen mee stoeien. Alleen een vraag. In je template staat het volgende in "Make sure to add the extra responsive breakpoints otherwise it's not as my example." . Waar heb je deze gegevens staan zodat ik deze kan overnemen om je template goed te laten werken? Dank. Keep up the good work.
Als je klikt op het tandwiel van de breakpoints dan kun je een aantal breakpoints toevoegen. Gewoon alles aanklikken want elementor biedt maar een paar opties aan.