Grid - Editor X's Most Important Tool | Editor X Tutorial

today i want to talk to you about grid which is my opinion the most important thing you need to learn before you start building your design on the editor uh in my opinion this is the tool that will give you the best solution for your design at least in 90 of the cases it will make your design process a lot easier and you can do some beautiful things really quick so what is it agreed so css grid is a layout module offer a grid-based layout system with rows and columns making it making it easier to design web page without having to use float and positioning so basically this is how grid look like and it's built from columns and rows and you can also add a gaps between the cells so i found a very good example to show use of grid in a very known website the dribble website in the home page they are using grid uh to to display all the content so if i will inspect it you can see very clearly that there is uh a columns here and rows arose basically it's how much the content there is but we have four columns here with a gap between the cells and you can also see that it's very responsive and you can change the grid layout depending on the screen width so it's very responsive so in mobile we have like one columns and tablet we have two columns and in desktop we have three and four columns all right so let's see in the editor how to use a grid so basically grid can apply only to a section and containers so if i click if i select section i can apply grid to it and if i add a container i can apply grid also to containers so let's delete it and let's apply grid to our section so when i click apply grid i i get a pre-designed presets for grids and i can always select a custom and create my own grid layout so let's start with three on three all right so basically we can control the grid from here you can hover the lines and you can drag it and you can also do it for rows but we can also adjust it from the edit mode so i go to edit grid and now i can clearly see my grid so the columns is each one is one fraction and the rows it's getting some minimum height basically this is because editor is protecting us from the section to be to become zero and then you you won't see the you won't see this section so let's say okay why why it's not like one fraction each one of them so i will show you why it has i mean mean mean height in pixels so if i change everything to one fraction you can see that nothing's happened right it's it's basically the same but it's only basically the same because this section has a min height of 570 pixels but if i will remove it and most of the time we want we don't need a height for this section because we want to everything to be responsive so if i will remove it you will see that the section become nothing and this is the worst case that we have because if let's say i go out with this mode i can see this my site let's let's say that we we have another section okay but now it's look like my site have header footer in one second but it's not the right it's not the truth because we have another section that we don't see it's like it's not existing it can exist so basically editorics is is protecting us from this behavior but i mean when you start to build but uh so if i will add uh back the mean height for 500 pixels the key the section is let's say back to life all right so we also said that we can add a gaps between the cells right so this is the horizontal gaps so i can add let's say 50 pixels and then now you can see that there is a gap between the columns and this one is for the vertical origins you can see that i have a gaps like this um another thing is the properties here we can change to we have lots of options here and the editor is have uh they are already calculating things for you before uh when i when i click present it all it automatically convert the one fraction to percent so you can see that it's very accurate okay so in pixels or in viewport width viewport height you can see that it's all different values uh min max which is very powerful and also min max content and you will use it a lot and there is also calculation which is uh very powerful and i will show you an example so i will reverse everything that i do uh i will keep this you know what let's make only one row so what i want to do right now i want to create a full screen uh like a hero section that taking 100 of the screen so let's add uh wait i don't need the three rows i just need one all right so let's add an a let's say we have like a hero image and stretch it to the section and now i will go to adjust the section and we said that wait i deleted okay uh let's do it again uh i want it to be 100 view viewport height right all right so let's publish the site and see what's happening so let's see the site so here i can see that i see the whole image but when i scroll you can see that actually it's bigger than my screen so why this happened basically it's happening because we have the header it's taking part of the screen right but i will also tell you that we have the wix banner that it's also taking part of the screen and this banner is 50 pixels so what we need to do we need to calculate the the editorix banner and also the header and remove it from the 100 view height so let's do it let's adjust the grid and go to the grid mode again and instead of 100 vh we will change it to calculation and remember that you have to use the parentheses here so we will we we need a 100vh but we need to reduce we didn't check the header height so let's check it so if i click the header i can see the height is 100 pixels but to be sure this is min height but to be sure let's change the auto to pixels and you will see that editor is already calculating it so we know this header is 100 pixels and the wix banner is 50 pixels so together is 150 pixels so let's remove it from our calculation so it's on 100 vh minus 150 pixels all right so let's publish the size and see so when i refresh the page basically i see almost the same thing but look when i scroll just a little bit i can also see i can see already the footer so that means this is like a perfect 100 vh using calculation so grid is very powerful and let's see a live example how to build something with grid so i saw this beautiful or his editoric spanner this beautiful design okay so basically 90 times 90 of the design you can break into grid and build it in the editor very easily so i take a screenshot of this beautiful design and i added to my figure okay so i always need to to know on which screen side i am working on so this is my screen side um okay so i just copy paste here the design and i add a red line here which is the height of my screen it's something like this but basically it's less because the address bar and the bookmarks and things like this okay so i want to take this design and break it into grid system okay so we have um one section okay i i consider all this design as one section because see the images is long and there is a relationship here between the letters so i think it's like a one section so so if this one section i will add uh agree to it so i need to i need to think how to break it into grid so let's first paint our our columns so i imagine we draw the line here i will set it to 5 pixels and give it some pink color alright so let's make this one transparent a little bit so we can view our design good good enough i can select it all right not it's hiding right let's leave it like this okay so we have like one column and two column but we have another column right here something like this so the image is in one column the b13 is another column and the text and this content is in another column and i can see that i have another column here um let's make it also pink so this is what i do okay i can select it right so here i can see that i have this is the first row and this is the second row okay so here is a a good tip if you're struggling i mean as long as you will do this process you will no need to to do what i'm going to show you right now but it's very good practice to do this uh so what i'm going to do i'm going i'm going to read of my my header because i don't need it so i click uh don't just don't don't display and also the footer and now i have only one section this is my design section and what i'm going to do i'm going to upload my design for this section only for this section if you have many more so split it to sections okay so i export it as an image and i'm uploading directly to my editor so let's change the image and i already upload my image here you will see it here see and i will unstretch the image and i will restore the the image proportion okay cool and now i will dock it to the left and set it to be a hundred percent and oh i have agreed so let's delete the grid okay we don't need a grid for now we will add a group to that okay so right now if we publish the site basically this is how your design should look like right this is like a website but it's an image we want to make it live so what i'm going to do i want to make this one agree okay so i will select the section and apply grid to it so i will start because i we already did the thinking so we need three columns and two rows right so i will go to custom and select three columns and two rows apply to this section great now what i'm going to do i'm going to just drag you can see you can drag the grid the lines wait i can drag it right now okay i will select oh i need to select this section so i select the section and you can see when i'm hovering the lines of the grid i can drag it and place it exactly where i think the grid should be right so let's do it from the adjust grid mode i think it's easier so i will go to my screen width and i drag this one to the start of the image here and the second one here exactly where i need it and here i want it to end here you know what let's let's add let's make it maybe like maybe we'll change it later okay so we can see that i'm already settings the uh the grid exactly as it's in my design right so you can see that this is a super responsive when i drag it when i reduce my screen width okay and i select again you can see the line is stay exactly where where i put it i mean uh the columns not the rows because the rows is affected by the image right now okay so let's go again to my original screen size and now the second thing i need to do i need to make the image very transparent so i will make it something like this okay so i can i still can see my design okay um but i can build on top of this image so let's start with the image okay so i will add an image to this to the second row you can see here that the image is now placing on the second column and end on the third column this is the third this is the second this is the first one and i can change the position of the image very easily from here okay so we need two to three okay and the image should be a hundred percent from the width of the column and i need to remove the margin now it's it perfectly here okay and now i will drag the image same as it's in my design in the background and i drag it here also something like this all right so the image is set and now we need this text so i already saved the text and i was struggling to find this font so i found something similar the platinum linotype okay so the font size should be something like this maybe it's too big see the line it will never be the same because it's not the same font but i will try to make it uh as close as it can be so [Music] well this should look amazing similar all right so the second thing we need to do is uh okay we have the text we see it on its own column and row it's on column one and row one and we need this p1 3 okay so i duplicate this one and change it to b you will see it here this is b and i will make it center and look how i i take it here with not even touch this one okay so i will set it to be like 100 pixels from top ab15 and i will change the position inside the grid you need to start on one two three so you need to start on column three and end on column four and now i will dock it to both both sides so it's get the width from the column and i will remove the margin i don't need any margin i just need a margin from top it says something like 50 pixels and remove from the right and now i i need to find a similar font type let's add let's make it let's set it to be something like a borton maybe maybe it's too bold i don't know um don't know uh okay let's let's stay with okay alvetica i think something like this all right so it should be really big 200 no it's not enough i need 300 maybe 350. all right something like this and i can drag it a little bit to top you know what let's keep it that way okay something like this and now i will duplicate it i did yes it's just getting far where is it oh it's exactly here no it's not this one we don't need uh where is it okay it's right here all right so it need to three on four and now i can drag it here something like this and oh no click stack all right i will change it to b1 and come on all right so b and we have one and let's duplicate it and this will be three all right so now we know that these three letters a relationship between them right because they are basically always together so i can stack them together and just play with the margins okay so each one of them should be 100 percent width and that said the margin would be 30 pixels here it will be 20 and i will remove the margin and set it to be a hundred percent and you can see that the stack element is created when i create a stack it's like a div warping all these uh elements inside of this so each one of them is 100 percent with and i need to make sure that the stack itself is on the right column right so this is the case and i will seal it perfectly inside its own column all right and i will remove the margin so now it's looks something like this all right so i'm just changing the h1 because this is bother me it's bad for seo and accessibility which we don't need to care but you know it's [Music] i'm used to it so okay from some reason i deleted my image so let's make bring it back so it should be this and like this all right so next thing i need to take the color of the text i will inspect it from here i will get it like this this is the pink color copy it i will go to my theme and colors and add a color i will change this one oh sorry i need to click here and change the theme of this pink and i need a brown also i will select it like this and change let's say change this one to the brown all right so now so now i can set the section color to be that brown and the text to be this pink great and also i have this text you need to update the pink color great and we need this image so what should i do i can copy it from here i can open it in new tab and i will make some zoom and i will copy it i will screenshot and take part of it and now i will change the image and upload it come on it's just too mega all right beautiful so i will just hide for a second this image don't display and publish site and remember that i designed for this uh this screen read so i should see it a little bit different so i will duplicate this one remember that this is hold only the image and refresh refresh it okay so it's not identical at all but we will get that but you can see that the image is almost perfectly placed in the same position all right so so if we will go to our design we create like this text the image and this columns with the text but here i can see i have uh it's a little bit more complicated than just the i mean to add another columns and rows to this part right so what if you remember we talked about that we can add a grid also to a container so what i'm going to do i will going to uh create a container here okay like this um add a slightly background color and i will make a grid like this okay so something like this okay and i will not add another row here because i will make this text element stack so they stuck together all right so let's add a container and for now i will stretch it okay and i will apply grid to it and let's add we set two rows right right so we need a text element let's take a paragraph and we need wait let's change the color to pink and i i won't be so accurate because i don't have the content and everything so i will not stop for any design all right so very not the the most accurate way all right so we have one text to text three text okay so let's create another one and this one should have should have a lot of text all right even more and make this text a bit smaller and something like this and now we can stack them together okay so i click on three of them and stack them together and i'll make sure it's on a hundred percent all right and we need uh basically something it's not the same but let's do let's delete it make it bold it'll be bigger and okay and now i can duplicate it it's not exactly the same but you know just for the layouting so it's not the most important thing so i can copy design and paste it here and now it's identical and i will place it i will copy paste this text and yeah and you can see that this is not identical right so i will change it to something like this and i think it's it's good enough for us just change the higher hierarchy the length of the text to be something like this all right so now all i need to do i need to make everything responsive right so i need to remove the background image wait i have a line here to the container so i will remove it above there and now let's inspect our section grid so i can see this row has min height of 780 so we don't need it basically what we need to happen is that this row the first row will take its height from from only the the title okay because this image is this image is continued to the second row and also this stack elements is continue to the second row so i need to set it to be max content okay so now you can see that if i will remove right there is something here that's taking space from this uh basically this line should be stuck to the text okay so let's find the element that causes cause this so we have the image this is the h1 big title this is the container which is stack so there is no way it's making oh basically this is the background image that we passed we can read get real or get rid of that of it and let's check our section it has mean height of itself you see let's remove it and what causes this row to be higher than it should be okay so let's add margin to this text basically it should kept something like um i need to i need to add so this is here's the rectangle here's the return so it's something like 170 pixels so let's set it to because we have an error here so let's say 150. oh sorry from bottom and from top something like 40 pixels all right so now the image we can see that the image is also uh error here so it's something like 145 pixels from bottom it's like it's pushing and okay it's look okay and this text element should be the same line as this one so let's add margin to it no it's too much 10 pixels all right so now what we need to do we need to make everything responsive so if i publish the site right now you will see that it's not scaling very well okay you can see that when i screen shrink the size this text is not responsive also this text wait where is there okay now you see it's not the most responsive thing so i will add [Music] text k is 118 pixels so 180 pixels let's keep it to a 10 and let's see what happens when we shrink the screen look how responsive it became great so let's do the same thing for these big letters so 380 all right so the most easiest way is to copy element design and paste it like this so i will do it again and let's publish it and see how it reacts okay much better right so when i shrink my size it's become uh more responsive okay so we can do the same thing for this one but before i will do it i will need to i need to make sure that each margin that i have i can convert them to percent and then it will be sorry but i need to do it in the right screen size so now everything will be more responsive this margin and the stock margin from top all right let's remove the board i think it's too heavy you know all right so same here i need to change the margin to percent and now you can see that this is uh a lot better so basically responsive you don't need to test like this you need to you need to test it like this because when this the screen width is uh changing also the height basically is changing so look how it's how responsive it became so but basically we need to change the we need to change the design in in tablet also because you see it's not working okay yes but in desktop this is very responsive we can easily change the behavior of the the the grid in different breakpoint very quickly so the first option is to click adjust grid and then you have like presets but because this design is more complex so i will do it manually so first thing first thing we need to to think how to break it okay so in my opinion i let's say that i want to keep the image and the big text here so i don't know maybe it's look uh better for for me but let's play with it so let's say we want now margin for 50 pixels from top also for the image but now i want the image to take two columns okay not three you know what also i want the these stack elements to be on top of the image okay so i don't need this column right i can delete it and you can see that i deleted here in tablet but in desktop it's still there see i have three here and only two on tablet this is part of the cascading room but where the stack is gone okay i just need to bring it to the front all right so now i want this image to be a hundred percent but i want to make it smaller so not hundred percent let's say uh 80 and i can drag it from here i need to select the section and i'll drag it to take this part and i can center the image like this and also the stack element make it center all right so now we have more room to this text but i think my decision is not the best uh let's think about something else we need more room for the text oh i have another idea so basically we can adjust this container grid cell let's edit and edit cells basically we can adjust grid and quickly switch it to rows and now i can remove the big margin to let's say 2010 here and 10 percent here also for this one let's add another margin from top and look what i can do right now i can basically let's make this text bigger sorry it's too big uh 18 all right let's make it like this and i can tell the image and the stack element to be sticky and then when i scroll it it needs to be sticky 50 pixels from top because we have margin so i set it to 15. and now i need to select the stack element and i know it's became uh it's behind the image because when you set element to sticky it's become the first one so i can arrange send it to back and select the stack element and i can see that it has a margin from top 70 i can set it to sticky to 70 pixels from top and now let's let's say that we finished to build our design for tablet and now we will refresh the page and i will go to tablet mode you see how how the design is changing look what happened when i scroll the image is come with me how nice is this so this is the the power of grid you can really design your you can you can break your design into a section and then you need to break it to grid and then all you need to do is position the elements in the most accurate way inside the editor and you can see that this is the image version right you can see that i can drag the image here and this is the image but this is the image version of the site the most accurate uh design that we we designed in some some design software okay and this is what i create like in i don't know 20 minutes okay and you need to remember that i don't have the the right font size and i don't have the right uh sketch file or figma or whatever the design file i just you know guessing what is going on here and i don't have the content but but you you can see how it's similar right and it's all i i mean if i shrink the the screen size okay if to something like uh a thousand and hundred pixels okay and i will go to the image and it it's not the same because everything here is scaling too much you can see you don't you you can't see you can't read this one but in general it's you can you can see the the big of the the the height and the width of the image and the text element it's like it's like very close if i will work a little bit more i will get the identical results the i mean in the most accurate way that i can so so again i think the grid is the most powerful tool of editorics and you for for you to be able to build a good website uh in most efficient ways more more close to your design this is the best tool you need to to learn so play with it a lot and when you could you when you will control it you can build an amazing site so i wish you good luck and i hope i was explaining myself and if you have any questions feel free to write in the comments and i will answer you happily

Channel: I Love Editor X

Views: 4,392

Keywords: editor x, wix editor x, tutorial, lesson, grid, how, to, build, design, responsive

Id: ZceCPs8--fA

Length: 50min 38sec (3038 seconds)

Published: Sat Mar 20 2021