Overlapping media with content
Last updated
Was this helpful?
Last updated
Was this helpful?
In v3.0, Overlapping media with content combined and replaced Image with content and Video with content. Upon updating, your original sections will remain in place with added settings. Review your sections before publishing. Learn how to update your theme.
Use the Overlapping media with content section to combine overlaying media with text content and a button. Use images or an autoplay video.
In the editor side panel, click (+) Add section and select Overlapping media with content. Click and hold the drag handles ⋮⋮ to re-order sections.
Sections include general styles. Click the section to find options for colors, spacing, and animations.
Editing templates will change all pages that use the same template. Create new templates for different page layouts, or show dynamic page content in the same template.
Add a feature image and alternate mobile image.
Change the image aspect ratio (shape)
Make the image a clickable link to another page.
Click section for settings
Image 1
Select a primary image to display in the section. This image will overlay the secondary image (Image 2).
Uncheck Show image for Image 2 to display only the primary image.
Image caption
Add small text below Image 1.
Show image
Choose to show a secondary image (Image 2) that overlays the primary image.
Image 2
Select a secondary image that will overlay the primary image.
Aspect ratio
Choose to crop the images to a uniform shape. Select Portrait (2:3), Portrait (4:5), Square (1:1), Landscape (5:4), or Landscape (3:2). Select Natural to display images in their original shape (without cropping).
Image focal point
Select the most important part of the images to keep centered. Use focal points to avoid unwanted cropping across different screen sizes.
After uploading an image, adjust the width and position.
Click section for settings
Image width
Set the maximum width of the image area on desktop.
30 - 60 %
Desktop image position
Position the image to the left or right of the text content.
Left of content Right of content
Mobile image position
On mobile, show the image before or after the content area .
Above content Below content
In the section settings, upload short video (without sound) to autoplay. After uploading your video, you can select the focal point of your video.
For autoplay videos, make sure your video files meet the following requirements:
Video file type
.mp4 or .mov
Embedded YouTube or Vimeo videos are not supported.
Video length
< 20 seconds (Recommended)
Video size
< 10MB (Recommended)
Click section for settings
Video
Select or upload a video that autoplays (without sound).
Video aspect ratio
Choose to crop the video to a uniform shape. Select Portrait (2:3), Portrait (4:5), Square (1:1), Landscape (5:4), or Landscape (3:2). Select Natural to display the video in its original shape (without cropping).
Video focal point
For desktop and mobile, specify the main focus of the video. The focal point will remain centered and within frame to avoid unwanted cropping.
Video caption
Enter text to display a small caption below the video.
Use blocks to customize the content area of the section. Click (+) Add block to add text, buttons, and other media. Use the drag handles ⋮⋮ to re-order blocks, and change the layout in the section settings.
In the section settings, change the width and alignment of the content blocks area.
Click section for settings
Content width
Display the section at full width or set a custom width
Custom width
Set the maximum width of the section: between 400 and 800 px.
Alignment
Choose to align the content blocks to the Left, Center, or Right within the content area.
Section colors
Section spacing
Section animations
Accent
Add small label heading.
Heading
Add title heading.
Text
Add multiple lines of rich text.
Button
Add buttons with custom styles.
Image
Add images with custom sizes.
Text list with icons
Add column text with icons.
Video player
Add video that plays in a popup viewer.
Divider
Add border between blocks.
Spacer
Add space between blocks.
