Setting Up the Hero Section

The first screen visitors see when opening your invitation. First impressions matter most!

What is the Hero Section?

Your First Impression

The first thing people see when they click your invitation link.

Main Components:

• Background Image: Large couple photo or beautiful backdrop
• Bride & Groom Names: Most prominently displayed
• Date and Time: When the wedding takes place
• Short Message: Simple phrase like "Getting Married"

Why is it important?

• Captures attention in 3 seconds
• Sets the overall tone of your invitation
• Most shared screen (WhatsApp, Facebook previews)

Entering Basic Information

1. Title (Main Text)

The big headline of your invitation.

Where to Enter:

• Left editing area > "Hero Section" tab
• "Title" input field

Common Examples:

Getting Married
We're Tying the Knot
Forever Walking Together
Two Become One

Creative Examples:

A New Beginning
Forever Together
Our Wedding Day
Setting Sail Together

2. Subtitle (Date Text)

Appears in smaller text below the title.

Where to Enter:

• "Subtitle" input field

Common Examples:

Saturday, March 15, 2025 at 2:00 PM
March 15, 2025 | SAT | 2:00 PM
2025-03-15 Saturday 2:00 PM

Romantic Examples:

When spring begins, so do we
On a sunny Saturday afternoon
A warm spring day, you're invited

3. Groom's Name

Where to Enter:

• "Groom's Name" input field

Format Examples:

John Smith
John
JOHN SMITH
JOHN

Tips:

• Full name or first name only
• Can use all caps
• Choose a style and be consistent

4. Bride's Name

Where to Enter:

• "Bride's Name" input field

Match the format with the groom's name for consistency!

Setting the Hero Image

The most important part! Upload a beautiful photo of the couple.

How to Upload Photos

Step-by-step:

1. Find "Hero Image" Section

   • Scroll down in the left editing area

2. Click "Upload Image" Button

   • It's the blue button

3. Select Photo

   • Computer: Choose file from explorer
   • Phone: Select from gallery
   • Drag and drop also works!

4. Upload Complete

   • Wait a moment and it appears in the right preview
   • Not satisfied? Upload again to replace

Photo Selection Guide

What makes a good photo?

Recommended:

• Photo with both of you together
• Smiling faces (natural smiles!)
• Bright background (indoor/outdoor both fine)
• Horizontal photos (fills screen beautifully)
• Faces not too close-up (waist shot or full body)

Avoid:

• Photos that are too dark
• Extreme close-ups (selfie angles)
• Vertical photos (sides get cropped)
• Low quality/blurry photos
• Overly busy backgrounds

Adjusting Photo Position

Choose which part of the photo to display.

Position Options:

1. Top Alignment

   • Shows upper part of photo
   • Emphasizes sky or background

2. Center Alignment (Default, Recommended!)

   • Shows middle part of photo
   • Optimal when faces are centered

3. Bottom Alignment

   • Shows lower part of photo
   • Emphasizes full body or outfits

How to Adjust:

1. Find "Position Adjustment" dropdown in Hero Image section
2. Select Top/Center/Bottom
3. Check immediately in right preview

Choosing Background Style

Select what effects to apply over the photo.

1. Dark Overlay

Effect:

• Semi-transparent black layer over photo
• Text (names, dates) more visible
• Sophisticated and luxurious feel

When to use:

• Photo too bright, text hard to read
• Want modern and simple feel
• Photo colors too vibrant

2. Light Overlay

Effect:

• Semi-transparent white layer over photo
• Soft and romantic feel
• Bright and cheerful atmosphere

When to use:

• Photo too dark, feels heavy
• Want pure and romantic feel
• Matches well with pastel tones

3. No Overlay

Effect:

• Shows photo as-is
• Maintains vivid colors
• Natural feel

When to use:

• Photo is already perfect
• Sufficient contrast with text
• Want to emphasize photo colors

Choosing Text Color

Change the color of names and dates.

Color Options

White

• Works well with dark backgrounds/photos
• Clean and modern feel
• Safest, most versatile choice

Black

• Works well with light backgrounds/photos
• Classic and traditional feel
• Excellent readability

Gold

• Luxurious and glamorous feel
• Emphasizes special occasion
• Matches well with beige/cream backgrounds

Custom Color

• Choose your exact color
• Match colors in photo
• Use brand colors

Adding Special Effects

Extra options for a more special hero section!

1. Falling Petals Effect

Effect:

• Petals slowly falling on screen
• Romantic, fairy-tale feel
• Cherry blossoms, roses, etc. available

Setup:

• Enable in "Effects" tab
• Select petal type
• Adjust falling speed

When to use:

• Spring wedding (cherry blossoms)
• Romantic atmosphere
• Fairy-tale invitation

2. Sparkle Effect

Effect:

• Small sparkles on screen
• Festive feel
• Glamorous and special atmosphere

When to use:

• Evening ceremony
• Glamorous dress
• Emphasizing special occasion

3. Scroll Animation

Effect:

• Smooth transitions when scrolling
• Fade-in, slide, etc.
• Sophisticated and modern feel

Changing Layout Style

Change the arrangement of the hero section.

Style 1: Center Aligned (Classic)

Wedding Invitation

John ♥ Sarah

March 15, 2025

• Most common and versatile
• All elements centered
• Beautiful symmetry

Style 2: Bottom Aligned (Modern)

[Large photo area]

Getting Married John ♥ Sarah March 15, 2025

• Modern and sophisticated feel
• Shows more of photo
• For minimalist design preferences

Style 3: Top Aligned (Elegant)

Getting Married John ♥ Sarah March 15, 2025

[Photo area below]

• Elegant and classic feel
• Emphasizes text
• Traditional invitation style

Advanced Customization Tips

Tips for creating an even more special hero section!

Photo Editing Tips

Before uploading, enhance your photo:

1. Brightness Adjustment

   • If too dark, increase +20-30
   • Your phone's built-in gallery editing is enough!

2. Enhance Contrast

   • Slight increase adds vitality
   • Don't overdo it or it looks unnatural

3. Crop

   • Center important parts (faces)
   • Remove unnecessary background

4. Apply Filter

   • Use Instagram filters
   • Recommended: Valencia, Clarendon, Lark
   • Keep it subtle!

Recommended Apps:

• Phone: Snapseed, VSCO, Instagram
• Computer: Photoshop, Canva

Text Combination Ideas

Case 1: Simple & Modern

Title: Forever Together
Names: JOHN ♥ SARAH
Date: March 15, 2025

Case 2: Warm & Emotional

Title: We're Getting Married
Names: John ♥ Sarah
Date: Saturday, March 15, 2025 at 2:00 PM

Case 3: Elegant & Classic

Title: Wedding Invitation
Names: John Smith · Sarah Johnson
Date: March 15, 2025

Recommended Color Combinations

Romantic Pink:

• Primary: Pink (#FFB6C1)
• Text: White
• Overlay: Light 20%

Elegant Black:

• Primary: Black (#000000)
• Text: Gold
• Overlay: Dark 40%

Natural Beige:

• Primary: Beige (#F5E6D3)
• Text: Brown
• Overlay: Light 10%

Fresh Green:

• Primary: Mint (#B2E7D8)
• Text: White
• Overlay: None

Real Examples

Follow these commonly used settings!

Example 1: Spring Wedding (Outdoor Photo)

Photo:

• Couple photo in park or cherry blossom path
• Bright and cheerful background

Settings:

Title: Spring Promise
Groom: John Smith
Bride: Sarah Johnson
Subtitle: Saturday, March 15, 2025 at 2:00 PM
Text Color: White
Overlay: Dark 30%
Effect: Falling cherry blossoms
Layout: Center aligned

Example 2: Fall Wedding (Studio Photo)

Photo:

• Studio photo in formal attire/dress
• Clean background

Settings:

Title: Forever & Always
Groom: JOHN
Bride: SARAH
Subtitle: October 20, 2025 | SAT | 3:00 PM
Text Color: Gold
Overlay: Dark 50%
Effect: None (keep it simple)
Layout: Bottom aligned

Example 3: Winter Wedding (Candid Photo)

Photo:

• Natural dating snapshot
• Snowy background or street scene

Settings:

Title: Warm Winter
Groom: John
Bride: Sarah
Subtitle: A warm beginning for two on a cold winter day
Text Color: White
Overlay: Dark 40%
Effect: Falling snow
Layout: Center aligned

Common Mistakes and Solutions

Mistake 1: Photo is cropped

Cause:

• Using vertical photos
• Faces positioned at photo edges

Solution:

• Replace with horizontal photo
• Use position adjustment feature
• Crop in photo editing app

Mistake 2: Text isn't visible

Cause:

• Background and text colors too similar
• No overlay

Solution:

• Add overlay (30-50%)
• Change text color
• Add text shadow effect

Mistake 3: Photo is blurry

Cause:

• Original photo low quality
• Photo too zoomed in

Solution:

• Re-shoot in high quality
• Use different photo
• Use original from photographer

Mistake 4: Doesn't match overall vibe

Cause:

• Photo and text styles don't match
• Too many effects

Solution:

• Unify concept
• Reduce effects
• Review color combinations

Completion Checklist

Check off when hero section is complete!

• Groom and bride names entered correctly
• Date and time entered correctly
• Hero photo uploaded
• Photo position adjusted (faces visible)
• Text color selected (clearly visible)
• Overlay settings (if needed)
• Mobile preview checked
• Got feedback from friends/family
• Clicked Save button!

Next Steps

Once your hero section is complete, move to the next section!

Continue working:

• Writing Greetings - Warm message
• Creating Gallery - Share memories
• Changing Colors and Theme - Unify overall atmosphere

For later if needed:

• Detailed Date and Time Settings
• Location Information