Use sections to create separate blocks of content and divide the page into meaningful segments.
A section is a layout element with a width of 100%, so it extends across the full width of the browser window. Sections play an important role in the structure and layout of a page. Sections let you create separate blocks of content and divide the page into meaningful segments.
In this lesson:
You can add a Section element to your page from the Elements panel (A). By default, the Section will span across the full width of the body.
Also by default, sections don't have padding inside. If you don’t want your content to span the width of the body, drag in a Container to keep elements centered on the page.
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 you add text and media to a Section, the height changes to define the height. No matter how much content you add, the Section height respects the content inside.
A Section's padding also affect its height. It’s best practice to set a Section's top and bottom padding and add content to let it adjust accordingly.
To set a specific height on a Section, it's a good idea to set a min-height (e.g. 500px) so the Section can expand with its content. If you set a normal height, content will eventually spill out or get cut off.
In some cases, like when creating hero sections, you may give a Section a specific height. In this case, use the viewport height (vh) unit to specify the Section height. For example, 100vh will fill 100% of the viewport height. Setting it to 50vh will fill 50% of the viewport height, and so on.
Something went wrong while submitting the form. Please contact email@example.com