Banners Collage

The Banners Collage section allows you to create a dynamic grid of banners in various predesigned layouts.

It’s a highly visual element that helps showcase multiple campaigns, collections, or featured images together in a collage-like structure. You can combine static images and videos, control their layout composition, and add animation effects for a more engaging presentation.

Location: Sections -> Templates -> Banners → Banners collage


Banners Collage — Options Overview

Option

Description

Heading / Subheading / Description

Add titles and supporting text for the entire collage section. Useful for introducing a group of banners or describing the content visually represented in the collage.

Heading alignment

Choose the alignment of heading and text: Left or Center.

Top spacing

Controls vertical spacing above the section. Choose between None, Small, Medium, or Normal values.

Width

Defines the width of the section: Default, Boxed, Wide, or Full width. The Wide layout is optimized for displays with a screen width of 1440px or more.

Layout

Select from multiple predesigned grid layouts: • A – 6 images • B – 5 images • C – 4 images • D – 3 images • E – 3 images • F – 2 images • G – 2 images Each layout determines the number and placement of the collage images.

Swap the main image

Swap the primary image position within the selected layout to create alternative visual balance.

Height

Defines the height of the main image within the collage: Auto, Landscape 4:6 (Images 4:3), Landscape 1:2 (Images 1:1), Fixed, or Full height. The Fixed and Full height options apply to desktop only (not supported on devices with 1024px width or less).

Image hover effect

Controls animation applied when a user hovers over an image. Available options include: Basic theme settings, Disable, Zoom in #1, Zoom in and rotate, Zoom in #2, Zoom out #1, Zoom out #2, Slide, and Shine.

Slider settings

Enables slider functionality for the main image area. When additional banners are added beyond the visible layout, they become slides within the main image container.

Transition effect

Choose how slides change: Slide, Fade, or Flip.

Enable autoplay

Automatically transitions between slides without user interaction.

Change slides every

Set the time interval (in seconds) for automatic slide transitions. (Note: this function does not preview within the Theme Editor; use navigation arrows to switch manually.)

Dividing line

Toggle to display or hide a dividing line separating the section from others.

Background

Choose section background type: Hide, Color, Gradient, or Image.

Colors

Configure color accents used across the section: Base, Accent, and Lines.

Media button – Background

Define background color for video or slider control buttons.

Media button – Icon

Adjust the icon color for video or slider buttons.

Media button – Background hover

Set the hover background color for media buttons.

Media button – Icon hover

Set the hover icon color for media buttons.

Adding Banners

The Banners Collage section is designed to hold multiple individual Banner blocks. You can add as many Banner items as needed, each with its own image, video, and text configuration. This flexibility allows you to create visually rich and custom layouts that fit your brand style and campaign goals.


The Banner Collage section can be filled with separate Banner blocks. You can add as many banners as needed — extra banners not displayed in the main collage layout will automatically become slides within the main image.


Option

Description

Values / Notes

Type

Can be chosen as Image or Video content

Image/Video

Image

Upload the main image for the banner block.

Supports static images or video thumbnails.

Image ratio mobile

Controls how the image is cropped or displayed on mobile devices.

Default · Auto · Portrait (3:4) · Landscape (4:3) · Square (1:1) · Social story (9:16) · Widescreen (16:9)

Image overlay opacity

Sets the transparency level of the overlay applied over the image.

Range: 0–100% (0 = transparent, 100 = fully opaque).

Image overlay fill

Defines the color or gradient used for the overlay.

Custom color or gradient.

Content

Area containing heading, description, and button elements.

Editable text and button.

Link

Adds a clickable link for the banner.

Enter a page, product, or custom URL.

Heading

Sets the main title for the banner block.

Text field.

Description

Optional descriptive text below the heading.

Text field.

Heading after description

Allows moving the heading below the description for a custom layout.

Toggle on/off.

Button

Adds a call-to-action button.

Text and link configurable.

Settings

Controls the typography, alignment, and spacing of the content.

Heading size

Sets the font size of the heading on desktop.

Range: 16–200px.

Heading size tablet

Adjusts heading size for tablet screens.

Range: 16–100px.

Heading size mobile

Adjusts heading size for mobile screens.

Range: 16–100px.

Underline on hover

Adds an underline to the heading when hovered.

Toggle on/off.

Text position

Positions the content box within the banner.

Top left · Top · Top right · Center left · Center · Center right · Bottom left · Bottom · Bottom right

Text position mobile

Positions the content box within the banner on mobile.

Top left · Top · Top right · Center left · Center · Center right · Bottom left · Bottom · Bottom right

Text align

Aligns text content horizontally.

Left · Center

Description width

Sets the maximum width of the description text on desktop.

Range: 0–100%.

Description width tablet

Sets the maximum width of the description text on tablet.

Range: 0–100%.

Description width mobile

Sets the maximum width of the description text on mobile.

Range: 0–100%.

Show text box

Enables a boxed background behind text for better readability.

Toggle on/off.

Colors

Adjusts text, button, and background colors for normal and hover states.

Heading / Heading hover

Sets heading color and hover color.

Color pickers.

Description / Description hover

Sets description color and hover color.

Color pickers.

Button

Button color style (normal state).

Color picker.

Show background

Enables a background color, gradient, or image behind the banner.

Toggle on/off.

Background / Background gradient / Border / Text

Customize box background, gradient, borders, and text color.

Color pickers and gradient selectors.

Show background on hover

Applies a hover background and color change on interaction.

Toggle on/off.

Background hover / Background gradient hover / Border hover / Text hover

Custom hover states for the background, gradient, border, and text.

Color pickers and gradient selectors.

Enable shadow / Shadow / Shadow hover

Adds shadow effects on normal and hover states.

Shadow settings.

Box background / Box background hover

Adjusts background appearance for the content box.

Color pickers.

Media button (video/slider)

Customizes play and navigation button appearance.

Background, icon color, hover color.

Other

Additional overlay styling for the image.

Includes Image overlay color.


Last updated