The Media with text overlay section allows you to display an image or video with content positioned directly on top of the media. You can combine labels, headings, text, countdown timers, and buttons to create promotional banners, campaign sections, announcements, or limited-time offers.
Click the section name to see the section settings on the right-hand sidebar.
Customize the overall appearance of the section.
Color scheme: Select the color scheme applied to the section. You can choose an available color scheme or customize it through Edit scheme.
Stack content below media on mobile: Enable this option to move the content below the media on mobile devices instead of displaying it as an overlay.
Use the Media settings to configure the image or video displayed in the section.
Media type: Choose between Image and Video.
Image height: Control the image height on desktop. The Adapt to image option automatically adjusts the section height based on the selected image.
Mobile image height: Control the image height on mobile devices.
Image: Select the image displayed on desktop.
Mobile image: Select a separate image optimized for mobile devices. If no mobile image is selected, the desktop image will be used.
Image behavior: Choose how the image behaves while scrolling. For example, Zoom out on scroll creates a zooming effect as customers scroll through the page.
Media overlay opacity: Adjust the overlay opacity applied on top of the media. Increase the value when you need stronger contrast between the background media and overlay content.
Use the section padding settings to adjust the spacing above and below the section.
The Content container controls the area where text and other content blocks are displayed over the media.
Content maximum width: Set the maximum width of the content area. This helps control how much horizontal space the overlay content can use.
Desktop content position: Choose where the content appears over the media on desktop, such as Middle left.
Content position: Choose the general position of the content within the section.
Note: If Stack content below media on mobile is enabled in the section settings, the content maximum width setting may be ignored on mobile.
Click Add block under the Content container to add content elements.
The available child blocks shown in this section include:
Label: Add a short highlighted label above the main heading.
Heading: Add the main heading of the section.
Text: Add supporting text or description.
Countdown timer: box: Display a countdown timer for limited-time promotions or events.
Group button: Add one or more call-to-action buttons.
Child blocks can be reordered by dragging and dropping them in the Theme Editor.
Note: These blocks must be added inside the Content container.