Slider

Section overview

The Slider section creates a customizable horizontal slider that can showcase multiple content blocks in a limited space. Each slide can contain a heading, content, button, and images or videos with various layout and styling options.

Common Use Cases

• Showcasing multiple promotional messages or announcements in a compact, interactive format

• Displaying featured products, collections, or content in a visually engaging way

• Creating a visual storytelling experience with sequential content blocks

• Highlighting multiple brand values or features with supporting imagery

Usage Tips

• For best results, use consistent image sizes across all slides to maintain visual harmony

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

• Keep content concise within each slide to avoid overwhelming visitors

• Consider mobile responsiveness when configuring content - test how your slides appear on smaller screens

• Use the auto-scroll feature sparingly as it may create accessibility issues or frustrate users

• Ensure sufficient contrast between text and background colors for readability

Section Settings

Setting	Description
Heading	The main heading for the slider section
Content	The descriptive text for the slider section
Button label	Text to display on the button
Button url	URL the button links to when clicked
Top spacing	Controls the padding above the section (0-300px)
Bottom spacing	Controls the padding below the section (0-300px)
Color scheme	Background color theme for the section
Custom color	Custom background color (when color scheme is set to "Custom")
Text color	Force light or dark text colors
Border color	Color of the section border
Button color	Style of the main section button
Enable color fade	When enabled, changes the page background color on scroll
Border position	Position of the border on the section
X alignment	Horizontal alignment of section content
Arrow alignment	Horizontal alignment of slider navigation arrows
Arrow placement	Vertical position of slider navigation arrows
Enable margin	Adds horizontal margin to the section
Enable scroll margin	Adds margin to the scrollable area
Enable split	Displays header content beside the slider instead of above it
Enable split heading	Splits the heading across multiple lines
Visibility	Controls visibility on mobile and desktop devices
Auto scroll delay	Time between automatic slide transitions (in seconds)
Enable arrows	Shows navigation arrows for the slider
Enable indicators	Shows indicator dots for the slider
Enable scrollbar	Shows a scrollbar for the slider

Block Settings

Content Block

This block type allows you to create individual slides for the content slider with customizable content, media, styling, and layout options. You can add up to 20 content blocks to your slider.

Setting	Description
Heading	The main heading for this slide
Content	The descriptive text for this slide
Button label	Text to display on the button
URL	Destination URL when the button or block is clicked
Image	Main image to display in the slide
Show image as background	Displays the image as a background for the entire slide
Video	Video file to display in the slide
Enable autoplay	Automatically starts playing the video when visible
Enable mute toggle	Shows a button to toggle video sound on/off
Enable loop	Continuously loops the video playback
Minimum height	Sets the minimum height of the slide (0-800px)
Enable padding	Adds padding inside the slide content
Color scheme	Background color theme for this slide
Border color	Color of the slide border
Text color	Force light or dark text colors for this slide
Button color	Style of the slide's button
Enable gradient	Adds a gradient overlay to the slide
Text position	Places text above or below the image
Y alignment	Vertical alignment of slide content
X alignment	Horizontal alignment of slide content
Width mobile	Width of the slide on mobile devices (in 12ths)
Width desktop	Width of the slide on desktop devices (in 12ths)
Enable max width	Constrains the maximum width of the slide content