# Image with text overlay

<figure><img src="https://2841038207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGTidUfSjAqopf8pRRmN%2Fuploads%2F4hXRATqdOjrJnJCgvpd6%2F2025-04-04_13-15-30.jpg?alt=media&#x26;token=a964a4ca-91a5-4b3d-a1ee-9bcd9c4ceaab" alt=""><figcaption></figcaption></figure>

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

1. In the theme editor **(Customize)**, click **Add section.**
2. Locate **Image with text overlay**
3. Make necessary changes. > **Save.**
{% endhint %}

## General Settings

<div><figure><img src="https://2841038207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGTidUfSjAqopf8pRRmN%2Fuploads%2FKr3Dc4aLcFdNkRn3zhid%2F2025-04-04_13-16-07.jpg?alt=media&#x26;token=99db8c05-1fa1-429f-bc45-2de75f2e1a5f" alt="" width="281"><figcaption></figcaption></figure> <figure><img src="https://2841038207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGTidUfSjAqopf8pRRmN%2Fuploads%2FIeMY4OMQbajx6dHcNOrN%2F2025-04-04_13-16-55.jpg?alt=media&#x26;token=a59f6c51-7f91-4da4-982b-89dedf521074" alt="" width="283"><figcaption></figcaption></figure></div>

* **Section width** -  Boxed / Wide / Full
* **Image** - Desktop
* **Mobile image (optional)**
* **Link** - Provide a link to make the entire section clickable.
* **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
* **Desktop content position**
* **Mobile content position**
* **Content width -** Small / Normal / Large / Boxed

### Animation

<figure><img src="https://2841038207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGTidUfSjAqopf8pRRmN%2Fuploads%2F2vNHZJ8gfuk1tJSQtK6I%2F2025-04-04_13-18-07.jpg?alt=media&#x26;token=72fa2fc0-568b-4d9b-b7e2-95b65113760f" alt="" width="280"><figcaption></figcaption></figure>

* **Enable parallax** - Better with large images and height set to px
* **Enable scroll reveal**
* **Enable first section** ⇒ When this section on top of other sections
* **Direction scroll reveal** ⇒ In / Out
* **Threshold down** ⇒ The threshold for the section to be revealed when scrolling down

### Colors

<figure><img src="https://2841038207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGTidUfSjAqopf8pRRmN%2Fuploads%2FD7ncdCorOGSttk4u6lRY%2F2025-04-04_13-20-15.jpg?alt=media&#x26;token=2400c2f6-0376-4be1-9f26-5586f24393a9" alt="" width="281"><figcaption></figcaption></figure>



* **Text color**
* **Overlay color**
* **Overlay opacity**
* **Overlay gradient** - Overwite overlay color

## **Block settings**

{% hint style="success" %}
Steps:

1. Locate **Image with text overlay**
2. **Add Block. >** Select block you want
3. Make necessary changes. > **Save.**
{% endhint %}

<figure><img src="https://content.gitbook.com/content/IGTidUfSjAqopf8pRRmN/blobs/WjP4kch2k6dpcxLGpkTr/iw-block.jpg" alt=""><figcaption></figcaption></figure>

