Slideshow

Section overview

The Slideshow section allows you to create a responsive banner slideshow with multiple slides, each containing background images or videos with text overlays.

Common Use Cases

• Hero banners on homepage to showcase promotions or collections

• Product announcements with strong visual impact

• Seasonal campaigns or featured content rotations

• Brand storytelling through a sequence of banner slides

Usage Tips

• For best results, use high-quality images with good contrast to ensure text overlays remain readable

• Keep text content concise and impactful to maintain visual hierarchy

• Consider mobile users by keeping essential information visible on smaller screens

• Use auto-scroll feature judiciously - slower scroll speeds (5+ seconds) work best for readability

Section Settings

Setting	Description
Color border	Choose border color style (subtle or strong)
Y spacing	Control the vertical height of the slideshow (extra small to extra large)
Border position	Set where borders appear (none, top, bottom, or both)
Enable header overlap	Allow the slideshow to overlap with the header for a seamless look
Enable margin	Add horizontal margin to the slideshow content
Enable border margin	Add padding inside the borders
Enable max width	Limit the text content width for better readability
Arrow alignment	Position navigation arrows horizontally (left, center, or right)
Arrow placement	Position navigation arrows vertically (top, bottom, or under the slideshow)
Visibility	Control where the slideshow appears (all devices, mobile only, or desktop only)
Auto scroll delay	Set time between automatic slide transitions (0-20 seconds)

Block Settings

Content Block

The Content block allows you to create individual slides within the slideshow, each with its own visual background, text content, and buttons.

Block limit: 4

Setting	Description
Heading	Main title text for the slide
Content	Rich text area for descriptive content
URL	Link for the entire slide (optional)
Desktop background image	Background image optimized for desktop view
Mobile background image	Background image optimized for mobile view (falls back to desktop if not set)
Video background	Background video for the slide
Show entire image	Toggle between containing the full image or covering the entire area
Show video on mobile	Enable/disable video playback on mobile devices
Button label	Text for the primary call-to-action button
Button URL	Link destination for the primary button
Button color	Style option for the primary button appearance
Secondary button label	Text for the additional call-to-action button
Secondary button URL	Link destination for the secondary button
Secondary button color	Style option for the secondary button appearance
Color scheme	Background color theme for the slide
Text color	Force light or dark text color, or use theme default
Enable gradient	Add a subtle gradient overlay to improve text visibility
Enable background overlay	Add a background behind text content for better contrast
Vertical alignment	Position content vertically (top, middle, or bottom)
Horizontal alignment	Position content horizontally (left, center, or right)