Section
Updated yesterday
The Section is a flexible composition surface that arranges nested theme and app blocks in a column, row, or grid. Unlike dedicated sections, it has no fixed block list — it accepts any compatible @theme or @app block and renders the blocks you add inside the layout you configure.
Settings
Configure how the section looks and lays out its blocks. Where a setting is always available, it applies to every layout; settings noted as conditional appear only when their parent choice is active.
Setting | What it does | Defaults / choices |
|---|---|---|
Colors | Applies a color scheme to the section. | Scheme 1 |
Background media | Sets a background for the section: None, Image, or Video. Image settings include the image and its position (Cover or Fit); video settings include the video and its position (Cover or Contain). | None |
Background overlay | Renders an overlay over the background. The overlay settings (Overlay color, Overlay style Solid or Gradient, and Gradient direction Up or Down) appear only when this is on. | Off |
Direction | Lays blocks out as Vertical (column), Horizontal (row), or Grid. Grid adds the grid column and grid area fields (separate for desktop and mobile). Row adds row alignment and position fields. | Vertical |
Vertical on mobile | Stacks a horizontal row of blocks vertically on mobile. Available when Direction is Horizontal. | On |
Alignment / Position | Controls horizontal alignment and vertical position of the blocks. Separate desktop and mobile controls appear when you enable Override alignment on mobile or Override position on mobile. | Left / Center |
Width | Page keeps the section within the page width; Full stretches it. Enable page gutter (available with Full) insets the section within the page gutter; turning it off removes the gutter. | Page |
Height | Sets the section height: Auto, Small, Medium, Large, Full screen, or Custom (which reveals a custom height range). | Auto |
Gap Horizontal / Vertical | Spacing between blocks, set separately for desktop and mobile. Enable Use a different vertical gap to set vertical gap values separately; otherwise the horizontal values are reused. | 12 |
Visible overflow | Allows block content to overflow the section edge. Off by default, which clips overflowing content. | Off |
Padding top / bottom (mobile & desktop) | Space above and below the section on each device. | 16 |
Hide section on desktop / mobile | Hides the section on the chosen device. | Off |
Custom class | Adds one or more CSS classes to the section, separated by spaces. | — |
The Show content on card toggle renders the section's content on a card and reveals the Border radius scheme setting (one of three radius styles).
Blocks
The Section accepts dynamic @theme and @app block groups rather than a fixed list, so any compatible theme or app block can be dropped in. The blocks you add render inside the layout container you configure with the settings above.