Editorial: Rising poster
Two full-screen pictures, the second rising over the first like a poster pulled up as the page scrolls.
Two full-screen slides, each a picture with words on it. The first stays pinned while the visitor scrolls, and the second slides up from below and covers it, like a new poster pasted over the old one. Nothing moves until the visitor scrolls. Choose it for a two-part campaign moment: a mood shot, then the reveal.
Add it
Add it to any page except the password page, from Storytelling in "Add section". It cannot go in the header.
As first added it has two Slide blocks with sample pictures and one large word each ("Flow" and "Rise"), at the bottom center. Slide one uses Scheme 2 and slide two Scheme 3. Space above and below start at None, so as the first section on a page it runs up under your header.
What you need
- Two pictures that fill a screen. Landscape photos suit computers; the picture is cropped to fill the screen on phones too, so keep the subject near the middle.
- One or two words per slide. Short words read best this large.
Settings
Select the section itself to see these.
| Setting | What it changes | Options |
|---|---|---|
| Color scheme | The section's background, and the colors of any slide set to Use the section's colors. See shared settings. | Default: Scheme 1. |
| Second slide height | How tall the second slide is, compared with the screen (120 is 1.2 screens). Taller takes longer to scroll past, so it rises more slowly and stays on screen longer. | 120 to 200 (shown as vh, steps of 5). Default: 120 |
| Space above, Space below | See shared settings. With Space above on None, the section runs under your header. | As added: None. |
Blocks
Slide
The section holds up to two slides. The first is the one that stays pinned; the second rises over it. Drag them to swap.
| Setting | What it changes | Options |
|---|---|---|
| Image | The picture. | |
| Image fit | Fill the frame crops the picture to fill the screen. Show whole image shows all of it, with the slide's background color around it. | Show whole image, Fill the frame (default) |
| Content position | Where the words sit on the slide. Words at the top always start below your header. | Nine spots, from Top left to Bottom right. Default: Bottom center |
| Content spacing | The gap between the blocks on the slide. | None, Small, Medium (default), Large |
| Use the section's colors | On: the slide uses the section's Color scheme. Off: choose its own. | On or off. As added: off. |
| Color scheme | Appears when Use the section's colors is off. Sets the slide's text and background. | As added: Scheme 2 and Scheme 3. |
| Overlay color | A tint laid over the picture, so words on it are easier to read. | Default: black |
| Overlay opacity | How strong the tint is. At 0% there is none. | 0 to 100%. Default: 0% |
Inside each slide, add Text, Button or other blocks. The sample words are Text blocks set to the Heading 1 style.
On phones
It works the same way: the first slide pins and the second rises over it as the visitor scrolls.
Tips
- For white words on a busy photo, raise Overlay opacity to 20 to 40%, or turn on Stay readable over photos in the Text block.
- Use two pictures with different light, such as a dark shot then a bright one, so the second's arrival is obvious.
- Put a button on the second slide, not the first. The first is soon covered.
Good to know
- With only one slide, there is nothing to rise: the section is one still, full-screen picture, and Second slide height does nothing.
- A slide with no picture shows a sample drawing to shoppers too.
- Visitors who reduce motion on their device see the two slides one after the other, with no rising.