Overview
The Before/After block creates an interactive slider that lets visitors compare two states side by side. Use it for image comparisons (renovations, photo editing, design changes) or text transformations (rebrand messaging, code improvements). The draggable slider provides an engaging way to showcase differences.
Fields
| Field | Description |
|---|
| Heading | Optional section title above the comparison |
| Subheading | Supporting text below the heading |
| Mode | Comparison type: Image or Text |
| Width | Maximum width: Full, XL, Large, or Medium |
| Show Labels | Display "Before" and "After" labels |
| Rounded | Apply rounded corners to the container |
| Caption | Optional caption text below the comparison |
| Content Width | Control the maximum width of the content area |
| Animation | Entrance animation effect |
Image Mode Fields
| Field | Description |
|---|
| Before Image | The "before" state image (required) |
| Before Label | Label text for the before side |
| After Image | The "after" state image (required) |
| After Label | Label text for the after side |
Text Mode Fields
| Field | Description |
|---|
| Before Text | The "before" state text |
| Before Style | Background and text color for before side |
| After Text | The "after" state text |
| After Style | Background and text color for after side |
| Text Size | Font size classes for the text display |
Width Options
| Width | Description |
|---|
| Full | Full container width |
| XL | Extra large (max-width constrained) |
| Large | Large width |
| Medium | Medium width, centered |
Tips
- For image comparisons, use images with the same dimensions for best results
- Enable labels to help visitors understand what they're comparing
- Text mode works great for showcasing messaging changes or code refactoring
Examples