# Banner hero

{% hint style="success" %}
Steps

1. In the theme editor (**Customize**), click **Add section**
2. Locate **Banner hero**
3. **Save**
   {% endhint %}

The Hero Banner allows you to upload video or image content for both desktop and mobile devices, ensuring a seamless experience across all screen sizes. You can also customize the height to fit your desired look, whether it's a full-screen display or a more compact banner.

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

### General setting <a href="#id-1.-design-settings" id="id-1.-design-settings"></a>

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

**Heading**

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

**Settings**

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

**Color and Overlay**

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

**Mobile**

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