Skip to content
Slider
Section overview
The Slider section creates a carousel of customizable content blocks, each capable of displaying headings, rich text, buttons, images, and videos in a horizontal scrolling format.
Common use cases
- Showcasing multiple products or collections in a compact, swipeable interface
- Displaying testimonials or reviews with supporting imagery
- Creating a gallery of promotional content or announcements
- Highlighting key features or benefits of a service or product
Usage tips
- For best results, maintain consistent image dimensions across slides to ensure visual harmony
- Limit the number of slides to prevent overwhelming users and maintain performance
- Consider mobile users by ensuring text is legible and click targets are accessible on smaller screens
- Use the color scheme settings to create visual distinction between the slider and surrounding content
Section settings
| Setting | Description |
|---|---|
| Heading | The main heading displayed above the slider |
| Content | Rich text displayed alongside the main heading |
| Button label | Text for the main section button |
| Button URL | Link destination for the main section button |
| Top spacing | Controls vertical padding above the section (0-300px) |
| Bottom spacing | Controls vertical padding below the section (0-300px) |
| Color scheme | Controls the background and text colors of the section |
| Border color | Sets the color for any borders in the section |
| Button color | Sets the style and color for the main section button |
| Border position | Controls where borders appear in the section |
| X alignment | Sets horizontal alignment of section content |
| Arrow alignment | Controls the positioning of navigation arrows |
| Enable margin | When enabled, adds horizontal margins to the section |
| Enable split | When enabled, places the section header beside the slider instead of above it |
| Visibility | Controls whether the section appears on mobile, desktop, or both |
| Enable arrows | When enabled, shows navigation arrows for the slider |
| Enable indicators | When enabled, shows dot indicators for slider position |
| Enable scrollbar | When enabled, shows a scroll indicator for the slider |
Block settings
Content
This block type creates an individual slide within the content slider, containing customizable content, imagery, and styling options.
- Block limit: 20
| Setting | Description |
|---|---|
| Heading | The heading displayed on the slide |
| Content | Rich text content displayed on the slide |
| Button label | Text for the slide's button |
| URL | Link destination for the slide's button |
| Image | The main image displayed on the slide |
| Background image | Secondary image used as a background |
| Video | Video file to display on the slide |
| Enable autoplay | When enabled, videos play automatically |
| Enable mute toggle | When enabled, shows a button to toggle video sound |
| Enable loop | When enabled, videos play continuously in a loop |
| Minimum height | Sets the minimum height for the slide (0-800px) |
| Enable padding | When enabled, adds padding inside the slide |
| Color scheme | Controls the background and text colors of the slide |
| Text color | Sets the text color, with options to force light or dark |
| Border color | Sets the color for any borders on the slide |
| Button color | Sets the style and color for the slide's button |
| Enable gradient | When enabled, adds a gradient effect to the slide background |
| Y alignment | Controls vertical alignment of content within the slide |
| X alignment | Controls horizontal alignment of content within the slide |
| Text position | Determines if text appears above or below the image |
| Width mobile | Controls how much horizontal space the slide occupies on mobile devices |
| Width desktop | Controls how much horizontal space the slide occupies on desktop devices |
| Enable max width | When enabled, restricts the maximum width of the slide content |