Media with content split

In v3.0, Media with content split combined and replaced Image with content split and Video with content split. 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 Media with content split section to combine a full-height image or autoplay video with text content and buttons.

Set up section


In the editor side panel, click (+) Add section and select Media with content split. Click and hold the drag handles ⋮⋮ to re-order sections.

Section styles

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.

Set up image


  • 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 to find settings

Setting
Description

Image

Select an image to display as the feature image.

There are no required image dimensions. We recommend a minimum width or height of 2500px.

Image width

Change the width of the image as a percentage of the section width (on desktop): between 30% and 60%.

Image position

Display the featured image either Left of content or Right of content on desktop screens.

Mobile image position

Choose to display the featured image either Above content or Below content on mobile screens.

Aspect ratio

Choose to crop the image 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 image to keep centered. Use focal points to avoid unwanted cropping across different screen sizes.

Set up autoplay video


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 to find settings

Setting
Description

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.

Add content blocks


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.

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.

Change content layout


In the section settings, change the width and alignment of the content blocks area.

Click section to find settings

Setting
Description

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.

\


Last updated

Was this helpful?