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

# Before/after image

<figure><img src="/files/BhqvPFwU5GkWeBpzkJMK" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
**Steps:**&#x20;

1. In the theme editor **(Customize)**, click **Add section.**
2. Locate **Before/after image**
3. Make necessary changes. > **Save.**
   {% endhint %}

### General settings

<figure><img src="/files/9nHrnNpQWxhLwXl8wBRJ" alt=""><figcaption></figcaption></figure>

* **Width** - With of this section 3 options : Container / Stretched / Full width
* **Subheading**&#x20;
* **Heading** - Heading of this section
* **Heading size** - From Heading 1 to Heading 6
* **Description** - Description of this section
* **Layout** - *Horizontal / Vertical*

### Settings

<figure><img src="/files/8wChlg7xycFqcIaK3KA9" alt=""><figcaption></figcaption></figure>

* **Image placement** - Left / Right / Bottom
* **Desktop height** - Adapt to image /  450px / 550px / 650px / 750px&#x20;
* **Mobile height** - Adapt to image / 400px / 450px / 500px / 550px&#x20;

### Colors

<figure><img src="/files/lO3No6N1xgS1wu5SBX7z" alt="" width="280"><figcaption></figcaption></figure>

* **Background**
* **Text color**

### Section padding

<figure><img src="/files/LBq81hS9G4lOzLHuSNRz" alt="" width="280"><figcaption></figcaption></figure>

* **Top padding**
* **Bottom padding**