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.
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.