Brukerveiledning Avbryt

Create a custom design option

Søk

Sist oppdatert 22. jan. 2025

Captivate User Guide
Introduction to Captivate
1. What's New in Adobe Captivate
2. Adobe Captivate System Requirements
3. Adobe Captivate Updates
4. Download Adobe Captivate
5. Frequently Asked Questions
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
Design options in Adobe Captivate
1. What are design options?
2. Parts of a design option
3. Create custom design options
4. Modify a custom design option
5. Export a custom design option
6. Import a custom design option
Add text blocks
1. Add text to a project
2. Add Adobe fonts to a project
Add media blocks
1. Add images to a project
2. Add videos to a project
3. Add quotes
4. Add SVGs to a project
5. Add web objects to a project
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
Add branding blocks
1. Add a header to a project
2. Add a footer to a project
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
9. Add an Accordion
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
Add audio to a project
1. Add audio
2. Add closed captions
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
Animations
1. Add animations to a project
Accessibility
1. Make a project accessible
Customize the timeline
1. Timeline panel in Adobe Captivate
Customize TOC and Playbar
1. Table of Contents in Adobe Captivate
Edit project properties
1. Variables in Adobe Captivate
2. Preferences
3. Project dimensions
4. Themes
Create a simulation project
1. Simulation
Preview a project
1. Preview
Share a project for review
1. Share for review
2. FAQs and Troubleshooting guide for sharing projects for review
Publish a project
1. Publish your project
Upgrade projects in Adobe Captivate
1. Upgrade projects to the latest version

Overview

Design options in Adobe Captivate provide users with the flexibility to create variations in content layout and styling for slides, content blocks, question slides, and widgets. Select any content block or component within it, to see the host of design options available. Learn more on design options in Adobe Captivate.

However, if you need to implement your personal or organization’s designs and layouts, you can create custom design options. This article explains how to create, customize, and reuse or share custom design options in Adobe Captivate. It covers layout changes using CSS grid properties, updating layouts for different viewports, and customizing styling of objects.

Change essential fields in the JSON file
CSS style and properties

Tips:

To save time, create a copy of an existing default design option in Captivate and save it in a separate location (<eLearningAssets>\12.0\).

For example, if you want to make a custom design for an image block, copy a default image block design option and use it as a base for your customizations.

Copy this folder from this path C:\Program Files\Adobe\Adobe Captivate\DesignOptions\content_blocks\Image\Single Image Default Design Option to user location <elearning>

Location of the installed design options

Installed location:

Windows: C:\Program Files\Adobe\Adobe Captivate\DesignOptions
macOS: /Applications/Adobe Captivate/DesignOptions/

You can locate the installed design option folders for various content types, including content blocks, layout slides, question slides, widgets, and interactive components. These folders contain design option files that you can copy and customize to create your own designs. Open each folder to explore the different types of content blocks, layout slides, widgets, question slides, and interactive components available.

Merk:

You can use any text/HTML editor to open and edit the JSON files. Ensure that the folder contains these files: designOption.json, localized.json, and Thumbnail.png.

Create a custom design option folder

Users can upload a design option JSON file here to incorporate an externally authored design option. Once the file is added, the design option will appear in the Visual Properties panel when selecting a content block or component during subsequent launches of Captivate.

Create a separate folder within the e-learning assets specifically for custom design options. Captivate can read design options from the e-learning assets folder, allowing users to create custom designs here to distinguish between default and custom design options.

If it doesn't already exist, create a folder named designOptions in <eLearningAssets>\12.0\.
- Windows: C:\Users\Public\Documents\Adobe\eLearning Assets\12.0\designOptions
- macOS: /Users/<user>/Documents/Adobe/eLearning Assets/12.0/designOptions/
Merk:

The custom design option folder name starts with a lower case 'd' to differentiate from the installed desing options.
Rename the custom design option folders for each type of content block or slide layout in the eLearning Assets folder.
Open any text editor and browse to select the custom design option from eLearning Assets. The files should automatically load in the editor.

Learn more on understanding the parts of a design option file.

Change essential fields in the JSON file

Design options reside in a JSON file. Go to the designOption.json file to add a unique ID for this custom design. Here is an example:

"designOptionId": "Custom Paragraph style 1"

Varsel:

Assign a unique ID to the "designOptionID" to distinguish it from other custom design options.
In the designOption.json file, make sure to set the "isDefault" value to false. This is done to ensure that it does not conflict with the installed design option. this is a mandatory step.
Edit the localized.json file update the values of the name and description fields. This name will appear as a tooltip for that custom design inside Captivate when you hover over its thumbnail in the visual properties panel.

"en-US": {

"name": "Paragraph Default Design Option",

"description": "Default design option For Paragraph"

},
Update the thumbnail for the custom design option. Save this image in the custom design options folder and rename the new thumbnail PNG file. Size limit for thumbnail must be 130x78 px.

Merk:

Be sure to update the thumbnail name in the designOption.json file using a text editor.

Update the thumbnail name in the design option JSON file

CSS style and properties

Adobe Captivate supports CSS (Cascading Style Sheets) properties, allowing you to easily modify predefined variables for customizing design options. This feature simplifies the design process and enables the creation of professional, visually appealing eLearning projects tailored to your brand or project theme.

CSS properties control the appearance and behavior of HTML and XML elements. They offer precise control over colors, fonts, layouts, spacing, and more, ensuring designs align with your desired style.

Custom Properties

Captivate includes built-in CSS custom properties that utilize a grid-based layout system with rows and columns, ideal for creating responsive designs. These are all the properties listed under the Visual properties panel. You can modify these properties from the design option file as well.

Custom Styles

The customStyles section within the designOptions.json file defines your CSS styling properties. Use this section to create unique design elements, offering flexibility and creative freedom to personalize your eLearning projects.

Custom styles support all CSS properties. Use camelCase formatting instead of hyphen-separated CSS attributes.
Example: Use flexDirection instead of flex-direction.
CSS properties can also be applied based on the device screen size.

Limitations

When styling and laying out content using design options, the following constraints apply:

Appearance Customization:
- The appearance of content elements (e.g., colors, fonts) can only be modified using theme presets. Hard-coded values should be avoided.
- If a visual property is supported in Custom Properties, do not include it in Custom Styles. Doing so will hard-code the value, making it unmodifiable through the Properties panel.
- However, properties like margins can be added using the customStyles key in the JSON file.
Parent Containers:
- The parent of a container or element cannot be changed.
Hidden Containers:
- Hidden containers (not selectable in Captivate), such as buttons, must be passed as child nodes in customStyles.
- Since these containers do not support customProperties, they should be included using an object tag as the key. Refer to examples of child node customStyles for guidance.
User Interface Components (UICs):
- Properties for UICs like radio buttons and dropdowns will be available in an upcoming version. Currently, a fixed set of design options is supported for UICs.
- When these components are part of a content block, the entire content block can be styled. Authors can utilize the modular structure of design options (as described above) via an external design option file.

By understanding these limitations, you can effectively design and style content while adhering to the constraints of the platform.

Få hjelp raskere og enklere

Ny bruker?