Skip to main content

Scrolling story block

What is the Scrolling story block for?

One visual stays in place while the story moves forward. In a Scrolling story, an image or video remains fixed as the content changes step by step beside it. It works best when the same visual context matters throughout, but the explanation develops across several stages.

If every step needs a different image, the Stacking cards block is usually the better choice.

Example: how an object takes shape

The visual world stays in place while the story moves through four stages.

A craftswoman looking at a finished walnut bowl in her workshop.
  1. 1. Choose the material

    The story begins with the raw material: its character and size help determine what the finished object can become.

  2. 2. Shape the form

    The rough piece gradually becomes recognisable as the main proportions and details fall into place.

  3. 3. Refine the details

    Sanding, finishing and small corrections create the quality you notice when you see the object up close.

  4. 4. Finish the piece

    The final step closes the arc by showing the same object as a finished result.

Another example: keep a video in view

The same block can use YouTube video. The video stays visible while the steps progress beside it.

  1. 1. Describe your business

    In a few sentences, explain what you do, who you work with and what makes the business different.

  2. 2. Choose the voice

    Warm, direct, expert or refined: the website copy can be shaped around the tone you want.

  3. 3. Generate the first version

    AI builds the initial pages, writes draft copy and selects suitable visuals.

  4. 4. Refine it in the editor

    Rewrite, replace or rearrange blocks, then publish when the site is ready.

What makes a Scrolling story work?

The block is strongest when one visual genuinely holds the whole story together.

One shared visual

Choose an image or video that still makes sense beside every step.

Three or four steps

That is usually enough to create progression without making the scrolling interaction drag on.

Real progression

Each step should add something new rather than restating the same idea in different words.

Short copy

Let the visual and the steps work together instead of competing with long paragraphs.

What can you configure in the Scrolling story block?

Alongside the fixed visual, you control its type, position, aspect ratio and the step content.

What is in the frame

The fixed media can be an image, a YouTube or Vimeo video, or an animated visual.

Image side

Keep the image or video on the left or right side of the text.

Image ratio

Choose 4:5, 1:1, 3:4 or 16:9 to suit the visual.

Steps

Three to four steps usually works best. Each one has its own title and supporting copy.

Focal point and ALT text →

Set the image focal point and ALT text separately, or mark an image as decorative when appropriate.

Background and width →

Place the block on the page background or in a custom or inverted band, with Reading, Wide or Full content width.

KEEP THE VISUAL FOCUS

One visual stays. The story unfolds step by step around it.

Use Scrolling story when one shared visual context connects several ideas and the sequence genuinely matters.