> For the complete documentation index, see [llms.txt](https://ursus-ecom.gitbook.io/v1/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ursus-ecom.gitbook.io/v1/blocks/blocks/banner.md).

# Banner

Create visually rich content areas with background images or videos, hover effects, and nested blocks for text, buttons, and more.

<figure><img src="https://193928255-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9PfGmHWEt81G4XNeDZqZ%2Fuploads%2Fb3nbEvAyQQ0OxOcZdOoS%2FBanner.webp?alt=media&amp;token=3887b192-4068-4eba-aab9-3c859828bba9" alt=""><figcaption></figcaption></figure>

The Banner block is one of the most versatile building blocks in Arctos. It works like a visual container — you set a background image or video, then layer other blocks (headings, text, buttons) on top. The result is a rich, immersive content area that combines visuals with messaging.

Think of it as a canvas: the background sets the mood, and the blocks you add on top deliver the message. Banners are perfect for hero sections, promotional areas, product features, and any content where you want imagery and text to work together.

### 1. What you can do

* Set a background image or auto-playing video behind your content
* Add any combination of blocks on top: headings, text, buttons, images, and more
* Control content arrangement — stack vertically or lay out horizontally
* Add hover effects: color overlays, media swaps, or animated transitions
* Link the entire banner to a product, collection, or URL with a single click
* Set separate sizing and aspect ratios for desktop and mobile
* Enable parallax scrolling for a dynamic depth effect

***

### 2. Where you can use this block

| Section                | Maximum per section |
| ---------------------- | ------------------- |
| **Any Custom Section** | Unlimited           |

***

### 3. How to add this block

1. In the **Theme Editor (Customize)**, click the section where you want to add a banner.
2. Click **Add block**.
3. Select **Banner** from the block list.
4. Upload a background image or video.
5. Add content blocks inside the banner (heading, text, button, etc.).
6. Adjust the layout and appearance settings below.
7. Click **Save**.

***

### 4. Block settings

These settings control the banner's layout, background, hover behavior, and spacing.

#### Layout

The Banner works as a flexible container. You control how the content blocks inside it are arranged.

**Direction**

Controls whether the blocks inside the banner stack on top of each other or sit side by side.

| Option         | Description                                                                                                           |
| -------------- | --------------------------------------------------------------------------------------------------------------------- |
| **Vertical**   | Blocks stacks from top to bottom. Best for centered hero layouts with a heading, text, and button stacked vertically. |
| **Horizontal** | Blocks flow from left to right. Best for side-by-side layouts like "image with text" designs.                         |

***

**Alignment and Position**

Controls where the content sits within the banner area. Depending on your **Direction** setting:

* **Vertical direction:** Align content to *Top*, *Middle*, or *Bottom*, and horizontally to *Left*, *Center*, or *Right*.
* **Horizontal direction:** Position content from *Left*, *Center*, *Right*, or *Space between*.

{% hint style="success" icon="lightbulb" %}
**Tip:** For a classic hero banner, set Direction to *Vertical*, position content in the *Middle + Center*, and your heading, text, and button will sit perfectly centered over the background.
{% endhint %}

***

**Width**

Controls the horizontal size of the banner within the section.

| Option     | Description                                         |
| ---------- | --------------------------------------------------- |
| **Fit**    | The banner is only as wide as its content requires. |
| **Fill**   | The banner stretches to fill the available width.   |
| **Custom** | Set an exact width in pixels or percentage.         |

***

**Gap**

Controls the spacing between blocks inside the banner.

***

**Custom on mobile**

When enabled, you can set different layout properties for mobile — including direction, alignment, gap, and width. This is essential when a horizontal desktop layout needs to stack vertically on phones.

***

#### Background media

This is the defining feature of the Banner block — the visual content that appears behind all other blocks.

**Media type**

Choose what type of media to use as the banner background.

| Option    | Description                                                                               |
| --------- | ----------------------------------------------------------------------------------------- |
| **Image** | A static background image. Best for most use cases — fast loading and visually impactful. |
| **Video** | An muted background video. Creates a dynamic, cinematic effect.                           |

***

**Image / Video**

Upload or select the background media file.

{% hint style="success" icon="lightbulb" %}
**Tip:** For background images, choose high-quality photos that remain visually interesting even when text and buttons are displayed on top. Dark or muted images tend to work better than bright, busy images.
{% endhint %}

***

**Aspect ratio**

Forces the banner into a specific shape, regardless of the background media dimensions.

**Options:** *Auto / Portrait / Landscape / Square*

Choose from ratios like 16:9, 4:5, 3:4, and more depending on orientation.

***

**Parallax**

When enabled, the background image scrolls at a slightly slower speed than the rest of the page, creating a sense of depth. This subtle effect makes sections feel more dynamic and premium.

{% hint style="info" icon="note-sticky" %}
**Note:** Parallax only applies to background images, not videos. It works best with landscape images that are taller than the visible banner area.
{% endhint %}

***

#### Hover interactions

Banners support rich hover effects that activate when a customer moves their mouse over the banner.

**Hover color overlay**

Add a color layer that appears when customers hover over the banner.

* **Solid** — A flat color covers the entire banner on hover.
* **Gradient** — A directional color gradient fades across the banner on hover.

***

**Hover media swap**

Replace the entire background media when customers hover. This lets you create interactive experiences — for example, a static image that transforms into a playing video on hover.

***

**Full banner link**

Turns the entire banner into a single clickable link. When enabled, customers can click anywhere on the banner to navigate to the linked page — not just on buttons.

{% hint style="success" icon="lightbulb" %}
**Tip:** Full banner linking works great for promotional cards and product feature banners. However, if your banner contains buttons that link to different destinations, keep this disabled to avoid conflicting click targets.
{% endhint %}

***

#### Overlay

Add a semi-transparent layer between the background media and your content blocks. Overlays improve text readability by darkening or coloring the background.

{% hint style="warning" icon="triangle-exclamation" %}
**Warning:** Without an overlay, light text on a bright background image can become invisible. Always add an overlay when placing text over photos — even a subtle 20–30% dark overlay makes a significant difference in readability.
{% endhint %}

***

#### Spacing

**Custom padding and margin**

Control the internal padding (space between the banner edge and its content) and external margin (space between the banner and neighboring blocks). Supports independent mobile values.

{% hint style="success" icon="lightbulb" %}
**Tip:** Generous internal padding (40px or more) gives your banner content breathing room and creates a premium, spacious feel. Tight padding works for compact card-style banners.
{% endhint %}

***

### 5. How to use it effectively

#### Creating a hero banner

The most common use — a full-width visual with a strong message:

1. Add a **Banner** block to your section.
2. Upload a high-quality background image or looping video.
3. Set the **Aspect ratio** to *Landscape 16:9* for a cinematic look.
4. Enable an **Overlay** (dark, 30–40% opacity) to ensure text readability.
5. Add a **Heading** block inside the banner with your main message.
6. Add a **Text** block with a short supporting description.
7. Add a **Button** block with "Shop Now" linked to your featured collection.
8. Center all content using *Middle + Center* alignment.

#### Building a product feature card

Create a compact banner that showcases a product:

1. Add a **Banner** block and set the width to a fixed size (e.g., 400px).
2. Upload a product lifestyle image as the background.
3. Set **Aspect ratio** to *Portrait 4:5* for a card format.
4. Enable **Full banner link** pointing to the product page.
5. Add a **Heading** block with the product name at the bottom.
6. Set hover media to swap to a second product angle on hover.

#### Creating an "Image with text" layout

Replicate the classic image-with-text section using a single banner:

1. Add a **Banner** block with your background image.
2. Set **Direction** to *Horizontal*.
3. Add a **Group** block inside with heading, text, and a button.
4. Position the content to one side using alignment settings.
5. Enable **Custom on mobile** to stack content vertically on phones.

***

### 6. Tips & best practices

{% hint style="success" icon="lightbulb" %}
**Tip:**&#x20;

* Always preview your banner on both desktop and mobile. A wide landscape banner may look stunning on desktop but can feel too narrow on a phone — use **Custom on mobile** to set a taller aspect ratio for smaller screens.

***

* Less is more inside a banner. Stick to 2–3 content blocks (heading + text + button) for maximum clarity. Overcrowded banners dilute the visual impact of your background media.
  {% endhint %}

{% hint style="info" icon="note-sticky" %}
**Note:**&#x20;

* The Banner block accepts most other blocks as nested content — including images, icons, countdown timers, and forms. This makes it extremely flexible for creating custom layouts.
  {% endhint %}

{% hint style="warning" icon="triangle-exclamation" %}
**Warning:** Background videos increase page load time. Use short (10–20 second), highly compressed video clips. If the video is purely atmospheric, keep it under 5 MB.
{% endhint %}