# Before and After

Display any two images with our interactive slider to present the before state and after state. A powerful sales tool to showcase your services.

<figure><img src="https://2636770384-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsD7BEEDU3B7WiEJlN0F7%2Fuploads%2FX7NZDcWp9HfnWFMF93fu%2Fbefore%20after%20gif.gif?alt=media&#x26;token=2d587f68-9cc2-46df-a0ae-159f340a2e93" alt="gif showcasing before and after section"><figcaption></figcaption></figure>

### Video Overview

Discover how to customize and set up the '**Before and After**' section in this video walkthrough:

{% embed url="<https://www.loom.com/share/e9fa1746ac204b5889ee45ae2de8abf4?sid=e6719079-ec7e-4258-8ce1-f541c915e024>" %}
**Video: How to use the Before and After section**
{% endembed %}

### Section settings

| Settings           | Type          | Description                                           |
| ------------------ | ------------- | ----------------------------------------------------- |
| Primary image      | image\_picker | 2000 x 1400px .jpg recommended.                       |
| Secondary image    | image\_picker | 2000 x 1400px .jpg recommended.                       |
| Image aspect ratio | aspect\_ratio | Move the slider to shift your image from wide to tall |
| Width              | select        | Change section width                                  |
| Colors             | color\_scheme | Select color scheme for the section                   |
| Padding            | range         | Select top and bottom padding                         |