Before-After with content

Overview:

The Before/After Content section is designed to showcase a comparison between two images (e.g., before and after) with additional content such as a heading, description, and a call-to-action button. This section is ideal for highlighting transformations, product improvements, or any other comparative content.

Section Configuration:

General Settings

Setting	Description
Heading	The main title of the section. Customize the heading to introduce your comparison.
Heading Size	Select the size of the heading: XX Large, X Large, Large, Medium.
Description	Add descriptive text or bullet points to elaborate on the comparison.
Text Size	Adjust the size of the description text: X Large, Large, Medium, Small.
View More Button Label	Customize the label of the call-to-action button.
Button Style	Choose between Primary or Secondary button styles.
Button Link	Set the URL for the button's destination.
Open in New Window	Enable this option to open the link in a new browser tab.
Cursor Position	Set the default position of the slider that divides the "before" and "after" images (0% to 100%).
Media Order	Arrange the order of the media and content: Standard or Reversed.
Content Alignment	Align the content vertically: Top, Middle, Bottom.
Desktop Text Alignment	Align the text horizontally on desktop: Left, Center, Right.
Mobile Text Alignment	Align the text horizontally on mobile devices: Left, Center, Right.
Color Scheme	Choose the color scheme for the section.
Top Padding	Adjust the padding at the top of the section (0 to 100 pixels).
Bottom Padding	Adjust the padding at the bottom of the section (0 to 100 pixels).

Block Configuration:

This section includes two primary blocks that you can configure:

Before Block

Setting	Description
Image	Select the image to represent the "before" state.

After Block

Setting	Description
Image	Select the image to represent the "after" state.