Before-After with content
Overview:
The Before & After Content section allows you to visually compare two images—commonly used for showcasing transformations, product results, or upgrades. Users can slide between the “Before” and “After” states using an interactive handle. Each image block can include headings and descriptions to provide additional context.
Section Configuration:
Setting |
Description |
|---|---|
| After Position | Sets the default position of the sliding handle between the "Before" and "After" images. Range: 0–100%. |
| Section Container Layout | Defines how the section aligns within the page. Options: Page Width, Contained Content, or Full Width. |
| Corner Radius | Determines which corners of the section are rounded. Options: None, Top Only, Bottom Only, or Both. |
| Image Height | Controls the vertical space allocated to the image comparison. Options: Small, Medium, or Large. |
| Color Scheme | Applies a predefined color scheme to the section’s background and text. |
| Top Padding | Adds vertical spacing above the section. Adjustable from 0–100px. |
| Bottom Padding | Adds vertical spacing below the section. Adjustable from 0–100px. |
Blocks Configuration:
Before Block
Displays the “Before” image and its associated text content.
Setting |
Description |
|---|---|
| Image | Uploads the image representing the "Before" state. |
| Heading | Sets the title for this state. |
| Heading Size | Defines the visual prominence of the heading. Options: H3, H4, H5, H6. |
| Heading Weight | Adjusts the font weight of the heading. Options: Extra Bold, Bold, Semi-Bold, Medium, Normal. |
| Description | Adds supplementary text beneath the heading. |
| Description Size | Sets the font size of the description. Options: Small, Medium, Large, Extra Large. |
| Description Weight | Sets the font weight of the description. Options: Extra Bold, Bold, Semi-Bold, Medium, Normal, Light. |
| Color Scheme | Assigns a color scheme specifically to the “Before” block. |
After Block
Displays the “After” image and its accompanying text content.
Setting |
Description |
|---|---|
| Image | Uploads the image representing the "After" state. |
| Heading | Sets the title for this state. |
| Heading Size | Defines the visual prominence of the heading. Options: H3, H4, H5, H6. |
| Heading Weight | Adjusts the font weight of the heading. Options: Extra Bold, Bold, Semi-Bold, Medium, Normal. |
| Description | Adds supplementary text beneath the heading. |
| Description Size | Sets the font size of the description. Options: Small, Medium, Large, Extra Large. |
| Description Weight | Sets the font weight of the description. Options: Extra Bold, Bold, Semi-Bold, Medium, Normal, Light. |
| Color Scheme | Assigns a color scheme specifically to the “After” block. |