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

# Before after

The **Before after** section places a "before" and an "after" image side by side next to your content, making it easy to show the difference your product delivers.

Example: <https://purity.nextsky.co/products/anti-aging-serum>

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2FjngejOSMrD7OJo8wwCnd%2Fimage.png?alt=media&amp;token=0a3c6496-d641-40d2-97ab-6cb402a3a22b" alt=""><figcaption></figcaption></figure>

#### Section settings <a href="#section-settings" id="section-settings"></a>

**General**

| Setting           | Description                                                                                                                                                                                                                                                                                                                             |
| ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Section width** | <p>3 options for the container width:</p><ul><li><strong>Fixed width</strong>: matches your page content width in <strong>Theme settings -> Layout</strong>.</li><li><strong>Stretch width</strong>: spans the width regardless of screen size.</li><li><strong>Full width</strong>: takes up the entire width of the screen.</li></ul> |
| **Color scheme**  | Select colors from **Theme settings -> Colors**.                                                                                                                                                                                                                                                                                        |

**Before after images**

| Setting                     | Description                                                                                                                                                                                                |
| --------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Image width**             | Width of the image column on desktop (40–100%). Automatically optimized for mobile.                                                                                                                        |
| **Before**                  | The "before" image.                                                                                                                                                                                        |
| **After**                   | The "after" image.                                                                                                                                                                                         |
| **Show before/after text**  | Shows a text label on each image.                                                                                                                                                                          |
| **Before text**             | Label shown on the before image (visible when **Show before/after text** is on).                                                                                                                           |
| **After text**              | Label shown on the after image (visible when **Show before/after text** is on).                                                                                                                            |
| **Image ratio**             | <p>Aspect ratio of the images:</p><ul><li><strong>Adapt to image</strong></li><li><strong>Square (1:1)</strong></li><li><strong>Portrait (3:4)</strong></li><li><strong>Landscape (4:3)</strong></li></ul> |
| **Desktop image position**  | Places the images to the **Left** or **Right** of the content on desktop. Images are shown above the content on mobile.                                                                                    |
| **Equal height adjustment** | Matches the height of the images to the height of the content column.                                                                                                                                      |

**Content settings**

| Setting                        | Description                                                                              |
| ------------------------------ | ---------------------------------------------------------------------------------------- |
| **Background type**            | Use a **Color** or an **Image** as the content background.                               |
| **Background image**           | The background image (visible when **Background type** is **Image**).                    |
| **Background color**           | The background color (visible when **Background type** is **Color**).                    |
| **Desktop vertical alignment** | Aligns content **Top**, **Middle**, or **Bottom** on desktop.                            |
| **Content alignment**          | Aligns the content **Left**, **Center**, or **Right**.                                   |
| **Column gap**                 | Space between the columns: **No gap**, **Small**, **Medium**, or **Large**.              |
| **Padding inline**             | Left and right spacing inside the content (0–100px). Automatically optimized for mobile. |
| **Padding block**              | Top and bottom spacing inside the content (0–100px). Automatically optimized for mobile. |

**Mobile layout**

| Setting               | Description                                                      |
| --------------------- | ---------------------------------------------------------------- |
| **Content alignment** | Aligns the content **Left**, **Center**, or **Right** on mobile. |

**Section padding**

| Setting    | Description                                            |
| ---------- | ------------------------------------------------------ |
| **Top**    | Customize the top padding of the section (0–100px).    |
| **Bottom** | Customize the bottom padding of the section (0–100px). |

**Section divider**

| Setting          | Description                                                              |
| ---------------- | ------------------------------------------------------------------------ |
| **Show divider** | Displays a dividing line to separate this section from the previous one. |

#### Block settings <a href="#block-settings" id="block-settings"></a>

Build the content column from blocks. This section supports:

1. **Heading**,
2. **Heading highlight**,
3. **Subheading**,
4. **Highlight text**,
5. **Description**,
6. **Button**,
7. **Countdown timer**,
8. **Citation**,
9. **Detail list**,
10. **Metrics**,
11. and **FAQs**, plus any compatible **app block**.

See the Citation, Detail list, Metrics, and FAQs block pages for their settings.