All about the carousel widget

Add a sliding carousel to your page and let your audience scroll horizontally through cards,
making your visuals more interactive. ➡️ In this article, we show you how to add a carousel to your page and include a few examples.

What is the carousel widget?

A carousel is a sliding widget that displays a rotating set of images and text. It lets your audience scroll horizontally through cards, allowing you to display multiple visuals in a limited space.

A carousel always consists of multiple cards. By default, it includes an image, title, paragraph text, and button. The complete card is clickable to guide your audience to another place — the next page, an external URL, or an overlay. 

How to add a carousel

Step 1: Drag and drop

In the editor, click elements and scroll down to the widgets section. Drag and drop the carousel icon onto your page. The widget takes over a block, so it's possible to drag it between blocks.

The carousel has six cards by default that consist of:

• An image you can change
• A title to style as you see fit
• Paragraph text to style as you see fit
• A button 

The complete card is clickable to guide your audience to another place — the next page, an external URL, or an overlay. 

Step 2: Carousel settings

The carousel widget has six cards by default, but you can add and delete cards as you like. The minimum is one card, and the maximum is 15.

To manage the carousel settings, navigate to the orange bar in the top-right of the block.

Add a card by clicking the + icon. You can add up to 15 cards for your carousel.

To decide what your carousel looks like, click the settings icon in the orange bar. 

You have three different options we'll go over below:

• General settings
• Spacing
• Card layout

General settings

• Space between cards — Determine how much space you want between cards.
• Card width size — Determine how wide you want your cards to be, ranging from XS to XL.

Spacing — In the spacing settings, you manage spacing for the edges of your carousel widget block.

Card layout

• Show card image — Show or hide images for your carousel.
• Show card text — Show or hide text for your carousel.
• Show card button — Show or hide buttons for your carousel.

Step 3: Card settings

In addition to the carousel settings, you can control the settings on an individual card level. Navigate to a card and check the blue bar. 

This is where you can change the order of your cards by moving them to the left or the right.

You can replace the image of the card by clicking the replace button when you hover over the image.

To change where a card links, click the settings icon, open the general settings , and edit the link. The link applies to the complete card, wherever you hover with your cursor (image, title, paragraph text, or button.)

You also have styling options, such as background, border, and shadow. 

If you want a carousel with background images — as we did for the first card below — you need to take these steps:

1. In the carousel settings, disable show card image. 
2. In the card settings, go to background and add a background image. You can set the background color overlays for the cards to gradient so that the images are a bit darker at the bottom/top to improve text legibility. 
3. In the card settings, increase the spacing for the bottom and top of the card. In the example below, we've set the maximum spacing of 200.

Step 4: Block settings

The block settings also might change the way your carousel looks. Changing the block to display full width will display your carousel from the edges of the screen.

Carousel on mobile

The carousel widget is completely responsive and accessible on mobile devices. Check the mobile view mode to see what it looks like. 

Three examples

Small cards (Travel Brochure example)

This example is close to the default carousel widget you drop onto your page.

To achieve the desired result, we swapped out the images, added some text for the cities with different styling, and added an arrow to the button. 

Medium cards (Internal Newsletter example)

This example has the following settings to achieve the desired result:

• We removed the card image for each card (Carousel settings > Card layout > Toggle off Card image).
• Go to the card settings > background > add a background image. This will place the text and button on top of the background image.
• The background color overlays for the cards are set to gradient so that the images are a bit darker at the bottom to improve text legibility. 
• Added some text for the department in a different color to make it stand out (e.g. "Data & Analytics).

Large cards (Product Catalog example)

This example has the following settings to achieve the desired result:

• Have transparent images (.PNG) so that they can "float" on top of the page horizontally. This might require you to remove the background of an image. For example, when you're showcasing a physical product or a cut-out of a portrait of a colleague. 
• Set a block background. In this case, we opted for an abstract blue image.