Start free trial

Library Gallery

Catalogue accessStandard

Social scatter

A copy column with a label, a large heading, a paragraph and one button beside four photographs in two columns, each column one tall frame and one short one, the second column dropped lower so the cluster reads pinned to a wall rather than laid on a grid. The frames take the larger share of the row.

For a social feed, a studio diary or a follow call. Includes replaceable example photographs. States no colour and no font of its own.

Variation
ThemePreview size
As authoredColour
Twenty Twenty-Five·1280px

Manrope typefacergb(255, 255, 255) ground1280px viewport

The signature moment

The frames are pinned, not gridded

Each column holds one tall frame and one short one, in opposite order (2:3 over 5:4, then 4:3 over 3:5), and the second column starts lower than the first, by a padding that grows from 4rem to 10rem with the screen. Nothing lines up across the pair, top or bottom, so the cluster reads as photographs pinned to a wall rather than a feed laid on a grid. The drop is spacing on a core group, not CSS, so it survives the editor and any theme.

Theme handoff

What comes from where

Theme and pattern

Inherits: every colour (ground base, text contrast, the button from your theme's button style), the typeface, the spacing scale. Decides: the 5:7 split, the frame shapes, the column drop, the gaps, the 32rem copy measure and the 1240px band.

The heading is on the theme's ladder, one rung above an ordinary section h2 (xx-large): it has to hold its own beside a cluster of four photographs, and at x-large the frames swallowed it. Body copy is medium; the label states its own size with a 15px floor. All text is contrast on base, held to 4.5:1.

Full pattern notes

Why it works, and how it is built

Open a topic for the complete design reasoning, editing guidance and implementation notes.

Design rationaleComposition, intent and nearest alternatives

Overview

A two-part section on your theme's paper: a copy column (label, heading, paragraph, one filled button) and a cluster of four photographs in two columns, the frames taking the larger share. For a social feed, a studio diary, or a call to follow.

The signature moment: the frames are pinned, not gridded

Each column holds one tall frame and one short one, in opposite order (2:3 over 5:4, then 4:3 over 3:5), and the second column starts lower than the first, by a padding that grows from 4rem to 10rem with the screen. Nothing lines up across the pair, top or bottom, so the cluster reads as photographs pinned to a wall rather than a feed laid on a grid. The drop is spacing on a core group, not CSS, so it survives the editor and any theme.

Make it yoursVariations and the edits to make first

Variations

  • Frames left: the cluster on the left with its left column dropped, the copy on the right. Stacked, the photographs come first.
Theme behaviourInheritance, fixed decisions and contrast

What it inherits, what it decides

Inherits: every colour (ground base, text contrast, the button from your theme's button style), the typeface, the spacing scale. Decides: the 5:7 split, the frame shapes, the column drop, the gaps, the 32rem copy measure and the 1240px band.

The heading is on the theme's ladder, one rung above an ordinary section h2 (xx-large): it has to hold its own beside a cluster of four photographs, and at x-large the frames swallowed it. Body copy is medium; the label states its own size with a 15px floor. All text is contrast on base, held to 4.5:1.

Technical notesBlock mechanics, responsive behaviour and constraints

How it holds at every width

The row is a core columns block at 41.66% and 58.34%, vertically centred. It stays side by side down to a tablet and stacks below 782px, copy first. The cluster itself is a two-column grid at every width, so on a phone the frames stay two across and the drop still shows.

What a buyer changes first

The photographs: select each image and choose Replace. Then the heading and the button's link, which ships empty.

Included images

The copied markup includes WordPress Photo Directory example photographs. The public image URLs keep the examples visible after pasting. Select an image and choose Replace to use your own Media Library files. See image credits for the sources and licenses. Pasting an image URL does not import a Media Library attachment.

The markup

5.8KB of core-block markup, 8 blocks (button, buttons, column, columns, group, heading, image, paragraph), and nothing else: paste it into the block editor and it becomes editable blocks wearing your theme.

Start free trial to copyWhat you copy is yours forever. Cancel whenever.

Back to the library

Continue exploring

Next in Gallery

Explore all 21 Gallery patterns Also in Call to action

Ragged grid rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveGalleryGalleryStandard

Ragged grid

A two-by-two photograph grid in which every frame keeps a different proportion: square, three-by-two, four-by-five and sixteen-by-nine.

5 blocks · 1 variationOpen preview Ink rag
Stagger pairs rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveGalleryGalleryStandard

Stagger pairs

Three stacked rows of two photograph frames each, split roughly 64/36, with the wide frame changing sides from row to row and a hairline ruling the joins.

5 blocks · 1 variationOpen preview Reversed stagger
Wall labels rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveGalleryGalleryStandard

Wall labels

Five portrait frames hung in one row at deliberately unequal widths, bottom-aligned so their tops are ragged and their bases sit on one line, each with a small museum wall label beneath it: a tracked uppercase title and a line of medium and year.

5 blocks · 1 variationOpen preview Labels above