The Media with text overlay section allows you to showcase rich visuals—such as promotional images or videos—combined with customizable text blocks and call-to-action buttons layered directly on top. This section is ideal for hero banners, brand storytelling, campaign announcements, or highlighting featured collections.
Click on Media with Text Overlay in the left sidebar to access the section settings in the right sidebar.
Configure the main background visual for both desktop and mobile views:
Media type: Choose the background media format (Image or Video).
Image height: Set the section height for desktop display (e.g., Adapt to image, Small, Medium, Large).
Mobile image height: Set the section height for mobile display (e.g., Adapt to image).
Image: Upload the primary image for desktop display.
Mobile image: Upload a separate image optimized for smaller mobile screens (if left blank, the desktop image will be used).
Image behavior: Select visual scroll or animation effects for the background image (e.g., None, Ambient movement, Parallax).
Overlay color: Set the overlay background color to adjust contrast and ensure text readability over the image.
Stack content below media on mobile: Toggle to place the text content beneath the media instead of overlaying it on mobile devices.
Customize the color scheme and container width:
Color scheme: Choose a color scheme for the section. Click Edit scheme to modify existing presets.
Width: Select the layout width (Page for contained width or Full for edge-to-edge display).
Section Indent: Toggle to apply side margins to the section container.
Adjust the outer margins above and below the section:
Top: Set the top margin spacing in pixels (e.g., 80px).
Bottom: Set the bottom margin spacing in pixels.
Inside the Content block, you can add and customize various sub-blocks to compose your message:
Subheading: Add a short introductory tag line above the main title
Heading: Enter the main headline to highlight your message or promotion (e.g., STYLE FOR EVERY MOMENT).
Text: Add a descriptive paragraph or supporting summary
Group button & Button: Insert call-to-action buttons to direct shoppers to specific products or collection pages (e.g., Shop now).