Before / after
The Before / after section shows two images on top of each other with a handle to drag between them. Each side can have a treatment (noisy, monochrome, vivid) and a label.
How to set it up
Step 1: Add the Before / after section
- In the theme editor, open the page you want and click Add section under Template.
- Search for Before / after and select it (1).
Step 2: Set the images
- Choose the Before image (1) and After image, their treatments and labels, and the Starting position of the handle.
Settings reference
Before / after
| Images | |
|---|---|
| Before image | An image from your files. |
| Before treatment | Options: None, Noisy, Monochrome. |
| Before label | |
| After image | Defaults to the before image. |
| After treatment | Options: None, Vivid. |
| After label | |
| Starting position | Slider. |
| Ratio | Options: Wide (16:9), Cinema (21:9), Landscape (4:3), Square. |
| Mobile ratio | Options: Portrait (4:5), Square, Landscape (4:3). |
Section width, corners, padding, color scheme, divider and visibility work the same in every section: see Section layout and spacing. Headings, subheadings and descriptions: see Section headings and text.
How it works
- Without an after image, the before image is used with the after treatment, so one photo can show the difference.