Before/After Block

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.

This is the Before/After Block

Drag the slider to reveal the transformation.

Before

After

From muted to vibrant — a simple way to show visual impact.

This is the Before/After Block (Text)

Compare messaging, positioning, or results at a glance.

AFTER

BEFORE

Same product, clearer message. The difference is instantly visible.

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