# Before and after

> Two photos of the same scene, one over the other, with a handle shoppers drag to reveal the difference. Ideal for results you can see.

Tally theme documentation · HTML version: https://themelab.page/tally/docs/sections/before-and-after/

## At a glance

- **In the editor:** Before and after
- **Where it goes:** Any page template, with Add section
- **In the presets:** Not on any page by default – add it where you need it
- **Settings:** 24
- **App blocks:** Yes

## Set it up

1. Upload the **Before image** and the **After image**. Use two photos with exactly the same framing and size – the comparison only works when they line up.
2. Choose the **Image ratio** and the **Starting position** of the handle (10–90%).
3. Keep **Show labels** on and set the **Before label** and **After label** – *Before* and *After*, or *Day 1* and *Day 28*.
4. Pick a **Layout** for the text: *Heading above the image*, *Text on the left* or *Text on the right*.

## For everyone

Shoppers drag the handle with a mouse or a finger, or tab to it and use the arrow keys – the handle is a real slider, so screen readers announce its position.

> **Tip**
>
> Shoot both photos from a tripod with the same light. Small differences in angle make the comparison feel less convincing than the result deserves.

## All settings

Every setting in the order of the theme editor, with its options and its default value.

**Section: Before and after** (24 settings, in editor order)

| Setting | Options | Default |
| --- | --- | --- |
| **Before image** | Image | – |
| **After image** – Use two photos with the same framing and size. | Image | – |
| **Image ratio** | Square · Portrait · Landscape · Wide | Landscape |
| **Starting position** | 10–90% (step 5) | 50% |
| **Show labels** | Checkbox | On |
| **Before label** | Text | Sample text |
| **After label** | Text | Sample text |

*Text*

| Setting | Options | Default |
| --- | --- | --- |
| **Layout** | Heading above the image · Text on the left · Text on the right | Text on the left |
| **Heading** | Rich text (one line) | Sample text |
| **Text** | Rich text | Sample text |
| **Heading size** | Large · Medium · Small | Medium |
| **Heading alignment** | Left · Center | Center |
| **Button label** | Text | – |
| **Button link** | Link | – |
| **Button style** | Primary · Secondary · Highlight | Primary |
| **Color scheme** | Color scheme | Scheme 1 |

*Section spacing*

| Setting | Options | Default |
| --- | --- | --- |
| **Top padding** | 0–160px (step 4) | 80px |
| **Bottom padding** | 0–160px (step 4) | 80px |
| **Top padding on mobile** | 0–120px (step 4) | 56px |
| **Bottom padding on mobile** | 0–120px (step 4) | 56px |

*Advanced*

| Setting | Options | Default |
| --- | --- | --- |
| **Hide on mobile** | Checkbox | Off |
| **Hide on desktop** – Mobile means below the width where the header switches to the mobile menu (Header > Switch to the mobile menu below). | Checkbox | Off |
| **Animate on scroll** | Checkbox | On |
| **Anchor ID** – Link to this section with #anchor-id. | Text | – |

## Related

- [Image with text](https://themelab.page/tally/docs/sections/image-with-text.md): A photo beside text built from blocks – label, heading, text, list, stats and buttons – plain or on an overlapping card.
- [Testimonials](https://themelab.page/tally/docs/sections/testimonials.md): Customer quotes with stars, a name, a photo and the product they bought, as a grid or carousel.