Creating a hero section using Grid and the Wizardry Method in Webflow - Live Stream 9/30/2021

hey what's up everyone john here with web dev for you here to help you build beautiful websites without code in webflow so today we have another fun build we're going to be building this hero section you see in front of you and yeah we're going to be using grid for this and it should just take a few minutes actually this is a bit a bit more involved but we're going to go over some grid concepts and use grid to build this layout here so yeah i'll jump in and for anyone who's new here i run these live streams every monday through thursday from 12 p.m to 1 p.m central time where we go over everything webflow i cover how to build layouts in webflow i cover how to create animations and interactions in webflow as well and i also provide support if you need help with your personal projects you can drop a super chat and i'll be happy to help so hey dylan how's it going i'm going to cover your request from yesterday today so we do have an agenda so i'll go ahead and go over the agenda for today so first thing we're going to build this so yeah welcome to today's live stream it is september 30th thursday and let me go to the next slide so from 12 to 12 30 we're going to build the hero section that i just showed using grid and the wizardry method so this might be the last day we used the wizardry method but i might use it for other concepts you know maybe next week or moving forward then from 12 30 to 12 40 i'm gonna field any questions about this build and then from 1240 to 1250 i'm going to go over the e-commerce superchat from yesterday which is uh what dylan i was was asking about and from 12 50 to 1 pm we're just gonna have a general webflow discussion and i'll take on any other super chats as well all right so let's go ahead and go into the build so we're gonna be building this and again this is inspired off this wire frame here so i just looked at this wireframe and i decided to build it in webflow and this is just a really great figma file that i got from invol envato element and this is going to give us content for days i mean i'll be building a lot of these layouts just so we can we can get a lot of practice and web flow and you can see you can see how i approach different builds uh so for this specific build i did decide to use almost 100 or 100 v w like almost take up the entire viewport except with 10 viewport units of padding from the left and the right because this hero section is so big i decided to like use the entire available space in the viewport and then you know you could have this as a heading and then into the site where the content is you could have like max with containers of like 1440 or whatever your max with is so yeah this is what the build looks like here in in webflow and you can see i can make the screen much larger let's say 3000 pixels and it'll look the same across every screen and the reason for this is because we're using the wizardry method which allows us to scale up the site without changing the dimensions of the elements or without or basically the entire site scales up for bigger screens and i just realized i didn't change the color for these links so let me just do that really quick there we go that looks better all right so let's get into this build should just take a few minutes but we are going to use grid this whole section here was built using grid and actually like how i built this i will be referencing the site quite a bit because i used specific units for percentages and things like that for this grid alright so let's go ahead and the first thing i'm going to do is here on the wizardry if you go to wizardry technique.webflow.io and then go to documentation he has a cloneable project that you can use for your own projects so we can just click here and then say clone project and i'll clone it and this will just give us the the units that we need for the headings and the different things the the different units we need for for the wizardry method all right so this is kind of the style guide here and basically the way the wizardry method works is that on the body all pages tag we're setting the font size to 1vw and then for the typography we're using m's and for the width and height of elements we'll we'll also be using m's so that no matter how how large the the width of the screen gets or the size of the screen the elements will scale will scale up and you can use containers and you know wizard timothy rick's added a calculator to help you stop scaling the site at a specific point if you have a max with and he goes over all of that in the documentation so i highly recommend watching this video and kind of reading through the steps by step this yes reading step by step through this and here are the units that will be um or the units that will require m's and and different um units here okay so we have the project and i'm just going to create a new page and i'm going to call this the home page and i'm going to make this the home page here so make homepage and then this will be i'll call this the style guide okay then we'll save that so we have a blank homepage here and what's great about cloning that project is that you know timothy already added specific properties to the sections and containers so we can kind of use those as references as we're building using the wizardry method so here i like to start start off all my projects with the section so i'm using quick find if you hold down command k it brings up the quick find or you can add elements by clicking the plus here and then selecting section and then for the class name i'm going to call this section i'm going to set the height to 100 the min height to 100 vh so it spans the full height of the viewport or the browser and then in here i'm going to add a container and give it the class name container alright so timothy already set properties to a container element so he added 10 m's to the left and the right for padding and 5 m's to the bottom and the top he also set a max width of 1440 but for this example i'm gonna have i'm going to use a hundred percent for the max width so we're using the entire available space within the section and there is going to be padding of 10 m's to the container so there'll be a padding of 10 m's to the left and right side of the the browser so that'll give us enough padding so like if we look at this site we can see we have this left side here and this right side so the site doesn't doesn't ever get too close to the left or the right it just stays neatly centered and again if we make the site larger so here i'm zooming out to make it larger and the site does not change that's one thing i really love about this method it just makes your site look good across different uh you know whether you're on a 13-inch macbook or uh you know a 27-inch 5k display your hero section will look the same on every device and the and the proportions from you know from where the elements are next to each other that will also look the same whereas if you were using pixels things might get offset from each other because they're not really relative to each other or they're not using the viewport unit as the base uh to scale the site um yeah so this this topic is a bit in depth but hopefully as you watch me build you can start to get a better idea of you know the viewport units and using m's and scaling the site and all that good stuff so i did cover this topic quite in depth last week and this week so if you want you know to keep learning about this method definitely watch my live streams from last week and this week and you'll see me cover the same ideas over and over again all right cool so so yeah let's go back to the blank project here so we have our container and also for the section i'm going to give it a flex setting of flux center center so that our container is in the center and now in the container i'm going to add yeah i'm going to add a div block and i'm going to call this hero wrapper and then on in this div block i'm going to add another div block and i'm going to call this hero left wrapper and i'll copy this and duplicate and then i'll yeah i'll copy and paste and then i'll duplicate this class and i'll call this hero right wrapper and then for the hero wrapper i'll give it a flex setting of flex and then for yeah and then align stretch and justify left or justify start and then here for this one i'm going to say grow if possible or actually not for this one uh just for the right side i'm going to say grow if possible okay and this will give us plenty of space actually for both of them i'm going to say grow if possible just so we can get an idea of what i'm doing here so now we have two columns we have the left and the right so basically the way i'm going to build this is we have this left side here with the heading the paragraph the buttons these kind of services text and the social media text here and let me just publish this project again because i changed the color of these social media links all right once it finishes publishing there we go all right so so yeah just change the color there so we have this left side and this right side and this right side is we're going to be using grid for this all right so let's just build out the left side first so i'll just add a heading and we'll use the text i'll just grab the text from here creative design and development for your product so let me just paste that right in there so for this font i'm using a font called sign um i really like this font and i'm actually not sure why it's highlighting in black that's interesting but uh yeah this font is called sign and i mentioned this yesterday but this is a site i like to use a lot it's called typewolf.com and you can do typewolf.com google fonts and look up the best google fonts that are available so i browsed real quick and i saw this one called sign and i really liked it for headings it looks really cool so it kind of has this creative type of look to it that i like so yeah i'm using sign for the headings so let's go ahead and install those fonts so let's go into the project settings i'll go into fonts and hit s to go to sign and then we have sign right down here and i'll just add this font so the other thing for these projects that i'm building i am going to make them cloneable so everyone has access to them and you can just clone into your project and look at the structure of the site and you know kind of see how i built it all right and then for the paragraph i'm going to use enter um i like using enter i might have used i probably could have spent a bit more time finding a font that has a bit less height to it because the sign font isn't doesn't have too much height but the inter does but i like inter it's close to helvetica and i like helvetica as well so we'll go into the designer so i'm using sign for the headings and some other text and then i'm going to use enter for the paragraph all right so let's go into the heading i'm going to go into the all h1 headings tag and then for the font i'm going to say sign right here and then we have the font that looks good and yeah so happy with that oops didn't mean to show that there um and i'll just close this tab here so yeah we have yeah so we have the heading and then the paragraph so let me go into the paragraph here alright so or into the hero wrapper left hero left wrapper so let's look at the structure so we have the hero wrapper we have the hero left and the hero right and in the hero left we have we added the heading so now in the hero left i want to add a paragraph element and for the paragraphs let's select the global tag and set it to enter okay actually let's see what other fonts we have ariel's kind of nice yeah i'm just looking for a font that's a little has a little bit less x height but isn't too fancy yeah we'll just use inter for now um yeah and then let me copy the text from here help more than 200 plus startups develop their website i'll just paste that in there and uh let's see so we have the heading we have the paragraph and then we have these two buttons so let me go ahead and add those so i'll go into the hero left wrapper and i'll add a div block and i'm gonna call this buttons wrapper i've been using ultra pretty cool too for headings ultra nice ultra google font let's just take a look at that oh yeah that's pretty cool nice all right cool so yeah we have the div block and i'm gonna call this buttons wrapper and i'll go ahead and add a button and i'm to call this primary button and for this i'm going to give it a padding of 3ms so now for any of the margin and padding since we're using the wizardry method we're going to be using m's for the width and height of elements or we will use percentages sometimes too for the width and height and for the yeah margin paddings we're using m's and for the font size of elements we're using m's as well all right so let me say three m's here and for the top padding i'll say one m and bottom padding i'll say one m as well so there we have the button uh for the background i'll say eight or for the border radius on the button i'll say 8 pixels and let me grab this color here and i'll just use this color in here and then i'm going to save it as a global swatch so i'll click the plus and i'll call this main color and boom so we have that that looks good and i'll say get started here for the text for this text we'll set it to enter okay so we have the primary button i'll hit command c and command v to paste and then i'll duplicate this class and i'll call this secondary button and for this i'll remove the background color i'll set the text to blue and we'll add a border and we'll set the border to blue okay and then i'll give the primary button here maybe like 1m of margin from the right yeah and that looks good all right let's start adding some margins so we can add some separation here from this so because when adding margin or padding to an element that's when i like to use custom classes if i'm just adding a heading i won't initially add a custom class because it'll just grab the styling from the global tag the global heading tag but if i'm adding margin not all headings will have the same margin and padding on different pages so here because i'm changing the margin of this heading i'm going to add a custom class called hero heading and then i'll give it a margin of let's say 1 m that looks good and then for this paragraph same thing hero heading and oh no not hero heading paragraph hero paragraph and we'll say one m or let's say two m's for the paragraph and the buttons that looks good all right so the next element is digital marketing and user interface alright so let me see here yeah these are services text so again i'm referencing this wireframe here so let me in the hero wrapper hit command k and i'll add a div block and the hero left wrapper i'll add a div block and i'll call this um services wrapper and then i'll just add some text here so i'll add a text block and i'll call this services text and i'll hit command c to copy three times and then for the services wrapper i'll give it a display setting of flux horizontal align stretch and justify start and then for the let me just put this over here so we have digital marketing user interface and business consultation so i'll just type in digital marketing user interface and business consultation all right and then for the text let me see what i did here for this site um yeah i used enter for this so for the text we'll make it blue and we'll say enter and we'll say one m for the font size okay yeah that looks good and for the buttons wrapper let's just add some margin of like 1m from the bottom or maybe 2m it looks good and then i'll add some some margin from the right of these texts okay so 2ms looks good all right and then for the services text we also want to make it all capital so under the more type options you can just select the all caps here okay that looks good and yeah i'll go back to this one and then we have the social text all right so i'll add in the hero left wrapper we'll add a div block and i'll call this social wrapper and here i'll add a text link and we'll call this social text link we'll set the color to this blue color and the type is going to be sine and i think i did two m's for this let me just double check yeah two m's that looks good so we have linkedin then we can just copy and paste this we have um instagram ig we have twitter we have dr for dribble and then we have be for behance and then i'll just give some margin of like two m's or maybe one m uh hey i'm car hello uh so today we're building out this layout here so again we're on the theme of you know using the wizardry method and kind of building layouts and we're going to be building this section here with grid so i haven't i haven't gotten to this section yet but it's going to be fun once we get to this section i'm going to be using grid for this all right yeah no worries no all good uh cool so yeah let me add some m's here for the margin or maybe two m's and let me just make sure that's what i did yeah two m's cool all right so yeah our site this site is looking good and there let me set this to display block and flex there we go all right so yeah that's the left side of the heading now this is where it gets really interesting and i will be referencing this site quite a bit because this did get a bit involved as far as like using grid for all of this so on the hero right wrapper we're going to use grid so i'll select the hero right and then i'll say here i'll choose grid for the layout and then for this grid layout i want to add uh three columns and two rows so if we look at this design so basically i was looking at the wireframe and i saw that we had you know these two kind of images here or these two elements and we have this large element in the middle so basically what we're going to do is a a 3 by 2 grid and we're going to unite the middle grids here in the center thanks emil appreciate it uh yeah so yeah we have our grid and for the gap let's also set it to 1m because if we want this to be scalable we want to use m's for everything and not pixels yeah so it didn't add a gap i will come back to the gap in a second so now we have a grid of yeah three by two grid and i'm gonna add a div block in each grid cell so i'm gonna call this hero right grid cell and i'm going to right click duplicate right click duplicate right click duplicate right click and duplicate so now we have five uh five elements and this grid cell is empty so that's an important thing to note if you have more grid cells than your design you'll want to leave some of the grid cells empty and this will this will become a bit more obvious in a second okay so we have our grid cells and now what i want to do is unite these two in the center yeah just like that okay so if you just noticed what i did here as soon as i united this middle these two middle grids now we have one grid here right so this became one element and then that sixth grid cell actually got filled so that's where like grid does take a bit of practice because you wouldn't have known that that last grid so i'll undo just we can see it so picture this last grid being empty right so what i think is happening is as soon as i unite these two or i make this this grid cell here at the top one cell it pushes this one to the sixth one and this one goes up here so again i'm just going to grab from the corner and stretch out this grid element and now we have one two three four five we have five elements inside of this grid so it's essentially a three by two grid but the middle one is one uh is using two grid cells so hopefully that made sense uh but now you can see using this this grid layout we can achieve something like this right because we have one two three four five elements yeah for sure i'm car i'll be sharing the read-only link and i will make these projects cloneable so after the video i'm gonna look at the design and see if i wanna touch anything up and it will be cloneable within my profile and i'll leave a cloneable link in the description it might be after you know a few minutes after this live stream is done excuse me sorry all right so yeah we have the grid cell and let's go ahead and start adding the elements so i'm just going to see what i did here just to make sure all right cool yeah so within each grid cell so let me see here hero grid actually yeah oh no uh this hero right wrapper okay so yeah instead of grit cell i call it hero right grid wrapper which is fine doesn't really matter the name there um yeah and that's basically it so now i can go in and i can go in and add the images so i have some images from unsplash.com and let me add those so i'll add them here and uh for each of these grid wrappers we can right away just add a border radius of 8 pixels because there's a border radius on these images okay okay so the other thing i want to do here is for this hero left wrapper i want to remove the sizing of growth possible the only reason i did that initially is so we could have some space as we were designing but i want this right section to be larger than this left section because right now these grid elements are a bit small so let me add the images and then showcase this because then it'll be a bit easier so i'll start with this middle section and i'll go ahead and add an image choose image and i'll select this image here set it to cover and center and then for this image here i'm going to give it a combo class of two then i'll add another image so let's do this one then this this one here i'll say three and i'll add another image let's do this one and we'll say top and then this one i'll give it a combo class of four and for this we'll do this one that looks good and then this one i'll say four oh this one was supposed to be three actually remove class three wait one oh no it is four okay say four and this will be five and we'll say this one all right so we have our images now for the hero left i'm going to remove the grow if possible and say shrink if needed and this just makes this section a bit larger and then i'm going to add some margin to the hero left wrapper so i'm going to say maybe two m's and let's see what i did here for the margin probably three seven yeah 7ms all right so yeah that looks good so if i preview you know this is what it's looking like so far and that doesn't look bad but looking at this design we can see that these elements are offset and they're different sizes so we just want to try to recreate that in webflow so the way i did this i use percentages because when using the wizardry method if you notice here he says you know for width and height use percentages or m's so percent percentages seem to work better as i was building this so i ended up using percentages let me just reference this here and yeah so for this one i said um a hundred percent width by eighty percent and yeah and then i gave it uh margin from the top so i said four m's from the top okay and then for this one and oh yeah and the other thing i did for the grid is yeah this part's important actually so for the grid for the rows instead of a sizing of auto i said min max and it turned it into fr units and basically what this allows me to do is move these units down like this so that these bottom images are smaller than these top images so now if i let me remove what i just did here remove all this we can see that these two images are smaller at the bottom and these two are larger so we have kind of this type of layout and basically i'm just using percentages now to resize percentages and margins to resize these images in the grid all right but that looks pretty cool just as it is you know like i wouldn't mind kind of that grid type of layout looks really nice but we do want to emulate this wireframe so um yeah let me go in here and yeah so for this one we did with 100 and actually let me see if do i need to apply with let me just set the height to 80 percent yeah we'll leave the the with auto uh what's the headline headline font with the cut g's this is sign so so reddick i went to i use typewolf.com google fonts he goes over some of the best google fonts and i saw the sign font s-y-n-e and i'll just type it here so sign and uh yeah that's the uh the heading for for this all right cool so we have the hero right grid and then for the margin at the top i'm going to say 4 m so it pushes it down and then for this one for the this image here it is seventy percent in width so i'll say seventy percent and then using grid i'm going to justify it to the right and and i'm going to say 1m of margin from the bottom all right so it just turns it into like a smaller image here in the lower left and then the same thing on the right let's see what i did for this uh 1m so cool kind of the same thing actually so the height is 80 and i just used 1m for the margin at the top and i'm going to assume this is the same so i'm going to say 70 percent here and i'm going to move this up i think i can say 7m from the bottom um 7m no okay i see so i'll say negative 4m from the top and let me just double check here no negative 3m negative three m and then four m from the bottom all right so yeah so then we have that layout yep that looks good uh so yeah that's how i built this layout in webflow uh we used grid and um yeah we used grid and yeah basically that's it great yeah hey dale uh thanks for joining appreciate it uh yeah i do these live classes every monday through thursday from 12 p.m to 1 p.m central time and these classes will also be available afterwards they are being recorded and they'll be available after the live stream as well i also provide support via super chat if you need any help with your personal projects you can just drop a super chat and i'll be happy to help with your personal project all right so let me just grab the color from this and i'll just use it for this section and i'll add it in here and we just have that blue color and i'll also call this give add this as a global swatch so i'll just say background for the color and yeah so we built this site let's check out the responsiveness so because we're using the wizardry method look how beautifully that scales right and if we're on a 3000 pixel screen we do not have to worry about sizing everything will look the same on a really large screen so i'll go ahead and publish this and we can actually test this like maybe it'll be a good idea to actually showcase what i mean and i'll use the uh the responsively app it's a free app and i think omkar mentioned this or someone mentioned this it's a free app where you can test the responsiveness of your site across different devices yeah grid is amazing for sure manuel uh amkar wrote actually let me see what he wrote here okay i can't seem to resize oops all right cool i'm car wrote i never use grid i always use div but look look in the stream i'll try for sure looks interesting yeah grid is very powerful definitely all right so i published the site and so i'm going to use this responsively app it is a free app you can just go to like type in responsively app and i'll showcase the the site but let's say we wanted to see the site on a let's see a 4k display actually let's add a 5k display okay 5k display and a 4k okay so let's do 5k and well it's not even going to fit inside the screen but let me enter the site yeah i usually use sizzy i've been trying this uh app it is a bit slower than sizzy so i might just stay with um but yeah here's the site on a 5k screen um everything's really huge but it retains the quality of the or the sizing of the elements so even on a large screen so maybe i can resize this like this yeah zoom out so this is what it would look like on a 5k display and actually if we wanted to retain the border radius as well we could use uh ms for the border radius so if i go back into webflow i'll click on this hero the main hero right grid wrapper and i'll say 1m for the border radius or maybe 0.5 m maybe 0.3 or 0.5 right if i use m's for the radius it retains the the border radius as well all right and let me go back into responsively and if i refresh yeah we have those borders uh still here i don't know how well how visible that is but yeah this is how it looks on um a 5k display and 5k is five five thousand pixels in width by 2800 yeah five one twenty by twenty eight eighty uh so that's where um the wizardry method is really powerful and then once we get to you know tablet what i could do here for the container is or for this hero wrapper is set it to vertical and let's see here and then for the section let me let me remove the min height so let me say auto and then for this hero wrapper let's see yeah i'd have to give a height to this hero right wrapper so i might do something like let me say shrink if possible and let me try 50 vh yeah so i'd make this half half the size there or half the viewport size and then for this hero this section i could or for the hero wrapper i'll just center everything yeah and then i'll remove this margin from the right and then for this hero right wrapper i'll say a hundred percent there we go this hero left wrapper i'll add some margin three m's or maybe five m's all right and then for this i think i would give it a flex setting vertical and then center yeah i like that and this i would say center services wrapper and i would remove the m's here and i would do something like 100 and then say yeah justify left and right and i might center this text yeah that looks pretty good and also enter this text as well cool so then um yeah so the way the wizardry method works is that on tablet and mobile for the body for the body um all pages we're using pixels instead of the vw unit on a tablet on desktop we're using the vw unit and that's why everything scales when we get to larger screens but as soon as you get to tablet we're using pixels and everything is sized in pixels and then mobile landscape that still looks good i might for the container i'll set the area the padding that's good three m's that looks good and then mobile landscape so here we're getting a little bit squished so let's see maybe i'll try setting this to one or wait actually let's see here yeah i would kind of mess with this i might change this this hero layout on mobile because it doesn't look great and the size of this i would definitely change to like something like that and i would center this text and these buttons i would make them vertical and 100 percent oh wait not let me undo that set it to vertical and i would remove the margin from the primary button and then add some margin to the bottom of maybe two m's something like that and then yeah i would redo this section for mobile because it doesn't really fit kind of fits on mobile landscape but i might change it for this too and yeah let me center this text here yeah it looks pretty good and yeah so yeah we have a fully responsive site and that's it let's change the colors real quick uh excellence i'm wait no worries the blisk app is also cool for responsive check yeah i've used blisk before definitely cool thanks emil appreciate it how's it going the font looks like an oppo or samsung type font is it an e-commerce site for a mobile company uh no so yeah i just use this wireframe so i'm building from this wireframe excellent and this is just going to give us content for days and so i look at this wireframe and then i rebuild it and i add my own styling in webflow and i use a typewolf you know to get inspiration for different google fonts and i looked at this font it's called sign and i really liked really liked it so i used it for this build and the paragraph text is enter so i use signed for the social media links here and the heading here and yeah the the paragraph text the button text and the services text is enter uh enter yeah all right cool so one thing i want to show really quick and i know i i went over time so i definitely want to get to dylan's request one thing about setting global colors we can easily change the color of the site so this site is called coolers dot co and it just offers a lot of great uh color palettes so for example if i want to change the color let me just find a nice color palette here so yeah let's say we'll use this one so i can copy this color go into webflow go into the into the section and then for the color go to the color here for the background i can edit and then just change the color here and then for the text i'll use this lighter color or for the uh the primary color oh i didn't save it shoot so i'll see if this looks good i'm just kind of winging it right now but i just want to showcase like global tags so we can just click click edit and i'll paste and then save so any element that has that global tag applied will change color and then i'll grab this color here this lighter color i'll go into the main color edit and change the color and then hit enter and then save and then for the text i can use this color as well oops all right and then for the text here i would have to make it a little bit darker for the primary button text yeah and that looks good cool so yeah that's it for this build you know we can change the colors easily i actually like that color for the font and we have the images looking good all right so yeah that's it for this build um any questions so far uh next i'm gonna go into uh the build for dylan we'll see how far we get there but you know this was the agenda so we built the hero section using grid and the wizardry method so now i'll field any questions i'll leave a few minutes for any questions and then we'll go into the build for dylan so let me know which color you like actually better i'm kind of leaning towards this but these images are a bit darker so the dark background with the images i'm not sure i'd probably have to get lighter images if i were to use this dark background but i think i like this lighter version with the images yeah i definitely like this this a bit better so i'll use this for my youtube thumbnail all right very cool yeah this was a fun build i actually learned a lot about grid here uh with this build and kind of using percentages to like you know resize things but look how beautifully that scales like that's amazing that the wizardry method allows for something like that and then what i would do like this would be the hero section for the site and then if i had other sections with content that's when i would use like a max with container and yeah and then use the code provided by wizardry to not scale this max width code i would use that to not scale the container on really large screens that way for larger screens the content stays in the middle but we have this beautiful kind of hero section that we can showcase uh why not add a dark mode switch on the site yeah definitely if this was a real site for a client or something like that we could definitely do that that would be pretty pretty easy and cool yeah definitely yeah i do love the the ability to switch between light and dark mode that's definitely a cool feature all right nice thank you thank eunice appreciate it yeah this was really fun like and it was pretty kind of straightforward i'm going to undo some of these colors actually because i like the lighter version yeah there we go um yeah it was pretty straightforward you know i don't know how much you caught of it but yeah it was just a three by two grid so three columns and two rows and i just did it the fr units here on the left and the right so the grid here at the top is larger the grid cells are larger at the top than the bottom and then i joined the grid cells in the middle to to create this layout and then i just used percentages to resize the the div blocks inside of the grid cells and i used margin to move them from the top and the bottom and we created this interesting layout all right yeah so we're almost running out of time here so let me get started for dylan i'll see how quickly i can build this but uh dylan we're gonna build a quick ecommerce site and it should be fun so let's let's see how far we get and i might have to download some images which i meant to kind of get before the live stream uh so we have a blank project so let's just let's just create an e-commerce site oh uh so roddick uh he wrote any idea how to do an automated dark light mode based on the mac settings probably too much of the custom coding that's a good question roddick i know you can do it with interactions in webflow but i don't know if there's any custom code that would like know if your mac is set to dark or light mode and then change the site accordingly that would be pretty in-depth if there if it was if there was a piece of code but i can look into it maybe there is but i know via interactions you can like create a toggle and then change the background color of elements in the text color of elements when the user clicks that toggle to rever to convert from light mode to dark mode alright so yeah let's uh let's see here um yeah let's create an e-commerce site so i'm just gonna click the e-commerce icon say let's do this and um i'll add a business address or let me close this for now um we'll just start building the site and basically yeah so let me let me find some product mock-ups okay cool i hit play on my live stream okay uh let me find some product mock-ups see how quick this i can find them uh dude all right let's just use photos uh product photo so i'll just use unsplash and i'm on my other screen here i'm just gonna see if i can find product photos and yeah i know that uh there's this this product let me see what's this no um yeah i'll just download images of a product i guess uh i don't want to spend too much time here on this all right cool we'll use these three okay so just bear with me everyone i'm just downloading some images that we can use for this ecommerce site and i have to resize them so i have these images here it's going to adjust them maybe make them a thousand pixels in width and save it all right so yeah so let's create the products first so let's create a new product and i'm going to call this um prod would you say product one um and i think it's lotion or something or or hand cream or just we'll just say product one um category i'm not gonna worry about the categories for now and we'll just add the main image so the reason i'm adding products is because i want to show dylan that if you're creating an e-commerce site then you want to add the image to the product and then add a collection list to the page and then you can style the collection list okay so and for anyone who's not aware dylan wanted to know how to create this layout here where it says fly where we just have three images in a row and this fly heading at the top so where is the site is it right here yeah so we added the image and we can set the price you know 29.99 and i'll save click create and i'll add another product we'll say product two and i might not have time to finish this so if i go past one o'clock everyone feel free to jump out and we'll say 32.99 click create and hopefully you're here dylan or you can watch this afterwards we'll say product three and we'll add this and we'll say this is the most expensive product so this one's 99.99 okay and we'll add the image okay we did that create and cool so we have our products and now what we want to do is add a div block so we'll start with a section and we'll just say 100 vh for in height to say a section and we'll add a div block and we'll call this we'll just say section but we want to add a con do we want to add a container uh now we won't add a container here so we'll just say section or products wrapper yeah products wrapper and in here we're going to add we're going to add a div block and we'll call this heading wrapper and in this heading wrapper we'll add an h1 so each one heading and we'll just give it the text fly and i'll go ahead and use that sign text because it was a really cool heading text and we'll say fonts and i'll say sign uh yeah that was a really cool font i might use it more often all right so i'll kind of go through this uh real quick dylan and so we're looking at the structure so basically i'm adding a section i added a products wrapper because in this products wrapper we're going to add the heading and the products collection list and then i added a heading wrapper because when i don't know just gives me more flexibility putting things in the wrapper because then i can apply a flex setting to this wrapper and kind of position the heading how i want it's just a practice i've gotten used to in case i want to i don't know add more things to this heading you know i can position things differently by assigning different display settings uh to this wrapper so for the wrapper with the wrapper selected i can be like okay flex center center okay and now this text is centered and then i'll change the text to sine and make it really large so i'm using pixels for this we'll make the line height unit list and set it to one okay then we'll add a border to this heading wrapper so that's another reason to add the heading wrapper because now we can add a border right so we have the border and now within the products wrapper i'm going to add a collection list and there we go and i'm going to reference the products collection list so right here i'll reference products and now we can add a div block into each collection item so if you're not familiar with collection list i recommend kind of watching you know webflow videos on collection lists you can just type in webflow collection lists and um you know it goes over collection lists in a lot more detail and how you can style them and add them but basically collection list allows us to reference the cms and use elements from the cms all right so in the collection item i'm going to add a div block and i'll call this product wrapper and for the collection list i'm going to give it a display setting or give it the class name product collection list give it a display setting of flex and yeah horizontal align stretch and justify left and then for the collection item we're going to say grow if possible okay so grow if possible now we have three div blocks in here so hopefully you kind of caught that i went a little bit quick there so we have the collection list then the collection item i'll just call this product collection item so for the product collection list we set it to a display of flex align stretch and justify left which allowed us to set the product product collection item to grow if possible so this will use up all the available space within the parent element so because we have three collection lists they're filling up that space perfectly okay so in here we can add a specific height to the product wrapper or actually let's just add an image so i'm going to add the mr let's add a heading so a heading and we'll give it an h3 heading and for the all h3 headings we'll say we'll give it sign as well and so we have the heading and for the heading we can just grab the name so get text from the product name so we have product they're not in order here so i'd probably just change the order or it doesn't really matter because it wouldn't be called product one two three okay and then i'll add the image and then for the image i'm gonna i'm gonna get the image from the main image and then i'm going to add a specific width and height to this i'll say 400 by 400 or maybe 300 by 300 and for the product collection item we can set it to flex vertical and center and for this text i might do something like um yeah we'll just leave that text for now like that and then i would add something like you know a text block and i would get the price and we'd do something like um product price for the class and i'll use sign for this as well make it a bit bigger and line height unit list set it to one so using unit list is like setting like 100 percent and let's add some margin so let me call this product image and we'll add some margin to the bottom all right something like that and then we could add an add to cart element and we don't want to buy now and that's fine all right so yeah i would work with the positioning here um yeah so it doesn't look great because i'd have to work with the styling here so i'm just going to remove the add to cart for now but you can you can do that if you want just add the add to cart and let's add the border so to the product collection item i'm going to add a border so actually yeah let's see how this would work let me add a border and let me see yeah first item dude okay so this is interesting yeah so we added the border and i don't know if you remember what i mentioned yesterday um yeah so for this fly heading we want to remove the top border because what happens when you have borders next to each other it adds kind of a thicker border so almost like a two pixel border so what i want to do here is for the product collection item is um oh let's see this is interesting i don't know if i'll be able to do this with the collection item um so let's see first item even items first item even items yeah okay so uh th this should work so i'm gonna say uh okay so product collection item let me remove the border from all of these and then i'm gonna say for even items i'll add a border okay so that just added it to the middle one so let me select the collection item i'm going to say for odd items let's add a border okay and then for even items we're just going to add a border to the top and the bottom all right perfect yeah so now we don't have any duplicate borders and we have that layout that was shown here in the ecommerce woodflow.com ecommerce uh this kind of fly uh style here or section and then for tablet we could just go in go into tablet and then i would do something like for the product collection list set it to vertical and then i would have to play around with the borders again like this so yeah so i'd have to say for like the odd items or the even items i probably have to remove the top and the bottom border something like this but yeah it just takes some playing around with the borders but i think yeah i think that's it removing the bottom and top on the even items gives us that one pixel border what if you wanted to have some spacing on the sides and top um yeah if you wanted them to be more boxy i guess they even odd item border yeah that's that is an interesting thing dale for sure uh what if you wanted to have some spacing on the sides and top yeah you could just for the collection list wrapper just add some margin so i would say product collection list wrapper and then just add some top margin or something like this like 60 and then for this heading wrapper um i would apply the border to the bottom as well like that or if you didn't want a border there you could remove it yeah that's basically it uh hopefully that helped um dylan i know i moved a bit quick i didn't use grid for this i just use used flexbox because flexbox made it easy enough to style this so if i were to change anything in the collection list like if i were to go into the e-commerce collection list and change the names of the product so lotion one yeah lotion two and lotion three i think it's lotion or hand cream or something like that uh or it's deodorant yeah uh you can see the text changes up here so one of them is called deodorant yeah kind of hoped i'd pick some cooler products but the deodorant yeah so you can see it changes here you can change the price and it would automatically automatically uh change uh so not completely stretched uh what if you wanted oh so far on the left and right side oh so what i would do for that i would just add a container so this was based off like a hundred percent 100 percent with height with site so i'll say container and i'll give it a max width of 1440 and place the product in there container what did i just okay yeah and then for the container i would say for the spacing i would say center elements and there we go so now the site is in a container and looks good all right yeah and depends how how large you want the container to be so yeah i added a section added a container and you can use the container element as well in webflow right here but a container is just basically a div block with the max width then we have the products wrapper inside the product wrapper we have the heading with the h1 and then we have the products collection list and then we added the product wrapper inside of the collection list with the heading an image and the price and we referenced all of these elements from the cms and we used flexbox to style the products collection item and added the border to the even odd items so we so we don't have duplicate borders which gives us two pixels for a border instead of one so all these borders are just one pixel which looks nicer and then tablet we just align things vertically and for mobile as well and then i'd probably make these images a bit smaller on mobile and also we want to set for these images we want to set it to cover or maybe uh contain oh no cover works well yeah it kind of depends what you're going for here for the images but um yeah that's basically it and for mobile landscape i might do 200 by 200 as well and maybe give it some more padding here okay i'm getting too much into design into the design a bit but something like that all right everyone i think that's it for this build thank you for watching and yeah yeah happy to help dylan i know that was a lot i covered a lot in in that quick uh overview of how to do how how to do this but hopefully that helped and you can rewatch it and kind of just see what i mentioned and you know the webflow university has a lot of great videos on these topics like collection lists and flexbox and hopefully that gives you an idea of how to structure everything for your site and yeah setting up an ecommerce site is fairly straightforward you can add your products and i do have another video on setting up e-commerce alright everyone i did go nine minutes over that was you know mostly to cover uh the site here for dillon but this was a fun build definitely enjoyed building this site here um super happy with it uh super happy with what i learned in grid and hopefully uh that information translated in this live stream uh yeah dylan feel free to request another super chat definitely i won't be able to get to it until monday so so uh so yeah yeah thanks dale appreciate it yeah i do these live streams every monday through thursday yeah nice so cool i think we covered everything we went over the e-commerce chat from yesterday and we didn't get to the general webflow discussion and super chats but dylan if you want to do a super chat today or monday if you want to drop it if you want to drop it today i can look at the question and prepare it for monday or you can drop it on monday and and i'll take a look on monday but very fun build i'm i'm having a lot of fun uh with these builds uh so next week let's go ahead and let's just pick another hero section or another build let me see here i might not pick it now i kind of want to spend some time with it and decide what i want to build oh this one looks fun yeah this would be a nice grid of logos and then we have these images here that might be fun but yeah i'll pick it on uh or over the weekend i'll pick the new uh layout that layout that will build and uh have fun with it on monday all right thanks manuel uh everyone enjoy your weekend dylan um yeah feel free to email me with the request or we'll follow up on monday all right thanks everyone for joining have yeah have a great weekend uh yeah sounds good dylan sounds good uh thanks so much enjoy building in webflow uh feel free you know as you're building if questions come up just you know write them down and and you know you can ask them on monday and definitely spread the word if you know anyone who's getting into web flow or web design and development definitely definitely let them know about my live streams uh because i'm trying to you know build momentum with these streams and try to get as many users and you know webflow enthusiasts in here so that we can all learn webflow together and we can uh and yeah i can provide help and support and yeah and just continue building in in webflow all right thanks everyone uh have an awesome rest of the day and i'll see you monday peace

Channel: WebDev For You

Views: 870

Keywords: webflow, web design, web development, live web development, live web design, building a website, learning webflow, webflow for beginners, website live stream, webdev for you, webflow live website build, webflow flexbox, webflow layouts, webflow web design

Id: Lni7pxpd9xI

Length: 71min 55sec (4315 seconds)

Published: Thu Sep 30 2021