Slide

Create rich, eye-catching slides with icons, images, videos, overlays, and custom text, plus device-specific visibility controls for standout, responsive presentations in any slideshow.

Last updated 2 months ago

Overview

The Slide block lets you create visually compelling slides by combining icons, images, videos, and formatted text. This block is customizable for each slide, making it ideal for highlighting key features, special offers, or storytelling within your slideshow. Flexible content, overlay, and visibility controls help each slide achieve maximum impact while maintaining a consistent look and feel.

⚠️ Important: The Slide block combines imagery, video, and text—empowering you to adapt your message for every screen size and audience.

Key components and functionality

Slide content

These settings define the foundation for your slide's message and mood. Thoughtful configuration here ensures that every slide remains clear, on-brand, and effective for your audience.

  1. Icon
    Add a text-based icon label expressing the mood or theme of your slide.

    1. The default value is mood.

    2. Use icons such as star, sale, or celebrate to reinforce your visual narrative and spark interest.

  2. Heading
    Define the slide's main headline.

    1. The default value is Slide.

    2. Use concise and direct headlines to communicate your message at a glance.

  3. Content
    Add descriptive or persuasive text. Rich formatting is supported for clarity and emphasis.

    1. The default value is Slide content will be added to the slideshow’s text-based interface. This is a great place to highlight product features or details.

    2. Use this field for feature highlights, calls to action, or promotional details.

Imagery settings

These options allow you to add background images or hosted video, boosting each slide's visual appeal. The right media choices can advance your story and further your brand.

  1. Image
    Add or select a high-quality image that supports your message.

    1. No default image is set.

    2. Use images that are visually clean and sized properly for all devices.

  2. Video (hosted)
    Include a hosted video to bring your slide to life with movement or demonstration.

    1. The slide accepts a single video URL.

    2. If image and video are both provided, video will display as the primary background, with the image serving as a fallback.

    3. Videos can enhance engagement but should not distract from core messaging.

Overlay and color settings

Overlay and opacity controls strengthen your brand's look, improve readability, and maintain clarity over busy backgrounds.

  1. Inactive overlay color
    Adjust the overlay color visible when the slide is not active.

    1. The default value is #000000.

    2. Select a color that enhances contrast and aligns with your palette.

  2. Overlay opacity
    Set overlay opacity to control transparency over background images or video.

    1. The value ranges from 0% (transparent) to 100% (opaque) in 4% increments.

    2. The default value is 48.

    3. Adjust opacity as needed for text clarity without overpowering visuals.

Visibility settings

Visibility settings give you precise control over which devices display your slide content. These features help you craft the most relevant experience for every user.

  1. Visibility
    Choose where your slide appears based on device type.

    1. Do not hide

      1. The slide appears on all devices. (default)

    2. Hide on desktop

      1. The slide appears only on mobile and tablet screens.

    3. Hide on mobile

      1. The slide appears only on desktop screens.

    4. Visibility controls enable targeted messaging and a focused experience for each device.

Available in sections

The Slide block is available in the following section:

  1. Slideshow with text controls

Usage notes

  1. Optimize all images and videos to ensure smooth loading and transitions, especially for mobile traffic.

  2. Adjust overlay and opacity settings so that text remains readable over any background for both active and inactive slides.

  3. Use short, bold headings and relevant icons to make your message instantly clear.

  4. Use visibility controls to tailor content for specific devices, keeping each audience focused and engaged.

  5. Preview your slideshow regularly on desktop and mobile to catch any accessibility or usability issues.

💡 Tip: Experiment with overlay colors, icons, and formatting. Preview your slides on various devices to ensure the best experience for all users.