Section

Use sections to create separate blocks of content and divide the page into meaningful segments.

We’re transitioning to a new UI, and are in the process of updating our Webflow University content.

A section is a structure element with a width of 100% (i.e., it extends across the full width of the browser window). Sections play an important role in the layout of a page — and often function as page divisions for your content. Learn more about building web layouts.

In this lesson, you’ll learn:

  1. How to add a section
  2. How to style a section

How to add a section

You can add a section element from the Add panel > Structure section. By default, sections span across the full width of the body, don’t have padding inside, and have a “Section” HTML5 tag. If you don’t want your content to span the width of the body, we recommend using a container element to center content on the page.

How to style a section

The height of a section automatically adjusts to its content — as you add elements, the section grows taller. You can also set a specific height in the Style panel.

When setting a specific height on a section, it’s a good idea to set a minimum height (e.g., 500px) so the section can still expand with its content. If you just set a height value, the content inside the section may spill out or get cut off.

Setting viewport height on a section

In some cases, like when creating hero sections, you may want to give a section a specific height. We recommend you use the viewport height (vh) unit, which adjusts height relative to the size of the viewport. For example, 100vh will fill 100% of the viewport height. Learn more about viewport units.

Table of contents

Continue learning

Hmm…we couldn’t find any results for “search query”. Try a different search term or check out our community forum.

Search the forumReset the filter
Load more

Filter

Reset
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Topics
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Back to top