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