Before/After image
Overview:
The Before/After section allows you to visually compare two images using an interactive slider. This feature is ideal for showcasing product transformations, such as results before and after using a service or product.
Section Configuration:
Heading & Description
| Setting | Description |
|---|---|
| Heading | Add a heading to introduce the before/after comparison section. |
| Heading Size | Choose the heading's visual size from multiple options. |
| Description | Provide a short description or supporting text below the heading. |
| Text Size | Set the font size for the description text. |
Slider Cursor
| Setting | Description |
|---|---|
| After Position | Define the initial position of the slider cursor (in percentage). This controls how much of the “after” image is shown by default. |
Layout & Spacing
| Setting | Description |
|---|---|
| Color Scheme | Select a color scheme to apply to the section’s background and text. |
| Top Padding | Adjust the space above the section. |
| Bottom Padding | Adjust the space below the section. |
Blocks Configuration:
Before Image
| Setting | Description |
|---|---|
| Image | Upload the image to display on the left side of the slider (the "before" state). |
After Image
| Setting | Description |
|---|---|
| Image | Upload the image to display on the right side of the slider (the "after" state). |