Advanced Section

Advanced Section is a container block that accepts any inner blocks and adds a rich layer of background, overlay, border, and layout controls on top of WordPress's native layout system. Use it wherever a Group block isn't enough — hero sections, feature rows, CTA bands, and any section that needs a custom background, a flex or grid arrangement, or precise height control.

How to add

Open the block inserter, switch to the Axiom Blocks category, and click Advanced Section. The block drops in empty, ready for inner blocks. Add any blocks inside it — Headings, Paragraphs, Buttons, Columns, or other Axiom blocks.

Layout

Layout is the first control in Settings and it decides how the section arranges its direct children. The rest of the panel changes to match the mode you pick.

Constrained

The default, and the same behavior earlier versions had: inner blocks stack vertically at the theme's content width.

• Vertical — Top, Center, Bottom — aligns content along the vertical axis within the min-height area
• Horizontal — Left, Center, Right — aligns content along the horizontal axis

Flex

Arranges direct children in a flex row or column — the way you'd build a feature row or a logo strip without reaching for Columns.

• Direction — row or column
• Wrap — allow children to wrap onto new lines
• Justify — distribution along the main axis
• Align — alignment along the cross axis
• Gap — space between children, per device

Grid

Arranges direct children in an even grid.

• Columns — number of columns, per device
• Align items — cross-axis alignment within each cell
• Gap — space between cells, per device

Stack below

Flex and Grid both get a Stack below value. Below that width the section collapses to a single column, so a three-across feature row becomes a readable stack on phones. This is scoped to the individual block, so two sections on the same page can stack at different widths.

Min height

Sets the minimum height of the section, with a unit switcher for px, vh (viewport height), or rem. A hero set to 100vh fills the screen. Min height is a per-device control — set it once for desktop and override it on tablet or mobile using the device switcher at the top of the control.

Background

Background lives in Styles → Container and opens in its own popover. The Type selector switches between three modes.

Color

A solid background color. Leave it empty to inherit the page background.

Gradient

Builds a CSS gradient in the sidebar — Linear (angle-based) or Radial (center-out), with color stops you can add and position individually.

Image

Picks a background image from the media library.

• Size — Cover (fill, may crop), Contain (fit fully, may letterbox), Auto (natural size)
• Focal point — drag the crosshair on the preview to set the background position
• Repeat — No repeat, Repeat, Repeat X, Repeat Y
• Attachment — Scroll (moves with page) or Fixed (stays put as content scrolls). Hidden when Parallax is on, since the two conflict.

Overlay

An overlay sits between the background and the inner content — use it to darken an image so text stays readable, or to wash a color over a gradient. It's part of the same Background popover.

• Type — Color or Gradient
• Opacity — 0–100%; at 0 the overlay is invisible regardless of color
• Blend mode — Normal, Multiply, Screen, Overlay, Darken, Lighten

Parallax

Available only when the background type is Image and an image is selected. Parallax speed runs 0–100%; 20–40% is a safe starting range.

The sidebar at a glance

The block sidebar is split into two tabs. Settings is what the section does; Styles is how it looks, organised by the parts you can see.

Styling

The block supports Wide and Full alignment from the toolbar and an HTML anchor.

HTML output

<div
  class="axiom-blocks-section axiom-blocks-section--image axiom-blocks-section--layout-grid ab-secbp-3f9c1a02 is-h-center is-v-center has-parallax"
  style="
    --ab-sec-bg: url('/wp-content/uploads/hero.jpg');
    --ab-sec-overlay-bg: #00000080;
    --ab-sec-overlay-opacity: 0.5;
    --ab-sec-overlay-blend: normal;
    --ab-sec-parallax: 1;
    --ab-sec-radius: 12px;
    --ab-sec-shadow: 0 10px 30px #0000001a;
    --ab-sec-cols: 3;
    --ab-sec-gap: 24px;
    --ab-sec-mw: 1200px;
    --axiom-blocks-section-min-h: 600px;
    min-height: var(--axiom-blocks-section-min-h, 400px);
    --axiom-blocks-section-justify: center;
    --axiom-blocks-section-align: center;
  "
  data-parallax-speed="0.30"
  id="hero"
>
  <!-- inner blocks -->
</div>

CSS custom properties

Layout, background, and border values are surfaced as custom properties on the wrapper so your theme stylesheet can read or override them.