Image with content split
Last updated
Was this helpful?
Last updated
Was this helpful?
Use the Image with content split section to combine a full-height feature image with promotional text and button. With a flexible layout and optional content blocks, it's a great way to highlight a product collection or introduce something new and exciting.
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.
In the editor side panel, click (+) Add section and select Image with content split. 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.
Section colors
Section spacing
Section animations
Add a feature image and alternate mobile image.
Change the image aspect ratio (shape)
Make the image a clickable link to another page.
Click Image with content section to find settings
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.
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.
In the section settings, change the width and alignment of the content blocks area.
Click Image with content split section to find 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.
Related links
