Section area

A section area is the fundamental and adaptable unit used in the construction of a website. Buttons, wrappers, and segments are all section areas with specific additional features. To some degree, a section area can take on any shape you desire. For instance, section areas can serve as spacers or separators, but their most common purpose is to group other components together. It delineates a partition in the HTML document.

Throughout this tutorial, you will discover how to:

1. Integrate a section area
2. Transform section areas into link areas
3. Establish gaps between components using section areas

Integrate a section area

You can include a section area on your Webflow website from the Insert panel. Subsequently, you can amalgamate other components within a section area—like a title, description, and call-to-action button. By including a section area and dragging these three elements inside, they can be modified and managed collectively. Adjusting the width of the section area to 50% will likewise adjust the content inside to 50%.

Upon nestling elements within a section area, its size will automatically conform based on the embedded content. Aligning the section area to the center will likewise align its content.

Transform section areas into link areas

You can convert a section area into a link area to hyperlink it (along with the content contained within) to other destinations. This is advantageous if you inadvertently utilized a section area instead of a link area while grouping content.

To convert a section area into a link area, ensure there are no linked elements within the section area, then right-click the section area and select Convert to link area.

Establish gaps between components using section areas

You can utilize section areas to generate empty space between other components (and specify a fixed height or width to reposition other content). Nevertheless, this technique is not optimal for creating space and can be challenging to monitor over time. As a fundamental guideline, it is better to utilize margin or padding to create space between components, and only utilize a section area if absolutely essential.