Image & VIdeo With Text
The Image & Video with Text section is a split layout designed to combine visual storytelling with concise messaging. It’s commonly used to highlight product value, brand mood, or a call to action using either an image or a video.
Section Padding
Define the space around the section for both desktop and mobile.
Top Padding (Desktop): 44px
Bottom Padding (Desktop): 44px
Left & Right Padding (Desktop): 81px
Top & Bottom Padding (Mobile): 36px
Left & Right Padding (Mobile): 20px
Layout and Alignment
Configure the structural alignment and layout behavior of the section.
Grid Max Width: 1240px
Column Layout: 1 / 1
Grid Gap Between Columns: 100px
Image Location: Left or Right
Mobile Text Alignment: Left, Center, or Right
Mobile Horizontal Positioning Offset: 0px
Typography and Font Settings
Customize the font styles for headline and body content.
Enable Custom Fonts: Toggle ON
Text Font: Sans-serif
Headline Font: Sans-serif
Custom Font Family: Optional URL input
Headline Text
Font Size (Desktop): 60px
Font Size (Mobile): 49px
Line Height: 1.2
Color: #000000
Subheading / Content Text
Font Size: 14px
Color: #353535
Spacing
Between Headline and Subheading: 13px
Between Subheading and Button: 19px
Media Settings (Image or Video)
Choose between an image or a video for the visual side of the layout.
Image Settings
Upload Image: Web-optimized (JPG, PNG, or WebP)
Aspect Ratio: 4:3
Border Radius: 8px
Image Shadow: None
Hover Animation: None
Video Settings
Video URL: MP4 format
Overrides Image if Provided
Image/Video Location: Left or Right
Content Fields
Configure the textual content that pairs with the media.
Headline Example: “BETTER DESIGN BETTER FEEL.”
Body Content Example: "Lorem ipsum odor amet, consectetuer adipiscing elit. Rhoncus ut sociosqu hac nam imperdiet cubilia morbi. Ut malesuada eu sed imperdiet conubia inceptos fringilla donec. Vestibulum nostra mus molestie maximus class ex."
Second Image Overlay (Optional)
Display a secondary image overlay on top of the main image.
Enable Second Image: Toggle ON
Width: 200px
Height: 200px
Vertical Position: 0px
Horizontal Position: 0px
Button Styles
Fully customize the design, dimensions, and behavior of the call-to-action button.
Design Options
Enable Gradient Background: Optional
Gradient Background / Hover: Linear gradient or solid color
Default Background Color: #000
Default Hover Background: #000
Text Color: #FFF
Hover Text Color: #FFF
Hover Animation: Glow
Button Dimensions
Font Size: 14px
Padding Top/Bottom: 10px
Padding Left/Right: 24px
Border Radius: 6px
Button Content
Text: “Shop Now”
Link: Any product, collection, or custom URL
Section Design Settings
Control the overall appearance of the section background and animation.
Section Background Color: #FFFFFF
Section Animation: None
Headline Animation: None
Mobile Optimization
Ensure the section is responsive and visually balanced across devices.
Spacing Between Image and Headline (Mobile): 21px
Full Responsive Grid and Content Layout
Recommended Use Cases
Present a product or benefit alongside a lifestyle photo
Share a brand value or narrative through video and CTA
Combine headline, description, and button with impactful visuals
Create a clean split layout for homepage hero or product highlight
Last updated