Before and after
Two images with a slider between them, for before and after or two versions of a product. The slider works with mouse, touch, keyboard and screen readers, and runs the other way in right to left languages.
This section also has the base settings every section shares: color scheme, layout, running head, page number, padding, divider and reveal on scroll.
Settings
| Setting | What it does |
|---|---|
| Before image | |
| After image | |
| Before label | Default: Before. |
| After label | Default: After. |
| Start position | From 0 to 100 %. Default: 50. |
| Direction | Options: Horizontal, Vertical. Default: horizontal. |
| Order on mobile | Options: As on desktop, Second page first. Default: same. |
| Content width | Options: Narrow, Normal, Wide. Default: normal. |
| Minimum height | Options: Automatic, Small, Medium, Large, Full screen. Default: none. |
| Background image | |
| Overlay opacity | A layer in the color scheme’s background color keeps text readable over the image. From 0 to 90 %. Default: 60. |
| Padding on mobile | Options: Same as desktop, Smaller, None. Default: same. |
| Visibility | Options: Show on all devices, Hide on mobile, Hide on desktop. Default: all. |