Features Breakdown: Before/After Pro This section is a conversion-focused "Product Showcase" designed to demonstrate results. It combines an interactive Before/After image slider with a modular content area for features, testimonials, and calls to action.

1. Before/After Slider Interaction

• Dual Layering: Upload a "Before" image (background) and an "After" image (foreground).

• Slider Handle: Users drag a handle to reveal the difference.

  • Styling: Customize the Handle Size, Border Color, and Arrow Color.

  • Starting Position: Set where the slider starts (e.g., 50%).

• Labels: Optional "Before" and "After" text labels overlaying the images with adjustable styling.

2. Layout & Image Ratios

• Aspect Ratios: Force the slider into specific shapes (Square 1:1, Landscape 4:3, Portrait 3:4, Story 9:16) or let it adapt to the image's natural height ("Auto").

• Image Position:

  • Desktop: Place the slider on the Left or Right.

  • Mobile: Place the slider on the Top or Bottom.

• Visuals: Adjust the Corner Radius and Border Thickness of the image container.

3. Modular Content Area

• Block System: Build the content column using flexible blocks:

  • Heading & Text: Standard title and description.

  • Feature List: A list of up to 5 items with icons (Check, Star, Fire, etc.) or custom uploaded icons.

  • Testimonial Slider: A built-in mini-carousel for customer reviews. Supports multiple testimonials with star ratings.

  • Buttons: A group of up to 2 buttons.

  • Social Proof: Displays avatars and a "Rated 4.9/5" style text.

4. Typography & Alignment

• Alignment Matrix: Independent alignment controls (Left/Center/Right) for Mobile and Desktop.

• Font Control: Use the global Theme Font or force specific Custom Fonts for Headings and Body text.

• Granular Sizing: Independent font-size sliders for every text element on both Desktop and Mobile.

5. Spacing & Visibility

• Container: Set a Max-Width (px) or toggle "Full Width".

• Padding: Fine-tune margins (Top/Bottom) and side padding (Desktop/Mobile).

• Device Targeting: Options to hide the section on Mobile Only or Desktop Only.