# Image banner

***

**The Image banner** section is a perfect opener. A lightweight section that can present a full-width image.

### 1. Our guide to set up an Image banner section:

{% hint style="info" %}
**Steps:**

* In the theme editor, click **Add section.**
* Locate **Image banner.**
* Click **Save.**
  {% endhint %}

<figure><img src="https://t9008110498.p.clickup-attachments.com/t9008110498/98b4c6ed-4e1e-46a9-9339-4106d1052339/Screenshot%202023-11-16%20at%201.39.33%20PM.png" alt=""><figcaption></figcaption></figure>

### **2. Section blocks:**

<figure><img src="https://1670075522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6M5ltDUBhmgWKXclaWBK%2Fuploads%2FfmQBqaZxRbHJzWY0rBIL%2FScreenshot%202023-12-21%20at%2012.01.29%20PM.png?alt=media&#x26;token=80bff688-96a8-4b10-a63e-e958172f57f4" alt=""><figcaption></figcaption></figure>

* **Heading:** Use the provided text fields to add a suitable heading/description. Leave any of them blank if you do not want to display them.

<figure><img src="https://1670075522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6M5ltDUBhmgWKXclaWBK%2Fuploads%2F1qOF1DUBQrisxsCxFi9T%2FScreenshot%202023-12-19%20at%205.23.48%20PM.png?alt=media&#x26;token=3c43c13a-310d-4550-930e-9b90c03aab3b" alt=""><figcaption></figcaption></figure>

* **Text & Caption:** Click the **Text/Caption block** to customize its content. Add the content to the Description field.

<figure><img src="https://1670075522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6M5ltDUBhmgWKXclaWBK%2Fuploads%2FEq2L2US0aiyiGVyo9hGV%2FScreenshot%202023-12-19%20at%205.25.13%20PM.png?alt=media&#x26;token=6d37f68c-2c09-47fc-8057-079ac9e64798" alt=""><figcaption></figcaption></figure>

* **Countdown timer:** display a live countdown for an upcoming event or sale. Use this block to create a sense of urgency or anticipation for your customers.

<figure><img src="https://1670075522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6M5ltDUBhmgWKXclaWBK%2Fuploads%2F6ynHcuVhnzM8GArXgsMT%2FScreenshot%202023-12-19%20at%205.30.45%20PM.png?alt=media&#x26;token=eaaf8798-fd04-47e8-b0db-dd40497b4ac2" alt=""><figcaption></figcaption></figure>

* **Buttons:** Click the **Button** block to customize its content. Connect a page or other URL with the Link field.

<figure><img src="https://1670075522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6M5ltDUBhmgWKXclaWBK%2Fuploads%2FmqzqrrqJPCUbOisMjZBS%2FScreenshot%202023-12-19%20at%207.21.28%20PM.png?alt=media&#x26;token=afac76ae-1ad6-4ca0-b05a-1674751dc70d" alt=""><figcaption></figcaption></figure>

### **3. Image banner section settings:**

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

<figure><img src="https://1670075522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6M5ltDUBhmgWKXclaWBK%2Fuploads%2F2YYS0QdvcxdejJJkw7Wv%2FScreenshot%202023-12-20%20at%205.03.31%20PM.png?alt=media&#x26;token=7b4ee951-03f8-4721-b3b9-7447b157e393" alt=""><figcaption></figcaption></figure>

* **Image**: Select or upload one image. There are no required image dimensions but we recommend an image that is landscape (wider than it is tall). We recommend uploading an image with a minimum width of 2048px for optimal quality.

You can add a **link** to redirect customers to your desired page. **Enable parallax effect** and change **Image** **overlay opacity** if needed.

<figure><img src="https://t9008110498.p.clickup-attachments.com/t9008110498/1820a910-9107-458e-b304-2e6f67841339/Screenshot%202023-12-19%20at%207.10.08%20PM.png" alt=""><figcaption></figcaption></figure>

* **Banner height**: Section height options include: **Small**, **Medium**, and **Large**. Choose **Adapt section height to image size** to display the original image shape.

<figure><img src="https://t9008110498.p.clickup-attachments.com/t9008110498/9b1fcf42-2bd5-4f6c-bbee-68ec62b1a8f1/Screenshot%202023-12-19%20at%207.23.45%20PM.png" alt=""><figcaption></figcaption></figure>

* Align the content to the Left, Center, or Right by selecting one of these options from the **Desktop/Mobile content alignment** setting **to build the best look for different devices.**

<figure><img src="https://t9008110498.p.clickup-attachments.com/t9008110498/70aab6b5-4e70-48e6-90fd-56d369e6d5ee/Screenshot%202023-11-15%20at%203.31.32%20PM.png" alt=""><figcaption></figcaption></figure>

* Use the **Section width option** to control the maximum width of the **Image banner section** to **Full width** or **Fixed**.

{% tabs %}
{% tab title="Full width" %}

<figure><img src="https://t9008110498.p.clickup-attachments.com/t9008110498/0ff00b39-d026-4e23-9cd0-e6cc03036942/Screenshot%202023-12-19%20at%207.32.09%20PM.png" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Fixed" %}

<figure><img src="https://t9008110498.p.clickup-attachments.com/t9008110498/8d65c831-b7e8-475e-88db-5827d0027603/Screenshot%202023-12-19%20at%207.32.59%20PM.png" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}
