Sections and groups are the backbone of creating responsive content in Flex. They, along with responsive positioning, sizing, and layouts, provide the structure and attributes needed to organize content on the canvas responsively.
Most of the content you add to the canvas will be nested inside a group in some way. And as a best practice, we recommend adding all content to sections for greater organization (with the few exceptions of absolutely-positioned background elements, etc.).
How to Use a Section
In Flex, you can use pre-built or create custom sections of your own. Pre-built sections work like templates; once added to the canvas, you can update text, colors, images, content order, and interactivity. The purpose of the pre-built sections is to provide a starting point for content layouts or to help new or less experienced designers quickly produce responsive experiences.
If you want to use completely custom section layouts, we recommend creating your own from a blank section (detailed below).
Adding a Section to the Canvas:
The process for adding blank and pre-built sections onto the canvas is the same:
Select the "Add content" option at the top of the Toolbar
Select "Sections" from the popout window
Select the desired section from the gallery window to automatically add it to the canvas
Select "Blank" if you're going to create a custom section
Section Attributes:
A section's position is locked to Stack because they are intended to be used as stackable content containers that can easily be reordered in the Layer Panel. Additionally, a section's width is locked to Fill Parent. However, its height can be changed to any type of responsive sizing.
Adding Content to a Section:
To add content to a section:
Select the target content in the Layers Panel
Click and drag the selected content into the section of the Layers Panel
Once the content has been added to the section, the section will become its parent container in the content hierarchy. Adjusting the layout settings of the section will then affect the internal content.
How to Use Components
Components are like smaller versions of sections, but are instead individual groups of content that comprise elements such as buttons or tile cards. Adding components to the canvas follows the same process as sections, but in this case, select the "Components" option from the pop-out window.
Components are intended to serve as a starting point for quick content creation, much like pre-built sections.
How to Use Pages
If components are like sections but individual elements (like buttons), then pages are the same, but for entire page layouts. When you add a page to the canvas, following the same process as a section, the content will be organized in the Layers Panel as various levels of groups. By default, pages do not include sections; however, you can create your own once the page content has been added to the canvas.
As mentioned, sections are a crucial aspect of responsive content creation in Flex. To learn more about and to build a library of custom sections, check out our Flex Foundations certification and learning path. Each course in the program walks through how to build a different type of section that can be adapted and repurposed for future projects.