Image with Text Section

The image with text section displays an image and text content side-by-side in a two-column layout. It's perfect for telling stories, explaining product features, or highlighting promotions with visual support.

Overview

This section creates a balanced layout with an image on one side and text content (subheading, heading, description, and button) on the other. You can control which side the image appears on and how the content is aligned.

Where to Use

  • Homepage: Tell your brand story or highlight features
  • Product pages: Explain product benefits with visuals
  • About pages: Share company information with images
  • Collection pages: Showcase collection themes
  • Any page: Add visual interest with content

Note: The image with text section cannot be used in header or footer groups.

Settings

Content

Image

  • Upload or select an image
  • Recommended size: 1200px width minimum
  • Tip: Use high-quality, relevant images

Image Alt Text

  • Description of the image for accessibility
  • Important: Helps screen readers and SEO
  • Tip: Describe what's in the image (e.g., "Modern kitchen with white tiles")

Subheading

  • Small text above the main heading
  • Examples: "About Us", "New Collection", "Featured"
  • Tip: Keep it short (3-5 words)

Heading

  • Main large text
  • Your primary message
  • Tip: Keep it concise and impactful (5-7 words)

Heading Size

  • Controls the visual size of the heading
  • Options: XL, 2XL, 3XL, 4XL
  • Default: 2XL
  • Tip: Larger sizes (3XL, 4XL) for more impact

Description

  • Supporting text below the heading
  • Supports rich text formatting (bold, italic, links)
  • Tip: Keep it brief (2-3 sentences)

Button

Button Label

  • Text displayed on the button
  • Examples: "Shop Now", "Learn More", "Explore"
  • Tip: Use action-oriented language

Button Link

  • URL the button links to
  • Can link to collections, products, pages, or external URLs
  • Tip: Link to the most relevant destination

Button Style

  • Primary: Bold, prominent button (recommended for main actions)
  • Secondary: Alternative style
  • Outline: Outlined button, less prominent
  • Default: Primary

Layout

Image Position

  • Left: Image on the left, text on the right (default)
  • Right: Image on the right, text on the left
  • Tip: Alternate positions for visual variety when using multiple sections

Content Vertical Alignment

Where text content appears vertically within its column:

Top

  • Text starts at the top
  • Best for: When you want text to align with top of image

Center (Default)

  • Text centered vertically
  • Best for: Most cases, balanced look

Bottom

  • Text at the bottom
  • Best for: When you want text to align with bottom of image

Text Alignment

  • Left: Text aligned to the left (default)
  • Center: Text centered
  • Right: Text aligned to the right
  • Tip: Left is most readable for longer text

Text Alignment on Mobile

  • Separate alignment setting for mobile devices
  • Options: Left, Center, Right
  • Default: Left
  • Tip: Center often works well on mobile for better readability

Colors

Color Scheme

  • Select a color scheme for text and buttons
  • Controls text color, button colors, and background
  • Leave empty to use default theme colors
  • Tip: Choose a scheme that complements your image

Padding

Top Padding

  • Space above the section
  • Range: 0-100px
  • Default: 40px
  • Tip: Creates breathing room from previous section

Bottom Padding

  • Space below the section
  • Range: 0-100px
  • Default: 40px
  • Tip: Creates breathing room before next section

Common Use Cases

Brand Story

  • Image: Store or team photo
  • Subheading: "About Us"
  • Heading: "Our Story"
  • Description: Company mission and values
  • Button: "Learn More" → About page
  • Layout: Image left, text right, center aligned

Product Features

  • Image: Product in use
  • Subheading: "Why Choose Us"
  • Heading: "Premium Quality Materials"
  • Description: Product benefits and features
  • Button: "Shop Now" → Products
  • Layout: Alternate image positions for variety

Collection Showcase

  • Image: Collection lifestyle image
  • Subheading: "Featured Collection"
  • Heading: "Modern Minimalist"
  • Description: Collection description
  • Button: "Shop Collection" → Collection page
  • Layout: Image right, text left

Promotion Highlight

  • Image: Promotional product image
  • Subheading: "Limited Time"
  • Heading: "Summer Sale - 30% Off"
  • Description: Sale details and terms
  • Button: "Shop Sale" → Sale collection
  • Layout: Image left, text right

Tips & Best Practices

✅ Do's

  • Use high-quality images: Sharp, clear, relevant images
  • Keep text concise: Short headings, brief descriptions
  • Match image to content: Image should support the text message
  • Add alt text: Important for accessibility and SEO
  • Use clear CTAs: Action-oriented button labels
  • Test on mobile: Ensure layout looks good on phones
  • Alternate positions: Mix left/right for visual variety
  • Optimize images: Compress for faster loading

❌ Don'ts

  • Don't use low-quality images: Blurry images look unprofessional
  • Don't overcrowd text: Too much text is hard to read
  • Don't forget alt text: Always add image descriptions
  • Don't use tiny text: Ensure text is readable
  • Don't ignore mobile: Always preview on mobile devices
  • Don't mismatch content: Image and text should relate
  • Don't skip buttons: Always include a call-to-action

Image Guidelines

Recommended Size

  • Width: 1200px minimum
  • Aspect Ratio: 1:1 (square) or 4:3 works well
  • Format: JPEG or PNG

Image Quality

  • Resolution: High resolution, sharp focus
  • File Size: Optimize to 200-500KB for faster loading
  • Content: Clear subject, good composition

Image Selection Tips

  • Relevant: Image should support the text message
  • High Quality: Sharp, professional images
  • Composition: Leave space for text (if text overlays)
  • Colors: Consider how text will look (if using color scheme)

Layout Combinations

Image Left, Text Right (Default)

  • Best for: Most cases
  • Reading flow: Natural left-to-right reading
  • Use when: Text is primary focus

Image Right, Text Left

  • Best for: Visual variety
  • Reading flow: Image draws attention first
  • Use when: Image is the main focus

Alternating Layouts

  • Tip: Use multiple image-with-text sections with alternating positions
  • Creates: Visual rhythm and interest
  • Example: First section image left, second section image right

Content Alignment Guide

Vertical Alignment

Top

  • Text starts at top of column
  • Best for: Short content
  • Use when: You want text to align with top of image

Center (Recommended)

  • Text centered vertically
  • Best for: Most content
  • Use when: You want balanced, professional look

Bottom

  • Text at bottom of column
  • Best for: Short content
  • Use when: You want text to align with bottom of image

Horizontal Alignment

Left (Default)

  • Text aligned to left
  • Best for: Longer text, most readable
  • Use when: You have paragraphs of text

Center

  • Text centered
  • Best for: Short text, impactful messages
  • Use when: You want a balanced, polished look

Right

  • Text aligned to right
  • Best for: Short text, unique designs
  • Use when: You want a distinctive look

Mobile Considerations

Text Alignment on Mobile

  • Left: Most readable for longer text
  • Center: Often looks better for short text
  • Right: Less common, can work for specific designs

Layout on Mobile

  • Image and text stack vertically on mobile
  • Image appears first, then text
  • Ensure text is readable on small screens

Best Practices

  • Test on mobile: Always preview on actual devices
  • Keep text short: Shorter text works better on mobile
  • Use center alignment: Often looks better on mobile
  • Optimize images: Ensure fast loading on mobile

Examples

Example 1: Brand Story

  • Image: Team photo or store interior
  • Subheading: "About Us"
  • Heading: "Crafting Beautiful Spaces"
  • Description: "We've been creating stunning flooring solutions for over 20 years..."
  • Button: "Our Story" → About page
  • Image Position: Left
  • Content Alignment: Center
  • Text Alignment: Left

Example 2: Product Feature

  • Image: Product in use
  • Subheading: "Premium Quality"
  • Heading: "Durable & Beautiful"
  • Description: "Our tiles are designed to last a lifetime..."
  • Button: "Shop Now" → Products
  • Image Position: Right
  • Content Alignment: Center
  • Text Alignment: Center

Example 3: Promotion

  • Image: Sale products
  • Subheading: "Limited Time"
  • Heading: "Summer Sale - 30% Off"
  • Description: "Shop our best deals on premium flooring"
  • Button: "Shop Sale" → Sale collection
  • Image Position: Left
  • Content Alignment: Center
  • Text Alignment: Center

Using Multiple Sections

Creating Visual Flow

  • Alternate positions: First section image left, second image right
  • Vary content: Different topics or themes
  • Consistent spacing: Use similar padding for rhythm

Storytelling

  • Sequence: Use multiple sections to tell a story
  • Progression: Each section builds on the previous
  • Visual variety: Different images and layouts

Troubleshooting

Image Not Showing

  • Check: Make sure image is uploaded
  • Check: Verify image file is valid
  • Check: Try uploading a different image

Text Not Readable

  • Solution: Adjust color scheme for better contrast
  • Solution: Ensure text color contrasts with background
  • Solution: Test on different devices

Layout Looks Off on Mobile

  • Check: Preview on actual mobile device
  • Check: Adjust "Text Alignment on Mobile" setting
  • Check: Ensure text isn't too long

Button Not Clickable

  • Check: Verify button link is filled in
  • Check: Test on different devices
  • Check: Ensure button isn't hidden

Image Looks Blurry

  • Solution: Use images at least 1200px wide
  • Solution: Upload high-resolution images
  • Solution: Don't stretch small images

Content Not Aligned

  • Check: Verify "Content Vertical Alignment" setting
  • Check: Ensure text alignment matches your design
  • Check: Test on different screen sizes

Related Sections

  • Hero - Full-width hero banner
  • Slideshow - Rotating image carousel
  • Content Spotlight - Feature highlights with icons
  • Rich Text - Text-only content section

Next Steps: