Content Spotlight Section

The content spotlight section displays content and features on the left with an image on the right. It's perfect for highlighting key benefits, features, or information with visual support.

Overview

This section creates a split layout: content (heading, description, button, and feature highlights) on the left, and a large image on the right. You can add up to 2 feature blocks with icons to highlight key points.

Where to Use

  • Homepage: Highlight key features or benefits
  • Product pages: Showcase product benefits
  • About pages: Share company values with visuals
  • Collection pages: Feature collection highlights
  • Any page: Add visual interest with feature highlights

Note: The content spotlight section cannot be used in header or footer groups.

Settings

Content

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 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

Image

Image

  • Upload or select an image for the right side
  • Recommended size: 1500px width minimum
  • Tip: Use high-quality, relevant images

Enable Zoom Animation on Scroll

  • Adds a subtle zoom effect to the image when scrolling
  • Default: Enabled
  • Tip: Creates engaging, modern feel

Colors

Color Scheme

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

Styling

Section Border Radius

  • Rounds the corners of the section
  • Range: 0-80px
  • Default: 16px
  • Tip:
    • 0px: Sharp corners
    • 8-16px: Subtle rounding (recommended)
    • 20-40px: More rounded, modern look
    • 40px+: Very rounded, playful feel

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

Blocks

Feature Block

What it does: Highlights a key feature or benefit with an icon, title, and description

Limit: Up to 2 feature blocks

Settings:

Icon

  • Custom SVG Code: Paste custom SVG code (takes priority)
  • Lucide Icon Name: Icon from Lucide library (e.g., "truck", "star", "shield-check")
  • Icon Size: 16-64px (default: 40px)
  • Icon Color: Custom color for the icon

Icon Options:

  • Use Lucide icons (simple, no setup needed)
  • Or paste custom SVG code for unique icons
  • Custom SVG takes priority if both are provided

Content

  • Title: Feature title (e.g., "Free Shipping", "Secure Checkout")
  • Description: Brief description of the feature

Best for:

  • Key benefits or features
  • Trust signals
  • Value propositions
  • Product highlights

Common Use Cases

Key Features Highlight

  • Heading: "Why Choose Us"
  • Description: Main value proposition
  • Features:
    • Free shipping
    • Secure checkout
  • Image: Product or lifestyle image
  • Button: "Shop Now" → Products

Product Benefits

  • Heading: "Premium Quality Materials"
  • Description: Product benefits
  • Features:
    • Durable construction
    • Easy installation
  • Image: Product in use
  • Button: "Learn More" → Product page

Brand Values

  • Heading: "Our Commitment"
  • Description: Company values
  • Features:
    • Sustainable materials
    • Expert support
  • Image: Team or process image
  • Button: "About Us" → About page

Collection Showcase

  • Heading: "Modern Minimalist Collection"
  • Description: Collection highlights
  • Features:
    • Wide selection
    • Designer approved
  • Image: Collection lifestyle image
  • Button: "Shop Collection" → Collection page

Tips & Best Practices

✅ Do's

  • Use high-quality images: Sharp, clear, relevant images
  • Keep text concise: Short headings, brief descriptions
  • Add 2 features: Maximum impact with 2 feature blocks
  • Use relevant icons: Icons should match the feature
  • Match image to content: Image should support the message
  • Use clear CTAs: Action-oriented button labels
  • Test on mobile: Ensure layout looks good on phones
  • 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 add more than 2 features: Section designed for 2 maximum
  • Don't use mismatched icons: Icons should relate to features
  • Don't forget mobile: Always preview on mobile devices
  • Don't skip buttons: Always include a call-to-action
  • Don't ignore image quality: Use high-resolution images

Icon Guidelines

Using Lucide Icons

Popular Icons:

  • truck - Shipping, delivery
  • shield-check - Security, protection
  • star - Quality, ratings
  • heart - Favorites, love
  • shopping-cart - Shopping, cart
  • package - Products, shipping
  • clock - Time, hours
  • check - Confirmation, done
  • award - Quality, awards
  • users - Team, community

How to Use:

  1. Go to Lucide icon library (lucide.dev)
  2. Find the icon you want
  3. Enter the icon name in "Lucide icon name" field
  4. Adjust size and color as needed

Using Custom SVG

When to Use:

  • You need a specific icon not in Lucide
  • You want a branded icon
  • You need a custom design

How to Use:

  1. Get your SVG code
  2. Paste it in "Custom SVG code" field
  3. Custom SVG takes priority over Lucide icon

Feature Block Best Practices

Feature 1: Primary Benefit

  • Icon: Most relevant icon (e.g., truck for shipping)
  • Title: Clear, benefit-focused (e.g., "Free Shipping")
  • Description: Brief explanation (1 sentence)

Feature 2: Secondary Benefit

  • Icon: Different but related icon
  • Title: Complementary benefit
  • Description: Brief explanation

Icon Selection Tips

  • Match the feature: Icon should visually represent the feature
  • Keep it simple: Simple icons are more recognizable
  • Consistent style: Use similar icon styles for both features
  • Appropriate size: 40px is usually a good size

Image Guidelines

Recommended Size

  • Width: 1500px minimum
  • Aspect Ratio: 4:3 or 3:2 works well
  • Format: JPEG or PNG

Image Quality

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

Image Selection Tips

  • Relevant: Image should support the content
  • High Quality: Sharp, professional images
  • Composition: Leave space if needed
  • Colors: Consider how it works with color scheme

Zoom Animation

When to Use

  • ✅ Enable: Most cases - adds modern, engaging feel
  • ✅ Best for: Product images, lifestyle images
  • ✅ Creates: Subtle movement and interest

When to Disable

  • ⚠️ Disable: If image has text or important details
  • ⚠️ Disable: If animation feels distracting
  • ⚠️ Disable: For very simple, minimal designs

Layout Structure

Left Side (Content)

  1. Heading - Main message
  2. Description - Supporting text
  3. Button - Call-to-action
  4. Features Grid - 2 feature blocks with icons

Right Side (Image)

  • Large image with optional zoom animation

Mobile Layout

  • Content and image stack vertically
  • Image appears first, then content
  • Features remain in 2-column grid

Examples

Example 1: Shipping & Security

  • Heading: "Shop with Confidence"
  • Description: "We offer free shipping and secure checkout on all orders."
  • Feature 1:
    • Icon: truck
    • Title: "Free Shipping"
    • Description: "On orders over $50"
  • Feature 2:
    • Icon: shield-check
    • Title: "Secure Checkout"
    • Description: "100% secure transactions"
  • Image: Product showcase
  • Button: "Shop Now" → Products

Example 2: Quality & Support

  • Heading: "Premium Quality, Expert Support"
  • Description: "Our products are built to last, backed by expert customer service."
  • Feature 1:
    • Icon: award
    • Title: "Premium Quality"
    • Description: "Built to last a lifetime"
  • Feature 2:
    • Icon: users
    • Title: "Expert Support"
    • Description: "Our team is here to help"
  • Image: Quality craftsmanship image
  • Button: "Learn More" → About page

Troubleshooting

Image Not Showing

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

Icons Not Showing

  • Check: Enter icon name in "Lucide icon name" field
  • Check: Verify icon name is correct (check Lucide library)
  • Check: Or paste custom SVG code

Features Not Aligned

  • Note: Features display in a 2-column grid
  • Check: Ensure both feature blocks are added
  • Check: Preview on different screen sizes

Text Not Readable

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

Zoom Animation Not Working

  • Check: Enable "Enable zoom animation on scroll"
  • Check: Scroll down the page to see effect
  • Note: Animation is subtle and happens on scroll

Layout Looks Off on Mobile

  • Check: Preview on actual mobile device
  • Note: Content and image stack on mobile
  • Check: Ensure text is readable on small screens

Related Sections

  • Image with Text - Similar layout, different structure
  • Icon with Text - Multiple icons in a grid
  • Rich Text - Text-only content section

Next Steps: