Menu Close

Blocksify Docs

Container block

The Blocksify Container block groups inner blocks in a flex wrapper for alignment, spacing, and responsive layout control. Use it inside a Section block or as a standalone wrapper while you refine responsive settings.

At a glance

Block nameblocksify/container
RoleCreates a flex-based wrapper for grouping, aligning, and spacing inner blocks.
Default tagdiv, with section, article, header, footer, main, aside, and nav available.
Section relationshipEach Section column is a Container, so column settings and Container settings share the same panels.
Key controlsFlex direction, justify, align, wrap, column gap, row gap, background, spacing, border, size, position, colors, typography, visibility, and advanced settings.

Where to find it

  1. Open the block inserter and choose Container. The Container is added to the page.
  2. Select the Container block on the canvas.
  3. Open the block inspector. The Layout panel appears first for a fresh Container.
The Container block is selected on the canvas with the Layout panel open in the inspector.

When to use it

Use a Container when a group of blocks needs one shared flex layout. Common uses include stacking text and buttons, aligning a media block with copy, or keeping a small content group together inside a Section column.

A Section is still the page-band block. The Container is the content wrapper or column that carries the local layout for the blocks inside it.

Flex layout

The Layout panel controls the Container’s single-axis flex behavior. Desktop is the base value, and Tablet or Mobile can override the same layout fields.

The Container Layout panel shows direction, justify, align, wrap, column gap, and row gap controls.
SettingDescription
DirectionArranges child blocks in a row or column, in normal or reverse order.
JustifyPlaces child blocks at the start, center, or end of the row or column, or distributes the space around them.
AlignPlaces child blocks across the row or column at the start, center, end, stretch, or baseline.
WrapControls whether child blocks stay on one line or continue onto another line.
Column gap and row gapSets the space between child blocks when they sit in a row, wrap, or stack.

Text alignment is separate

Use Align to position child blocks such as stacked buttons or icons. Text alignment controls text inside a block, not where child blocks sit across the row or column.

The Link panel turns the whole Container into one clickable destination.

  1. Select the Container and open Link in the block inspector.
  2. Under URL, search for content or paste the destination.
  3. Click the + beside Attributes. An Attribute 1 row appears.
  4. Select Attribute 1, then enter its Name and Value.
  5. Choose Open link in a new tab, Add rel=”nofollow”, or Add rel=”sponsored” when needed.
  6. Leave Render link as overlay on to place a transparent clickable link over the whole block, or turn it off to make the Container itself the link.
  7. Enter Screen reader text when the destination needs a clearer accessible name.
The Container Link panel shows a URL, an Attribute 1 row, link behavior toggles, and Screen reader text.

Note: Keep Render link as overlay on when the Container contains a link or button. Turning it off makes the Container itself the link, and nested links can break the front-end layout.

Width and nesting

Inside a Section, the Container works within the Section’s column and content-width system. As a top-level block, it uses its own Sizing controls for width-related choices.

  • Nest Containers when a group needs a different direction, gap, wrap, or alignment from its parent.
  • Keep the outer Container responsible for the broad layout.
  • Use an inner Container for a smaller cluster, such as a button row inside a vertical card.

Style capabilities

The Container inspector shows the flat panel list from Background through Advanced.
SettingDescription
BackgroundSets the wrapper background. 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 Container.
SpacingSets padding and margin.
Border, Radius & ShadowSets border, radius, and shadow treatment.
SizingSets width, height, and minimum or maximum size.
PositioningSets overflow, position, and z-index.
Colors and TypographySets text, link, background color, and typography choices inherited by content where applicable.
Visibility and AdvancedSets per-device visibility, HTML tag, anchor, and additional CSS classes.

Tips

  • Start with the flex direction before tuning gaps.
  • Use Align rather than text alignment when centering child blocks.
  • Keep Section-level spacing on the Section and local group spacing on the Container.
  • Check Tablet and Mobile when row layouts wrap.

Was this helpful?

0

Updated