Editor X. Unstoppable. | After Party | Guy Creates with 100VH Split Scroll

hi guys hi everyone it's super excited to be here um thank you so much for joining me um and actually taking the time to come and see my demo i hope you have an amazing time watching the demo of the main event and um this is now us going and diving in into editor x and actually trying to build stuff and see how it works and i hope through me you could feel kind of the environment and how it is to play around with it so i'm going to start sharing my screen uh but before i do so i just want to shout out to nadine who's here in the room with me she's on the chat so guys whatever questions you have write it down in the chat uh we'll try to address them throughout this tutorial but maybe we'll postpone some of them to the end of the session so if you have questions that are not answered stay tuned because we will answer everything at the end or as much as we can so uh i'm guy i'm part of the user experience team on editor x and i'm a ux prototyper and a designer and i'm going to take you through a special template and a specific page that i've designed and we're going to build it together from scratch again so let's start and i'm gonna share my screen and here we go so i'm just gonna clear everything for me and this is it guys so this is the template we're going to see how we're building today so it's an about page in a jewelry shop kind of template and you can see it has this cool effects of parallax scrolling which gives this kind of cool 3d effect and another cool thing that it has here is this sticky or split effect you'll see that when i'm scrolling down this image suddenly frees and looks like i'm only scrolling half of my page and at the end it stops and i can scroll all the way down to my footer okay so let's also resize this bad boy and see how it looks like on other breakpoints you can see everything is fully responsive so even on mobile it looks really really good and we're gonna learn actually how to do everything including all breakpoints so make yourself comfortable sit tight and we're gonna start this is editor x so welcome this is the environment this is how it looks like um maybe some of you have seen it before maybe this is your new time here um let's start and dive in all the way through um i'm just gonna say that i have these two parts already here which is the header and the footer you can see they are colored in green because they are masters part which that means that they throughout my website i can reuse them and whenever i create a new page they come automatically that's why i already have them i haven't added them myself they just came with this new page so i'm gonna make all this stuff here in this big main section now i wanna show you so basically here we have this about then we have this image here and then we have so one two three four five six seven kind of parts to the page so i'm gonna go here to my section and i'm gonna add a grid and the grid will help everything to be very responsive and also will help me to create this kind of split design i'm gonna apply grid and we said we have seven parts so i'm gonna make two columns for two sides and i'm gonna make eight rows so why the extra row will hang on for a second and when we get there i promise you'll understand why so i'm gonna add the grid and suddenly i have a grade on and i can actually edit it i'm also gonna open my inspector and i can remove a minimum height for that section i don't need it anymore since the grid is gonna hold the size of my content cool so i'm gonna do adjust grid and this time i'm gonna choose edit grid and this is the behind kind of under the hood of the grid system and we can actually take everything and kind of move it around resize our grid or change it and we can also do a lot of you know custom changes so i can change the units myself through the inputs and you see here that the grid uses something called fr units which stands for fractions so what's cool about fractions is that it divides the space automatically depending on how many fractions are used so you don't have to calculate in percentage how many you need so for example if this is one fr i'm gonna change this one to two frs it automatically becomes two times bigger than this no matter what is my breakpoint size so that's fraction to you but we're not gonna really change it because for the two columns i just want to keep it as is but we do gonna change we are gonna change all the rows so here we have something different going on we have something called min max and this is very cool i'm gonna give it a minimum height which will never be smaller than and i can also give it a maximum height now you can see here that we have like tons of different units to use from uh some are absolute some are relative so i'm not going to go over and explain all on them because you can go really deep into it and do a lot of very custom and crazy uh sizing in the grid but i do applaud you to go into our academy x it has lessons that actually explains explicitly about the grid nedina will also post later on at the end some link to the academy x so you can go and check it out we're going to use something called viewport sizes so viewport sizes actually are derived from the size of the screen so we have viewport width and height so let's take for example vw which is the width imagine we're gonna split the screen size into 100 pieces so one vw is one percent of the screen size that means that i can give it a relative sizing but to the viewport so if i'm looking in a mobile or on tablet on no matter what device i'm looking at from it's gonna react relative to the size of my device so i'm going to use vh which is view height and i'm going to make 20 for the first one so we have this kind of small section here with the title and then i'm going to do some cool patterns so i'm going to make 20 vh again and then this row is going to be 70 vh why am i using 20 and 70 well 100 vh is exactly 100 of the entire height of the screen i'm watching it from so i want it to be just a little bit smaller because you see if i'm going to look at my design you can see that all the parts are not 100 the entire height of the screen so this wasn't 20 this one is 70 and again i'm gonna alternate and do 20 vh and then go and i'm going to make 17. and we're gonna keep kind of alternating with this kind of small size big size so again 20 vh and the last two are going to be a bit different i want this one to be 80 vh so i want this small one and this big one to be together i want them due to to do be 100 vh and the last one is gonna be 100 vh in total so uh you'll see why but this will be used for the sticky so hang on a bit and you'll get there we'll get there cool so i'm gonna click done and i already have this cool grid and we're going to use it to place all the content inside and actually create our own design so i'm going to start with the title and go part by part i'm going to click on the add panel and i'm just going to drag a title here i'm just going to throw it on my grid and i'm going to use the inspector this is like the heart of editor x whenever you choose something you see all the parameters and properties of the same element you're selecting so i'm going to choose i'm just going to align it to the center and i'm going to make sure it's 40 pixels from the top that seems pretty right and i'm going to make some changes to the text itself so i'm going to make it center and i'm gonna also change uh the kind of letter spacing so i'm gonna do 0.25 now i want to change uh the font of the of this uh this specific text but i want to show you something cool so i've done some pre-work for this uh tutorial so uh because this is part of a template it already comes with a design system behind the scene so if i open my theme manager you can see i have some colors from the template and i also have typography already ready so i have all these different kind of headers and sorry headings and text and it's already set up for the color and the right kind of font so i don't need to find the font i can actually use it here from the head this is like the theme kind of styling and i know it's going to be a heading 4. this is the type of text i want let's just change the content so it's supposed to say about and uh i want to make sure let's do the sizing again because the theme changed it uh i want to make sure that the sizing of my text is a little smaller so what i'm going to do i don't want to choose a specific font size i want my text to be a little more sponsored so i'm actually going to choose scale text and now the cool thing about it is that i can give it a range so let's say 18 pixels till 22 and the text yeah i hope you can see it but when i'll resize the canvas it actually shrinks a bit with the sizing of the screen and that causes the text to shrink proportionally so it doesn't have to wrap around and there's always room and it's kind of fitting to the screen size you're viewing okay so it kind of helps a lot with responsiveness cool so we have this thing going on let's continue with the other parts of our design so i'm gonna add some kind of image i'm gonna go to my media and again i already uploaded all the images and media i'm gonna use throughout the website that's why you're gonna see it already here in my panel and kind of ready for me to use so i'm going to drag this image and i'm going to put it in a specific grid area i want to make sure it covers two rows so right now it on it's on this specific grid area and the cool thing about it is that i can stretch the image and it will populate the entire space of it you see it populates two rows and half a cop like one column and i'm gonna do the same with a container so i'm gonna use a different approach to edit i'm just going to right click and i can choose quick add and add a container great now let me resize the canvas just a bit for us to see all the all the website because i don't want to scroll around all the time and i'm gonna put the container here between the big row and the small row and if you're observant maybe you realize right now why i use this certain design of the grid i'm gonna actually put stuff on a small row then on a big row and then i'm going to put something on a big row and a small row and this will create this kind of stepping effect that we see here in my design so that's why we have the alternation of 20 and 70 bh cool let's change some design about this uh container i'm gonna go to my design tab and let's give it this kind of red color and it also comes with an outline which i don't need so i'm just gonna make it make it zero cool let's add some content so i'm going to actually come here to this because this title looks uh the same way i want it to look already uh and i'm i'm using a macbook so i'm pressing command d uh for upc guys you can use ctrl d and it actually duplicates the element and i'm just gonna attach it here to the container and i'm gonna again i'm just gonna align it to the center and i'm gonna make sure it's 40 pixels from the top um okay well next now we need to add some paragraphs so uh again i'm gonna right click and i'm gonna go to quick add and just throw a specific paragraph here um now here on the side i already have the content i'm gonna use so first of all i'm gonna go to the title here and i'm gonna change the title to the new section and i also have the content here from the paragraph it's basically the same content you can see in the template template that i have shown here so let's space it out and change the design so i want it to be centered and it needs to be white because it doesn't look very clear on top of the red and then this one could also be white or should also be white awesome i'm going to make sure this is also aligned now i'm going to do something uh which is called stacking so basically when we throw stuff around in editor x they are not aware of each other they can actually overlap each other because they are not aware of siblings elements so to create some kind of awareness or kind of relation between them i can multi-select elements i'm gonna just make sure they're aligned and i can stack them together and now you can see they are actually aware of each other and they know exactly the amount of margin in between them and this is a very cool tool for uh responsive things that will push each other if there's not enough room instead of going overlapping over each other cool so i'm going to add another image here i'm going to go to my media i'm going to bring this signature here and i'm just going to pop it into my stack so i'm going to make sure it's at the bottom and i'm just gonna align it to the center now the cool thing about this image is that it's an svg it's a vector art so i can actually go to the design panel and change the colors to whatever i want so i'm gonna choose white as well because everything here is white and i'm gonna make it a bit smaller so i'm gonna make it 10 now i want to show you something that could happen um i gave it 10 which means it's gonna change on the size of the parent which changes on the size of their parents everything is kind of inherent from the size of the viewports that means that on very small viewports it can get very very tiny and i don't want that it's like too small so i'm gonna do something to prevent it i'm going to keep it at 10 but i'm going to give it a minimum of 60 pixels and i'm going to give it a maximum of 100 pixels that's uh that's the way that now i can prevent it from being oversized or too small so you can see i'm gonna resize it and it's gonna grow and shrink but at a certain point it's gonna stop shrinking or stop growing so that's a cool way to make sure things are aligned throughout your design the way you want them to cool um so now what i want to do i'm going to take this stack and i just want to make sure everything is spaced the same way so this paragraph should be let's say 60 pixels from the title and this one should be also 60 pixels and i don't need the margin at the bottom um i'm gonna take the entire stack and i'm gonna actually dock it to the center in the middle of my section on my container now when things get smaller and there's not enough room the text is going to wrap and you see it's pushing around stuff because of the stack but it can be at a certain point like all the way up at the like the edge of my container and it doesn't look very well in my opinion so i'm going to click on the container again i'm going to go down here in the inspector to the padding and i'm just going to add 60 paddings from the top and the bottom to make sure that no matter what we have some like breathing room for our designs so you see it always keeps it cool awesome let's continue with the rest of our design so we have this thing going on let's continue with the next section i'm actually gonna save some time i'm gonna click on my container and again i'm gonna duplicate it with command d and what i'm gonna do i'm just gonna use this drag handle and i'm gonna move it here and i'm gonna make sure again it's on two rows a small and a big one so i can just stretch it cool now let's change the design and the content so i don't need this signature anymore um and let's change the color so it's supposed to be a different color i'm going to choose it let's use this kind of lavender muted purple and let's change the text so again i'm just i have it prepared here i'm going to copy the actual content and i'm going to change it to the new one and i have this new text here going on so copying it as well cool now again i want to change it to black because it's not very visible on this kind of bleed kind of uh background but again i'm going to use a different approach i'm going to go all the way up here i'm going to right click on this title i'm going to choose copy element design and now my cursor is suddenly this kind of brush and i can actually click on the title and it will only paste the styling of this element and so it won't change the content it would just paste styling so just like that it became the right color and in this specific text i'm going to use the theming i have so i'm gonna choose heading two and that already changes the color for me and the font cool let's give it a sizing so again i'm gonna make sure it has a scale text and let's give it something like 40 pixels till 17 pixels okay cool so we have this thing going on um now i'm looking at this and i'm looking at the design and i think in here i have like too much headroom so i want to make this portion a bit smaller i'm going to make sure i'm choosing my section and you can see i see the grid lines on my canvas and i can actually go and drag it and just make it a bit smaller so let's do something like this i think that looks better kind of more concise cool now let's add another image so again i'm going to go to my media panel and i'm going to take this image and i'm going to make sure it's on a big row and then a small one and i'm gonna stretch it so that's a cool image and it looks good but we can do better so i want to give it this cool parallax effect you can see it here kind of gives it like we are peeking through the design and it's kind of three-dimensional so it's pretty easy i just go to the setting of this image and i'm going to choose scroll behavior here and i have parallax and it's going to recalculate it to give it the space to parallax and now you can see that the image changed a bit now to view the parallax effect we have to be on preview so i'll just do the preview and we should see the effect going on so yeah that's pretty cool so we have this kind of three-dimensional effect cool that was pretty easy let's go on we are almost at the end of the page of the design wise i'm gonna add another image so we have this beautiful model here i'm just gonna put it here and again i'm gonna make sure it's on two rows and i'm gonna stretch it now this image is gonna it should be sticky in the design but i'm gonna get to it in a few moments okay so just hang on uh we'll get there trust me i'm gonna explain why uh we have the final section so again i'm gonna go to this section because it's already most of the things our design ones are already there i'm gonna duplicate it again and i'm just gonna use again the drag handle to move it around and i'm gonna scroll here just making sure that i bring it to the right place again i wanna make sure it's on two rows this time it's gonna be on two very big roles but it's okay because we have a lot of content there and that's it now let's again change the content and design so i have the text here i'm gonna just grab it and i'm going to change the content itself sustainable future very ominous and nice very cool and interesting and let's change actually this text is pretty much the same so i'm going to leave it and we don't need the signature anymore cool let's go and select the container and again i'm going to change the background color so i'm going to choose this kind of orange and i want the colors to be black now because again it will be more visible on this kind of color so i just double clicked it and i'm just gonna rapidly change it to the black color and here we go cool now i'm gonna take this paragraph and i'm gonna copy and paste it and it already put it inside the stack and i'm gonna remove one paragraph the reason i did this is because in the original design that i've made you can see we have a paragraph like two paragraph and then a third one and in between they have images so we're gonna insert the images now in between all the paragraphs so i'm gonna go again to my media panel and i'm gonna bring this image here so i'm gonna just throw it here now in the design i made it's a bit more squarish so i'm gonna use the resizer here and it's gonna resize only on one kind of axis and let's make it kind of a square so that seems about right and again i'm just going to drag it on my stack and i'm going to make sure it's not on top of the title but between the title and the paragraph awesome so now i'm just going to align it and i'm going to make it just a tad bit smaller so let's do 50 and i hope you're already inside my head what is an image without being parallax image we know it's cooler you know it gives a lot of wow effect so parallax you know i love it and we're gonna actually copy and paste it again so command d i'm duplicating it and uh i'm again i'm inserting it in the stack above the final paragraph we're aligning it and the reason i duplicated it is because it's in the exact same shape that i want it to be for the image so now i can just click change image and choose the final image in my design and parallax of course so let's parallax it okay let's just preview one more time to see the parallax is working nice and to see how it looks very very awesome cool great so now we are only left with the sticky part which is making this image stop and then scroll with us so it's very easy i'm gonna click on the image and in the inspector i'm gonna go to scroll and i'm gonna choose sticky and that's it but i wanna explain first about how sticky works and we're gonna see it in a moment because you can again only see it on preview so you see i have this top offset this means that at a certain offset from the top of my page when i scroll down everything looks the same like any other image but when i get to a certain offset this in this specific case zero from the top it's gonna stick to the viewport and it's gonna start scrolling together with me until it enriches to the end of the containing parent in this case it's the section and i hope maybe now you understand why i left this kind of empty space here i kind of visualize it like a rail for the image to which is sticky to kind of slide on when it's sticky and when it's going to reach to the end it's going to stop and it can scroll all the way down to the footer so let's actually see it in action we've got a preview and you can see we're scrolling everything looks pretty much normal then bam it is stuck to the top and it looks like only half of our website is scrolling until we reach the end of the parent section so very cool awesome guys i'm hope i'm hoping you're excited as excited as me by now we are only left with the task of making it responsive in all breakpoints so don't worry it's not going to be very tedious um let's start doing the work and i'm first going to resize my canvas and just go into my tablet so in the tablet i think it looks pretty well so i don't want to change a lot i just think maybe the text can be a bit smaller so i can just change the text size and again i'm going to enter the to the text and let's change this from 18 to like 16 till 18. so i'm gonna make all the titles uh 16 till 18 and all the texts of the paragraphs i'm gonna make it smaller so let's do it 14 to 16. cool so i'm gonna do the changes throughout again 16 till 18 and this little guy um let's make it 30 till 40. so we've all changed that much but again now i think there's too much space here so i'm just gonna make sure i'm using this blue breadcrumbs to go to the section i'm just going to make sure i'm on the section so i can drag the row and make it a bit smaller so maybe something like that and we have the final text to change here so bear with me guys you're the best this one should be 14 till 16 and we are only final we already have final one final text to change so again 14 till 16. and that's it now i'm not sure you've picked on that but i've changed all the sizes but if i'll go to bigger breakpoints to the desktop it all reverts to the size we set at the beginning so i just want to make sure that you understand that in other very next one work the breakpoints work in a cascading fashion that means that when we make a change it only affects the current break breakpoint and the smaller ones so you don't have to worry about changes to override the bigger breakpoints but those changes have to be style changes okay so data or structure will be across breakpoints what do i mean by data and structure if i'm gonna take something out of a container or if i'm gonna change the actual text that's actually changing the data or the structure so it's gonna be across the breakpoints so when we'll go to the next breakpoint which is the mobile and in this case i really don't like the way that everything is so squeezed although we have this grid so everything resizes pretty awesomely responsive this is way too small and tight for mobile um i'm gonna actually change the grid and again i have this safeness of knowing that it's gonna affect only the breakpoint of the mobile because we are using css grid and it's considered as styling so i can even completely remove the grid let's even uh i'll show you in a minute how we actually change the entire grid and it will not destroy or ruin the grid and break bigger breakpoints so let's just do that i'm going to click on my section and i'm going to do adjust grid but this time you can see we have some kind of algorithm behind the scene that kind of recognize what uh layout we have right now and it suggests alternatives so i'm just going to use one column this time and just like that it changed everything to one column but i just want to show you i'm gonna go all the way back to desktop and we still have the original grid so nothing was destroyed in the process no grids were being harmed in the process so great we have this screen and you can see every item takes around two rows but we have some like extra rows here in the middle so i'm gonna fix that i'm gonna just take everything to the right position in the new grid i'm gonna click on this new container and i'm going to open my inspector and down here i have something called grid area so basically the grid area is the numeral representation of where things are inside our grid so we can see in what column and what row it's on okay so uh in this case i can see that this one starts on grid line 11 till 13. so i want to move it three lines up so let's do it eight and let's do it until um let's do it until 11 so it will take two parts so great and we'll do the same with this guy so i'm gonna to 11 till 13. and this guy is a big one so i'm just gonna go down and make sure it starts at 13 and finishes all the way down till the end and that's just like that we have a different completely different layout for our mobile than our desktop now the only thing i want to do um which changes in the design i want to take this image and i want to make it not be sticky because i think right now it's small and it's it won't be there's not even enough space here for it to actually be sticky so there's no need for it so you know what i like i'm gonna add some parallax so again i'm gonna go here and i'm gonna choose a scroll behavior of parallax cool so let's see what's going on and i'm going to preview the entire thing and you can see we have our amazing kind of layout for the desktop we have the sticky going on you can go all the way back to the tablet and we still have this cool kind of uh design going through and i can go all the way down to mobile and everything becomes one nice column with the parallax i like and that's it guys we have the full design and you can pet yourself on the back you've been through a lot with me and we finished an entire page um so this is it guys i hope you liked it i hope it was awesome and now it's your turn so i'm here for questions and adina is on the hot phone uh or the hot chat or whatever giving me all the questions and uh i'm here to answer whatever so then he asked how many break points do you usually set up great question vicki so i'm going to repeat the questions just in case you don't hear them vicky asks about the number of breakpoints what is the kind of standard amount so you can see on editor x uh we gave you three break points because this is kind of the golden standard uh we see that the these are the main devices that people use but understanding exactly what is the size of the device is very hard because there's so many devices these days that's why each breakpoint isn't it's an actual range it's not like a static screenshot but uh you can create custom breakpoints wherever or whatever size you want so you can create a lot more than three and i think for that question it's very dependent on your design uh i kind of see it as if each breakpoint in between is kind of like a place for me as a designer to decide on a different kind of art style for people or users to consume so i think it's very dependent on the design right andre asked um how do you swap rows what do you mean by swapping i'll try to explain what i think and i hope under that will answer you can let me know yeah so um there's a few ways to handle rows on the grid one adjust the grid so i can edit the grid and i can just uh again choose my uh rows i can delete them and add more and after i rechange or redesign my grid i can always go and like i did with the example select the elements and then assign them to the new grid areas so i want this to start from the second line and not from the first one if you meant how do i actually switch things around so again you can use the grid area here in the inspector and you can just assign different elements to different rows and it will again only affect a certain breakpoint and downwards skating awesome and lisa has a question about units of measure she wants to know when it's best to use pixels versus consensus versus wb okay awesome question so we as designers most of the time we are used to working pixels and we like to be pixel perfect and pixels can still be uh responsive it's okay to put absolute stuff i think if you have things that the size of them is very crucial to the design the actual dimensions you can think about using pixels if you have things that are kind of like conceptually uh for example i have this container so i know it needs to be half of the screen and it needs to hold some text so if it's going to be very big or very very narrow that's not something i concern about the design it will help me to make it relative now when do we use the vh versus percentage um a lot of times when we want things to fit uh in regards to the view size the viewport size we'll use the vw units um and percentage is if i want something to change according to the parent direct parent uh another cool thing i'm not going to elaborate too much but i can actually go to something very nested inside the parent and make it in v8 or vw so it will be relative to the viewport even though the parent is not the viewport maybe it's a section i hope that answered awesome guys so um nadina if you can also put in the chat the academy x um and guys thank you so much for being here uh thank you for being part of the event thank you for coming and viewing my uh specific tutorial and i wish you uh the best creativity and unstoppable power of creation in editor x please go inside have fun and be in touch with us because we really really love to be in touch with you users and hear what you want and what you have to uh to do and use and see how you use the system um we're gonna have this uh recording also available later on if you wanna see it again or share it so stay tuned and we'll let you know how to find it okay so thank you very much guys and hack on

Channel: Editor X

Views: 3,826

Keywords:

Id: hyGPZqUy0yU

Length: 35min 25sec (2125 seconds)

Published: Tue Feb 09 2021