User Guide Cancel

Add a tab widget to your Captivate project

  1. Captivate User Guide
  2. Introduction to Captivate
    1. What's New in Adobe Captivate
    2. Adobe Captivate System Requirements
    3. Adobe Captivate Updates
      1. Adobe Captivate (12.4 update) release notes
      2. Adobe Captivate (12.3 update) release notes
      3. Adobe Captivate (12.2 update) release notes
      4. Adobe Captivate (12.1 update) release notes
    4. Download Adobe Captivate
    5. Frequently Asked Questions
  3. Add a slide
    1. Slide navigator in Adobe Captivate
    2. Add a conversation slide
    3. Add characters to your Adobe Captivate project
    4. Edit the background image on a slide
    5. Add padding to content blocks and components
    6. Create a long scroll project
  4. Add text blocks
    1. Add text to a project
  5. Add media blocks
    1. Add images to a project
    2. Add videos to a project
    3. Add quotes
    4. Add SVGs to a project
  6. Interactive components
    1. Add a button
    2. Add an input field
    3. Add a radio button group
    4. Add a dropdown
    5. Add a checkbox
  7. Widgets
    1. Add a Card
    2. Add Tabs
    3. Add a Certificate
    4. Add a Carousel
    5. Add a Hotspot
    6. Add Drag-and-Drop
    7. Add a Timeline
    8. Add Click to Reveal
  8. Create quizzes
    1. Add a Multiple-choice question
    2. Add a True or false question
    3. Add a Match the column question
    4. Add a Short answer question
    5. Add a Sequence question
    6. Add question pools and random question slides
    7. Import questions as CSV
  9. Add audio to a project
    1. Add audio
  10. Interactions
    1. Add interactions to a project
    2. Create interactive video with overlay
    3. Create a slide-level interaction
    4. Create an object-level interaction
  11. Animations
    1. Add animations to a project
  12. Accessibility
    1. Make a project accessible
  13. Customize the timeline
    1. Timeline panel in Adobe Captivate
  14. Customize TOC and Playbar
    1. Table of Contents in Adobe Captivate
  15. Edit project properties
    1. Variables in Adobe Captivate
    2. Preferences
    3. Project dimensions
    4. Themes
  16. Create a simulation project
    1. Simulation
  17. Preview a project
    1. Preview
  18. Share a project for review
    1. Share for review   
  19. Publish a project
    1. Publish your project
  20. Upgrade projects in Adobe Captivate
    1. Upgrade projects to the latest version 

Learn how to use a tab widget to allow learners click or tap to reveal content.

Overview 

In the all-new Adobe Captivate, a tab widget is a popular design element in eLearning courses that allows learners to explore and interact with content in different tabs. Each tab can represent a distinct topic or category; learners can click or tap on the tabs to reveal the corresponding content.

Add a tab widget  

Select Add new widget > Tabs in the left toolbar to add a tab widget.

Change the properties of the tab widget at the widget level

Adobe Captivate lets you change the widget's properties at the widget, content, and card levels. At the content block level, you can change the overall design of the widget, add or remove elements from the component like title, subtitle, and more, and change the overall appearance of the content block by adding color, border, and shadow effects.  

  1. Select the widget in the slide.

  2. 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 text (title, subtitle, and body), and the image inside a tab.

  3. Add the number of tabs by moving the Number of tabs slider. The default is three. You can add at most six tabs in the widget.

  4. Select a design option. The Design Options presents pre-configured layouts with cleaner design elements to apply to the widget.

    For more information, view Design options in Adobe Captivate.

  5. In the Components section, you can change the following:

    • Title: Add or remove the title.
    • Body: Add or remove the body of the widget
    • Instruction: Add or remove the instruction on the widget.
    • Image: Add or remove an image.
    • Heading: Add or remove the heading.
    • Subtitle: Add or remove the subtitle.
    • Body: Add or remove the text body.
    • Card: Add or remove the card around the text.
    • Previous button: Add or remove the Previous button.
    • Next button: Add or remove the Next button.
  6. In the Appearance section, you can further customize the following:

    • Background of the widget: 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. You can also select a solid color, linear or radial gradient, or add an image as a background.
    • Background of the tabs: In the Content tab, you can add a background color to all tabs in the widget. Select a solid color, linear or radial gradient, or add an image as a background.
    • If you've enabled Card, you can change the card's properties, such as padding, background color, border, or shadow.
    Change the properties of a card
    Change the properties of a card.

  7. In the Settings section, enable the toggle Move the next slide only when the widget completes checkbox to move to the next slides only when a learner has visited all the tabs.

Change the properties at content level

Adobe Captivate lets you apply a design option, change the tab text, the tab icon, and much more.

  1. Select a tab in the widget.

    Select a tab
    Select a tab

  2. In the Visual Properties panel, move the opacity slider to increase or decrease the opacity of the selected text.

  3. In the Design Options section, select a design option. The Design Options presents pre-configured layouts with cleaner design elements to apply to tab button.

    For more information, view Design options in Adobe Captivate.

  4. In the Appearance section, in the Shape tab, add color and shadows, and apply a border. Select one of the caps (butt, round, projecting) when applying a border.

  5. Change font family, color, and other properties in the Text tab. For more information, view Work with text in Adobe Captivate.

    text

  6. In the Icon tab, enable the Icon toggle.

    Then add an icon that displays near the tab. You can choose the icon from Assets or on your computer. In addition, you can change the icon's size and the icon's position on the tab.

    Select an icon Offset. The options are Default, Comfortable, and Compact. Selecting any option arranges the space between the icon and the tab text.

    icon

  7. In the Flip icon section, select Flip horizontally or Flip vertically, so the icon appears vertically or horizontally flipped in the tab.

Replace and change the properties of an image inside a tab

Adobe Captivate allows you to replace an image, apply a filter, and add a border or shadow to the image.

  1. Select the image inside a tab.

  2. Move the opacity slider in the Visual Properties panel to increase or decrease the image transparency.

  3. In the Appearance section, apply a filter, blur the image, and adjust the brightness and contrast. Also, select the Border checkbox to add a border around the image. Set the width and color of the border. You can add a border on one or all sides of the image.

    Select the Drop shadow checkbox to add a shadow to the border.

  4. In the Image source section, replace the image inside a tab.

For more information on applying image filters or replacing an image, view Images in Adobe Captivate.

Edit text inside a tab

Apply a text preset, change font family, apply text alignment, change text indentation, and do much more.

For more information, view Work with text in Adobe Captivate.

  1. Select a text object, for example, title or body inside a tab.

  2. In the Visual Properties panel, change the text style, font, font size, spacing, and other properties. 

Deep copy

Deep copy saves a lot of time and ensures consistency among content objects. You can achieve this by creating a copy of a content object in your project by copying its appearance and pasting it to another content object.

  1. In a tab, change the appearance of its title and subtitle. For example, change the font family, color, and other properties.

    For more information, view Work with text in Adobe Captivate.

  2. After you've applied the changes, select the text or the subtitle.

  3. Right-click the selected text or the subtitle. Select Copy appearance.

  4. Select the text or subtitle on the second tab.

  5. Right-click the selected text or subtitle. Select Apply appearance.

The appearance of the title or subtitle on the first tab is now transferred to the second tab.

Get help faster and easier

New user?