Learn how to add a card widget that allows learners to interact with content by flipping a card to reveal additional information.
Adobe Captivate introduces content blocks, such as text or an image block, which contain components like text, image, or button. Play this video to learn more about content blocks and components.
A card is a popular mechanism to add interaction in eLearning courses that allow learners to interact with content by flipping a card to reveal additional information.
In the all-new Adobe Captivate, you can create a card widget, which enables learners to select one side of a card to reveal corresponding concepts, such as descriptions, images, and cues on the other side.
Select Add New Widget > Cards in the left toolbar.
At the widget level, Adobe Captivate lets you add or remove the number of cards in the widget, choose from a set of pre-defined design options, add or remove a title or image, and many more.
Select the card widget. In Visual Properties, in Alignment and Spacing section, you can adjust the following:
Move the Number of flipcards slider in the Visual Properties panel to increase or decrease the number of cards. You can add at most four cards in the widget.
Select a card widget design from the list of Design Options.
For more information, view Design options.
In the Components section, you can change the following:
The following customizations are available for the content at the front of the card widget. Add or remove components from a card widget:
The customizations done at this level are applied to all cards in the widget. If you want to make changes to individual cards, visit Change the properties of a card inside the widget.
You can align the components in the Components section. Hover over a component and select any option (Align left, Align center, or Align right).
In the Appearance section, change the appearance of widget's background. You can change the widget's color, add a border, and apply an inner shadow.
You can change the border's color, width, and specify the end caps (Butt, Round, Projecting).
The borders and shadows reflect based on the sides. For example, the left border applied on a front card becomes the right border on the back due to the flip effect.
In the Card tab in Appearance, change the properties for the cards on the widget. You can change the card's appearance by changing the properties, such as color, border, radius for corners, or shadows.
Select the Overlay solid color checkbox if you want to change the overlay color inside a card on the front panel of the widget. Select the color picker and select any color.
In the Settings section, enable the toggle Move to next slide when the widget completes. This enables the Next button only after a learner selects all the cards.
On selecting the Previous or Next button, the interactions to move to the previous or next slide are set by default. But you can customize the interaction from the Interactions panel.
Select a card in the widget.
In the Components section in Visual Properties, you can change the following:
You can align the components in the Components section. Hover over a component and select any option (Align left, Align center, or Align right).
You can add the card's background color, border, radius, or shadow in the Appearance section.
Select an icon to change the icon's properties.
In the Visual Properties panel, you can:
When you change the properties of the card widget in a device mode, the horizontal scrollbar lets you view the cards.
Apply an image filter, change an image's blur or brightness, add border, or replace the image.
On the slide, select a card. Then, select the image on the card. Using the placeholder icon on the image, replace the image. For more information, view Images in Adobe Captivate.
In the Appearance section of the Visual Properties panel, you can apply a filter, blur the image, and adjust the brightness and contrast.
You can also add a border to the image. You can change the width of the border and add color, and add a border on one or four sides of the image.
Select Drop shadow to add a shadow to the image's border.
If you want to replace the existing image, click the folder icon in the Image Source section. You can pick the image from the Assets or on your computer.
Select the pencil icon in the Image Source section to crop the image. For more information, view Images in Adobe Captivate.
Adobe Captivate allows you to change the properties at the text level. At the text level, you can apply a preset text style, change the font, change the text color, apply bullets and numbering, and many more.
Select a card in the widget and then select a text object.
In the Appearance section of the Visual Properties panel, change the text style, font, font size, text spacing, etc.
Change the text color in the color picker and apply a shadow if needed.
Select Bullets and numbering to add bullets to the text. You can also change the size of the bullets, add colors, and change the indentation.
To know more about working with text in the all-new Adobe Captivate, view Text in Adobe Captivate.
The back panel contains cards where you can customize the text and description on each card and modify or change the image.
Select Back in the selection dock below the cards.
The back panel of the card container displays.
Add a title and button in a card in the Components section of the Visual Properties panel. You can change the following:
The following customizations are available in the back matter of the card widget. Add or remove components from a card widget
You can align the components in the Components section. Hover over a component and select any option (Align left, Align center, or Align right).
In the Appearance section, change the radius of the border, background color, border, and shadow of the back of a card. For more information, view Change the widget's background.
