# Image banner

The Image banner section uses a high-resolution image, text, and a call-to-action button to display immersive content.

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

{% hint style="success" %}
Steps

1. In the theme editor (**Customize**), click **Add section**
2. Select **Image banner**
3. **Save**
   {% endhint %}

## Section settings

### General settings

Change the **Layout**, **Banner height**, and the **Color scheme**.

**Banner height** options include:

* Adapt to image
* Small
* Medium
* Large
* Full screen

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

### Image settings

Add an image and a link to redirect customers to your desired page (if needed).

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

### Content settings

Set your **Content position** and **Content alignment**.

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

### Mobile settings

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

You can set a different image banner for your mobile view.

If you want to display your content under the image for mobile view, check the option **Stack images on mobile**.

<figure><img src="/files/947X6wv4zL5oFdUNbbAI" alt=""><figcaption></figcaption></figure>

Adjust the **Content alignment** for the mobile view as Left/Center/Right.

## Block settings&#x20;

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

Add and edit your **Heading**, **Subheading**, **Description**, and **Button** to your liking. You can drag and drop the block to reorder it.

### Button settings&#x20;

Give your button a label and select its style.

Button styles include:

* Primary
* Secondary
* Outline
* Underline
* Plain

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


---

# 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://docs.foxecom.com/megamog-theme/theme-sections/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.