Before and after
Overview:
The Before & After section is a full-screen, scroll-activated comparison module designed to visually highlight transformations or differences between two images. As users scroll, one image transitions to the other using a vertical clip animation. This section supports a caption, heading, description, optional blur effect, and responsive layout control.
Section Configuration:
Images
| Setting | Description |
|---|---|
| Before Image | Uploads the image shown initially (before state). |
| After Image | Uploads the overlay image that appears during scroll (after state). |
| Image Blur | Applies a blur effect to both images. Accepts values from 0 to 5 pixels. |
Caption
| Setting | Description |
|---|---|
| Caption | Optional short label above the main heading. |
| Caption Size | Controls the font size of the caption. |
| Caption Weight | Sets the font weight (300–900). |
Heading
| Setting | Description |
|---|---|
| Heading | Main title displayed within the section. |
| Heading Size | Controls the heading tag used (H1–H6). |
| Heading Weight | Sets the font weight (300–900). |
Description
| Setting | Description |
|---|---|
| Description | Optional supporting text under the heading. Supports basic formatting. |
| Description Size | Defines the font size for the description text. |
| Description Weight | Controls the font weight (300–900). |
Layout
| Setting | Description |
|---|---|
| Content Max Width (%) | Sets the maximum width of the content block relative to the page width. |
| Container Layout | Defines whether the section content is boxed (container) or spans edge-to-edge (container-fluid). |
| Container Padding | Toggles horizontal padding inside the content container. |
Color Scheme
| Setting | Description |
|---|---|
| Color Scheme | Applies a predefined color palette to the section’s background and text. |