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.
Banner – Options Overview
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