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 over 3 weeks ago

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?