Skip to content
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 |