Storyboard Slider
Walk visitors through a story, one large photo at a time.
Usage
Storyboard Slider is a slider of large photo slides that visitors click or swipe through. Use it to walk visitors through a story, a case study, a project, or a step-by-step message.
Each slide has a background photo, a color overlay, and its own headline, subheadline, body and link. Slides can look different from each other while sharing a few settings on the block.
In the editor every slide is stacked, so you can edit them in one view. Type a slide's headline, subheadline and body right on the slide. Click a slide to choose it: the sidebar's Slide panels (text, link and photo) then belong to that slide, and the block toolbar can move it earlier or later, or remove it. Add slide is in the toolbar and under the last slide.
Visitors move between slides with the arrows and dots below, by swiping, or by scrolling sideways on a trackpad. The slider never advances on its own, and dragging with a mouse doesn't move it.
Every slide is as tall as the tallest one, so the page below never jumps. On phones, the photo sits above the text instead of behind it, and a slide with less text sits centred in that height.
When to use it
Use it when each step of the story deserves its own photo and a few lines of text. The block is built around photography: give every slide a strong photo.
For slides built from any blocks, use Slider. For a row of client logos, use Logo Carousel. For an editorial layout of photos and text that doesn't slide, use Storyboard Grid.
Accessibility
Only the current slide can be reached with the keyboard. To reach another slide, use the arrows below the slider, or the arrow keys once the slider has keyboard focus.
Each photo's description for screen readers comes from its Alt Text in the Media Library. Update it there and every page using the photo follows.
Tips
- On phones, keep each slide's body about the same length, so short slides don't sit in a lot of empty space.
- If text is hard to read over a busy photo, raise Overlay Opacity, or move the text with Text Placement.
- In the body, press Enter twice to start a new paragraph.
- Storyboard Sliders made with Dirigible Blocks Extended keep working. The Storyboard Slider in the inserter is now this block.
Settings
Slider
Where the current slide sits in the slider: centered, with the slides before and after peeking in on both sides, or lined up on the left.
Rounded or square corners. Applies to every slide.
Loops from the last slide back to the first. Turn it off and the arrows stop at each end.
Settings
The size of this slide's headline. It changes the look only, not the page outline. Appears once the slide has a headline.
The size of this slide's subheadline. Appears once the slide has a subheadline.
Where the text sits over the photo on screens 768px and wider. It also sets the alignment: a right-hand position right-aligns the text. On phones the photo sits above the text instead.
Light text, for a dark photo or overlay. A slide without a photo gets a dark background when this is on and a white one when it's off.
Slide Link
Adds a link under the slide's text. Search for a page or paste an address.
The link's words. Left empty, it reads "Learn More".
Shows the link as a button (three looks) or as an understated text link.
Opens the link in a new browser tab.
Slide Photo
Which part of the photo stays in view when the slide crops it.
A color laid over the photo so the text stays readable. The first swatch is no overlay. It shows on screens 768px and wider, where the text sits over the photo.
How strong the overlay color is. 0 hides it and 100 covers the photo.