> For the complete documentation index, see [llms.txt](https://nextsky.gitbook.io/glozin-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://nextsky.gitbook.io/glozin-theme/theme-sections/image-with-text-overlay.md).

# Image with text overlay

<figure><img src="/files/aWNGHcQQEUKoMYtp2xUB" 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="/files/msrfVcAL5dDRE9LE3D4W" 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="/files/I70G1NwvX4fmZqPCDTSy" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/5hfAzaF4YhsaInncrsyP" 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.

**Content position:** Vertically and horizontally align the content for optimal positioning.

**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="/files/0q6XCmSdUxE1G5PAunOy" alt=""><figcaption></figcaption></figure>

### Content box

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

<figure><img src="/files/LSqEk5dSCfaEdGITJcA0" 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="/files/at7whJUT4UE0buVCIkgc" 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="/files/HTcZCFJRack5W2oDYpO4" alt=""><figcaption></figcaption></figure>

### Subheading

<figure><img src="/files/3tkIAIy8ynLlcRoFEgPT" alt=""><figcaption></figcaption></figure>

### Description

<figure><img src="/files/8dTmJVTmiEBfjOk11OPQ" alt=""><figcaption></figcaption></figure>

### Timer

<figure><img src="/files/POYZBM6l5wsGObtbbtBJ" alt=""><figcaption></figcaption></figure>

### Button

<figure><img src="/files/AITdqqEl74u5vS0eXxJq" 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="/files/3VQqSMKE2cQToetdhmFM" alt=""><figcaption></figcaption></figure>