Before-After

Overview:

The Before & After Content section allows users to display a side-by-side comparison of two images, with an interactive slider to transition between the "Before" and "After" states. This is useful for showcasing transformations, product results, or visual changes over time.

Section Configuration:

Cursor Settings

Setting	Description
After Position	Sets the default position of the slider (0-100%). Default: 50%.

Layout & Styling Settings

Setting	Description
Height	Adjusts the height of the before-after images. Options: Small, Medium, Large. Default: Small.
Color Scheme	Applies a predefined color scheme. Default: scheme1.
Text Alignment (Desktop)	Aligns text to the left, center, or right. Default: left.
Text Alignment (Mobile)	Aligns text on mobile view. Default: left.
Top Padding	Adds spacing above the section. Range: 0–100px. Default: 50px.
Bottom Padding	Adds spacing below the section. Range: 0–100px. Default: 50px.

Block Configuration:

Before Image Block

Displays the initial state of the comparison.

Setting	Description
Image	Upload the "Before" image.
Heading	Title for the "Before" image. Default: "Before".
Heading Size	h3, h4, h5, or h6. Default: h4.
Font Weight	Bold, semi-bold, medium, or normal. Default: bold.
Button Label	Text for a call-to-action button. Default: "Button Label".
Button Link	URL for the button action.
Open in New Window	Option to open the link in a new tab. Default: false.
Color Scheme	Sets the background color scheme. Default: scheme4.

After Image Block

Displays the transformed or updated state.

Setting	Description
Image	Upload the "After" image.
Heading	Title for the "After" image. Default: "After".
Heading Size	h3, h4, h5, or h6. Default: h4.
Font Weight	Bold, semi-bold, medium, or normal. Default: bold.
Button Label	Text for a call-to-action button. Default: "Button Label".
Button Link	URL for the button action.
Open in New Window	Option to open the link in a new tab. Default: false.
Color Scheme	Sets the background color scheme. Default: scheme4.