Use the Collage section to combine images or videos in a flexible grid layout. You can customize the grid structure, spacing, appearance, and section spacing to create visual layouts for collections, lifestyle content, promotions, or brand storytelling.
Use the layout settings to control the overall structure of the collage.
Collage grid: Select a predefined grid layout for the collage.
Desktop spacing: Adjust the space between collage items on desktop.
Tablet spacing: Adjust the space between collage items on tablet.
Mobile spacing: Adjust the space between collage items on mobile.
Use the general section settings to customize the appearance of the Collage section.
Make section full width: Extend the section across the full available width.
Color scheme: Select the color scheme used for the section.
Adjust the spacing around the section separately for desktop and mobile:
Top padding: Space above the section on desktop.
Bottom padding: Space below the section on desktop.
Mobile top padding: Space above the section on mobile.
Mobile bottom padding: Space below the section on mobile.
Use the Section header block to add introductory content above the collage grid. Click Add block inside the Section header to add content such as a Heading, Sub text, or Group button.
Text alignment: Align the section header content to the left, center, or right.
Custom width: Enable a custom width for the section header content.
The Collage grid contains the Media blocks displayed in the collage. Use its settings to control the height of each grid row across devices.
Desktop: Set the height of each collage grid row on desktop.
Tablet: Set the height of each collage grid row on tablet.
Mobile: Set the height of each collage grid row on mobile.
Click Add block inside the Collage grid to add individual Media blocks. Each block can display an image or video and can contain additional content such as headings, text, and buttons.
Use the Media settings to customize the visual content and appearance of each collage item.
Color scheme: Select the color scheme for the Media block.
Media type: Choose whether the block displays an Image or Video.
Media overlay opacity: Adjust the opacity of the overlay displayed over the media.
Image: Select the image displayed in the block.
Hover effect: Select the visual effect applied when customers hover over the media.
Image zoom on hover: Enable an image zoom effect when customers hover over the block.
Control how much horizontal space the Media block occupies on different devices.
Desktop: Set the column width on desktop.
Tablet: Set the column width on tablet.
Mobile: Choose the column width on mobile, such as 50% or 100%.
Control how many grid rows the Media block occupies.
Desktop: Set the number of rows occupied by the block on desktop.
Tablet: Set the number of rows occupied by the block on tablet.
Mobile: Set the number of rows occupied by the block on mobile.
Combining Column width, Number of rows, and the Collage grid's Row height allows you to create Media blocks with different sizes within the same collage.
Choose where the content is displayed over the Media block.
Desktop: Set the content position on desktop.
Mobile: Set the content position on mobile.
Use the Button settings to add a call-to-action to the Media block.
Label: Enter the text displayed on the button, such as View more.
Button link: Select or enter the destination customers visit when they click the button.
Open in new tab: Open the button link in a new browser tab.
Button size: Select the size of the button.
Button style: Choose the button appearance: Outline, Solid, or Link.
Show icon: Show or hide an icon in the button.
Icon button: Select the icon displayed with the button.
Uppercase: Display the button label in uppercase.