Hero: Reveal
Full-screen slides that uncover one another as the visitor scrolls, each with its own photo or video and words.
Each slide fills the screen. As the visitor scrolls down, the section holds still and the next slide rises from the bottom edge over the one before, one screen of scrolling per slide. Once the last slide is shown, the page scrolls on as normal.
Choose it to tell a short story in two to four screens, such as "New arrivals" then "Bestsellers". For slides that change by themselves, use Hero: Filmstrip.
Add it
It can go on any page except the password page. In "Add section", find Hero: Reveal under Hero. As the first section on a page it runs up under your header.
As first added it has two slides with stand-in pictures. The first says "New arrivals", the second "Bestsellers". Each has a short quote that types itself out and a "Shop now" button leading to all your products, all at the bottom center.
What you need
- One photo or video per slide, two to six slides. Each fills a whole screen, so tall or wide photos both work once cropped. Set a focal point to choose what stays in view.
- A second photo per slide, if you like. It sits beside the first on larger screens.
- A phone photo, if your desktop photo is very wide. Each slide can show a different picture or video on phones.
Settings
| Setting | What it changes | Options |
|---|---|---|
| Color scheme | The background and words for every slide that does not choose its own colors. See shared settings. | Default: Scheme 2. |
| Space above and below | Space at the top and bottom of the section, in its background color. With None, the first slide runs up under your header. | None, Small, Medium, Large. Default: None. |
Space above and below is one setting for both ends, and has no Custom option. Small, Medium and Large are the same sizes as in shared settings.
Blocks
Slide
One full screen. You can add up to six, reorder them and hide them.
| Group | Setting | What it changes | Options |
|---|---|---|---|
| Picture or video | Type, Image or Video | The slide's main photo or video. | Image, Video. Default: Image. |
| Second picture or video | Type, Image or Video | A second photo or video beside the first, each taking half the width. | None, Image, Video. Default: None. |
| Stack on phones | On: on phones the two sit one above the other. Off: they stay side by side. Appears once a second picture or video is chosen, unless the slide has its own phone media. | Default: on. | |
| On phones | Different picture or video on phones | Shows other media on phones, full screen, in place of the slide's own. | Default: off. |
| Type, Phone image or Phone video | The phone media. Appear when the box above is ticked. | Image, Video. | |
| Layout | Content position | Where the words and buttons sit on the slide. | Nine places. Default: Bottom center. |
| Space between items | The space between the words and buttons. | Small, Medium, Large. Default: Medium. | |
| Colors | Use the section's colors | Turn off to give this slide its own Color scheme. | Default: on. |
| Overlay | Strength, Overlay color, Overlay style | Darkens the photo so your words stay readable. Behind text darkens the part the words sit on; Whole photo darkens all of it. Color and style appear when Strength is not None. | None, Light, Medium, Dark. Default: Medium, black, Behind text. |
Inside a slide you can add Text, Button, Short text, Group, Image, Giant text, Divider, Plain Jane's other general blocks and app blocks. A new slide comes with a heading, a quote that types itself out (a Text block with Animation set to Typewriter, Slow) and a "Shop now" button.
On phones
Each slide still fills the screen. Two pictures stack top and bottom (or stay side by side if Stack on phones is off). A slide with its own phone media shows only that. Words at the bottom keep clear of the phone's browser bar.
Tips
- Two to four slides is plenty: each one is a full screen of scrolling.
- Put the words in the same place on every slide so the story reads as one.
- The typing quote on later slides waits until its slide starts to show.
- If you tick Different picture or video on phones, choose the media straight away. Until you do, phones keep showing the desktop media.
Good to know
- With one slide, the section is a single full-screen slide and nothing moves.
- Visitors who have asked their device to reduce motion, or whose browser has scripts turned off, see the slides one under the other instead.
- Videos play silently. Only the showing slide and the one rising over it play.
- In the editor, selecting a slide brings it into view.