# Image with text

<figure><img src="https://1556176885-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPgk3wauuyAKlfkLLpBvA%2Fuploads%2FaCI2JYyEQMEF9zxDYedv%2Fim1.jpg?alt=media&#x26;token=1978b471-9aca-4cd5-adc8-4bd2f2e80675" alt=""><figcaption></figcaption></figure>

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

1. In the theme editor **(Customize)**, click **Add section.**
2. Locate **Image with text.**
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%2F8jFQeZ3KmjQjlR7DIeFF%2Fim2.jpg?alt=media&#x26;token=5efe0f97-5dfe-4124-a595-3f8e710fee39" alt=""><figcaption></figcaption></figure> <figure><img src="https://1556176885-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPgk3wauuyAKlfkLLpBvA%2Fuploads%2FvWwJKXDIR3o4Y9hjDAls%2Fim3.jpg?alt=media&#x26;token=5b5d36b9-2912-4b2c-aa81-a8bbb3477863" alt=""><figcaption></figcaption></figure></div>

* **Width** - With of this section 3 options : Container / Stretched / Full width
* **First Image -** 1340 **x 1340 .jpg recommended.**
* **First media size**
* **Use video instead of image**&#x20;
* **Show second image**
* **Second image 1340 x 1340 .jpg recommended.**
* **Position second image**
* **Second image size**
* **Media width  -** Image column width

### Video

* **Video URL** - Accepts Vimeo or YouTube links
* **Shopify-hosted video** - Overrides the Video URL setting.
* **Poster image** - 1340 x 1340 .jpg recommended. If image blank, Shopify-hosted video will use the preview image.
* **Autoplay** - Video will be muted
* **Display video controls**&#x20;

### Layout

<figure><img src="https://1556176885-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPgk3wauuyAKlfkLLpBvA%2Fuploads%2Fr4xpNSX5Xb36jC1YYFz4%2Fimg-layout.jpg?alt=media&#x26;token=6aabba0d-9e33-46bd-accc-ac92c6c033d0" alt=""><figcaption></figcaption></figure>

* Desktop image placement - Left / Right (Image first is the default mobile layout.)
* Column gap&#x20;
* Vertical alignment - Top / Middle / Bottom
* Content alignment - Left / Center / Right

### Colors

<figure><img src="https://1556176885-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPgk3wauuyAKlfkLLpBvA%2Fuploads%2Fl5uAzB1j2kNU5Y37UH6t%2Fimg-color.jpg?alt=media&#x26;token=18781aa7-cd8d-43c3-b629-7a35ca2bb2d6" alt=""><figcaption></figcaption></figure>

* **Background**
* **Text color**
* **Background text column**

### Section padding

<figure><img src="https://1556176885-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPgk3wauuyAKlfkLLpBvA%2Fuploads%2Fc0cazMLYpU5yjLuS4vGl%2Fpadding-c.jpg?alt=media&#x26;token=d8c91b56-445e-4ea5-bbc5-f825cf08e577" alt="" width="280"><figcaption></figcaption></figure>

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

## **Block settings**

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

1. Locate **Image with text**
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%2FB9SW0t97ly8WvBuAK9wX%2Fimw.jpg?alt=media&#x26;token=c87356a2-51d8-48cb-b800-68dd3b5a650a" alt=""><figcaption></figcaption></figure>