# 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://content.gitbook.com/content/j8jzXN4KKXAfQhgbN5lO/blobs/aX12qIOFLFHWpLQy0lQk/before-after-hair-makeup.gif" alt=""><figcaption><p><strong>Before and after interactive slider</strong></p></figcaption></figure>

### Flexible

When you add text and button content, use it as a two-column section. Optionally, display it as a full-width single column without blocks.&#x20;

### Customize

* In the section settings, add two similar sized images for best results.
* Adjust the image aspect ratio for taller or wider images.&#x20;
* Use a Rich Text section above for a large single-column heading, or add the heading, text and button blocks to build a two-column version.&#x20;
* Adjust the section colors and padding for the perfect look.&#x20;

### 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 %}