# 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/Y7qRoEtZDVZADcUOVdzb/blobs/yBmvuyExq3Omz7uARG79/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/Y7qRoEtZDVZADcUOVdzb/blobs/WgGzWbEcC86FGwP1RqP2/image.png" alt=""><figcaption></figcaption></figure>

**Heading**

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

**Settings**

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

**Color and Overlay**

<figure><img src="https://content.gitbook.com/content/Y7qRoEtZDVZADcUOVdzb/blobs/5bChlBuamdc2wnzKlegj/image.png" alt=""><figcaption></figcaption></figure>

**Mobile**

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