Select the widget on the slide.
- Captivate User Guide
- Introduction to Captivate
- Add a slide
- Add text blocks
- Add media blocks
- Interactive components
- Widgets
- Create quizzes
- Add audio to a project
- Interactions
- Animations
- Accessibility
- Customize the timeline
- Customize TOC and Playbar
- Edit project properties
- Create a simulation project
- Preview a project
- Share a project for review
- Publish a project
- Upgrade projects in Adobe Captivate
Learn how to add and configure a timeline widget in an Adobe Captivate project.
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.
Overview
The timeline widget in the all-new Adobe Captivate is an interactive graphic depicting events, landmarks, or a flow of actions that allows learners to visualize the chronological order of information. Timelines provide an engaging way to linearly represent the progression of events or milestones.
Insert a timeline widget
Select Add new widget > Timeline Widget in the left toolbar.
Change the appearance of the widget
You can modify the appearance of the timeline widget by adding text, adding nodes, or changing the widget's appearance.
-
-
In the Visual Properties panel, the Content Width slider and Horizontal Padding are linked in the Alignment and Spacing section. Moving the slider from the left side changes the left padding value, and moving the slider from right changes the right padding value. The same change is replicated in the Content Width slider when you change the left or right Horizontal Padding values.
Move the Content spacing slider to adjust the spacing between the cards.
-
Move the Number of nodes to increase or decrease the number of timeline nodes in the widget. You can add at most six nodes.
-
Select any design option. A design option presents pre-configured layouts with cleaner design elements to apply to the widget.
For more information, view Design options in Adobe Captivate.
-
In the Components section, you can change the following:
- Title: Add or remove the widget's title.
- Body: Add or remove the body of the widget
- Instruction: Add or remove the instruction on the widget.
- Previous button: Add or remove the button to go to the previous slide.
- Next button: Add or remove the button to go to the next slide.
You can add or remove the following on an event on a timeline:
- Event: Add or remove the events of the nodes.
- Image: Add or remove the images in an event.
- Caption: Add or remove an event's caption.
- Subtitle: Add or remove an event's subtitle.
- Card: Add or remove a card around an event.
Note: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, you can further customize widget's background. The Background tab controls the color setting at the widget level. Select the Background tab, add the widget's background color and a border, and apply a shadow to the border.
Select the Line solid color to change the timeline bar's color and bar segment's color.
-
If you've selected Card, then in the Appearance section, you can change the card's background color by selecting the color picker. You can also add a border and apply a shadow to the card.
-
In the Settings section, enable or disable the toggle Move to next slide when the widget completes. When you enable this toggle, a learner moves to the next slide only after visiting all the hotspots.
Change the properties of an event
An event in a timeline widget contains a title, subtitle, and image. You can edit the title or subtitle and its properties and also replace and edit the image.
-
Select an event in the widget.
-
In the Visual Properties panel, you can change the following:
- Image: Add or remove an image in the event. Select the image placeholder and replace the default image with an image from Assets or your computer. For more information on working with images, view Images in Adobe Captivate.
- Caption: Add or remove a caption in the event.
- Subtitle: Add or remove a subtitle in the event. Select the caption and the subtitle, and change their properties. For more information, view Work with text in Adobe Captivate.
- Card: Add or remove a card around the event.
Note:You can align the components in the Components section. Hover over a component and select any option (Align left, Align center, or Align right).
- Image: Add or remove an image in the event. Select the image placeholder and replace the default image with an image from Assets or your computer. For more information on working with images, view Images in Adobe Captivate.
-
In the Card section, increase or decrease padding around the text objects, add a radius to one or four corners of the card, add the card's background color, add a border to the card, and apply a shadow to the card's border.
Edit the slide navigation buttons in the widget
The slide navigation buttons (left and right) in the widget allow a learner to go to the next or previous slide in the project.
-
In the Visual Properties panel in the left toolbar, move the Opacity slider to increase or decrease the transparency of the button.
-
Select any design option. A design option presents pre-configured layouts with cleaner design elements to apply to the button.
For more information, view Design options in Adobe Captivate.
-
In the States section, click Show to launch the States Flyout. Configure the in-built states of the button, Hover, Visited, Selected, and Disabled. If any state is disabled, right-click the state, and select Enable.
-
In the Appearance section, add color and shadows to the button in the Shape tab and apply a border. Select one of the caps (Butt, Round, or Projecting) when applying a border.
-
Change font family, color, and other properties in the Text tab. Enable the Text toggle first.
When you enable the toggle, the label Next is added to the button. You can change the properties of the label in the tab.
For more information, view Work with text in Adobe Captivate.
-
In the Icon tab, enable the Icon toggle.
You can change the button label and add an icon near the label. Select the folder icon and change the icon from the Asset panel or your computer.
-
Select the Solid color checkbox and add the icon's color from the color picker. To add a border to the icon, select the Border checkbox, and apply a border. Change the color and width of the border and specify the border end caps (Butt, Round, or Projecting).
-
Select the icon size from the options, Small, Medium, or Large. Then select the position of the icon on the button. Select either:
- Alight Left
- Align Top
- Align Right
- Align Bottom
-
Select the icon's Offset relative to the button. Select either Default, Comfortable, or Compact. Offset adds space between the icon and the edge or border of the button.
-
In the Flip icon section, select Flip horizontally or Flip vertically, so that when a learner clicks the icon, the icon flips in the selected mode.
Change the color of a line segment
You can change the color of a segment of the timeline bar.
-
Select a segment of the timeline bar.
-
In the Visual Properties panel, select any color from the color picker.
The color of the segment changes to the color that you’ve picked.
Edit the node buttons in the widget
The node buttons allow the learner to select each node and display its event.
Select any node and edit its properties using the procedure in Edit the slide navigation buttons in the widget.