The Scrolling hero media grid section allows you to create an interactive hero banner that combines a large background image, floating media elements, and promotional content.
As customers scroll through the page, the media elements transition from their starting positions to create a visually engaging layout. The section also supports a secondary media area with a heading, description, and call-to-action button.
This section is ideal for showcasing fashion collections, lifestyle imagery, brand campaigns, and featured products.
1. Scrolling hero media grid section settings
Click the Scrolling hero media grid section name to see its settings on the right-hand sidebar.
1.1 Background
Use these settings to customize the background of the section.
Custom background type: Choose how the section background is displayed:
Inherit: Use the background from the selected color scheme.
Color: Apply a custom background color.
Image: Display an image as the section background.
Background image: Select the image displayed as the section background when the Image background type is selected.
Mobile background image: Select a separate background image for mobile devices. If no mobile image is selected, the desktop background image will be used.
Background overlay: Enable or disable the overlay applied to the background image.
1.2 Content
Use these settings to add text content to the main hero area.
Heading: Enter the main heading displayed over the background, such as
Built to perform designed to inspire.Caption: Add a short caption or supporting message displayed above the heading.
Description: Enter additional text to describe your brand, collection, or promotional campaign.
1.3 Appearance
Color scheme: Select the color scheme applied to the section's content. Click Edit scheme to customize the selected color scheme in the theme settings.
2. Add Reveal media blocks
Click Add block under the Scrolling hero media grid section and select Reveal media.
The Reveal media block allows you to display floating images or videos that move between different positions as customers scroll.
You can add multiple Reveal media blocks to create a dynamic media grid around the main hero content.
2.1 Media
Media type: Choose between Image and Video to determine the type of media displayed.
Image: Select the image displayed in the Reveal media block when Image is selected.
When Video is selected, use the available video settings to configure.
2.2 Starting position
Use these settings to control where the media initially appears.
Starting at: Choose the initial position of the media:
Center: Position the media in the center.
Custom: Use a custom starting position.
2.3 Destination position
Ending at: Select the destination position where the media moves during the scrolling effect. For example, Random top left.
2.4 Width
Customize the width of each floating media element across different devices.
Desktop: Adjust the media width on desktop devices.
Tablet: Adjust the media width on tablet devices.
Mobile: Adjust the media width on mobile devices.
For example, you can set the media width to 250px on desktop, 120px on tablet, and 80px on mobile.
3. Secondary media block settings
The Secondary media block allows you to display a larger image or video with promotional content inside the hero section.
This media area provides an additional visual focus as customers scroll through the section.
3.1 Media
Media type: Choose between Image and Video.
Image: Select the image displayed in the Secondary media area.
Mobile image: Select a separate image for mobile devices. If no mobile image is selected, the desktop image will be used.
Media overlay opacity: Adjust the opacity of the overlay applied to the media.
3.2 Appearance
Color scheme: Select the color scheme applied to the Secondary media content. Click Edit scheme to customize the selected color scheme.
4. Child Content block of Secondary media
Inside the Secondary media block, you can add a Content block to organize the heading, description, and call-to-action buttons displayed over the Secondary media.
Click Add block inside the Content block to add the available content elements. You can add and arrange content elements to create a promotional message that matches your design.
4.1 Heading block
The Heading block allows you to display a title over the Secondary media.
Heading: Enter the heading text, such as
Push harder. last longer.Heading size: Select the heading size.
Heading tag: Choose the HTML heading tag, such as H1, H2, or H3. This setting affects the page's heading structure and SEO.
Uppercase: Enable this option to display the heading in uppercase letters.
4.2 Text block
The Text block allows you to add a description or supporting message below the heading.
For example, you can use text such as Designed for athletes and go-getters, built with breathable fabrics that keep you cool and focused.
4.3 Group button block
The Group button block allows you to add call-to-action buttons to the Secondary media content.
For example, you can add a Check out button to direct customers to a featured collection or promotional page.
