Skip to main content

How to use an image carousel content block

Chiayee avatar
Written by Chiayee
Updated this week

Introduction

The Image Carousel content block is a tool that allows you to create engaging, dynamic image slideshows in your Customer Portal. Whether you want to showcase products, highlight promotions, or feature important announcements, this feature helps you create visually appealing, interactive content that captures your audience's attention.

Benefits

  • Create professional-looking image slideshows without coding

  • Engage visitors with automatic image transitions and animations

  • Drive conversions with clickable images linked to your products or campaigns

  • Maintain visual consistency with customizable styling options

Step-by-Step Setup Guide

  1. Navigate to Customer Portal > Content (Pages) > Content Blocks

  2. Add a New Carousel Block

    • Click the "+" icon to add a new content block

    • Select "Image Carousel" from the content block options

  3. Upload Images for Your Content Promotion

    • Click "Add Carousel Item" to upload photos from your computer

    • Recommended image size: 1200 x 600 pixels for optimal display

    • Support formats: JPG, PNG, GIF

    • Adjust carousel height to match your page layout

    • Set image alignment and spacing

    • Configure corner rounding for a polished look

  4. Customize Content

    • Configure text positioning and styling

  5. Add Interactive Elements

  • Insert clickable links on images or text

  • Create call-to-action buttons

6. Configure Animation Settings

  • Set auto-slide duration (recommended: 3000-5000 milliseconds)

  • Choose transition effects that match your brand style

Best Practices

  • Image Quality: Use high-resolution images that are optimized for web display

  • Content Length: Limit your carousel to 3-5 slides for optimal engagement

  • Text Overlay: Keep text concise and ensure it's readable against the image background

  • Mobile Responsiveness: Preview your carousel on different screen sizes to ensure proper display

Quick preview of how it will look like on the web app after the setup:

Refer to this video for a detailed setup tutorial:

Did this answer your question?