How To Structure Websites Efficiently With Webflow

on today's video we're gonna talk about how to structure things correctly with web flow because this is the number one mistake that new web flow users make that makes their life really really hard using web flow so let's cover that today [Music] hey everybody what's up and welcome to another web flow weekly when I talk with my students of the web flow master class the number one mistakes that they do is structure their website incorrectly as a result of that they're working really hard if they're struggling making their website responsive they're struggling to keep design consistent and basically they're working much slower which ends up you know losing profitability on their website so I want to teach you how to structure things correctly and well it's gonna really make your life easy so I'm gonna start off with some kind of a theory behind it then I'll jump to web flow and show you exactly how I do this so let's jump into it so here's the number one mistake here's how beginners sometimes you do with stuff in web flow they the body is kind of the npt page that you get started with and inside they just throw in some kind of a layout tool which might be a grid or columns or a flexbox or something like that and inside of it they're putting down their content this makes life really really hard because you're gonna have to it's going to be hard to make sure that it looks consistently good on mobile and to make sure that it's consistent along the page and along multiple pages so here's the right way to structure you get started with the body inside the body you put in a section now the section is a full-width element and the use of it is first of all you can control its height you can change the color or at a background you know video or image to it you can even name it so that you can scroll to it or link directly to it and basically it's just even a good kind of SEO practice to wrap your section in sections so that kind of Google knows what's inside this section inside you put in a container now a container is an element that has maximum width and the purpose of that is that when you have really large screens you don't get the content all over the screen that would make reading it very hard so the content is basically and you'll see that with most designs if you're working on desktop the content is kind of centered in the middle so that it's not too wide across your big wide screen and so basically it's an element that has maximum width now inside of that you're putting in your layout and inside your layout you're putting in your content so that's basically the structure that you should follow throughout the page and throughout the whole website let me show you how to do that exactly in wet flow so let me jump into here there's a new project here there's nothing here as you can see I'm in the body tag I'm not doing I'm not adding anything to the body I don't want to change its background color I don't want to add padding to it nothing the first thing that was throw is I'll throw in a section and that section I'm gonna give it a general style and I'm gonna call section just because I want to reuse this over and over again I'll show you in a second why I need this style and what I'm gonna do with it inside that section I'm gonna add a container now web flow has their own container default I don't like it because it's maximum width is 940 that's too small for me and I think for most modern websites so I'm just gonna take a normal deal I'm gonna give it a style that I'm gonna call it my contain my contain and I'm just gonna set the so I'm creating my own container basically and it's pretty easy just maximum width here 1100 is my favorite as you can see now it's a little bit shorter but I just want it to be centered so I'm using this button here central element so now as you can see even if the website even if the screen is larger the maximum width here is you know one hundred one thousand one hundred now as you can see when it's getting smaller it's the container is getting smaller now remember I told you we need to give this style to the section now the reason is I want to give this section a little bit of padding something like 20 pixels so that when we're getting into responsive layout the content here in the middle is not going to stick into the edges of this page and I want this to be consistent throughout the website so that's why I gave the section itself a little bit of padding now that looks pretty solid and now I can continue so inside this container let's throw in let's say a grid let me remove this and I'll just call this grid two columns it's called this always rename your grid so to call grid and inside of that of course I can throw in my text so let me throw in maybe like a div here that's going to wrap some text and paragraph inside here let me just throw it inside this div here oh there wait a second sometimes when you're throwing things inside the grid you have to make sure that they're falling in the right way so note here on the navigator we have the grid inside here we have a div which is just containing this header and paragraph so let me upload an image and throw this image here okay so we have a cute image of a dog and we're throwing it here so basically we have a layout here that is contained in the center and when we're going into mobile responsiveness it will be pretty easy to it let's say at this stock go edit the grid say I want to turn this into one grid so I'll just remove this and as you can see it's already has this kind of like nice padding that we have here so this works well now now let's duplicate because a website obviously is a lot of sections so we might have one two three four sections obviously they're not going to have all the same layout but I can say that let's say this is the hero section so I'm going to add on this hero second another time another style it's called this hero section and now I can style things that are going to only be specific to this one so let's say I want the height to be a hundred percent vertical high - it will take up the whole screen and yeah maybe I want to Center this the content inside and I want to make the background a little bit more colorful now that's lovely so now we have this section and we have those section maybe this is that's called this a gray section because this is section number two and you know I want to make sure that it's 600 pixels height and maybe it has a gray background and I can change obviously the layout here maybe here I don't need columns maybe I want the content here to be centered right so I might have something like div that is called Center content and now I want to bring in a title and a paragraph and the center content everything it's just going to be centered all right so now note that what I have here is a consistent website that always has sections and it's really easy to navigate they're always contained to the same width when I'm turning this into mobile responsiveness it's easy to see that it's still contained within the same you know the same padding and everything is easy and structuring the website is going to be very very easy and efficient and correct so that you'll be able to maintain consistency and adjust for mobile responsiveness pretty quickly I hope that was helpful if you want to learn more about web flow if you want to be able to take your designs from sketch or whatever design software you're using into a web full website pixel perfect within hours make sure you check the web flow master class link down below I'll see you on next video [Music]

Channel: Flux

Views: 98,669

Keywords: design, freelance, tel aviv, ran segall, ran segal, רן סגל, work, life, vlog, startups, how to structure websites efficiently with webflow, ui, ux, body, section, div, container, column, web design, development, website, flux, ran, segall, image, layers, graphic design, product, tutorial, webflow

Id: zZMx_8FvjvQ

Length: 8min 46sec (526 seconds)

Published: Tue Aug 20 2019