How to Use the Carousel Element

The Carousel Element is a dynamic way to display content such as images, testimonials, product showcases, or promotional banners. It provides a scrollable, interactive layout that enhances user engagement.

1. Adding the Carousel to Your Page

Step 1: Insert the Carousel Element

1. Open your page editor.
2. Click Add Elements → Go to Media → Select Carousel.
3. Drag and drop it onto your page.

Step 2: Understanding the Carousel Structure

• The carousel consists of multiple columns that hold content.
• Navigation Arrows (left and right) allow users to scroll through the slides.
• Dot Navigation at the bottom indicates the number of slides.

2. Customizing the Carousel Layout

Adjusting the Number of Columns

• Open Carousel Settings (top-right toolbar).
• Set the number of columns (from 1 to 6).
• If all columns are visible, navigation arrows and dots disappear.

Spacing & Navigation Options

• Adjust spacing between slides for better separation.
• Customize arrow styles (change icons, size, and position).
• Choose dot navigation styles or disable them entirely.

3. Adding & Managing Content in the Carousel

Modifying a Slide

• Click on any column inside the carousel.
• Add images, text, buttons, or any other element from the Elements Drawer.

Duplicating & Reordering Slides

• Duplicate a slide to maintain consistent design across all slides.
• Use the arrow keys in the column settings to reorder slides.

Deleting Unwanted Slides

• Click on the column settings of a slide.
• Select Delete to remove it.

4. Styling the Carousel

Modifying Colors & Typography

• Customize text fonts, sizes, and colors.
• Change the background color of slides.
• Add hover effects for interactive styling.

Adding Image & Button Links

• Each slide can be linked to another page, popup, or file.
• Use the Link Options to define where clicking on the slide should take the user.

5. Optimizing for Different Devices

Tablet View

• By default, the carousel displays two columns.
• Adjust spacing and arrow positioning for better visibility.
• Add padding if needed to improve arrow placement.

Mobile View

• On mobile, the carousel automatically switches to a single-column view.
• Adjust arrow spacing to ensure smooth navigation.

6. Why Use the Carousel Element?

• Visually Engaging – Interactive design keeps users engaged.
• Flexible Layouts – Customize slides with any content.
• Mobile-Friendly – Automatically adapts to different screen sizes.
• Easy Navigation – Arrows and dots guide users through the slides.

The Carousel Element is a powerful tool for showcasing content dynamically while ensuring a smooth user experience across desktop, tablet, and mobile devices.