Hero: Morph
A photo that breaks apart into a solid color as the visitor scrolls, uncovering a second set of words underneath.
The section opens on a full-screen photo with a large title over it. As the visitor scrolls, the photo dissolves into a solid color in a pattern you choose: a rising edge, a bloom from the center, scattered patches, dots or blocks. By the bottom of the section the photo is gone and a second set of words and a button sit on the color.
Choose it to open a page with one photo and a short message that follows it, such as a collection name, then what makes it special. The section is taller than the screen, so it takes some scrolling to get past.
Add it
It can go on any page except the password page. In "Add section", find Hero: Morph under Hero. With no space above, the photo runs up under your header.
As first added it shows a stand-in picture with the title "HEAVYWEIGHTS" and the line "The fall collection. Out now." over it. Scrolling dissolves it into a pale green, where a short paragraph and a "Shop now" button wait.
What you need
- One large photo, at least 2000 pixels wide. It covers a box taller than the screen, so it is cropped from the sides.
- A dissolve color that your color scheme's text reads well on. If it matches the background of the next section, the two run together.
Settings
| Setting | What it changes | Options |
|---|---|---|
| Color scheme | The color of the words, and the band above and below the photo when you add space. See shared settings. | Default: Scheme 1. |
| Length | How much scrolling the section takes: one and a half, two or two and a half screens. Longer gives the dissolve more room. | Short, Medium, Long. Default: Medium. |
| Space above and below | Space at the top and bottom, in the scheme's background color. With None, the photo runs up under your header. One setting covers both ends, and there is no Custom option. | None, Small, Medium, Large. Default: None. |
| Background image | The photo that dissolves. | Any image. |
Dissolve
| Setting | What it changes | Options |
|---|---|---|
| Dissolve style | The pattern the photo breaks apart in. | Rising edge, Bloom from center, Scattered patches, Halftone dots, Pixel blocks. Default: Rising edge. |
| Dissolve target color | The color the photo turns into. The second set of words sits on it. | Any color. As added: a pale green. |
| Dissolve speed | How soon the photo is fully gone. Fast finishes early and leaves longer on the solid color. | Slow, Medium, Fast. Default: Medium. |
| Edge softness | The line between photo and color. Tight is a clean line; Scattered breaks it up. | Tight, Soft, Scattered. Default: Soft. |
Layout and Overlay
| Setting | What it changes | Options |
|---|---|---|
| Content position | Where the words over the photo sit. | Nine places. Default: Center. |
| Strength | Darkens the photo so the words on it stay readable. It never tints the dissolve color. | None, Light, Medium, Dark. Default: Medium. |
| Overlay color, Overlay style | The darkening's color, and whether it sits behind the words or covers the whole photo. Appear when Strength is not None. | Default: black, Behind text. |
Blocks
The section has two parts. They are always there and cannot be removed. Each takes Text, Giant text, Short text, Button, Plain Jane's other general blocks and app blocks.
Over the photo
The words on the first screen. As added: a Giant text title ("Heavyweights", in capitals, read as the page's main heading) and a Text line in the Heading 5 style. Both have Stay readable over photos on.
| Setting | What it changes | Options |
|---|---|---|
| Max width | How wide the words can run. | Narrow, Medium, Wide, Full width. Default: Wide. |
| Space between blocks | Space between the blocks. | Small, Medium, Large. Default: Medium. |
After the dissolve
The words on the color at the end. As added: a paragraph in the Heading 2 style and a "Shop now" button.
| Setting | What it changes | Options |
|---|---|---|
| Vertical alignment | Where the blocks sit, top to bottom, in this part. | Top, Center, Bottom. Default: Center. |
| Horizontal position | Where they sit left to right. It also lines up the text. | Left, Center, Right. Default: Center. |
| Max width | How wide the words can run. | Narrow, Medium, Wide, Full width. Default: Medium. |
| Space between blocks | Space between the blocks. | Small, Medium, Large. Default: Medium. |
Tips
- Photos with a strong light area dissolve most visibly with Rising edge or Bloom from center.
- Use the next section's background color as Dissolve target color so the page carries on without a seam.
- Keep the title short. Giant text grows to fill the width.
Good to know
- Visitors who have asked their device to reduce motion, or whose browser cannot draw the effect, see the finished state: the words after the dissolve sit on the solid color, never on the photo.
- In the "Add section" preview the section is one screen tall and shows the photo and title only.