Features Breakdown: Before / After Slider This section creates an interactive comparison tool, allowing users to drag a slider to reveal the difference between two images. It is perfect for showcasing product results (e.g., skincare, cleaning, renovations) with precise control over labels and dimensions.

1. Slider Interaction & Styling

• Handle Styling: Customize the draggable slider handle.

  • Colors: Set colors for the Divider Line, Handle Circle, and Arrows.

• Interaction Mode:

  • Drag (Default): User must click and drag (or touch and slide) to move the handle.

  • Hover (Follow Mouse): Toggle an option to make the slider automatically follow the mouse cursor without clicking.

2. Image & Comparison Labels

• Media: Upload a "Before" image (Left) and an "After" image (Right).

• Labels: Optional text overlays (e.g., "BEFORE", "AFTER") that appear in the top corners.

  • Styling: Adjust the Text Color and Font Size (Desktop vs. Mobile).

  • Fix: Labels are smart-positioned to avoid stretching or overlapping.

3. Responsive Dimensions (Ratios)

• Aspect Ratio Modes: Control the shape of the comparison window independently for Mobile and Desktop:

  • Adapt: Automatically adjusts to the uploaded image's natural shape.

  • Presets: Force specific shapes like 16:9, 4:3, Square (1:1), or Portrait (3:4).

  • Custom Height: Set a fixed pixel height (e.g., 600px) to ensure alignment with other sections.

4. Typography & Layout

• Section Header: Optional Heading and Subheading placed above the slider.

• Font Control: Choose between the global Theme Font or force specific Custom Fonts for headings and labels.

• Sizing: Independent font-size sliders for Desktop and Mobile for all text elements.

5. Container & Spacing

• Width Control: Set a specific Max-Width (px) for the comparison tool.

• Visual Polish: Adjust the Corner Radius (rounded edges) and toggle a Drop Shadow for depth.

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

6. Visibility

• Device Targeting: Simple checkboxes to Hide the section on Desktop or Mobile.