# Image banner

This section is ideal for creating high-impact visuals that promote key products, highlight offers, or showcase new collections. It offers full control over layout, styling, and mobile responsiveness, ensuring a seamless experience for your visitors across devices.

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

### **1, How to add section in theme editor:**

{% stepper %}
{% step %}
In your theme editor (**Customize**), scroll to the bottom of the template and select **Add section**.
{% endstep %}

{% step %}
In the list, locate and select **Image banner** section. The section will now be added to your page, ready for customization.
{% endstep %}
{% endstepper %}

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

### **2, Section settings:**

Click on the **Image banner** section to open the section settings

* **Image**: Add an image for the desktop view. This image will display as the main background for the banner section. *Recommended dimensions: 1920 x 1080px* to ensure high resolution across larger screens.
* **Mobile image**: Upload a separate image specifically for mobile view to optimize visuals on smaller screens. If a mobile image isn’t uploaded, the desktop image will automatically be used for mobile as well. *Recommended dimensions: 1000 x 500px* for better fit on mobile devices.
* **Image link**: Assign a URL link to the image banner. When a visitor clicks on any part of the image, they’ll be directed to the specified URL.

{% hint style="info" %}
**Note***: If buttons are added to the banner, the image link will be disabled to prevent conflicts between clickable elements.*
{% endhint %}

* **Image overlay opacity**: Control the transparency of a color overlay on the image, adjustable from 0% to 100%. Increasing opacity can help improve text readability on the banner by darkening the image slightly. Select an overlay effect to style the image banner:

{% tabs %}
{% tab title="Gradient from bottom" %}
Applies a gradient starting from the bottom of the image.

<figure><img src="/files/YbSLofrnAK5sB5OF808P" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Gradient from top" %}
Applies a gradient starting from the top of the image.

<figure><img src="/files/xEumIwu8FjLKfPWy3jy0" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Full image darken" %}
Applies a full, darkened overlay across the entire image.

<figure><img src="/files/CzPt6HDjUDoQKaTxqsDf" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

* **Desktop banner height**: Customize the height of the banner image on desktop displays: **Small**, **Medium**, or **Large** adjust the image height in increments. With **Full screen**: Expands the image to fill the entire height of the screen. And **Adapt to image size** option keeps the original image dimensions.
* **Desktop content position**: Position the content (text, buttons, etc.) on the image banner.&#x20;

{% tabs %}
{% tab title="Middle left" %}

<figure><img src="/files/NsTrycExqS7NlzEm2p8c" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Middle center" %}

<figure><img src="/files/kflm9E5YgspaDMdPdGxo" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Middle right" %}

<figure><img src="/files/BC6hgPYL8yhzb1IuAWLH" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

* **Desktop content width**: Control the maximum width of the content blocks within the mage. Options include **Small**, **Medium**, and **Large**. This setting will automatically adjust for optimal display on mobile devices.
* **Animations setting**: lets you customize the scrolling behavior of the banner image:&#x20;
  * **None**: The image scrolls along with the rest of the page content.&#x20;
  * **Fixed background position**: Keeps the image fixed in place as the page scrolls, creating a **parallax effect**.
* **Mobile layout setting:** optimize the banner section for mobile devices:
  * **Mobile banner height**: Adjust the banner height specifically for mobile devices. Choose from **Small**, **Medium**, **Large**, or **Fullscreen** for varying levels of image height. And **Adapt to image size** uses the original dimensions of the image on mobile.
  * **Show text below image:** When enabled, all content blocks (text, buttons, countdown timer) will appear below the banner image on mobile devices. If unchecked, content displays over the image.

### **3, Block settings:**

**a. Heading block**

* Enter a heading with rich text.
* **Heading size**: Select from **Small**, **Medium**, **Large**, **Extra large**, or **Extra extra large** to fit your banner.
* **Highlight style**: Apply a custom color to highlighted words.&#x20;

**b. Text block:** Add a description or supporting text under the heading.

**c. Caption block:** Add a caption to provide additional context or details. Customize the caption style as **Uppercase** or **Subtitle**.

**d. Countdown timer block**: Add a countdown timer to highlight time-sensitive promotions or launches.

* Specify the **end date**, **end time**, and **size** for the countdown timer.
* **Enable "Hide when countdown reaches zero"**: Automatically hides the timer once it reaches zero.
* Add or remove a border around the countdown timer.

**e. Buttons block:**

* Enter a label, assign a link, and select a style for each button.&#x20;
* Choose from available color options to customize the button appearance.

{% hint style="info" %}
**Note***: If the button label is left blank, the button will not display.*
{% endhint %}

**f. Collections block:** Showcase a curated list of collections within the Image banner section.

* **Collections:** Select up to six collections to display in the block.
* **Color:** Allow you to set a custom text color, replacing the default white text.

**g. Logo image block:** display an image as an overlay on the Image banner, highlight a logo visually or tagline.

* **Image:** Upload the logo image to be displayed as an overlay on the banner.
* **Desktop image width:** Adjust the width of the logo on desktop devices to ensure proper scale and visibility.
* **Mobile image width:** Control the logo size specifically for mobile screens for better responsiveness.
* **Position** *(Middle, Bottom):* Set the vertical placement of the logo within the banner.
* **Alignment** *(Left, Center, Right):* Adjust the horizontal alignment of the logo to position it on the left, center, or right side of the banner.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.byinspiredlabs.com/section/image-banner.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.