Elementor’s default 1140px doesn’t work. Here’s why

hey guys reno here how you doing so i have discovered something quite huge about elementor and that has to do with the default 1140 pixels grid that elementor uses if you use elementor you know that when you create a new section or a container you always have a box where the main content stays in so when you drag in an element it stays within that box and this box which i've officialized over here doesn't change when the browser or the screen gets bigger or gets smaller but the sides do scale as you can see right here and this is actually a great thing because if that box was scalable for example like this then the content would just be too wide on big screens this is why most websites are designed like this and probably why elementor has this as default as well like i said the width of this box is 1140 pixels and this is not something that elementor has came up with but this is an industry standard back when i was in design school this size was a 960 and this was because the screens back then were smaller and had a lower resolution but still to this day many screens are 1366 in pixels not all screens are full hd so 1140 in pixels works great on most screens because you have a little bit of room on the left and on the right so i trusted the script with my heart you know in every design that i created i made sure that all of the main content stayed within that 1140 pixels only backgrounds and maybe some overlapping images would exceed that 1140 pixels i explained this in many of my videos and even in my adobe xd course and i never received a questioning comment about it and it worked in most cases but i have to admit that i sometimes had some trouble with this grid for example when you want to create multiple columns which is of course a very normal thing to do in web design so one column works it's 1140 pixels in in width of course two columns how do you calculate that first you have to know the spacing between the boxes well in many of my designs i use 20 pixels this is also very popular size to use and it's also default in elementor so when you want to know how big your box should be you can just calculate it really easily by doing 1140 minus 20 pixels of spacing between and then divide that by two as you can see 560. so then you know that your boxes should be 560 but then when you go to three columns you have two gaps of 20 so then the calculation should be 1140 minus 20 minus another gap of 20 divided by three and then this is the result so here you have your first problem because these numbers are not very nice to work with and in some development tools it's not even possible to create these kind of pixel values so what you then have to do is just make one box smaller and it's not ideal but i just lived with this and then elementor announced that they were going to work with a new widget to create sections called the container and with the container you have to do quite some calculations because if you want to use the wrapping feature you have to know how white elements should be otherwise you don't know when it's going to wrap to the next line so then i dived into the 1140 grid and now i understand how it works and it makes so much sense and i've been doing it wrong for many many years so i'm making this video for anyone that still tries to align their content to the edges of the 1140 grid because you think that that is the right thing to do but i'm gonna show you in this video that it isn't and if you don't understand this you're gonna have a lot of trouble working with the new container widget when it comes out in elementor so let's just get started [Music] so let's get started right away with the big shock the big realization that i had so the spacing between the boxes which is 20 pixels as default is not actually space between boxes but it's 50 space on the left and 50 space on the right of each box so every box has 10 pixels on the left and 10 pixels on the right instead of 20 pixels between the boxes and this is important because then the most left box no matter how big your box is has 10 pixels on the left and your most right box has 10 pixels on the right and your content of course always should be aligned to the columns and not to the space in between so this means that if you want three columns like this you actually have to calculate 10 pixels left and right on each box making it 20 over here 20 over here and 20 over here so you have to add an extra 20 pixels to the calculation and then you will get another number 360. and this makes a lot of sense because this is a number that we can work with so then i made a sheet in order to calculate everything so this first line is what we just did we align it to the 1140 grit we have two boxes of 560 in pixels and there's 20 pixels of space in between so there's one gap of 20 pixels as you can see 560 works no problem but with three boxes or columns or containers it becomes a problem already as you can see over here so when you extract that 10 pixels on the left and 10 pixels on the right making it not 1140 but 1120 then the calculations actually make sense as you can see right here and this is also the example so one box the smallest box if you want 12 columns is 75 pixels as you can see in my calculations as well so i created a fell for myself which is this okay let me show so with 1120 with two containers the boxes become 550 and here you can see those numbers so those numbers are the exact same numbers as you can see over here so now you know if you want a four column design that your boxes should be 265 pixels in width and this is the same in adobe xd in figma but also then in in your development tool like elementor or webflow and i don't know how webflow works instead of calculation but right now with the container it cannot calculate it automatically so you have to use the custom with feature in order to give this icon box in this example a specific width of 360. so here you can see 360. it's exactly aligned to the 1140 actually 1120 grid and if you want a four column layout like this four columns two 265 as you can see over here advanced 265 but my whole website is on 1120 so if you're working in elementor or whatever development tool you actually need to set up your website to 1120 especially when you're working with the container the new container in elementor which is not out yet by the way that's why my big tutorial is not here yet or you can add 10 pixels of padding on each container on the left and on the right but that's of course a lot more work than just going going to your site settings and then under layout just putting your main container on 1120 so that's what i did and if you don't use adobe xd body but you want to use these numbers then you can use this page i will put this link in the description i'm still developing this website but i've also made a live page so you can just actually bookmark this page and then use these numbers as well in your adobe your figma and or in your development tool if you need to work with these numbers again it depends on the technology you're using because in the current version of elementor we're still working with percentages for column width so we can't actually use these values but with the container you can so what i've also prepared on this page is all of these sizes that you may want to use so a 12 column layout and for the people that don't know why is it 12 columns well that also has to do with math because 12 columns 12 can be divided by 2 by 3 by 4 not by 5 and by 6. so that's why i'm not setting up my grid like this anymore just one column on the left and on the right but what i've done now is the artboard still the same is 1400 but i've used 12 columns and then the the gutter width which is the element gap or the spacing between the columns is on 20 the column width is 75 because the smallest block is 75 and then to the size is 140 instead of 130. so these are the actual numbers that you need if you're creating a new artboard in adobe xd or figma because if you turn on this grid which you can easily turn off of course and you want to create three columns you can easily just grab your rectangle be like okay one two three perfect sizes exactly the same in elements or and you're done or you want to create uh four columns you just make it one shorter like this one two three super easy to do and you start designing from here the only uh one that isn't available in the 12 column grid is the five column layout and that's why over here i've also included the five uh column layouts the one that's also missing is a seven but because seven columns is not best practice you shouldn't actually use that too often and also 12 columns the chances that you're actually gonna use 12 columns is very small i think the smallest one you should go in your design is six columns and this is also a bit embarrassing to admit to be honest but um this is probably the reason why elements are in the old version with sections and columns actually the current version if you're watching this video in the first week is using 10 pixels of spacing as standard in each column so if you don't know what i'm talking about let's just drag in an element like this you can see that there's a little space over here and over here which i always deleted in my tutorial so i always went over here and just unlinked it because i was like hey i need to align it to the 1140 grid right but no that's just not the case you actually need that 10 pixels if you want to align it because then 10 pixels over here and 10 pixels over here creates 20 so the 10 pixels that they had was actually perfect i feel so stupid oh my god i'm sorry for explaining it wrongly but again i've never seen anyone talk about it so i'm just happy that that i found this now and that i understand why my designs were never pixel perfect and let's now talk about the gutter or the space between the boxes because right now we have used 20 pixels which is the most default it's default and elementor many people use 20 pixels between the boxes but let's say that you have a website with a lot of content so for example a blog and you want to have a little bit more spacing can that still work well yes so if you go to my calculations sheet again what i've also done is created an option with 24 pixels of spacing so this for a blog for example can be a little bit too much if there's a lot of content on the website so let's say that you want to have a little bit more spacing so over here 24 pixels of spacing you can see the calculations over here it creates different numbers because if you use 24 pixels of spacing you need 12 pixels on the left and 12 pixels on the right of each column making all of the columns a little bit smaller and it's the same if you want to use 30 pixels so over here i've used 30 pixels and this is still in the 1140 container but on more luxurious designs you want a little bit more space right so here i have used 30 pixels between all of the boxes so then the smallest box becomes 65 and as you can see these are all the numbers i've also added that to the website so what you can do is go to this page and then click on grids and you can see other options over here so 1140 with 30 pixels of cutter and then here you can see those other values you can also see the examples of how it looks compared to the other ones so this will help you to make sure your designs are aligned and i don't know if you've noticed but there's one more option and that is 1260 with 30 pixels of gutter because sometimes it happens that your client says like hey i want uh the main container of the website well they don't call it a container but they want the website to be a little bit wider right so i've also added an option where the container is bigger again i've also done all of the calculations and it is with 30 pixels of spacing because if you have more space then i think you should have a little bit more gutter so a little bit more space between the boxes and to be clear you don't have to use these values of course if you think that the sidebar is way too big you can adjust it and use another number but then you have to calculate the things yourself but now you know how to calculate it and how it connects to your actual website and i've put so much time in this because i wanted to have a nice system for myself and a nice system for you guys so if you if you've learned something already in this video please let me know give me a like because this video costed me a lot of time alright now let's talk about mobile responsiveness so for mobile the story is a little bit different so the main content in the 1140 grid doesn't go wider than 1120 in pixels and that's good on desktop because you don't want the text to be too wide because otherwise the reading experience will not be as nice but on a mobile phone you don't have that problem and the last thing you want is to have the same width for the content on an iphone 5 compared to an iphone 13 pro max plus whatever so on mobile you want the content to scale so here we can't use pixels so that's why i've also done some calculations for percentages so what i recommend is to use percentages on mobile that's why i have created a layout for a phone and a tablet as well with some default values here i've used four percent of spacing on mobile and two percent on tablet and why is that well on two percent on a tablet which is bigger looks almost the same as four percent on mobile uh this is a little bit hard to achieve right now within the current version of the container i hope that they will change this in elementor but right now i just want to focus on the on the design so for mobile what i think you should do is just pick one of the the default artboard sizes that that adobe xd offers or figma uh for example one of these and then then just use the grid feature right here and for mobile i've used these values over here but the pixel values don't really matter because in your development tool you want it to skill so a mobile pixel perfect design is almost impossible if you have a better solution then please let me know in the comments but i think for mobile this is the way to go on mobile you also don't want a lot of columns because if you go to my calculations and then go to percentages you can see that four percent already creates a problem when you want three columns but three columns on mobile when does that happen does it really happen that you have more than two columns on mobile right because there needs to be content inside of it so i think that two columns is the smallest one but if you want to have three columns or four then uh four percent doesn't work but what does work is 3.8 because then you get numbers that are workable but again you in your adobe xd or figma you don't use percentage value so you can just use the standard grid and just add four columns like this and then use that to to align it and yes you can calculate how big it is compared to the width of the phone but that's just a little bit too much work in my opinion because it's never pixel perfect on a mobile phone anyways and on tablet i don't think you will go any further than four columns because otherwise it becomes too small as well and you're gonna use two percent of spacing another thing that you have to know is that you can see 90 for the main container over here and 85 for the main container over here because the container you also want that to stretch not just the inside so where you're working with elementor what you can do now with the container and this will be explained in my container tutorial in detail but you can put the box for example on 90 so then when the phone skills you can see the content also skills and that's of course what you want and it's the same on tablet so on tablet i think that 85 is good and for mobile 90. and one more thing before we go i know that you can also work with percentages on desktop if you want to i've also done those calculations because i think that people will say like hey right now you're already working with percentages on mobile and on tablet in your development too why not work with percentages on desktop as well well i've tried to do it but it's never the same as your design fail this is the closest one i got to 20 pixels i think that just the the conversion from pixels to percentages is kind of hard that's why i recommend for desktop since you're working with 1140 or 1120 anyways just work with pixels and then for tablet and mobile use that scalability and use percentages again how to apply that in the container will be in my container video it's not out yet because elements are still changing the um the container what i actually hope they're gonna do is make it so that we don't actually have to add in the values ourselves but that elementor can automatically calculate it so what i actually want elementor to do with the container is just have an option where you can just say like hey i want two con two elements on a row and i want two percent of spacing in between so that it automatically adjusts that instead of having to manually have to add these numbers over here and also on desktop and then this video will be less relevant for elementor but it will still be relevant for your design in adobe xd or figma so i hope that you saw the value in this more in-depth video it was very different from my other videos but i think it's really important because i like pixel perfect's designs and i know a lot of you guys do too so let me know if you have any questions or suggestions maybe i'm missing something let me know and i'm super happy that this video is now out because i spent so much time preparing this one thank you guys and see you later [Music] you

Channel: Rino - LivingWithPixels

Views: 87,016

Keywords: livingwithpixels, living with pixels, elementor, elementor grid, elementor 1140, elementor 1140 grid, 1140 grid, 1140 px, adobe xd artboard, elementor container, elementor width, container width, elementor container width, elementor container full width, max width, adobe xd width, elementor layout, elementor site settings, elementor full width section, elementor page width, elementor content width, elementor width control, adobe xd artboard size, figma layout grid

Id: X3LDAtqVLeo

Length: 19min 34sec (1174 seconds)

Published: Tue Jun 28 2022