Fullscreen Templates
Fullscreen templates cover the entire viewport for maximum impact. Use them for important announcements, welcome experiences, and high-priority messages.
Overview
| Property | Value |
|---|---|
| Template Count | 11+ |
| Position | Full viewport |
| Overlay | Full coverage |
| Best For | Welcome mats, major announcements |
Common Use Cases
Welcome Mats
- First-time visitor greetings
- Site introductions
- Age verification
- Terms acceptance
Major Announcements
- Product launches
- Company news
- Feature releases
- Event promotions
Gated Content
- Newsletter gates
- Content previews
- Membership prompts
- Premium upgrades
Special Events
- Holiday promotions
- Sale events
- Limited offers
- Milestone celebrations
Template Styles
Centered Content
Content centered in viewport:
┌─────────────────────────────────────┐
│ │
│ [Heading] │
│ [Text] │
│ [CTA] │
│ │
└─────────────────────────────────────┘
Split Screen
Two-column layout:
┌──────────────────┬──────────────────┐
│ │ │
│ [Image] │ [Content] │
│ │ [Form] │
│ │ [Button] │
│ │ │
└──────────────────┴──────────────────┘
Background Media
Full background image/video:
┌─────────────────────────────────────┐
│ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │
│ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │
│ ░░░░░░░ [Overlay Content] ░░░░░░░░░ │
│ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │
│ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │
└─────────────────────────────────────┘
Card Overlay
Content card on fullscreen backdrop:
┌─────────────────────────────────────┐
│ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │
│ ░░░░░ ┌───────────────┐ ░░░░░░░░░░░ │
│ ░░░░░ │ Content │ ░░░░░░░░░░░ │
│ ░░░░░ │ Card │ ░░░░░░░░░░░ │
│ ░░░░░ └───────────────┘ ░░░░░░░░░░░ │
│ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │
└─────────────────────────────────────┘
Layout Options
Vertical Alignment
| Position | Use Case |
|---|---|
| Top | Important header messages |
| Center | Default, balanced |
| Bottom | With top image/video |
Horizontal Alignment
| Position | Use Case |
|---|---|
| Left | Text-heavy, reading flow |
| Center | Default, formal |
| Right | With left media |
Content Width
| Width | Use Case |
|---|---|
| Narrow (400-500px) | Simple messages |
| Medium (600-800px) | Forms, more content |
| Wide (800-1000px) | Rich layouts |
| Full | Edge-to-edge |
Background Options
Solid Color
Simple, fast-loading backgrounds.
Gradient
Multiple color gradients for visual interest.
Image
Full-bleed photography or graphics.
- Use high-quality images
- Optimize file size
- Add overlay for text readability
Video
Background video loops.
- Muted, autoplaying
- Consider fallback image
- File size impact
Pattern
Subtle patterns for texture.
Animation Options
Entry Animations
- Fade in
- Scale up
- Slide in
- Blur in
Content Animation
- Staggered element entry
- Typewriter text
- Animated graphics
- Parallax effects
Exit Animations
- Fade out
- Scale down
- Slide out
Customization Tips
Backgrounds
- Use overlays for text readability
- Compress images for performance
- Test on various screens
- Consider dark/light modes
Content
- Large, readable typography
- Clear hierarchy
- Single focused message
- Prominent CTA
Close Options
- Clear close button
- "No thanks" text link
- Click outside (optional)
- Escape key
Best Practices
- Use sparingly — High-impact, high-interruption
- Clear exit — Easy to dismiss
- Mobile optimize — Test on small screens
- Fast loading — Don't slow page
- Clear value — Worth the interruption
- One per visit — Don't repeat often
When to Use Fullscreen
Good uses:
- First-time visitors
- Major announcements
- Legal requirements (age, terms)
- High-value offers
Avoid for:
- Frequent promotions
- Minor updates
- Returning visitors
- Mobile users (often)
Age Verification
Legal compliance pattern:
┌─────────────────────────────────────┐
│ │
│ Are you 21 or older? │
│ │
│ [Yes, Enter] [No, Exit] │
│ │
│ By entering, you agree to │
│ our Terms of Service │
│ │
└─────────────────────────────────────┘
Welcome Mat Example
First-visit engagement:
┌─────────────────────────────────────┐
│ │
│ Welcome to Our Store! 🎉 │
│ │
│ Get 15% off your first order │
│ │
│ [email@example.com] │
│ [Get My Discount] │
│ │
│ No thanks, I'll pay full price │
│ │
└─────────────────────────────────────┘
Mobile Considerations
Fullscreen on mobile needs special attention:
- Content must fit without scroll (ideally)
- Larger touch targets
- Readable text (16px+)
- Easy close access
- Consider showing smaller popup instead
- Test orientation changes
Performance
Fullscreen templates should still be fast:
- Optimize background images
- Use modern formats (WebP)
- Lazy load when possible
- Minimize animations
- Test on slow connections