# Before/after image

<figure><img src="https://2841038207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGTidUfSjAqopf8pRRmN%2Fuploads%2FW3F45WargR80TZDUFTal%2F2025-04-04_12-22-44.jpg?alt=media&#x26;token=09c19e26-6f28-4b58-93fd-0e8be2300ac8" 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="https://2841038207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGTidUfSjAqopf8pRRmN%2Fuploads%2FbTjZPxoCuRuz8RuGuO7T%2F2025-04-04_12-23-17.jpg?alt=media&#x26;token=ad02c237-4fdc-4ec0-9964-c0b8fc2d6f7c" 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="https://2841038207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGTidUfSjAqopf8pRRmN%2Fuploads%2FQMb3PJmvKp02LUpzF5JQ%2F2025-04-04_12-23-55.jpg?alt=media&#x26;token=e747c7a5-ae90-4dd3-874c-0b0217660633" 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="https://content.gitbook.com/content/IGTidUfSjAqopf8pRRmN/blobs/UGk0oLMDJ9FIGhG6FfAC/color-c.jpg" alt="" width="280"><figcaption></figcaption></figure>

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

### Section padding

<figure><img src="https://content.gitbook.com/content/IGTidUfSjAqopf8pRRmN/blobs/n2xL6bjz1tYl76g1pebr/padding-c.jpg" alt="" width="280"><figcaption></figcaption></figure>

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

## **Block Settings**

<figure><img src="https://2841038207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGTidUfSjAqopf8pRRmN%2Fuploads%2FwWicrnOZM4QRtJz7aN1L%2F2025-04-04_12-25-38.jpg?alt=media&#x26;token=70dfa8aa-1ce4-4055-9336-5f6f1f0e166d" alt=""><figcaption></figcaption></figure>