Slideshow

The slideshow is the usual way to open a home page: a few large pictures in turn, each carrying a message. Each slide is a block with its own picture or video, colours and words.

A full-width slideshow with the heading and button in the lower left and thin lines at the bottom showing progress

The slideshow

Under Layout, Height is one of the standard shapes from 32:9 to 3:2, Adapt to first slide (the first picture’s own shape), a custom height, or full screen. Width is full or boxed. Let the header overlap this slideshow floats a transparent header over it; see Header and navigation.

Under Slideshow behavior: Auto-rotate slides and how often, a Slide or Fade transition, and Loop. Pagination is one control: arrows, arrows with numbers, lines that fill with progress, a progress bar, dots, numbers, or none. Only show arrows on hover keeps them out of the way until the shopper points at the slideshow.

Under Animations, Content animation is how each slide’s words arrive, and Image motion is a slow drift on the picture. Both are shared by every slide.

Slideshow with a row of dots under the slide

Each slide

Add a Slide block for each picture. Layout puts the picture across the whole slide, or beside the words with the picture left or right; split layouts become a full picture on phones. Image, an optional tall Mobile image for phones, or a Video that plays silently on a loop in the picture’s place. Overlay shades the picture so words read; Color scheme colours the words and buttons. Slide link makes the whole slide a link.

The words on a slide are content blocks inside it: an eyebrow, heading, text, countdown and buttons, placed with nine positions, offsets and a width, with a second group for a second message in another corner.

On mobile

Under Mobile layout: the phone height, its own custom height, and its own Pagination or the desktop one.

Tip

Two or three strong slides beat six. Shoppers rarely wait for the fourth.