---
title: Banner
url: "https://flatsome.com/docs/banner"
lastUpdated: 2026-09-30
---

A versatile hero section with background image/video, text overlays, and optional link. Supports hotspots and shape dividers.

| Property | Value             |
| -------- | ----------------- |
| Name     | `flatsome/banner` |

## Attributes

| Name           | Type      | Default | Description                                                                                                               |
| -------------- | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------- |
| background     | `object`  | —       | —                                                                                                                         |
| ├─ color       | `string`  | —       | —                                                                                                                         |
| ├─ focalPoint  | `string`  | —       | [`block:flatsome/image#/attributes/focalPoint`](/docs/image.md#attributes)                                                |
| ├─ hoverEffect | `object`  | —       | [`block:flatsome/image#/attributes/hoverEffect`](/docs/image.md#attributes)                                               |
| ├─ id          | `object`  | —       | [`block:flatsome/image#/attributes/id`](/docs/image.md#attributes)                                                        |
| ├─ overlay     | `object`  | —       | [`block:flatsome/image#/attributes/overlay`](/docs/image.md#attributes)                                                   |
| ├─ size        | `object`  | —       | [`block:flatsome/image#/attributes/size`](/docs/image.md#attributes)                                                      |
| └─ slideEffect | `string`  | —       | Only use when inside a slider.<br>Enum: `fade-in`, `zoom-in`, `zoom-out`, `fade-in-fast`, `zoom-in-fast`, `zoom-out-fast` |
| link           | `object`  | —       | —                                                                                                                         |
| ├─ type        | `string`  | —       | Post type slug for archive links.                                                                                         |
| ├─ id          | `number`  | —       | —                                                                                                                         |
| ├─ kind        | `string`  | —       | Link type: post, term, archive, or custom.<br>Enum: `post`, `term`, `archive`, `custom`                                   |
| ├─ linkToPost  | `boolean` | —       | —                                                                                                                         |
| ├─ rel         | `string`  | —       | —                                                                                                                         |
| ├─ target      | `string`  | —       | —                                                                                                                         |
| └─ url         | `string`  | —       | —                                                                                                                         |
| sticky         | `boolean` | `false` | Sets position: sticky.                                                                                                    |
| video          | `object`  | —       | [`block:flatsome/video#/attributes`](/docs/video.md#attributes)                                                           |

## Block Supports

| Property                | Value             |
| ----------------------- | ----------------- |
| align                   | `wide`, `full`    |
| flatsomeBorder          | `true`            |
| flatsomeBorderOverlay   | `true`            |
| flatsomeBuilder         | —                 |
| ├─ category             | `flatsome-layout` |
| ├─ droppable            | `false`           |
| └─ priority             | `3`               |
| flatsomeFeedback        | `true`            |
| flatsomeScrollAnimation | `true`            |
| flatsomeShadow          | `true`            |
| flatsomeShapeDividers   | `true`            |
| flatsomeSlider          | `true`            |
| flatsomeSpacing         | —                 |
| └─ margin               | `true`            |
| flatsomeStyle           | —                 |
| └─ height               | —                 |
|    ├─ description       | `Default: 30cqw.` |
|    ├─ property          | `height`          |
|    └─ type              | `string`          |
| flatsomeTransforms      | `true`            |
| html                    | `false`           |
| interactivity           | `true`            |