Banner grid

Overview

Banner grid is a flexible grid-based section that allows you to build complex promotional layouts using banners, text blocks, and videos.
Each block can span multiple rows or columns, making it ideal for hero-style layouts, campaign highlights, and mixed media compositions.

The section supports:

• Image banners

• Text-only tiles

• Video tiles

• Video background banners with content overlay

All blocks can be freely combined in a responsive grid.

---

Where to use this section

• Homepage hero or campaign area

• Collection landing pages

• Promotional or seasonal sections

• Editorial-style layouts with mixed media

• Brand storytelling sections

---

Supported blocks

1) Promotion banner (Image banner)

Image-based banner with text overlay or text displayed below the image (mobile-friendly).

Content

• Image / Mobile image

• Heading + heading size

• Text (inline rich text)

• Button label & style

• Badge + badge style

• Link URL

• Parallax scrolling (optional)

Desktop layout

• Column span (desktop_column)

• Row span (desktop_row)

• Content position (top / middle / bottom + left / center / right)

• Auto align content by position

• Content width (desktop & tablet)

• Element spacing

Mobile layout

• Image height (adapt / small / medium / large)

• Content alignment

• Content position

• Content width

• Option to show text below image

Colors

• Text color

• Gradient heading (optional)

• Button colors

• Badge color

• Mobile-specific colors (when text is below image)

---

2) Promotion text (Text-only banner)

Text-only tile without images. Useful for announcements, USP blocks, or editorial content.

Content

• Heading + size

• Text (inline rich text)

• Button label & style

• Badge + badge style

• Link URL

Desktop layout

• Column span

• Row span

  • 0 = auto height (tile height adapts to content)

• Content position & alignment

• Content width (desktop & tablet)

• Element spacing

Mobile layout

• Tile height

• Content alignment & position

• Content width

• Element spacing

Colors

• Text color

• Gradient heading (optional)

• Button colors

• Badge color

• Background color (recommended for visual separation)

---

3) Promotion video (Video tile)

Video-focused tile for promotional or explanatory videos.

Video source

• Cover image (poster)

• Hosted video

• YouTube / Vimeo URL

• Description (accessibility)

Playback

• Autoplay

• Loop

• Show / hide controls

Layout

• Column span

• Row span (desktop)

• Mobile height control

Best used for short looping or explainer videos.

---

4) Video background (Video with content overlay)

Full-featured block combining a background video with text, badge, and up to two buttons.

Video

• Hosted video

• Overlay opacity for readability

Content

• Heading + size

• Text + style

• Badge + style

Buttons

• Primary button (label, style, link)

• Secondary button (optional, independent style & colors)

Layout

• Column & row span

• Content position (desktop & mobile)

• Content width

• Element spacing

Colors

• Text color

• Gradient heading (optional)

• Badge color

• Button colors (primary & secondary)

---

Section-level settings

Layout

• Grid layout: full bleed / stretched grid / boxed grid

• Desktop row height

• Maximum columns

• Grid gap (desktop & mobile)

Styling

• Optional background color / gradient

• Media border thickness & opacity

• Border radius

• Shadow enable / disable

Visibility

• Hide section when all blocks are empty

Spacing

• Padding top

• Padding bottom

---

Presets

Banner grid (default)

Includes 3 Promotion banner blocks with:

• Semi-transparent overlays

• Balanced column/row distribution (1–2–1 layout)

• Designed to create a clear visual focal point

---

Best practices

• Mix image banners + text tiles for a more editorial, less “catalog” look.

• Use row = 0 for text or video blocks when you want height to adapt naturally.

• Increase overlay opacity (30–60%) when placing text on busy images or videos.

• Keep important CTAs within blocks spanning at least 2 columns on desktop.

• Limit the number of video blocks to avoid performance issues.

---

Limitations

• Video background blocks support hosted videos only.

• Extremely dense grids (many small tiles) may reduce visual clarity.

• Autoplay videos may behave differently depending on browser policies.

---

Common use cases

• Homepage hero grid

• Campaign landing layouts

• Mixed media storytelling sections

• Seasonal promotions

• Brand highlight areas

---

Need help?

Many common questions are already answered in this documentation.
If you can’t find what you’re looking for, feel free to contact our support team.

👉 Submit a ticket via our support center:
https://boostheme.zendesk.com/hc/en-us/requests/new

All requests are reviewed carefully. Response times may range from a few hours up to 1 business day, depending on request volume and complexity.