Slideshow

Section overview

The slideshow section creates a dynamic slideshow with customizable slides featuring background images or videos with text overlays, buttons, and navigation controls.

Common use cases

• Create engaging hero banners on homepage

• Showcase multiple product collections or promotions

• Display announcements or welcome messages with compelling visuals

• Create interactive brand stories or feature highlights

Usage tips

• Use high-contrast images that make text easily readable

• Keep slide content concise and action-oriented

• For better performance, optimize images before uploading

• Consider mobile users by testing how slides appear on smaller screens

• Limit the number of slides to 3-5 for optimal user experience

• Adjust auto-scroll settings based on the amount of content in each slide

Section settings

Setting	Description
Color scheme	Controls the overall color theme of the slideshow section
Text color	Determines the text color, with options for default, forced light, or forced dark
Border color	Sets the color of any borders on the slideshow
Enable gradient	Adds a subtle gradient overlay to slides to improve text readability
Border position	Positions borders around the slideshow (none, top, bottom, or both)
Vertical spacing	Controls the height of the slideshow from extra small to extra large
Vertical alignment	Aligns slide content vertically (top, middle, or bottom)
Horizontal alignment	Aligns slide content horizontally (left, center, or right)
Visibility	Controls visibility on different devices (all, mobile only, or desktop only)
Auto-scroll delay	Sets the time in seconds before advancing to the next slide
Enable auto-scroll	Toggles automatic advancement through slides

Block settings

Slide

Each slide block creates an individual slide in the slideshow containing background media and content.

Setting	Description
Desktop background image	The image displayed on desktop devices
Mobile background image	An optional separate image optimized for mobile devices
Background video	Video file to be used as slide background
Show entire image	When enabled, displays the full image (object-contain) instead of cropping it (object-cover)
Show video on mobile	Toggles video visibility on mobile devices
Heading	Main headline text for the slide
Content	Rich text area for additional content on the slide
Primary button color	Sets the style of the primary call-to-action button
Primary button label	Text displayed on the primary button
Primary button URL	Destination link for the primary button
Secondary button color	Sets the style of the secondary call-to-action button
Secondary button label	Text displayed on the secondary button
Secondary button URL	Destination link for the secondary button