Use the Section block to create dynamic, responsive layouts that adapt to any screen size and content type. Build sections for homepages, landing pages, or informational hubs with flexible configuration options that suit your design needs.
How to Add and Configure the Section Block
- Log in as an Admin, click your profile picture, and select the Administration tab.
- Navigate to the Design Studio, select Collections and Spaces, and create a new space or select an existing space to add sections to.
- Hover over a container block and click the ➕ icon to add a block. Find and select the Section block.
- Select a layout:
- 1 column
- 1:1 — two evenly sized columns
- 1:2 — two columns (one small, one medium)
- 2:1 — two columns (one medium, one small)
- 3 columns — three evenly sized columns
- 4 columns — four evenly sized columns
- Adjust the gap size between columns (optional).
- Adjust horizontal and/or vertical padding within the section (optional).
- Adjust horizontal and/or vertical margin around the section (optional).
- Configure responsive settings:
- Reverse — reverse column order on smaller screens
- Hide — hide the section on mobile, tablet, and/or desktop
- Restrict max width — limit the section's maximum width on larger screens. Use this if you want a full-width hero banner at the top but prefer the rest of the page to have constrained width.
Padding vs. Margin: Padding adjusts spacing within an element, affecting its internal structure. Margin adjusts spacing between the element and surrounding elements.
- Expand the column(s) and add content blocks. Click the ➕ icon when hovering over a column, or click + Add block in the column preview.
- Click Save changes.
Key Features
Responsive Design
- Automatically adjusts to fit desktop, tablet, and mobile screen sizes for a consistent user experience.
- Hide sections or columns based on screen size.
Flexible Layouts
- Choose from multiple predefined layouts to match your design vision.
- Divide your section into columns, rows, or grids to organize content effectively.
Content Versatility
- Supports text, images, videos, buttons, and embedded content.
- Combine multiple content types within a single section to create rich, engaging experiences.
Intuitive Configuration
- Customize size, padding, and margins to fine-tune each section's appearance.
- Select a section in the preview to add blocks directly to it.