Image collage
Displays multiple images in a collage layout to create a visually engaging section.
Note! By adding the section, you get a ready-made layout. Use settings from the section and blocks to customize the image appearance according to your preferences.
Section link
Link The collage can be linked to pages/ collections/ products. Choose the destination in the source selector.
Open in new tab When enabled, the linked page opens in a new browser tab, allowing customers to keep their current page open while viewing the linked content.
Layout
Check the layout option examples here.
Layout Change the "Header" content group position using the picker:
"Split". Puts the "Header" group in the content grid while keeping it on the right.
"Stacked". Displays title elements above the media content and aligns them to the left.
"Centered". Shows the centered title elements above the media content.
Mobile alignment Align the elements from the "Header" content group using one of the options:
"Auto". Uses the setting applied in the "Layout".
"Left". Displays content on the left. Note! The call-to-action button displays in full width on mobile by default.
"Center". Centers content. Note! The call-to-action button displays in full width on mobile by default.
Vertical alignment Choose how the "Header" content group is aligned relative to the image collage: "Top", "Center", or "Bottom". Note! The option is available for the "Split" layout.
Use custom column width Show the width settings by activating the option.
Content column width Control the collage size using the scale, which ranges from 25% to 75%.
Layout options
Dividing line Add a divider by setting its position: "Top", "Bottom", or "Both". Select "None" to hide the divider.
Top spacing / Bottom spacing Decide whether to add spaces at the top and bottom of the section. Control spacing settings from 0 to 100 pixels on each scale.
Animations
Hover animation Adds an animation inside the image container. Choose the suggested option from the list:
"Use theme settings". Select the option if there is no need to apply animation settings for the section individually. In this case, decide on the animation image effect in the global settings of the Theme Editor by using the "Banner image" hover animation drop-down. Read the details on the following help page.
"None". Deactivates the animation.
"Zoom in". Enlarges the image on mouse hover over the banner.
"Zoom out". Decreases the image on mouse hover over the banner.
Read more about the described options on the following help page.
Transparent header
Allows the header to overlay the section when a transparent header is used.
Use inverted header colors Enable the option to link the color of the Header elements, such as navigation menus, Search, Compare, Account, and Cart icons, with the "Background" item under Theme settings -> Colors -> Primary colors. If the option is disabled, the color of the Header elements is related to the "Base" item.
Last updated