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

# Banner with text

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.

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

{% 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>

**Layout:** 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 schema:** You are allowed to change text color, background color, etc. with preset color.

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

### Animations

**Image behavior:** Includes animations that make your images more lively.

**Type:** Identifies the type of media utilized for the banner.

You can add images for desktop and mobile versions separately.&#x20;

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

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

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

### Content settings <a href="#id-2.-content" id="id-2.-content"></a>

**Image position:** Adjust the images' placement in relation to the content.&#x20;

**Content style:** Choose for the header to be positioned above or adjacent to the image.&#x20;

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

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

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

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

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

Content has default height with **Original** setting. Switch to **Custom** setting in case you want to set it up on your own.

<figure><img src="/files/9TNO7lqCtxmFPYiN61W7" alt=""><figcaption></figcaption></figure>

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

### Text beside image setting

**Image Position:** Configure the image to appear either to the left or right of the content.&#x20;

**Width:** Determine the width of the image.&#x20;

**Column Gap:** Adjust the padding around the content for spacing.

**Hover Effect:** Choose from a variety of hover effects for the image. Note: Hover effects may alter the size of your images.

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

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

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

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