> For the complete documentation index, see [llms.txt](https://oranthemes.gitbook.io/edge-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/edge-theme/theme-sections/before-after-image.md).

# Before/after image

<figure><img src="/files/ST35O45b9g0mFh32eURq" 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/4F0sYgJF1DENVsMjTV3C" alt=""><figcaption></figcaption></figure>

* **Width** - With of this section 3 options : Boxed / Wide / Full
* **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/0hNQJOyZcOkN9HqYx3Ej" alt=""><figcaption></figcaption></figure>

* **Image placement** - Left / Right / Bottom
* **Desktop height mode ⇒** Adapt to image/ Full screen / Fixed height
* **Desktop fixed height ⇒** Height applied when 'Fixed height' is selected
* **Mobile height mode ⇒** Adapt to image/ Full screen / Fixed height
* **Mobile fixed height ⇒** Height applied when 'Fixed height' is selected

### 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**

## **Block Settings**

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