Media Strip

A full-width strip with an overhanging image and editable content.

Dark strip with an overhanging portrait — photo extends above and below the colored band beside reverse-print copy.
Dark strip with an overhanging portrait — photo extends above and below the colored band beside reverse-print copy.

Usage

Media Strip is a full-width band that pairs a photo with a content column — heading, paragraph, list, buttons, or Pills. Unlike Media Callout, the image is a block attribute (not a nested Image block), and the photo can overhang the colored strip above and below on desktop for a layered, editorial look.

Use it when you want a bold visual break between sections: team spotlights, product features, testimonials with portraits, or any layout where the photo should feel larger than its background band.

Layout

The block has two side-by-side regions inside a colored shell:

  • Photo — selected from the sidebar Image panel or by clicking the placeholder in the editor
  • Content — inner blocks with a default template (headline, paragraph, button)

On desktop, the photo and content sit in a horizontal flex row with adjustable column proportions. On mobile, they stack with the photo first and overhang disabled.

Block settings

  • Padding — vertical spacing inside the content column (None through XXL; responsive step sizes)
  • Background Color — palette fill for the strip shell
  • Block Sizes — five column width presets from larger-left through larger-right (toolbar icons or sidebar)
  • Max Content Width — caps the inner content column in rem (10–70, default 50) for readable line length
  • Swap Blocks — flips photo and content on desktop (toolbar or sidebar)
  • Text Color (reverse print) — light text on dark backgrounds; cascades to inner blocks
  • Image Overhang — how far the photo extends beyond the strip top and bottom on desktop, in rem (0–30, default 4)
  • Offset Overhang — adds matching vertical margin to the strip so the overhang does not clip against neighboring blocks

Image

Open the Image sidebar panel to manage the photo:

  • Photo — choose, change, or remove the image
  • Rounded Corners — softens the photo edges
  • Image Focal Point — keeps the important part of the crop visible when the image is cover-fit

The photo uses object-fit: cover and spans the full height of the content row on desktop.

Content

Allowed inner blocks: Heading, Paragraph, List, Buttons, and Pills. Edit inline or add blocks within the content column. Default template includes a headline, body copy, and a button — replace or extend as needed.

Block width

Media Strip supports Wide and Full alignment from the block toolbar and defaults to Full width. The colored shell spans the chosen width; inner content uses the wide content constraint (alignwide).

Tips

  • Increase Image Overhang for a more dramatic photo treatment; enable Offset Overhang when the image gets clipped by the section above or below.
  • Use Block Sizes to give the photo or copy column more room — similar to Media Callout column presets.
  • Enable reverse print whenever you pick a dark Background Color.
  • Overhang applies on desktop only (640px and up). On mobile the layout stacks normally with no vertical overhang.

Screenshots

Front-end

  • Two strips on one page — amber and dark backgrounds with overhanging photos on opposite sides.
    Two strips on one page — amber and dark backgrounds with overhanging photos on opposite sides.
  • Stacked strips with offset overhang — photos bridge the yellow and dark sections on alternating sides.
    Stacked strips with offset overhang — photos bridge the yellow and dark sections on alternating sides.

Editor

  • Block Settings — Padding, Background Color, Block Sizes, Max Content Width, Swap Blocks, Text Color, Image Overhang, and Offset Overhang.
    Block Settings — Padding, Background Color, Block Sizes, Max Content Width, Swap Blocks, Text Color, Image Overhang, and Offset Overhang.
  • Second strip selected — dark background, light text, and Image Overhang with Offset Overhang off.
    Second strip selected — dark background, light text, and Image Overhang with Offset Overhang off.

Settings

Block Settings

Padding setting in the block editor sidebar
Padding

Vertical padding inside the content column. Preset steps (None through XXL) use responsive values — larger on desktop than mobile.

  • None
  • SM
  • MDdefault
  • LG
  • XL
  • XXL
Background Color setting in the block editor sidebar
Background Color

Background fill for the full-width strip shell from your site color palette.

Block Sizes setting in the block editor sidebar
Block Sizes

Column width ratio between the photo and content areas — larger left, slightly larger left, even, slightly larger right, or larger right.

  • Blocks Larger Left
  • Blocks Large Left
  • Block Size Evendefault
  • Blocks Large Right
  • Blocks Larger Right
Max Content Width setting in the block editor sidebar
Max Content Width

Maximum width of the inner content column in rem. Lower values shorten line length for readability; higher values let copy spread wider.

Swap Blocks setting in the block editor sidebar
Swap Blocks

Flips the photo and content columns on desktop. On mobile, the photo stays above the content.

Text Color setting in the block editor sidebar
Text Color

Switches inner content to light-on-dark text. Enable when using a dark background color.

  • Dark
  • Light
Image Overhang setting in the block editor sidebar
Image Overhang

How far the photo extends above and below the colored strip on desktop, in rem. Creates a layered effect where the image breaks out of the band.

Offset Overhang setting in the block editor sidebar
Offset Overhang

Adds vertical margin to the strip equal to the overhang amount so the protruding photo is not clipped by adjacent blocks.

Image

Rounded Corners setting in the block editor sidebar
Rounded Corners

Applies rounded corners to the photo.

Photo setting in the block editor sidebar
Photo

The photo displayed beside the content column. Choose from the media library or click the placeholder in the editor.

Image Focal Point setting in the block editor sidebar
Image Focal Point

Sets the focal point for cover-fit cropping so the important part of the photo stays visible at different sizes.