The Blocksify Section block creates the main page layout area for columns, spacing, backgrounds, and responsive control. Use it with Containers when you create your first page or adapt a Design Library pattern.
At a glance
| Block name | blocksify/section |
| Role | Creates a page section that can hold one or more Container columns. |
| Column system | 1 to 6 columns, column layout presets for the chosen column count, adjustable ratios, column gap, row gap, and per-device values. |
| Default | A fresh Section starts with 2 columns. |
| Key supports | Layout, colors, background, typography, sizing, spacing, positioning, border radius, shadow, visibility, interactions, and advanced settings. |
Where to find it
- Open the block inserter and choose Blocksify → Section. The Section is added to the page.
- Select the Section block on the canvas.
- Open the block inspector. The Layout panel appears first for a fresh Section.
When to use it
Use a Section for the large structural areas of a page, such as a hero, feature row, content band, pricing introduction, or call to action. A Section is usually the outer layout block, while Containers inside it hold the text, images, buttons, and other content.
Note: A Section can use None, Wide width, or Full width alignment from the block toolbar. The same choice is available as Align in the Layout panel, while the inner content width remains controllable.
Layout
The Layout panel opens automatically when you insert a new Section. On the canvas, an empty Section shows the message “Divide into columns. Select a layout:” with a set of column layout presets for the chosen column count.
| Setting | Description |
| Columns | Sets the Section column count from 1 to 6. |
| Layout | Sets the starting balance for equal or unequal columns. |
| Column Order | Turn on Reverse to reverse the visual order of the columns for the selected device. |
| Column Gap and Row Gap | Set the horizontal and vertical spacing between column content. |
| Vertical Align | Places all Section content at the Top, Center, or Bottom of the available height, or uses Stretch to fill it. This setting is responsive. |
| Align | Uses the same None, Wide width, or Full width choice as the block toolbar. |
| Content width | Choose From Theme to use the theme’s content width. Choose Custom to reveal Custom content width, Full width to fill the Section while keeping its gutter, or Edge to edge to remove the gutter so content such as images can bleed to the Section edges. Full width and Edge to edge are available only when Align is Wide width or Full width. |
| HTML tag | Sets the HTML tag for the Section. |
Columns and presets
- Choose 1 to 6 columns.
- Use equal columns for simple feature rows.
- Use unequal columns when one side needs more room, such as copy beside a call to action.
Per-device layout
Desktop is the base layout. Tablet and Mobile inherit from the larger view until you make a change for that device.
Style capabilities
The Section block can carry the visual style for a whole page band. Use the style panels when the entire area needs a shared background, spacing, border, or visibility choice.
| Setting | Description |
| Colors | Text, link, and background color choices. |
| Background | Color, image, gradient, video, overlay, and shape controls. The Effect row offers On scroll → Parallax, On scroll → Zoom, and On hover → Zoom; hover zoom scales the background image when a visitor hovers over the Section. |
| Typography | Text style choices when the Section should set the tone for content inside it. |
| Spacing | Padding and margin, especially top and bottom padding. |
| Border, Radius & Shadow | Rounded corners and shadow treatment. |
| Visibility | Hide the Section per device. |
| Advanced | HTML anchor and additional CSS classes. |
Tips
- Start with a preset, then fine-tune gaps and spacing.
- Use full alignment for a background that reaches the viewport edge.
- Keep long text inside Containers so each column remains easy to scan.
- Check Tablet and Mobile before publishing, especially when using more than two columns.
- Use reset when a smaller-screen value should return to the inherited value.
Tip: Build the structure first, then adjust the style panels after the content is in place.