Staggered content

Staggered content lays out a run of items in two columns that sit at different heights, so the page reads down in a zigzag instead of a straight grid. Each item is a picture with a heading and a paragraph beside it. Use it for an About page, a maker profile, a set of places, or anything that is a list of things rather than a single statement.

The offsets are not settings. The section reads how many items you added and where each one sits, then places them: even-numbered items drop lower than the ones beside them, and a final odd item widens and centers itself instead of sitting alone in a column.

Add the section

Open the page in the theme editor and click Add section.
Under Layout, choose Staggered content.
The section arrives with a header and three items. Edit them, then add more with Add block.

Section settings

Gap: the space between the two columns, from 0 to 120 pixels. Default is 80.
Row gap: the space between one row of items and the next, from 0 to 200 pixels. Default is 108.

This section also uses the standard Color, Padding, Margin, and Visibility controls. See Common section settings.

Header

The heading and intro above the items sit in a Header content slot, prefilled with a heading and a paragraph, both centered. Edit or remove those blocks, or empty the slot for items on their own.

Content blocks

Each item is a Content block. Add, remove, and reorder them in the block list; the order is the order they are placed, so moving a block moves the item.

A new Content block arrives with an Image and a Group holding a heading and a paragraph. Those are ordinary content blocks, so you can swap, add to, or remove them like anywhere else in the theme.

Select a Content block to set how its own pieces sit:

Desktop layout

Direction: Horizontal puts the picture beside the text, Vertical stacks them.
Gap: the space between the picture and the text, from 0 to 100 pixels. Default is 32.
Vertical alignment: with a horizontal direction, where the two line up against each other.
Horizontal alignment: with a vertical direction, where the pieces sit across the block.
Use different layout on mobile: on by default, so items stack on phones. It exposes a Mobile layout group with its own Direction, Gap, and Horizontal alignment.

The block also uses the standard Padding controls, with separate mobile values. See Common section settings.

How the layout responds

On phones the items run in one column, in block order.
On tablets each item takes about three quarters of the width, alternating which side it hangs from.
On wide screens the items sit in two columns, with every second item pushed down. A last item with no partner spans both columns and pulls up into the gap beside the one before it.

Because the stagger is derived, an even number of items reads as a set of pairs and an odd number ends on a single wider item. Both work; pick the count for the content, not for the shape.

Tips

Give the pictures a consistent shape. The default is a tall crop, and mixing tall and wide images in the same run breaks the rhythm the offsets are there to create.
Keep each paragraph short. The pairs read as a scan down the page, so an item that runs long stops the eye and flattens the stagger.
Row gap does more for the effect than Gap. Tightening the rows makes the zigzag read as one movement; opening them makes each item stand alone.
The section takes any content block, not only pictures and text. An item can hold an Illustration, a Button, or a Video if that suits the story better.