# Banner with infor

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="https://content.gitbook.com/content/z14kVz432NnMEq8AbqBr/blobs/5oJVNeFAZNGwZtQqHZDI/image.png" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
Steps

1. In the theme editor (**Customize**), click **Add section**
2. Locate **Banner with infor**
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="https://content.gitbook.com/content/z14kVz432NnMEq8AbqBr/blobs/zfbH9Px2GPbUqnxL6g9L/image.png" alt=""><figcaption></figcaption></figure>

### Animations

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

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

<figure><img src="https://content.gitbook.com/content/z14kVz432NnMEq8AbqBr/blobs/g7HeK9HJrP19AsTVU1Xu/image.png" alt=""><figcaption></figcaption></figure>

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

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

**Content:** Adjust the vertical alignment of content.&#x20;

**Content max width:** Define the maximum width for your content.

<figure><img src="https://content.gitbook.com/content/z14kVz432NnMEq8AbqBr/blobs/gmv0p7xRjRAHEEzUMtP3/image.png" alt=""><figcaption></figcaption></figure>

### Text beside image setting <a href="#id-3.-text-beside-image-setting" id="id-3.-text-beside-image-setting"></a>

**Image Position:** Configure whether the image or video appears to the left or right of the text.&#x20;

**Width:** Determine the width for the image or video.&#x20;

**Column Gap:** Adjust the spacing between the text and image/video content.&#x20;

**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="https://content.gitbook.com/content/z14kVz432NnMEq8AbqBr/blobs/eSjgfHnIzsuiUq4XWGii/image.png" 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="https://content.gitbook.com/content/z14kVz432NnMEq8AbqBr/blobs/KNfkOwLoPbB4PM7YXPh6/image.png" alt=""><figcaption></figcaption></figure>

### Theme settings

By providing the URL link to your social media, you can make its corresponding icon appear, offering a direct link to your profiles.

<figure><img src="https://content.gitbook.com/content/z14kVz432NnMEq8AbqBr/blobs/Uz2tYoV8AcfBsAU7gz5F/image.png" alt=""><figcaption></figcaption></figure>