You are awesome Rino! My partner and I have a design agency and you just hands down changed our entire design system using elementor pro. You got two more loyal subscribers and you should be proud of the impact you're having on the community. THANK YOU ◡̈
Ive probably watched this video ten times in the past year... You create great content. I'm an old school designer at this point. I'm 44 and have been a designer for over 20 years. Thank you for your content.
FIRST OF ALLLLLL....YOU TELLING ME I HAD A MAC FOR ALL THESE YEARS AND I NEVER KNEW SPOTLIGHT COULD BE USED AS A CALCULATOR lmboooo I subscribed!!! Your videos are the best. I literally never knew that OMG
Echt respect dat je niet alleen een korte video hebt gemaakt, waarin je laat zien dat 1140px niet goed is, maar dat je zelfs het probleem helemaal hebt opgelost met een geweldige instructie voor designers. Top gozer ben je toch
@@rinodeboer ik dacht al dat je Nederlands was, ik ben laatst van Joomla na Wp gegaan en elementair pro gekocht. Moest dus veel weer opnieuw leren. Wat heb ik veel aan je gehad. Bedankt.
Fantastic. Thanks Rino. Manually setting the 3 layouts across desktop/tablet/mobile is one of Elemtors biggest drawbacks. Whilst it's great to have the ability to change those values manually, having a logical default setting that produces an elegant visual design (as you have suggested) would be a huge time saver.
As a newish designer, I’m always excited to learn new things. As a nerd, this video makes me so happy. FINALLY, I understand the default 1140. I’ve been learning the 8pt grid system bc my brain must have consistency and structure. I have no idea yet how these will work together, but I thank you so much for explaining this so well (and for figuring it out lol!)
This video arrived at a good time because I was wondering what size to use for overall width, gutters, etc for desktop, tablet and mobile. I was actually using 1100px until I became educated on the subject, but now I'll be using 1120px moving forward. Thanks for the clarity, as well as the incredible time you invested into this video.
hey, Rino! that was indeed a lot of work! nice job with the sheets and the measurements page! looks like a good reference and good starting point! thanks for sharing! it would be cool to also see a version of these numbers using the 8px grid as basis (where all sizes and spaces are divisible by 8).
My goodness. I'm just shaking my head. This. Is. In… CREDIBLE! Thank you SO much for not just taking so much of the challenging head-energy out of this challenge, but for breaking it down like you did. I'm on your site… I'm just blown away. I'm trying to take a Photoshop mock from our designer, right now, and adhere to his gutter spaces (which looks about 60ish pixels apart). Gonna study your math. Incredible work!
Thank you for shedding light on something hidden right under our noses. It all makes sense now and this will help me transition from the "old" Elementor to the new container methodology. You're a breath of fresh air, Rino!! Thanks for the amazing insight!
Man, this has changed my life right now while I watch the video. Why isn't this video featured in the Elementor website!! lol this is amazing and everything now makes sense!! This is so perfect. thanks so much!!!
I'm really happy your channel exist, you always teach me and help me a lot, i'm from Latin america, native spanish speaker, but your english pronunciation is SOO understable, the best! i love that, with you i feel i'm listening and undertanding you like in spanish hahah thanks for existing
OMG! This is alot of great information. Thank you, Rino, for taking time to put all this information together and share to the world. You're an inspiration! I look forward to watching and learning from your content. Definitely will recommend everyone to your channel and your website! 👍Take care!
Great tut Rino! I’m looking forward to the new rollout of the container element! That being said, I’m not holding my breath as it’s been taking forever! This is why Bricks is gaining ground so quickly! The container element was almost from ground zero! Elementor really should have had this ready to rock by now!
Hi Rino, great video, I also love the 8 px System, and it works well for me. I am glad you are talking about because it is one of the key starting point people don't tend to think about. Great Work thank you
2:40: Considering I do not lke the mandatory 10px outside side padding for section layouts (and have a little tendency to overengineer things), for this I would divide by 2 the desired margin/padding between items and add that as a side padding of the parent container while also using that value for side margin/padding of each item (in this case 10px), in this way each item can be a *repeatble pattern* while having the desired gap. This eases the layout edition if you add/remove elements (if you want a similar section just duplicate and add/remove items) and now you no longer need to handle external side margins. This works if the parent container is the section itself, in this way the side padding is not visible since the screen is usually wider and the padding gets outside of the content widespan, this also works as a safety margin when the viewport width is between 1024px and then content maximun width (1140, 1200, 1400px, etc.), otherwise the items ends touching the screen borders. In fact, this safety margin can be used for the all responsive sizes. This definitely is not needed when using container layout since you can directly use flexbox column/row gap immediately and let the browser calculate everything else, for this I use a pattern where I have a container as a section wrapper with one or multiple row/content wrapper that handle the desired inner padding.
Wow - fantastic video. I just checked out your channel and subscribed. I don't know how I haven't clicked on any of your videos before, lol! Honestly, I am replacing my default RUclips "Elementor tutorials" search with your channel - I'll be looking here first! So much great content. Your presentation style is lovely. Straightforward, concise, easy to follow and understand, with no "filler talking" to constantly skip through while keeping your content enjoyable, relatable and "human". Huge kudos to all the work you do. I'm excited to watch more videos and finally get my new WooCommerce shop designed and launched so I can shut down my sub-par Wix site. Over the past few months, I've been back and forth between 20 different themes and builders, not to mention the countless plugins combos... I've finally settled on building with Elementor Pro and Hello theme (barebones/using Elementor Themebuilder with minimal plugins); with your amazing guidance, I'm feeling much more optimistic and confident. Thank you! Keep up the phenomenal work!
Thanks, Rino! And thanks a ton for adding those calculations to your website! Elementor should add Flex and Grid to their new update and that would fix such headache :)
Ontzettend bedankt Rino! Ik ga de gids die je hebt gemaakt gebruiken voor al mijn projecten vanaf nu want ik ben altijd onzeker over de juiste breedte op desktop etc. Nogmaals heel veel dank voor al het werk wat je hierin hebt gestoken :-)
Truely speaking, you work really really hard. You deserve LIKE. Actually, from the beginning of my learning, I search for a perfect guideline for container but I didn't. Little bit I learned from your one old clip and Now I am clear about this. Thank you.
Oh my... working with containers creates a new problem. Each container adds another 10px of padding. Can't wait for your Container Video and an update of your grid methodology.
Man, thanks so much for this video, literally no one on RUclips has explained and showcased this better. I personally usually use the 1260 grid, i find it a little more esthetic, and man im glad you included this. Thanks again Rino!
Better to use 1240 then you will get column size without decimals 610 if using 2 columns layout 400 if using 3 columns layout 295 if using 4 columns layout 232 if using 5 columns layout 190 if using 6 columns layout
very basic thing in web to understand is the box model. its crazy how many designers don't even try to understand margins, padding, borders, width/height. good for you fixing this mistake for yourself.
😉 Hey Reno how are you doing you've been doing very great and I never for once regret subscribing to your channel and i would even recommend you to others without hesitation thanks so much Man. What I love most about you is the fact that you don't create video just to gain views you give us the content we need a heart for you ❤️💕
Thank you so much for this explanation! It blew me away. I did have a question though. Maybe I am over thinking this but if you set your site settings to 1120 instead of 1140, do you need to change your breakpoints as well? I would also love to know more about the additional breakpoints and how you use them in your process. I have not found a video on this yet.
Interesting insight, however, the flexbox and grid features let the browser worry about those calculations. Even while trying to determine when each box should wrap using flex, flex basis and min-width can take care of it. I don't think it's a good idea to hardcode the sizes of the boxes based on the number you want to use.
I hope that this is how it is going to work in Elementor’s container. Right now there is no option for this in the container when using wrap unfortunately. Or did you find a way to do it?
Agreed. I think he is speaking here as a designer to other designers who are laying out static content on an artboard, and who can't use flexbox to manage the sizing. Developers aren't concerned (or shouldn't be concerned) about any one specific screen width. We have to make it work on all widths, and so we use responsive units and tools like flex and grid. What is 4 columns on desktop will probably not be 4 columns on mobile, and in between, those columns will constantly change width. There is no such thing as a fixed column width in responsive design. I find most designers don't seem to get this, or just don't have a way to account for it with the tools they have available.
Fantastic! I love how thorough you are! And, as a videographer myself, great setup you have over there, the sound, staging, and lighting is perfect. Now if I could just hire you to help me take my site to the next level lol :)
I keep mine at 1140px, which works perfectly. The reason it works perfectly is that when you set your parent container to "Boxed" with the default 1140, the containers inside will all have 10px padding all around by default. Therefore ending at 1120 total.
I also struggled with this for a while. To deal with the extra pixel spacing issue on the side of the columns, I set the column gap to “no gap”. Then you eliminate the extra px gap on each side. My design team has built a few designs on the 1140px grid but most often I find we set the width at 1380px. You get so much more space to explore the design.
Really great tutorial to break it down. I've been using percentages instead of fixed pixel widths since the flexbox containers came out with great success too
I always have issues with Elementor with a full width hero image. It looks great on mobile and tablet and laptops, but on large monitors it all goes off the screen and gets cut off....
This video is insanely helpful! I’m new to web design/development and this was some information I’ve been needing! I appreciate you for using your time to share this with us! 🙌🏾 Thank you so much!
This drove me crazy and I looked everywhere for answer or recommendations of best practice, but I couldn't find any proper explanations. Thank you for this video! PS. I also remove the 10px padding every single time 🤦🏼♂.
Thank you very much, Rino. VERY USEFUL information. Ι have been struggling with containers on responsive (tablet and mobile): full width and percentage, (85 for tablet and 90 on mobile) does not always work. Also, on desktop the across screen background is lost. The background is grey with a 1200 page in the foreground
Have you noticed that containers have changed (maybe with a version change)? Create a new default container that's 100% and Boxed and it's now at 1140px with no inner padding. The 10px padding is now at the far left and right of the container, at the edge of the screen. Now, adding inner containers, this is where the 10px padding is added. So your pixel chart still applies except for the one full container at 100% has zero padding. I think this works and actually makes sense.
Hi , lot of of work in these spreadsheets:) we use display: grid; template-column: 1fr 1fr; gap : 20px 1140-20; 1120/2=560; using bootstrap is your issue;
It's awesome 👍👍👍 I solved my 90% of confusions.... Please also make a video on how to optimize speed of website while using Elementor... Elementor makes Website too slow
Great explanation as usual. If I understand you at the end you still have a 10px distance from the left and right of the container edges. Why don't you define at the container level (or section) no gap between columns so the space from the containers edges disappear, and then you define a standard padding for your columns as a columns gap? You can define a distance different from 20px, so a padding different from 10px. You can even define on the columns placed on the container edges to have no padding on those sides. This way you have total freedom to adjust all columns gaps, you just need to have a different excel worksheet or the calculations. Keep the good work, cheers from Portugal!
When you say it like that it sounds small, but its actually only a few hundred pixels left and right and on bigger screens people don’t always full screen their browser. Besides that: For most content it’s better to not be too wide, otherwise its hard to read. And yes, you can use different break points or even work with % like I said at the end, but 1120 still looks good. Take a look at other big websites from big companies. Most of them leave lots of white spacing. It guides your eye and makes it look clean. Also really important.
Excellent thought process. Although I have seen a few vids from this channel I never subscribed to the channel. This vid has now made me a subscriber. Good on you guy.
That's an awesome video. I was doing web development for a year, but this is the first time I hear about these standards. Thanks a lot for the great content.
Awesome video Rino! Thanks for taking the time to explain the widths and create the resource page. I also wondered why Elementor created that default spacing in the columns, but all makes sense now. I like to work with a baseline grid of 3, so I'm glad you did one for 1260px 👍🏼
Great video. Do you know why on desktop only one of my containers are not able to stretch across the full screen? I have set it to ‘full width’ and setting to ‘Elementor full width’ as well.
Hi Rino! Thanks for this video!, i have a question though.... should i setup the page layout in Elementor to 1120 or to 1140? Not really sure if i understood it. Thanks!
More of that man! This in depth video format is so good 😍 I’ll share that with my colleagues. I can relate so much since we’re also struggling heavily with pixel perfect design with elementor, as well as with angular. Keep up the great work 👌
Thanks a lot - that made so much sense. I was constantly fighting against my own margins & padding using Flex containers. Now everything flows very nicely.
One thing I noticed when setting elements gap to percentages: this doesn't work on the horizontal spaces between elements. I had to manually set vertical padding on containers, creating more work.
For top and bottom padding I don’t have a simple workaround. For padding left and right its easier to use the Boxed Container width and put it at 90% for example.
Thank you so much for taking the time to do this and all that amazing content you created. It helped me a lot. You got a new loyal subscriber. Thank you for your hard work!
Can you please tell us, what is then the ideal sizes of images? I mean what sizes should be uplodaded in WP and what sizes should be generated from WP / Elementor? Thanks so much!
Thanks, very enlightening tutorial. One inquiry... At that 1:31 mark, there appears to be an element that is a wavy Bezier path in Elementor in the Hero background area. Is it just an illusion to my eyes with a graphic... or is it really adjustable? If so, can you share how that was done? Thanks.
I like 1140. Put a 30px margin on left and right and you’re left with 1080, which is in turn divisible by every number from 1-10 except for 7. I generally use 30px gutters instead of 20 though
Mind is blown!! I always have troubles understanding margin and padding becouse i don't make sites often, but this is genius. The quarter has fallen, thanks!!
Thanks for the explanatioon of the Ah Ha moment. I've found like you that this often occurs well after you think you fully understand something where a new design starts fighting you forcing you into a deep dive. The ability to see this, resolve the solution then teach others is an ability that few have. Thanks!
@@rinodeboer I'm going back into my underconstuction WP site to rebuild as I want to use containers to build up a stable environment. In this video you indicated that Elementor Pro's new version containers are not ready for prime time. Are there any other related new WP or Elementory features that are not mature enough yet to rely on.
Yes, the container needs some work. Site settings need work as well. They don’t work well with all widgets. And we need a loop builder for posts. If all of those are fixed I think we have a pretty great system with Elementor.
@@rinodeboer the question is whether it's 'good enough' to use at this time and that any work around for the 'deficiencies' is down in the noise. I hate to bang my head against something that should but doesn't work. As blog posts will be an important upgrade to the site is the lack of a 'loop builder' (what ever that is) a problem and if it is released will backing it into the site design be a problem?
Yea, that’s always the question. Every system had its advantages and disadvantages ofcourse. If you want full control then code is always the best option. Elementor is just more efficient for most websites. But when things become too complex then code is the way to go. I only didn’t get your last question. Could you rephrase that for me?
Rino! 😃 Hope that you and the family are all very well sir🙏🏾 Love the vid 👍🏾 Keep up the good work, try not to work too hard ☺️ Have a great day/afternoon/evening 🤭
Hi, 3 photo related questions. Should a photo for the full width of the whole background never be larger than 1400 pixels? Or is it the safest way to have well optimized max 300kb photo of 1920 pixels wide as the website will scale for the high res screens like 4K ? Why do Elementor have in the Media Library an option of 2048 pixels wide when importing photos to the canvas? For the full width of a container 1120 pixels wide, will it be enough for a high quality render of a photo to have the same size of 1120 pixels wide? I’m a photographer learning Elementor to build my own website but to also to understand my customers needs better.
Thanks Reno, I've been pulling my hair out wondering what is wrong with my layouts. I have been working on a Design System for Elementor, hopefully as a pre processor taking a set of design rules and from user/client input, generating a series of templates that could be imported. Then when the containers feature was announced or experimented with, my work went on the back burner, but fundamentally because of this layout issue. Thanks again for your good work
I have a 2 column line that looks equally spaced on some computers, but on some other computers, the spacing is skewed with one picture drifting off more to the left. How can this be corrected?
Hey Rino ,i am new to wordpress and Elementor and i need your help cauz i am not able to increase the image size and adjust it without disturbing the other container and its a hell of a work adjusting it by absolute positioning 😢
Wow, you did a lot of work. I was thinking many times how to calculate it in Figma and after that use it in Elementor. This is wonderful, so thank you and I'll be waiting for container video. I use it already but I belive you give us again some amazing tips. :)
THANK. YOU. I think I love you right now. We've been struggling with the box size/columns size and whats best for elementor. This video helps a looooot!!!!
This video is very helpful in. Keep it up; I loved it, buddy. Even though I had a big issue with this; you solved it because responsive is always a challenge at present due to a lot of devices with different sizes
Been tired of elementor for a good time. Glad someone is bringing a competition. Breakdance is a wonderful one. It’s gonna be better than elementor soon if this company doesn’t change.
So my question is this based on the 1140 and 1120 grid that was so helpful I must say but my question is do we have to set our Website layout to 1120px again since each column automatically have 10px padding I think it already gave us the right and left padding will need we just have to insert the widgets and the maintain the 1120px we need so what do you say? 😊 I think this is most necessary in our Adobe XD or Figma projects like you said
I've tried this and it works but I have an issue. On Tablet and mobile, with a 4-6% gap, it works and creates that gap between if side by side but not below if stacked. Should I manually add margin or padding? Because with the gap applied on desktop, that is fine, and not having the issue.
LOVE IT. Your vids are BRILLIANT. I'm new to elementor, used another theme since 2015 - your logic and videos are helping learn Elementor so well. Thanks you ❤❤
You are awesome Rino! My partner and I have a design agency and you just hands down changed our entire design system using elementor pro. You got two more loyal subscribers and you should be proud of the impact you're having on the community. THANK YOU ◡̈
Wow, that is super awesome to hear. Thank you so much for sharing 🙏🏻
Ive probably watched this video ten times in the past year... You create great content. I'm an old school designer at this point. I'm 44 and have been a designer for over 20 years. Thank you for your content.
Great to hear! Thank you
FIRST OF ALLLLLL....YOU TELLING ME I HAD A MAC FOR ALL THESE YEARS AND I NEVER KNEW SPOTLIGHT COULD BE USED AS A CALCULATOR lmboooo I subscribed!!! Your videos are the best. I literally never knew that OMG
Thank you so much Rino! You have just saved my life! I've spent the whole day to figure out how to divide columns evenly...
Echt respect dat je niet alleen een korte video hebt gemaakt, waarin je laat zien dat 1140px niet goed is, maar dat je zelfs het probleem helemaal hebt opgelost met een geweldige instructie voor designers. Top gozer ben je toch
Dankjewel man!
@@rinodeboer ik dacht al dat je Nederlands was, ik ben laatst van Joomla na Wp gegaan en elementair pro gekocht. Moest dus veel weer opnieuw leren. Wat heb ik veel aan je gehad. Bedankt.
Fantastic. Thanks Rino. Manually setting the 3 layouts across desktop/tablet/mobile is one of Elemtors biggest drawbacks. Whilst it's great to have the ability to change those values manually, having a logical default setting that produces an elegant visual design (as you have suggested) would be a huge time saver.
As a newish designer, I’m always excited to learn new things. As a nerd, this video makes me so happy. FINALLY, I understand the default 1140. I’ve been learning the 8pt grid system bc my brain must have consistency and structure. I have no idea yet how these will work together, but I thank you so much for explaining this so well (and for figuring it out lol!)
This video arrived at a good time because I was wondering what size to use for overall width, gutters, etc for desktop, tablet and mobile. I was actually using 1100px until I became educated on the subject, but now I'll be using 1120px moving forward. Thanks for the clarity, as well as the incredible time you invested into this video.
hey, Rino! that was indeed a lot of work! nice job with the sheets and the measurements page! looks like a good reference and good starting point! thanks for sharing! it would be cool to also see a version of these numbers using the 8px grid as basis (where all sizes and spaces are divisible by 8).
Yes! He is so very generous with his time and knowledge!
You are the best man. No one explains deeply like you. No one.
My goodness. I'm just shaking my head. This. Is. In… CREDIBLE! Thank you SO much for not just taking so much of the challenging head-energy out of this challenge, but for breaking it down like you did. I'm on your site… I'm just blown away. I'm trying to take a Photoshop mock from our designer, right now, and adhere to his gutter spaces (which looks about 60ish pixels apart). Gonna study your math. Incredible work!
Thank you for shedding light on something hidden right under our noses. It all makes sense now and this will help me transition from the "old" Elementor to the new container methodology. You're a breath of fresh air, Rino!! Thanks for the amazing insight!
You're so welcome!
Mind blowing! Been working with Elementor (and deleting the padding) for 5 years. You deserve the fame 🚀
Wow haha awesome
Man, this has changed my life right now while I watch the video. Why isn't this video featured in the Elementor website!! lol this is amazing and everything now makes sense!! This is so perfect. thanks so much!!!
I'm really happy your channel exist, you always teach me and help me a lot, i'm from Latin america, native spanish speaker, but your english pronunciation is SOO understable, the best! i love that, with you i feel i'm listening and undertanding you like in spanish hahah thanks for existing
That’s so cool to hear! Thank you very much 🙏🏻
@@rinodeboer
I LOVE your geeky enthusiasm over this :D You are so unique and good at explaining, that I return to your channel over and over again. :)
OMG! This is alot of great information. Thank you, Rino, for taking time to put all this information together and share to the world. You're an inspiration! I look forward to watching and learning from your content. Definitely will recommend everyone to your channel and your website! 👍Take care!
Great tut Rino! I’m looking forward to the new rollout of the container element! That being said, I’m not holding my breath as it’s been taking forever!
This is why Bricks is gaining ground so quickly! The container element was almost from ground zero! Elementor really should have had this ready to rock by now!
Hi Rino, great video, I also love the 8 px System, and it works well for me. I am glad you are talking about because it is one of the key starting point people don't tend to think about. Great Work thank you
I love all your videos. You are a fantastic guy. Elementor needs to put you on their payroll.
2:40: Considering I do not lke the mandatory 10px outside side padding for section layouts (and have a little tendency to overengineer things), for this I would divide by 2 the desired margin/padding between items and add that as a side padding of the parent container while also using that value for side margin/padding of each item (in this case 10px), in this way each item can be a *repeatble pattern* while having the desired gap. This eases the layout edition if you add/remove elements (if you want a similar section just duplicate and add/remove items) and now you no longer need to handle external side margins. This works if the parent container is the section itself, in this way the side padding is not visible since the screen is usually wider and the padding gets outside of the content widespan, this also works as a safety margin when the viewport width is between 1024px and then content maximun width (1140, 1200, 1400px, etc.), otherwise the items ends touching the screen borders. In fact, this safety margin can be used for the all responsive sizes.
This definitely is not needed when using container layout since you can directly use flexbox column/row gap immediately and let the browser calculate everything else, for this I use a pattern where I have a container as a section wrapper with one or multiple row/content wrapper that handle the desired inner padding.
Thanks a lot for your time and tips! This makes so much sense to me for calculating space correctly to make a website responsive.
Wow - fantastic video. I just checked out your channel and subscribed. I don't know how I haven't clicked on any of your videos before, lol! Honestly, I am replacing my default RUclips "Elementor tutorials" search with your channel - I'll be looking here first! So much great content. Your presentation style is lovely. Straightforward, concise, easy to follow and understand, with no "filler talking" to constantly skip through while keeping your content enjoyable, relatable and "human". Huge kudos to all the work you do. I'm excited to watch more videos and finally get my new WooCommerce shop designed and launched so I can shut down my sub-par Wix site. Over the past few months, I've been back and forth between 20 different themes and builders, not to mention the countless plugins combos... I've finally settled on building with Elementor Pro and Hello theme (barebones/using Elementor Themebuilder with minimal plugins); with your amazing guidance, I'm feeling much more optimistic and confident. Thank you! Keep up the phenomenal work!
Your comment made my day. Thank you very much! I put a lot of effort in my videos so this is really cool to hear 😄🙏🏻
Smart man. Thanks for figuring it out. It always bothered me. Now I understand why Elementor was doing the spacing.
Thanks, Rino! And thanks a ton for adding those calculations to your website! Elementor should add Flex and Grid to their new update and that would fix such headache :)
Ontzettend bedankt Rino! Ik ga de gids die je hebt gemaakt gebruiken voor al mijn projecten vanaf nu want ik ben altijd onzeker over de juiste breedte op desktop etc. Nogmaals heel veel dank voor al het werk wat je hierin hebt gestoken :-)
Truely speaking, you work really really hard. You deserve LIKE. Actually, from the beginning of my learning, I search for a perfect guideline for container but I didn't. Little bit I learned from your one old clip and Now I am clear about this. Thank you.
Thank you for the compliment 👌🏼🙏🏻
Oh my... working with containers creates a new problem. Each container adds another 10px of padding. Can't wait for your Container Video and an update of your grid methodology.
You can turn this off in the settings now. But I have already seen some new problems. So yea, I will make those 2 videos you mentioned. 🙏🏻
Man, thanks so much for this video, literally no one on RUclips has explained and showcased this better. I personally usually use the 1260 grid, i find it a little more esthetic, and man im glad you included this. Thanks again Rino!
Better to use 1240 then you will get column size without decimals
610 if using 2 columns layout
400 if using 3 columns layout
295 if using 4 columns layout
232 if using 5 columns layout
190 if using 6 columns layout
very basic thing in web to understand is the box model. its crazy how many designers don't even try to understand margins, padding, borders, width/height. good for you fixing this mistake for yourself.
😉 Hey Reno how are you doing you've been doing very great and I never for once regret subscribing to your channel and i would even recommend you to others without hesitation thanks so much Man. What I love most about you is the fact that you don't create video just to gain views you give us the content we need a heart for you ❤️💕
Thank you so much for this explanation! It blew me away. I did have a question though. Maybe I am over thinking this but if you set your site settings to 1120 instead of 1140, do you need to change your breakpoints as well? I would also love to know more about the additional breakpoints and how you use them in your process. I have not found a video on this yet.
Interesting insight, however, the flexbox and grid features let the browser worry about those calculations. Even while trying to determine when each box should wrap using flex, flex basis and min-width can take care of it. I don't think it's a good idea to hardcode the sizes of the boxes based on the number you want to use.
I hope that this is how it is going to work in Elementor’s container. Right now there is no option for this in the container when using wrap unfortunately. Or did you find a way to do it?
Yes, that was the previous approach, now with flex is flex, no pun intended 🙂
Agreed. I think he is speaking here as a designer to other designers who are laying out static content on an artboard, and who can't use flexbox to manage the sizing. Developers aren't concerned (or shouldn't be concerned) about any one specific screen width. We have to make it work on all widths, and so we use responsive units and tools like flex and grid. What is 4 columns on desktop will probably not be 4 columns on mobile, and in between, those columns will constantly change width. There is no such thing as a fixed column width in responsive design. I find most designers don't seem to get this, or just don't have a way to account for it with the tools they have available.
Fantastic! I love how thorough you are! And, as a videographer myself, great setup you have over there, the sound, staging, and lighting is perfect. Now if I could just hire you to help me take my site to the next level lol :)
I keep mine at 1140px, which works perfectly. The reason it works perfectly is that when you set your parent container to "Boxed" with the default 1140, the containers inside will all have 10px padding all around by default. Therefore ending at 1120 total.
Hello, amaizing tutorial.
But where i can change it?
Thanks for your help.
Living with pixels to one day become pixel perfect. Thank you for this lesson. Awesome!
I also struggled with this for a while. To deal with the extra pixel spacing issue on the side of the columns, I set the column gap to “no gap”. Then you eliminate the extra px gap on each side.
My design team has built a few designs on the 1140px grid but most often I find we set the width at 1380px. You get so much more space to explore the design.
Really great tutorial to break it down. I've been using percentages instead of fixed pixel widths since the flexbox containers came out with great success too
I always have issues with Elementor with a full width hero image. It looks great on mobile and tablet and laptops, but on large monitors it all goes off the screen and gets cut off....
OH My Goodness this is one of the best responsive tutorials i have ever seen things finally makes sense thanks so much
This video is insanely helpful! I’m new to web design/development and this was some information I’ve been needing! I appreciate you for using your time to share this with us! 🙌🏾 Thank you so much!
You can set the gap in px and then let the boxes stretch and fill out the available space using flexbox. You have that available as size in Elementor.
Been looking for these measurements and just as I need it, I get the answers from you! Thank you! Big help!
This drove me crazy and I looked everywhere for answer or recommendations of best practice, but I couldn't find any proper explanations. Thank you for this video! PS. I also remove the 10px padding every single time 🤦🏼♂.
Haha it drove me crazy as well. Thank you 🙏🏻
Thank you very much, Rino. VERY USEFUL information. Ι have been struggling with containers on responsive (tablet and mobile): full width and percentage, (85 for tablet and 90 on mobile) does not always work. Also, on desktop the across screen background is lost. The background is grey with a 1200 page in the foreground
Have you noticed that containers have changed (maybe with a version change)? Create a new default container that's 100% and Boxed and it's now at 1140px with no inner padding. The 10px padding is now at the far left and right of the container, at the edge of the screen. Now, adding inner containers, this is where the 10px padding is added. So your pixel chart still applies except for the one full container at 100% has zero padding. I think this works and actually makes sense.
Just about to do a website redesign. I think you've saved me so much frustration - THANK YOU!
Sir, it's complex to explain but you make it very easy for us to understand, Thanks.!
Hi , lot of of work in these spreadsheets:) we use display: grid; template-column: 1fr 1fr; gap : 20px 1140-20; 1120/2=560; using bootstrap is your issue;
It's awesome 👍👍👍 I solved my 90% of confusions....
Please also make a video on how to optimize speed of website while using Elementor...
Elementor makes Website too slow
Great explanation as usual.
If I understand you at the end you still have a 10px distance from the left and right of the container edges. Why don't you define at the container level (or section) no gap between columns so the space from the containers edges disappear, and then you define a standard padding for your columns as a columns gap? You can define a distance different from 20px, so a padding different from 10px. You can even define on the columns placed on the container edges to have no padding on those sides. This way you have total freedom to adjust all columns gaps, you just need to have a different excel worksheet or the calculations.
Keep the good work, cheers from Portugal!
Isn't 1120px too small for 1920px screens?
You can use different breakpoints, for widescreens, desktop , laptop
When you say it like that it sounds small, but its actually only a few hundred pixels left and right and on bigger screens people don’t always full screen their browser. Besides that: For most content it’s better to not be too wide, otherwise its hard to read. And yes, you can use different break points or even work with % like I said at the end, but 1120 still looks good. Take a look at other big websites from big companies. Most of them leave lots of white spacing. It guides your eye and makes it look clean. Also really important.
Excellent thought process. Although I have seen a few vids from this channel I never subscribed to the channel. This vid has now made me a subscriber. Good on you guy.
That's an awesome video. I was doing web development for a year, but this is the first time I hear about these standards. Thanks a lot for the great content.
Thanks for the email Rino with the link to this video. It makes so much sense now!!! Cheers. Joss
Thank you for your deep dive on the 1400 stuffs!!! You save many of us whose swimming in the UXUI sea~~~~~~
This was really a great insghts. How i've underestimate these calculations all these years. Thanks
I really appreciate it. I was suffering for so long, but finally I found you. Umuahhhhhhh Buddy, thumbs up.
Awesome video Rino! Thanks for taking the time to explain the widths and create the resource page. I also wondered why Elementor created that default spacing in the columns, but all makes sense now. I like to work with a baseline grid of 3, so I'm glad you did one for 1260px 👍🏼
7:10 why Elementor doesnt make this directly to 1120 as default setting?
Great video. Do you know why on desktop only one of my containers are not able to stretch across the full screen? I have set it to ‘full width’ and setting to ‘Elementor full width’ as well.
Hi Rino! Thanks for this video!, i have a question though.... should i setup the page layout in Elementor to 1120 or to 1140?
Not really sure if i understood it. Thanks!
More of that man! This in depth video format is so good 😍 I’ll share that with my colleagues.
I can relate so much since we’re also struggling heavily with pixel perfect design with elementor, as well as with angular. Keep up the great work 👌
Awesome!
i am a little bit confused, should i change the site setting to 1120 and then follow the structure?
Thanks a lot - that made so much sense. I was constantly fighting against my own margins & padding using Flex containers. Now everything flows very nicely.
One thing I noticed when setting elements gap to percentages: this doesn't work on the horizontal spaces between elements. I had to manually set vertical padding on containers, creating more work.
I have the exact same problem with the bottom spacing and I told elementor about it when I met them at Wordcamp. So they are aware of it 👌🏼
@@rinodeboer Do you also manually add padding to each container, or do you have some black magic workaround? ;)
For top and bottom padding I don’t have a simple workaround. For padding left and right its easier to use the Boxed Container width and put it at 90% for example.
Thank you so much for taking the time to do this and all that amazing content you created. It helped me a lot. You got a new loyal subscriber. Thank you for your hard work!
That’s awesome to hear! Thanks 😎
Can you please tell us, what is then the ideal sizes of images? I mean what sizes should be uplodaded in WP and what sizes should be generated from WP / Elementor? Thanks so much!
Hello rino, Do you think you can make a video explaining on invoices to clients? How you create the invoice and the content in it, Thanks
Thankyou for the tutorial!, can we have some tutorials on font responsiveness? personally i had lot problem with font size
Thanks, very enlightening tutorial. One inquiry... At that 1:31 mark, there appears to be an element that is a wavy Bezier path in Elementor in the Hero background area. Is it just an illusion to my eyes with a graphic... or is it really adjustable? If so, can you share how that was done? Thanks.
Absolutely awesome! Exactly what I needed to create my website using proper spaces! Thank you very much, Rino!!
I like 1140. Put a 30px margin on left and right and you’re left with 1080, which is in turn divisible by every number from 1-10 except for 7. I generally use 30px gutters instead of 20 though
I use 1140 but my gutters are 60px because i like space and air around my elements. Its also divisible between almost every number except 7.
I have been using containers thinking it was all good but some pages have gone crazy. And i trird turning containers off and the pages are now blank
Mind is blown!! I always have troubles understanding margin and padding becouse i don't make sites often, but this is genius. The quarter has fallen, thanks!!
Thanks for the explanatioon of the Ah Ha moment. I've found like you that this often occurs well after you think you fully understand something where a new design starts fighting you forcing you into a deep dive. The ability to see this, resolve the solution then teach others is an ability that few have. Thanks!
Well said! I agree. Thank you very much for the compliment.
@@rinodeboer I'm going back into my underconstuction WP site to rebuild as I want to use containers to build up a stable environment. In this video you indicated that Elementor Pro's new version containers are not ready for prime time. Are there any other related new WP or Elementory features that are not mature enough yet to rely on.
Yes, the container needs some work. Site settings need work as well. They don’t work well with all widgets. And we need a loop builder for posts. If all of those are fixed I think we have a pretty great system with Elementor.
@@rinodeboer the question is whether it's 'good enough' to use at this time and that any work around for the 'deficiencies' is down in the noise. I hate to bang my head against something that should but doesn't work. As blog posts will be an important upgrade to the site is the lack of a 'loop builder' (what ever that is) a problem and if it is released will backing it into the site design be a problem?
Yea, that’s always the question. Every system had its advantages and disadvantages ofcourse. If you want full control then code is always the best option. Elementor is just more efficient for most websites. But when things become too complex then code is the way to go. I only didn’t get your last question. Could you rephrase that for me?
Rino! 😃 Hope that you and the family are all very well sir🙏🏾 Love the vid 👍🏾 Keep up the good work, try not to work too hard ☺️ Have a great day/afternoon/evening 🤭
10:34 Truly i haven't heard anyone mentioning that, but it is interesting to learn this
Awesome work mate, I will endevour to change all my websites using your grid bootstrap. Lots of work, this will not go un-commiserated.
Hi, 3 photo related questions. Should a photo for the full width of the whole background never be larger than 1400 pixels? Or is it the safest way to have well optimized max 300kb photo of 1920 pixels wide as the website will scale for the high res screens like 4K ?
Why do Elementor have in the Media Library an option of 2048 pixels wide when importing photos to the canvas?
For the full width of a container 1120 pixels wide, will it be enough for a high quality render of a photo to have the same size of 1120 pixels wide?
I’m a photographer learning Elementor to build my own website but to also to understand my customers needs better.
Thanks Reno, I've been pulling my hair out wondering what is wrong with my layouts.
I have been working on a Design System for Elementor, hopefully as a pre processor taking a set of design rules and from user/client input, generating a series of templates that could be imported. Then when the containers feature was announced or experimented with, my work went on the back burner, but fundamentally because of this layout issue.
Thanks again for your good work
Fantastic!
hello Rino watching again this video after a few time and I get lost...who add 10 px right and left for each row? Thanks
I have a 2 column line that looks equally spaced on some computers, but on some other computers, the spacing is skewed with one picture drifting off more to the left. How can this be corrected?
Hey Rino ,i am new to wordpress and Elementor and i need your help cauz i am not able to increase the image size and adjust it without disturbing the other container and its a hell of a work adjusting it by absolute positioning 😢
WOW !!! one of the most useful tutorials I have seen - EVER! thank you so much!!👏🙏💙
Wow, you did a lot of work. I was thinking many times how to calculate it in Figma and after that use it in Elementor. This is wonderful, so thank you and I'll be waiting for container video. I use it already but I belive you give us again some amazing tips. :)
THANK. YOU.
I think I love you right now.
We've been struggling with the box size/columns size and whats best for elementor.
This video helps a looooot!!!!
Great to hear!
OMG you are a genius. I just watched 2 of your videos (and subscribed as they are both great!) and I'm going to rework all my pages right now!
why use fixed pixels for design? you should use rems and % !
Thanks RINO - Great Video - I used your links to order Siteground Hosting and Elementor Pro to show some appreciation.
Thank you very much! That means a lot 🙏🏻😁
Big Respect Rino! I'm learning more and more from you. Thank you for everything. 😊💙
Thank you so much for all your help and fantastic tutorials. You are so pleasant to watch! Please continue the great work! :D
That's why i'm always in trouble splitting columns. Thanks, very helpful.
This video is very helpful in. Keep it up; I loved it, buddy. Even though I had a big issue with this; you solved it because responsive is always a challenge at present due to a lot of devices with different sizes
I always use % widths.... isnt that better for responsive layouts?
Been tired of elementor for a good time. Glad someone is bringing a competition. Breakdance is a wonderful one. It’s gonna be better than elementor soon if this company doesn’t change.
So my question is this based on the 1140 and 1120 grid that was so helpful I must say but my question is do we have to set our Website layout to 1120px again since each column automatically have 10px padding I think it already gave us the right and left padding will need we just have to insert the widgets and the maintain the 1120px we need so what do you say? 😊 I think this is most necessary in our Adobe XD or Figma projects like you said
I've tried this and it works but I have an issue. On Tablet and mobile, with a 4-6% gap, it works and creates that gap between if side by side but not below if stacked. Should I manually add margin or padding? Because with the gap applied on desktop, that is fine, and not having the issue.
LOVE IT. Your vids are BRILLIANT. I'm new to elementor, used another theme since 2015 - your logic and videos are helping learn Elementor so well. Thanks you ❤❤
Rino, this is nothing short of pure genius, thank you for sharing :)
Thank you very much sir!