# Image with text overlay

<figure><img src="https://1556176885-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPgk3wauuyAKlfkLLpBvA%2Fuploads%2FwqxHDgWnPvZmd0EFlRZx%2Fiw.jpg?alt=media&#x26;token=847f42cf-6373-443c-be43-e1ffb4f88e8e" 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://1556176885-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPgk3wauuyAKlfkLLpBvA%2Fuploads%2Fhj7tXozVx9QbJCQYz6zS%2Fiw-g1.jpg?alt=media&#x26;token=b01a6d93-63f1-4368-b38d-eb706f4db481" alt=""><figcaption></figcaption></figure> <figure><img src="https://1556176885-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPgk3wauuyAKlfkLLpBvA%2Fuploads%2FQOvs5ncI20PeZudPLnes%2Fiw-g2.jpg?alt=media&#x26;token=fb5946ab-9a98-4be6-8010-79614d32dbf6" alt=""><figcaption></figcaption></figure></div>

* **Section width** -  Container / Stretched / Full width&#x20;
* **Image** - Desktop
* **Mobile image (optional)**
* **Link** - Provide a link to make the entire section clickable.
* **Desktop height** - Adapt to image /  450px / 550px / 650px / 750px /  Full screen&#x20;
* **Mobile height** - Adapt to image / 400px / 450px / 500px / 550px / Full screen&#x20;
* **Desktop Content position**
* **Mobile content position**
* **Content width -** Small / Normal / Large / Container

### Animation

<figure><img src="https://1556176885-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPgk3wauuyAKlfkLLpBvA%2Fuploads%2FhRp6qDHH6h0BhWqUDE7G%2Fiw-g3.jpg?alt=media&#x26;token=f4caa2b1-9a52-4449-bd8e-bd2a29e869aa" alt=""><figcaption></figcaption></figure>

* **Enable parallax** - Better with large images and height set to px

### Colors

<figure><img src="https://1556176885-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPgk3wauuyAKlfkLLpBvA%2Fuploads%2FtlAotY1sEUiWqatmQZxN%2Fiw-g4.jpg?alt=media&#x26;token=56e51153-7f10-4d3a-a4fa-b97c188d80df" alt=""><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://1556176885-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPgk3wauuyAKlfkLLpBvA%2Fuploads%2F3iI2KURC37x4CQRs3oEn%2Fiw-block.jpg?alt=media&#x26;token=b3130e2c-c7f5-4a51-9613-9e51c864708d" alt=""><figcaption></figcaption></figure>
