Seventh > Sections > Vertical slider

Vertical slider

The Vertical slider section creates a full-screen or fixed-height image slider with multiple slides. Each slide can contain text content, images, videos, and buttons. Perfect for hero sections, promotional banners, or featured content displays.

What it does

This section displays multiple slides in a vertical scrolling format:

• Slides automatically transition or can be navigated manually
• Each slide can contain text, images, videos, and buttons
• Supports full-screen or fixed aspect ratio heights
• Background images or videos for each slide
• Text content overlaid on slides

Section settings explained

Slider height

Desktop height: Controls the height of the slider on desktop

Mobile height: Controls the height of the slider on mobile

Options:

• Natural - Height adjusts to content (no cropping)
• Fullscreen - Slider fills entire viewport height (default)
• Ultra Wide (2.33:1) - Very wide aspect ratio
• Wide (2:1) - Wide aspect ratio
• Landscape (16:9) - Standard widescreen
• Standard (3:2) - Standard photo ratio
• 4:3 - Traditional photo ratio
• Square (1:1) - Square aspect ratio
• Portrait (5:6) - Portrait orientation
• Tall (2:3) - Tall portrait orientation

Parallax effect

Parallax effect Adds a scrolling parallax effect to slide backgrounds:

• None - No parallax effect
• Subtle - Gentle parallax movement
• Medium - Moderate parallax movement (default)
• Strong - Pronounced parallax movement

Slide options

Each block in the slider is a Slide block with these options:

Media Options

Image / Mobile image, Video

• Upload an image or video for the slide background
• Supports both images and videos
• Image/video fills the entire slide area

Hide media

• When enabled: Hides the background image/video
• When disabled: Shows the background media

Overlay

• Add a color overlay on top of the background
• Adjust transparency for better text readability
• Helps text stand out over images

Content layout

Vertical alignment: Controls how content aligns vertically within the slide:

• Top - Content aligns to the top
• Center - Content aligns to the center (default)
• Bottom - Content aligns to the bottom

Justify content: Controls how content spreads horizontally:

• Start - Content aligns to the left
• Center - Content aligns to the center
• End - Content aligns to the right
• Between - Content spreads with space between
• Around - Content spreads with space around

Content width: Controls how wide the text content area is:

• Small (50%) - Narrow content area
• Medium (70%) - Standard content area (default)
• Full (100%) - Full width content area

Text alignment

• Align text to left, center, or right

Text spacing

• Controls gap between text blocks inside the slide
• Options: XXSmall, XSmall, Small, Regular, Large, XLarge

Slide styling

Color scheme

• Apply theme color schemes to the slide
• Affects text and button colors

Common use cases

Hero slider

• Create full-screen hero sections
• Showcase featured products or promotions
• Use multiple slides for rotating content
• Perfect for homepage hero areas

Promotional banners

• Display sale announcements
• Highlight special offers
• Use fixed height for consistent display
• Great for seasonal promotions

Brand storytelling

• Tell your brand story across multiple slides
• Use images and text to create narratives
• Full-screen for immersive experience
• Perfect for "About Us" sections

Product features

• Showcase product features
• Use images and text to highlight benefits
• Multiple slides for different features
• Great for product detail pages

Tips for success

Slide height

• Fullscreen - Use for hero sections and immersive experiences
• Fixed aspect ratios - Use for consistent display across pages
• Natural - Use when content height varies significantly

Content

• Text readability - Use overlays to ensure text is readable
• Content width - 70% works well for most content
• Alignment - Center alignment works well for hero-style slides

Images & Videos

• High quality - Use high-resolution images for best results
• Aspect ratios - Match image aspect ratios to slider height
• Video backgrounds - Use videos for dynamic, engaging slides

Parallax

• Subtle - Use for gentle, professional effect
• Strong - Use for dramatic, eye-catching effect