The Scroll-built Story holds a section in place while visitors scroll, and builds a drawing one layer at a time with each step's caption. It's made for "how it works" and "how we do the job" sections.
How to add it
- Click Add, open Effects, and drag Scroll-built Story onto the page. It starts with six steps on the built-in house.
- Click Edit Story in the toolbar.
- Write the Heading, then each step's Caption and one or two short sentences. Pick what appears on each step, and use the arrows to reorder. Up to 10 steps.
- Optional: write the line that shows While it builds and the one When it's done. Click Save.
Illustration
In the Design panel, Illustration picks the drawing:
- House: a house whose roof is rebuilt layer by layer: the old roof comes off, underlayment, shingles, ridge vent and flashing, and solar panels.
- Roof only: the house is already standing; no solar step.
- My own picture layers: add pictures in Edit Story. Each step can bring one in, fading, sliding up or sliding in from the right. Pictures of the same size with transparent backgrounds work best; for photos, set Picture fit to Fill (photos).
Also set the Description for screen readers and the Drawing height per screen size.
Scrolling and captions
- Hold while scrolling: on, the story stays in place while visitors scroll through the steps, then the page moves on. Off, the steps follow the scroll as the story passes.
- Scroll length: Short, Medium or Long: how much scrolling the whole story takes.
- Caption position: Left of the drawing or Below it. Phones and tablets always show the drawing first.
- Heading level and Accent (the current step, the step counter and the progress bar; empty uses the primary color, shaded where needed so it stays readable).
Good to know
- Every step's words are in the page, so search engines and screen readers get the whole story.
- Visitors who ask for less motion, and anyone who uses Pause motion, see the finished drawing with every step.
- Zeus can build it from the real steps of how the business works. Create with Zeus uses it for "how it works" sections, with the house for roofing and solar businesses.