Carousel
Overview:
The Carousel section is a versatile slideshow component that can be used to display rotating content such as promotions, featured products, or announcements. It allows customization of slide images, headings, descriptions, and buttons, with options for autoplay, navigation, and pagination.
Section Configuration:
General Layout
| Setting |
Description |
| Desktop Height |
Adjust the height of the carousel on desktop devices. Options: Small, Medium, Full Window. Default: Small. |
| Mobile Height |
Adjust the height of the carousel on mobile devices. Options: Small, Medium, Full Window. Default: Small. |
| Color Scheme |
Choose a color scheme for the entire carousel section. Default: Scheme1. |
Slideshow Behavior
| Setting |
Description |
| Autoplay |
Enable or disable automatic sliding between slides. Default: Disabled. |
| Slide Type |
Choose the animation type for the carousel. Options: Fade, Slide. Default: Fade. |
| Show Navigation Arrows |
Toggle to display arrows for manual navigation. Default: Enabled. |
| Show Pagination Dots |
Toggle to display pagination dots at the bottom of the carousel. Default: Enabled. |
| Change Slides Every (s) |
Set the interval time (in seconds) for slides to automatically transition. Default: 5 seconds. |
Block Configuration
Slide Block
Each slide in the carousel is customizable with a combination of images, text, buttons, and optional product cards.
| Setting |
Description |
| Image |
Upload an image for the slide background. |
| Background Overlay |
Add a gradient overlay on top of the background image. |
| Heading |
Add a heading for the slide. Default: "Talk about your brand." |
| Heading Size |
Choose the size of the heading. Options: H1, H2, H3, H4. Default: H1. |
| Heading Weight |
Select the font weight for the heading. Options: Bold, Semi-Bold, Medium, Normal. Default: Bold. |
| Description |
Provide a description or additional text for the slide. |
| Description Text Size |
Choose the size of the description text. Options: Small, Medium, Large, Extra Large. Default: Medium. |
| Description Weight |
Choose the weight for the description text. Options: Light, Normal, Medium, Semi-Bold, Bold. Default: Normal. |
Slide Content Positioning
| Setting |
Description |
| Enable Container |
Toggle to enable a fixed content width container. Default: Enabled. |
| Max Content Size |
Define the maximum width for slide content as a percentage. Default: 100%. |
| Content Position |
Position the slide content. Options: Top Left, Top Right, Centered, Bottom Left, Bottom Right. Default: Centered. |
Each slide can include one or two buttons to direct users to relevant pages.
| Setting |
Description |
| First Button Label |
Add a label for the first button. Default: "Button Label". |
| First Button URL |
Set a URL for the first button. |
| Open First Button in New Window |
Toggle to open the first button link in a new tab. Default: Disabled. |
| Second Button Label |
Add a label for the second button. Default: "Button Label". |
| Second Button URL |
Set a URL for the second button. |
| Open Second Button in New Window |
Toggle to open the second button link in a new tab. Default: Disabled. |
Product Card
You can showcase a featured product within a slide.
| Setting |
Description |
| Enable Product Card |
Toggle to display a product card on the slide. Default: Enabled. |
| Select Product |
Choose a product to feature in the product card. |
Content Alignment
| Setting |
Description |
| Text Alignment (Desktop) |
Align text on desktop devices. Options: Left, Center, Right. Default: Left. |
| Text Alignment (Mobile) |
Align text on mobile devices. Options: Left, Center, Right. Default: Center. |
| Slide Color Scheme |
Choose a color scheme for the slide content. Default: Scheme2. |