Use sections to create separate blocks of content and divide the page into meaningful segments.
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:
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.