Skip to main content

Full Width Slider

Create stunning, full-screen hero sliders with the Full Width Slider page builder section. Perfect for homepage heroes, campaign banners, and immersive storytelling experiences.

David Rose avatar
Written by David Rose
Updated today

The Full Width Slider section provides a powerful, customizable carousel that spans the full width and height of the page. Each slide can feature a background image, centered content with title and description, and a call-to-action button - all with extensive styling options for height, overlay effects, text color, and alignment.

This article covers:

  • Key Features

  • Configuring the Full Width Slider Section

Key Features

  • Full-screen presentation - Slides fill the entire viewport for maximum impact

  • Multiple slides - Add unlimited slides with drag-to-reorder functionality

  • Rich content options - Title, HTML description, background image, and button per slide

  • Flexible height control - Full screen, three-quarter, or half-height options (applies to all slides)

  • Parallax scrolling - Optional smooth parallax effect as users scroll

  • Ken Burns effect - Optional slow pan and zoom animation on slide images

  • Overlay customization - Add or remove dark overlay for text readability

  • Text styling - Choose dark or light text color and left/center/right alignment

  • Responsive design - Automatically adapts to all screen sizes

Configuring the Full Width Slider Section

Options that apply to all slides:

Image Height

Controls how much of the viewport the slider occupies (applies to all slides in this section):

Full Screen (default) - Fills entire viewport height

  • Best for: Homepage heroes, campaign launches

  • Impact: Maximum visual impact and immersion

Three Quarter - Uses 75% of viewport height

  • Best for: Mid-page sliders, category features

  • Impact: Balanced presence without overwhelming

Half - Uses 50% of viewport height

  • Best for: Inline promotions, secondary content

  • Impact: Compact and content-friendly

Parallax

Adds a smooth parallax scrolling effect to slide backgrounds:

Disabled (default) - Standard background behavior

  • Best for: General use, faster performance

  • Effect: Clean, straightforward presentation

Enabled - Background images move slower than foreground content during scroll

  • Best for: Creating depth and visual interest

  • Effect: Sophisticated, modern aesthetic

  • Note: Cannot be enabled simultaneously with Ken Burns

Ken Burns

Adds a slow pan and zoom animation to slide images:

Disabled (default) - Static background images

  • Best for: General use, letting content take focus

  • Effect: Clean, professional appearance

Enabled - Subtle continuous animation on backgrounds

  • Best for: Adding motion and dynamism without video

  • Effect: Cinematic, engaging presentation

  • Note: Cannot be enabled simultaneously with Parallax

Animation Tip: While both Parallax and Ken Burns add visual interest, they use conflicting animation techniques and cannot be enabled together. Choose the effect that best matches your design intent:

  • Use Parallax for scroll-driven depth effects

  • Use Ken Burns for automatic, continuous motion

Options that Apply to Individual Slides:

The Full Width Slider starts with one slide. Click Add More + to add additional slides.

Slide Configuration Options

Content Settings

Title

  • Purpose: Main headline displayed prominently on the slide

  • Character limit: 200 characters

  • Example: "Sleek, Intuitive & Performant"

  • Tip: Keep titles short and impactful - 3-8 words works best

Description

  • Purpose: Supporting text that provides context or additional information

  • Format: HTML-friendly textarea (supports line breaks, bold, italics, links)

  • Example: "Build beautiful, contemporary sites in just moments with Foundry and Variant Page Builder."

  • Tip: Keep descriptions under 25 words for mobile readability

Slide Link URL

  • Purpose: Makes the entire slide clickable (optional)

  • Format: Full URL or relative path

  • Example: `https://yourstore.com/new-collection` or `/brand/brooks`

  • Note: If left blank, slide is not clickable

Background Image

  • Purpose: Full-screen background for the slide

  • Recommended size: 1800px × 700px (or larger for high-DPI displays)

  • Aspect ratio: 16:9 works best for most screens

  • Format: JPG, PNG, or WebP

  • Tip: Use high-quality images optimized for web (100-300KB)

Button Settings

Button Text

  • Purpose: Call-to-action text (optional)

  • Character limit: 100 characters

  • Example: "Start Exploring", "Shop Now", "Learn More"

  • Note: Leave blank to hide the button

Hide Button

  • Options: Yes or No

  • Default: No (button visible)

  • Use case: Set to "Yes" when you want text-only slides

New Window

  • Options: Yes or No

  • Default: No (opens in same window)

  • Use case: Set to "Yes" for external links

Button Icon

  • Arrow Icon (default) - Best for general navigation

  • Shop Icon - Perfect for e-commerce calls-to-action

  • Sale Icon - Use for promotional campaigns

  • Event Icon - Great for event announcements

  • Thumbs Up Icon - Endorsements or featured items

  • Pencil Icon - Blog posts or customization features

  • Alert Icon - Important announcements

  • None - Text-only button

Visual Styling Options (Per Slide)

Overlay

Adds a dark semi-transparent layer over the background image:

  • Yes (default) - Adds overlay for better text contrast

    • Use when: Background images are bright or busy

    • Effect: Ensures text is always readable

  • No - No overlay, pure image background

    • Use when: Images are already dark or have clear space for text

    • Effect: Cleaner, more minimalist look

Text Color

Sets the color of title, description, and button text:

  • Dark (default) - Dark text on light backgrounds

    • Best with: Light, bright images and overlay enabled

    • Creates: High contrast for maximum readability

  • Light - White/light text on dark backgrounds

    • Best with: Dark images or no overlay

    • Creates: Elegant, dramatic aesthetic

Text Alignment

Controls horizontal alignment of all text content:

  • Centered (default) - Text centered horizontally

    • Best for: General use, symmetric layouts

    • Creates: Balanced, professional appearance

  • Left - Text aligned to left edge

    • Best for: Modern, editorial styles

    • Creates: Contemporary, asymmetric design

  • Right - Text aligned to right edge

    • Best for: Unique layouts, directional flow

    • Creates: Distinctive, attention-grabbing format

Best Practices

Image Selection

Do's:

  • ✅ Use high-resolution images (minimum 1920px wide)

  • ✅ Optimize file sizes (aim for 100-300KB per image)

  • ✅ Choose images with clear focal points

  • ✅ Maintain consistent aspect ratios across slides

  • ✅ Test images at various screen sizes

Don'ts:

  • ❌ Use images with important details at edges (may get cropped on mobile)

  • ❌ Mix portrait and landscape orientations

  • ❌ Use images with busy patterns where text will appear

  • ❌ Upload unoptimized RAW or uncompressed files

Content Strategy

Headline Writing:

  • Keep to 3-8 words for maximum impact

  • Use action-oriented language ("Discover", "Explore", "Shop")

  • Maintain consistent tone across slides

  • Test readability at mobile sizes

Description Text:

  • Limit to 2 sentences or 25 words

  • Support the headline without repeating it

  • Include clear value proposition

  • Consider omitting on mobile-heavy sites

Call-to-Action:

  • Use verb-first button text ("Shop Now" not "Now Shop")

  • Create urgency when appropriate ("Limited Time", "Shop Today")

  • Match button icon to action (Shop icon for shopping, Arrow for browsing)

  • A/B test different button text for conversion optimization

Did this answer your question?