Web layouts using sections
Learn how and why to use Webflow’s Section, a layout element that extends across the full width of the browser window. Sections are like chapters in a book. They neatly organize content and stack on top of one another by default.
With Sections, you can create separate blocks of content, change the styling of elements nested inside by styling the Section itself, and enable 3D perspective for elements inside.
Video transcript
Web layouts using sections in Webflow is one of the most fundamental structural patterns you'll use. In Webflow, Sections are full-width block elements that stack vertically to create the major zones of your page — a hero area, a features section, a testimonials row, a footer.
Inside each Section, you typically place a Container to constrain and center the content. The Container limits the maximum width and keeps everything readable on wide screens. Inside the Container, you use Div blocks, Flexbox, or Grid to arrange your actual content elements.
This Section → Container → Content structure is a reliable pattern that most Webflow sites use. It creates clean vertical rhythm on the page and makes it straightforward to apply full-width background colors or images to a Section while keeping the content centered and contained.
You can also have Sections without Containers when you want content or images to truly span edge to edge — like a full-bleed hero image or a background video. In that case, the Section itself acts as the layout boundary.
As your layouts grow more complex, this foundational structure keeps your page organized and makes responsive adjustments at different breakpoints much easier to manage.
