22
May

Using sections in web design – Webflow tutorial



when we're talking about the structure and the layout of any particular page sections play a huge role when organizing our content sections keep everything neatly divided like chapters in the book and we're going to look at sections in two ways in the Navigator and on the canvas itself as we already know the body of our page contains all our content everything on the page is in the body and right inside the body we have sections as we click through these different sections in the Navigator here we can see to our left that sections are stacked vertically if we look on our canvas we see that each section is like a new chapter on the page let's say we want to add a section element to our page right between these two sections under the elements panel we can drag a section right onto the canvas in between these two sections and that's it that's adding a section by default sections take up the full width of the canvas and as for the height you'll notice that toggling preview makes our brand-new section completely disappear that's because this section has no defined height when you add a section the designer shows a little bit of space some height here so we can more easily interact with it but the section has no real height outside the designer until we tell it otherwise and there are three main ways to set our height for a section one we can add content here we can add a heading just drag it right in we can add a paragraph and we'll leave the placeholder text in there for now and we can add a button you can see the height of the section is already being defined by the content inside we haven't explicitly told the section how tall it's supposed to be we just added some content which pushes against the section from there we can set some padding some breathing room on the inside so our content isn't right up against the upper and lower boundaries and at any time since our content is going from edge to edge we can drag in a container that container goes right inside the section and can keep our elements neatly bound towards the center we're just dragging the content right inside the container the more you add photos of cats and Sir Patrick Stewart the height of the section is going to respect everything on the inside that's adding content to our section and that's where you can stop but let's cover the two other optional ways to do this the second method for setting the height of the section is to set a pixel value let's say 200 pixels but now we've cut off our content setting an exact height can be brutal to content so what we like to do in sections if we wanted to find a pixel value is instead set a minimum we're going to click on height and remove that style we don't want a set height all we have to do is set our minimum height to 200 pixels and though it looks like nothing changed it really did let's delete the content inside our section and you can see it's 200 pixels high it worked it respects the minimum height and as we add that content back as we put things into our section it's going to respect that content 200 is only the minimum minimum Heights we'll still respect the content inside our section what about 700 pixels well now we're in business even though our content isn't that height we have a minimum height of 700 pixels add more content add things that take us beyond that 700 pixel value the section scales accordingly so that's the second way using a pixel value to determine the height of the section the final way and this is one of the greatest things ever and it's especially common on hero sections on the top of the page is to use the same technique we used before the minimum height but instead of using pixels set the minimum height to 100 VH or viewport height and it does just that it sets the minimum height to 100% of your viewport we can even set our sections display setting to flex why because we can Center that container inside for VH we can put any number in here 90 would be 90% of your viewport 150 would be 150% of your viewport and so on and of course since it's a minimum height if you have content that you've added that pushes beyond the height of your viewport the section will scale accordingly so sections live inside a page body like chapters in a book they organize our content to keep it nice and organized and by default they take up the full width of our viewport

Tags: , , , , , , , , , ,

6 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *