# Image with text overlay

<figure><img src="https://1887672278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGyYuzVsob5kZQHtG5da3%2Fuploads%2Fj1ufYgYKMvzcoPUGDgtu%2Fimage.png?alt=media&#x26;token=ff899f57-3350-4451-a942-c194cf18f2bc" alt=""><figcaption></figcaption></figure>

The image with text section provides an appealing and dynamic approach mixing media, message, and a call-to-action button. This is a great way to promote a product/collection or any exciting feature on your online store.

{% hint style="success" %}
Steps

1. In the theme editor (**Customize**), click **Add section**
2. Locate **Banner with text**
3. **Save**
{% endhint %}

## Section settings <a href="#section-settings" id="section-settings"></a>

### General <a href="#id-1.-general" id="id-1.-general"></a>

**Section width:** You can choose between Fluid Container, Stretch width, Full width for the layout or just leave it with the default layout of the video.

**Color scheme:** You are allowed to change text color, background color, etc. with preset color.

<figure><img src="https://1887672278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGyYuzVsob5kZQHtG5da3%2Fuploads%2FoYybWnbMaJhDb66TCFZK%2Fimage.png?alt=media&#x26;token=331db747-d853-454c-8ccc-f31b4bf49610" alt=""><figcaption></figcaption></figure>

### Image

**Image**: Select or upload an image for the banner on both desktop and mobile views.

**Overlay opacity**: Adjust the opacity level of the image overlay.

**Height**: Choose to automatically adapt the image height or set a custom height.

<figure><img src="https://1887672278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGyYuzVsob5kZQHtG5da3%2Fuploads%2FoD5sMjcc49GJoFTnSpXB%2Fimage.png?alt=media&#x26;token=a1844714-b08b-4160-bb7e-d09f0f252067" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1887672278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGyYuzVsob5kZQHtG5da3%2Fuploads%2FtxgcS9RTAG3wwEVe86To%2Fimage.png?alt=media&#x26;token=c5abf917-804a-4605-84fc-6c7674fe2c11" alt=""><figcaption></figcaption></figure>

### Content settings <a href="#id-4.-text-overlay-setting" id="id-4.-text-overlay-setting"></a>

**Content alignment:** Options to align text left, center, or right are available.&#x20;

**Content position:** Vertically and horizontally align the content for optimal positioning.&#x20;

**Content width:** Define the width of the content box for a tailored fit.

**Content padding**: Configure the padding for the content box.

<figure><img src="https://1887672278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGyYuzVsob5kZQHtG5da3%2Fuploads%2FtYQ2tbJTuim0eTgVhe5x%2Fimage.png?alt=media&#x26;token=f9840990-6ca5-441f-b3f8-542f84148630" alt=""><figcaption></figcaption></figure>

### Content box

You can set a background color and adjust the opacity for the it.

<figure><img src="https://1887672278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGyYuzVsob5kZQHtG5da3%2Fuploads%2FPLRLacrQMQDpJLfKM0Bc%2Fimage.png?alt=media&#x26;token=3e36c28b-b472-4964-b240-d25129b69628" alt=""><figcaption></figcaption></figure>

### Mobile options and Section padding <a href="#id-5.-section-padding" id="id-5.-section-padding"></a>

**Content Placement**: Choose to display content below the image or maintain the same layout as on desktop.

**Content alignment**: Set the alignment for content on mobile devices.

Section padding allows you to specify the space between this section and the preceding or following sections, or both.

<figure><img src="https://1887672278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGyYuzVsob5kZQHtG5da3%2Fuploads%2FhAuQfnO5HUGnsXFJA9m4%2Fimage.png?alt=media&#x26;token=002d515d-5d54-4c3d-af0e-a01d0ad5a72f" alt=""><figcaption></figcaption></figure>

## Block settings

Each block includes settings for content such as font size, font weight, text transformation, and spacing.

### Heading

<figure><img src="https://1887672278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGyYuzVsob5kZQHtG5da3%2Fuploads%2FkgXztUhRK8ZZG3GZkG9b%2Fimage.png?alt=media&#x26;token=1b82b4dc-8c90-448a-a6d3-b834faba0d71" alt=""><figcaption></figcaption></figure>

### Subheading

<figure><img src="https://1887672278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGyYuzVsob5kZQHtG5da3%2Fuploads%2Fi4hTdXWkuFW4QVbat2Us%2Fimage.png?alt=media&#x26;token=014d0210-6464-499b-8567-f38516d8340e" alt=""><figcaption></figcaption></figure>

### Description

<figure><img src="https://1887672278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGyYuzVsob5kZQHtG5da3%2Fuploads%2FM4XPsJIgQrGfohoghYEJ%2Fimage.png?alt=media&#x26;token=274ca8a9-334c-4ec6-aac0-34a1331e68d9" alt=""><figcaption></figcaption></figure>

### Timer

<figure><img src="https://1887672278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGyYuzVsob5kZQHtG5da3%2Fuploads%2FmGWD65I8YgFhwF3JtYHA%2Fimage.png?alt=media&#x26;token=6c0512fd-5a2e-4891-8067-5d77656d5025" alt=""><figcaption></figcaption></figure>

### Button

<figure><img src="https://1887672278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGyYuzVsob5kZQHtG5da3%2Fuploads%2FpUmYChasNLyDyrEkL2hz%2Fimage.png?alt=media&#x26;token=0ac88c62-9712-461f-8498-b4d95a8d4adf" alt=""><figcaption></figcaption></figure>

### Spacing

Section padding allows you to specify the space between this section and the preceding or following sections, or both.

<figure><img src="https://1887672278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGyYuzVsob5kZQHtG5da3%2Fuploads%2FPLPlDgtkEgVaiqPalxxF%2Fimage.png?alt=media&#x26;token=b375b138-2ecb-41ff-bc73-283fb564b1ec" alt=""><figcaption></figcaption></figure>
