> For the complete documentation index, see [llms.txt](https://webvista-studio.gitbook.io/krank/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://webvista-studio.gitbook.io/krank/sections/functional-widgets/before-after.md).

# Before after

**Purpose**: To display contrast images of products, scenes or effects "before use" and "after use", in order to enhance visual impact and user understanding.

***

### 🎨 Color Scheme

Choose or customize a color scheme to define all element styles in this section, including background and text color. You can adjust the palette to match your brand’s identity

***

### 🧱 Section Structure

**1. Content Area**

You can enrich the section with the following blocks:

* Badge Group
* Button / Button Group (including link buttons and video popup buttons)
* Countdown, Description, Discount Code
* Follow Us, Heading, Subheading
* Highlight Stats, Keywords
* Icons, Icons with Text
* Link Group, Social Media List
* Video Button, Spacer

**2. Before & After Banner**

* **Full Width Option**: Enables the comparison banner to stretch across the full page width.
* **Image Height**: Select from:
  * Small
  * Medium
  * Large
* **Comparison Direction**:
  * **Horizontal** (left-right swipe)
  * **Vertical** (top-bottom swipe)

***

### 🖼 Image Settings

* **Before Image**:
  * Upload the "before" image (displayed on the left or top side)
  * Customize title and title color
* **After Image**:
  * Upload the "after" image (displayed on the right or bottom side)
  * Customize title and title color
* **Mobile Optimization**:
  * Supports separate image uploads for mobile devices for optimal display

***

### 📱 Visual-Only Mode

When the content block is hidden, the comparison banner will occupy the full section area, delivering a stronger visual impact—ideal for use cases such as skincare transformations, room makeovers, product effectiveness, etc.

***

### ✅Design Tips:

* Use high-resolution images with clear visual differences for better impact.
* Ensure title text has good contrast with the background for readability.
* Enhance conversions with call-to-action blocks like countdowns, buttons, or short descriptions (e.g., “Try It Now,” “Learn More”).