Image With Benefits

The Image & Video Benefits section is a split-layout block designed to highlight a powerful visual (image or video) alongside a message and vertically stacked benefits. It's ideal for showcasing your brand’s feel, product advantages, or lifestyle tone in a single, persuasive section.

Section Padding

Controls the outer spacing of the entire section:

  • Top Padding (Desktop): 44px

  • Bottom Padding (Desktop): 44px

  • Left/Right Padding (Desktop): 81px

  • Top/Bottom Padding (Mobile): 36px

  • Left/Right Padding (Mobile): 20px

Subheading Settings

Adjust the spacing and appearance of subheadings:

  • Left/Right Padding (Desktop): 0px

  • Left/Right Padding (Mobile): 0px

  • Line Height: 1.4

  • Space Between Headline and Subheading: 13px

  • Space Between Subheading and Benefits: 20px

Layout & Alignment

  • Grid Max Width: 1240px

  • Grid Gap Between Columns: 100px

  • Image Location: Left or Right

  • Mobile Text Alignment: Left, Center, or Right

  • Mobile Horizontal Positioning: 0px

Typography Settings

Customize fonts, sizes, and colors:

  • Enable Custom Fonts: Toggle ON

  • Text Font: Sans-serif

  • Headline Font: Sans-serif

  • Custom Font Family: (Optional URL input)

Headline

  • Font Size (Desktop): 60px

  • Font Size (Mobile): 49px

  • Line Height: 1.2

  • Color: #000000

Subheading & Benefit Text

  • Font Size: 14px

  • Color: #353535

Spacing

  • Between Subheading and Button: 19px

Media Settings (Image or Video)

Choose between a static image or video to support the content.

Image

  • Upload Desktop Image: (Recommended: WebP, JPG, PNG)

  • Aspect Ratio: 4:3

  • Border Radius: 8px

  • Shadow: None

  • Hover Animation: None

Video

  • Video URL (MP4): Overrides image if provided

Content Fields

  • Headline Example: “BETTER DESIGN BETTER FEEL.”

  • Subheading Example: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Malesuada eu sed imperdiet conubia inceptos fringilla donec."

Second Image Overlay (Optional)

  • Enable Second Image: Toggle ON

  • Width: 200px

  • Height: 200px

  • Vertical Position: 0px

  • Horizontal Position: 0px

Call-To-Action Button

Design

  • Enable Button Gradient: Optional

  • Gradient Background & Hover: Linear gradient

  • Default Background: #000

  • Hover Background: #000

  • Text Color: #FFF

  • Hover Text Color: #FFF

  • Hover Animation: Glow

Dimensions

  • Font Size: 14px

  • Padding (Top/Bottom): 10px

  • Padding (Left/Right): 24px

  • Border Radius: 6px

Button Content

  • Text: “Shop Now”

  • Link: Custom product, collection, or URL

Vertical Benefits List

Enable Vertical Benefits: Toggle ON Alignment Options: Left, Center, Right Icon Type: Image icons or SVG

Icon Sizing

  • Image Icon Size: 40px

  • SVG Icon Size (Desktop): 40px

  • SVG Icon Size (Mobile): 30px

Example Benefits List

  1. 100% Cotton

  2. Breathable Fabric

  3. Hassle-Free Returns

  4. Ethically Made

Each benefit may include:

  • Text Label

  • Icon Image (if SVG toggle is off)

  • SVG Code (if SVG toggle is on; must include <svg> with viewBox)

Visual Design Settings

  • Section Background Color: #FFFFFF

  • Section Animation: None

  • Headline Animation: None

Best Use Cases

  • Communicating product highlights in a quick visual + text block

  • Pairing brand messaging with lifestyle photography

  • Boosting perceived value by listing tangible benefits

  • Enhancing user trust before a purchase CTA

PreviousImage With IconsNextImage With Text Pro

Last updated