Slideshow

Create carousels for images, testimonials, cards, and other content

Display content in a carousel format with navigation controls. Perfect for image galleries, testimonials, or any content that benefits from sequential presentation.

Quick Reference

  • Purpose: Carousel container for any content

  • Navigation: Arrows and dots (always visible)

  • Content: Any block type can be placed in slides

  • Styling: Background color and opacity for frame

  • Mobile: Touch/swipe support built-in

Understanding the Structure

The Slideshow block creates a container that displays content in a carousel format:

  • Slideshow Group: The parent container with navigation controls

  • Slides: Individual containers that can hold any type of content block

Unlike some blocks with fixed fields, slides are flexible containers. You can place any block inside a slide - text, images, videos, buttons, even complex column layouts.

Adding Slideshows

Method 1: Drag from Right Sidebar

  1. Click the Cards category in the right sidebar

  2. Find Slideshow in the dropdown

  3. Drag it onto your page where you want it

  4. Click to add content to your slides

Method 2: Slash Command

  1. Type /slideshow on empty line

  2. Empty slideshow appears

  3. Add content blocks inside

Configuration

Slide Management

In the toolbar, click Manage Items to:

  • Add slides: Click "+ Add New Item" to create a new slide

  • Reorder slides: Drag slide items to change their order

  • Remove slides: Click the trash icon next to any slide

Styling Options

Click the color icon in the toolbar to adjust:

  • Background Color: Choose a color for the slideshow frame

  • Opacity: Set transparency level (0-100%)

Delete Slideshow

Click the trash icon to remove the entire slideshow and all its content.

Content Flexibility

Slides are versatile containers that can hold most types of blocks:

  • Text content: Paragraphs, headings, lists, quotes

  • Media: Images, videos, embeds

  • Interactive elements: Buttons, forms, newsletter signups

  • Card groups: Collections of cards within slides

Important: Some blocks cannot be placed inside slides due to technical limitations:

  • Column Groups

  • Testimonial Groups

  • Other Slider Groups (nested slideshows)

  • Toggle Groups

  • Tables

This flexibility still makes slideshows perfect for creating rich, varied content experiences beyond simple image carousels.

Common Use Cases

Image Gallery

  • Product photos with consistent sizing

  • Portfolio showcase with project images

  • Before/after comparison slides

Mixed Media Presentations

  • Slide 1: Hero image with overlay text

  • Slide 2: Video with description below

  • Slide 3: Call-to-action with buttons

Feature Showcases

  • Each slide highlights a different product feature

  • Combine images, headings, and descriptive text

  • Include buttons for "Learn More" on each slide

Tutorial or Process Steps

  • Step-by-step instructions with visuals

  • Each slide represents one step

  • Mix screenshots, text instructions, and tips

Best Practices

  • Content consistency: Keep slide heights similar for smooth transitions

  • Limit quantity: 3-7 slides work best for user engagement

  • Mobile consideration: Test touch/swipe on various devices

  • Performance: Optimize media (especially images/videos) before adding

  • Clear purpose: Each slide should have a distinct message or content

  • Accessibility: Add alt text to images and descriptive text for screen readers

Design Tips

  1. Visual Consistency

    • Maintain similar content heights across slides

    • Use consistent typography and spacing

    • Apply uniform padding within slides

  2. Content Organization

    • Start with most important content

    • Tell a story across slides

    • End with clear call-to-action

  3. Styling Considerations

    • Use frame background color to unify the slideshow

    • Adjust opacity for subtle effects

    • Consider contrast between slide content and background

Troubleshooting

Slides not changing

  • Click the arrow buttons to navigate manually

  • Check if you're in edit mode (navigation works in preview)

  • Ensure you have multiple slides added

Content appears cut off

  • Reduce amount of content per slide

  • Use column layouts for better organization

  • Consider breaking long content across multiple slides

Performance issues

  • Compress images before uploading

  • Limit video file sizes

  • Reduce total number of slides if needed

Mobile navigation problems

  • Swipe gestures are automatically enabled

  • Arrow buttons remain accessible on all devices

  • Test in actual mobile preview, not just resized browser

Last updated