# 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="/files/Uh8U317Y5BESkZedJfkq" 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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://broadcast.presidiocreative.com/broadcast-v5/sections/broadcast-sections/before-and-after.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
