EN IT
Home About Learn Blog

Build a Webflow Hero Layout: Sections, Divs & Flexbox

Beginner 23:43 webflowlayoutflexboxclassesbox-model

Lay the foundations of a hero section in Webflow using sections, containers, div blocks, classes, and Flexbox — the reusable structure almost every layout starts from.

Watch on YouTube

Key takeaways

  • Almost every section starts from the same three-part skeleton — section, main container, content wrapper — so once it's muscle memory, new sections come together fast.
  • A class is a reusable label with a list of style rules: change the rule once and every element wearing that class updates with it.
  • Building a page is really just decomposition — split the page into sections, split each section into groups, and keep going until a piece can't be split further.
  • Everything on the page is a box (the box model), and Flexbox is how you tell those boxes to line up in a row or a column and share space.
  • Inheritance means a child element quietly picks up certain rules from its parent — set text alignment on a wrapper and everything inside follows along.

Video chapters

  1. 00:00 What is a section?
  2. 02:27 What is a container? Classes, vw units, and the min() function
  3. 08:01 What is a div block? A reusable layout pattern
  4. 09:29 Heading wrapper: naming, the box model, Flexbox, inheritance
  5. 16:58 Image wrapper: uploading assets, alt text, compression
  6. 20:20 Building the social proof wrapper
  7. 22:44 Tweaking the layout
  8. 23:28 Outro

By the end of this lesson you’ll have the full layout of a hero section standing up in Webflow — no styling yet, just a clean, well-organized structure. And along the way you’ll pick up the concepts almost every future section leans on: sections, containers, div blocks, classes, the box model, Flexbox, and inheritance.

We’re intentionally separating layout from styling. First we get every element into the right place and the right box; the visual polish comes in the next lesson. That order isn’t an accident — it’s the habit that keeps complex pages from turning into a mess.

The big mental shift here is decomposition. A page looks intimidating until you break it into sections, break each section into groups, and keep splitting until each piece is trivially simple. Do that, and even a busy layout feels like a breeze.

How it works

Almost every section you’ll ever build starts from the same skeleton: a section (a full-width band, like a chapter of the page, that also adds semantic value for accessibility and SEO), a main container inside it (which caps the width and keeps content centered), and a content wrapper div block inside that (which holds the actual content). Memorize that trio — section → main container → content wrapper — and you’ve got a reliable starting point every time.

The word that ties it all together is class. A class is a label with a list of instructions attached. Assign the same class to several elements and they all obey the same rules; change one rule and they all update at once. That’s the whole reason Webflow sites stay consistent and fast to edit. Webflow even color-codes the style selector to help: orange means a value is inherited from somewhere else, blue means you’ve set it directly on this class.

Two more ideas do a lot of heavy lifting. The first is the box model: select any element and you’ll see a blue outline — that’s its box. The entire web is boxes stacking on top of each other or sitting side by side, and the properties you set decide how. The second is Flexbox, the tool that tells those boxes how to arrange themselves — row or column — and how to share the available space. Set a wrapper to display: flex, choose a direction, and align its children; that single move solves a huge share of everyday layout problems.

Finally there’s inheritance: set text alignment on a wrapper and the paragraph inside it inherits the value without you touching the paragraph at all. Knowing which properties inherit saves you from styling the same thing over and over.

How to use it

  1. Add the base structure. Drop in a section (shortcut: A, or ⌘/Ctrl + E → “section”) and give it the class section. Inside, add a container with the class main-container. Inside that, add a div block with the class section_content-wrapper.
  2. Cap and pad the container. On main-container, set a max-width (around 1920px works). For padding, use the min() function so it scales: set left/right padding to min(64px, 4.5vw) and top/bottom to min(128px, 9vw). The browser always picks the smaller of the two, which keeps spacing sensible from huge screens down to phones.
  3. Split the content into three groups. Add three div blocks inside the content wrapper: a heading wrapper, an image wrapper, and a social-proof wrapper.
  4. Build the heading wrapper. Inside hero-section_heading-wrapper, add a text label, an H1 heading, a paragraph, and a buttons wrapper holding two buttons. Set the wrapper to display: flex, direction vertical, aligned center. Set its text alignment to center (the children inherit it), and give the buttons wrapper display: flex with a gap of 16px.
  5. Build the image wrapper. Add an image, upload your asset, and either write descriptive alt text or mark it decorative. Compress your assets from the Assets panel (AVIF is the recommended format) so the page loads fast.
  6. Build the social-proof wrapper. Mirror the heading wrapper (flex, vertical, centered) with a text block plus a logo list. Give the logo list display: flex and a gap of 64px, then drop in the client logos.
  7. Add breathing room. Give the heading wrapper and image wrapper a bottom margin (around 80px) to evenly space the three groups. Remember: padding is space inside an element’s boundary, margin is space outside it.

That’s the whole layout in place. In the next lesson we start styling — beginning with those logos that are currently white on white and completely invisible.

Resources

Frequently asked questions

What's the difference between a section, a container, and a div block in Webflow?
A section is a full-width band that organizes the page like a chapter in a book. A container keeps its content centered and stops it from stretching edge to edge. A div block is a generic box you use to group and position anything inside.
What is a class in Webflow and why does it matter?
A class is a named set of style rules you can apply to many elements at once. Because they share the class, editing one property updates every element using it — that's what keeps a site consistent and quick to change.
How do I center elements vertically in a stack in Webflow?
Set the wrapper's display to Flex, switch the direction to vertical, and set the cross-axis alignment to center. The children then stack in a column and sit centered horizontally.
Should I add alt text to every image in Webflow?
Add descriptive alt text whenever an image carries meaning. If it's purely decorative, mark it as decorative instead, so screen readers know they can safely skip it.

← Back to the course