Skip to main content

Zooming image block

What is the Zooming image block for?

A picture that fills the screen. This block puts a picture or a short, silent video at the centre of the scroll. As visitors scroll down, the picture grows until it fills the whole screen, and then a heading, a short text and a button appear over it. It suits a mood shot, a workshop or showroom, at the top of a page or between two sections.

It is most striking when the picture is high-resolution and simple and the opening line is only a few words. One such block per page is enough.

Three layouts, the same picture

You can switch the layout at any time without choosing the picture or writing the texts again.

Expand

A framed picture under the opening line grows until it fills the screen.

Window

The picture opens as a growing circle between the two halves of the opening line. Its first line sits top left and the rest bottom right, so keep both short.

Word mask

A huge word filled with the picture is zoomed into until the picture takes over. A short word works best; if it is too long, the editor warns that it may not fit on a phone.

Every bowl starts
in two hands.

Clay-covered hands shaping a pot on a spinning wheel, seen from above

Expand

Weekend wheel throwing for beginners, in groups of up to six. We provide the clay, the apron and the firing.

Try it

Take a lookinside the workshop

An old woodworking shop: a wooden workbench, with planes, saws and chisels on the wall

Window

Planes, saws and chisels, each in its place. On our open workshop day anyone can drop in and look around.

Try it

Every piece is

HANDMADE

Terracotta pots, bowls and vases stacked on stone slabs

Word mask

Bowls, mugs and vases, all from our own wheels. Browse them in the workshop shop at weekends.

Try it

A video instead of a picture. In the Video link field you can enter a direct link to a short MP4 file: it plays muted and on a loop over the picture. YouTube and Vimeo pages cannot play here; the editor tells you so, and the picture is shown instead.

Everyone can see it. If a visitor's device asks for less motion, nothing zooms: the picture shows at full size straight away, with the text on it, and no video starts. Search engines get the full text.

Zooming image settings: the layout and the scroll length at the top, the picture and the video link below. The canvas shows the picture in its final state.

What can you set on a Zooming image block?

Apart from the picture, every field is optional.

Opening line

A few words shown before the picture grows. Put two equals signs before and after the words to emphasise; a new line starts a new line.

Mask word

The giant word of the Word mask layout, filled with the picture. One short, strong word, such as your company name or "Handmade".

Scroll length

Short, Normal or Long: how far visitors scroll before the picture is fully grown. Longer feels slower and more ceremonial.

Picture

Pick it from the media library and set its focal point with a click, so the important part shows at every size. Screen readers read out its ALT text.

Heading, text and button

They appear over the fully grown picture. The button needs both a label and a link.

Languages

The opening line, the mask word, the heading, the text and the button label are written separately for each language.

When should you choose another block?

When the picture should show at full size at once, without scrolling.

Hero · full image →

When a large picture with the heading on it should greet visitors at the top of the page.

Hero · video →

When the opening section's background is a video that keeps playing.

Image →

When you simply want a picture on the page, without motion, with a caption.

A picture that stays

Your best picture deserves the whole screen.

Pick one strong picture and a few words – scrolling does the rest.

Build my website →Back to Website Blocks