# Hero banner

***

The **Hero banner** is a high-impact section used to showcase key visuals, promotions, or brand messaging at the top of a page. It supports images, videos, and flexible content positioning for maximum visual appeal.

### 1. Our guide to set up a Hero banner section:

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

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

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

### 2. **Section settings**

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

* **Media:**
  * **Image / Mobile image:** Upload banner images for desktop and mobile.
  * **Video:** Upload a video. *Video overrides image if both are set.*
  * **Image link:** Make the banner clickable.
  * **Media overlay opacity:** Adjust overlay darkness for better text readability.
  * **Desktop banner height:** *Small, Medium, Large or Custom.*
  * **Custom height**: Adjust from *250px to 850px.* Applies only when **Custom** is selected.
  * **Adapt to image size:** Keeps original image ratio (overrides height settings, not applied to video).
* **Content settings:**
  * **Description:** Add supporting text.
  * **Content width:** Control content container width.
  * **Button label & Button link:** Add label and assign link for CTA button.
  * **Use outline button style:** Switch between solid and outline styles.
  * **Content position:** Place content anywhere on the banner (top/middle/bottom + left/center/right).
* **Colors:** Customize colors specifically for this section (overrides theme defaults if set):
  * **Text color**
  * **Button label color**
  * **Button background color**
  * **Button outline color**
* **Mobile layout**
  * **Mobile banner height***:* Adjust height specifically for mobile devices from 150px to 750px.
  * **Mobile content alignment**: Controls how content is aligned on mobile screens.

### **3. Heading block** settings

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

* **Heading:** Main title displayed on the banner.
* **Font size scale:** Scales the heading relative to the base font size for stronger visual impact.
* **Heading position:** Allows independent positioning from other content elements.
* **Block spacing:**
  * **Top padding:** Adds spacing from the top edge. Only applies when position is set to **Top**.

### **4. Scrolling text block settings**

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

* **First / Second / Third text:** Add looping scrolling messages.
* **Text size:** Adjust the size of the scrolling text.
* **Text position***:* Choose the position of scrolling text on the banner.
* **Direction:** Defines the scrolling direction of content across the banner.
* **Speed:** Controls how fast the announcements move: *Slow, Normal or Fast.*
* **Block spacing:**
  * **Top padding:** Adds spacing from the top edge. Only applies when position is set to **Top**.

### **5. Logo image block** settings

<figure><img src="/files/16POBomuaaMvyhFWY6iK" alt=""><figcaption></figcaption></figure>

* **Image:** Upload logo for desktop.
* **Mobile image:** Upload a separate logo for mobile display.


---

# 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.inspiredtheme.com/articles/sections/sections-available-in-inspiredtheme/hero-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.