Parts of a design option

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

Understanding the components of a design option in Captivate is essential for creating your own custom designs. Additionally, a basic knowledge of CSS properties is necessary to customize designs that align with your organization's theme and standards.

Files in a design option folder

Every design option folder contains three files:

designOption.json - This is the file you use to define your style, specify text presets, and add tags and layouts for your custom design for tablet, mobile, or desktop views. Use any text editor to edit the values in this file.
localized.json - Provide the name and description of the custom design option. The name here corresponds to the name of the design option that appears while hovering over the thumbnail in the Visual properties panel.
Thumbnail.png - Visual representation of that design option in the Visual Properties panel. Users can add a custom thumbnail as the image for their custom design option.

नोट:

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.

Here is an example of a design option opened in a text/HTML editor. In this instance, the editor used is Visual Studio Code:

This is an example of designOption JSON file — Custom design option JSON that contains CSS styles and properties

This is an image of the localized JSON file of a design option — Localized JSON file that contains name and description of the custom design option

This is an image of the thumbnail PNG file — Thumbnail of the custom design option - PNG file

Description of various fields in the JSON file

Key name	Values	Description	Required
“type”	String	Content block, component, or slide layout for which the design option is being written for.	Yes
“name”	String	Name of the design option.please add the field value as $$name and localize the same in localized.json. Please refer to any existing design option example, that can be found in Captivate installed folder.	Yes
“description”	String	Description of the design option. Please add the field value as $$description name and localize the same in localized.json similar to “name”	Yes
“version”	String in the form of version no. E.g. “1.0”	Version of the design option	Yes
“designOptionId”	String	Design option id that uniquely represents the design option. This can be used in other design options.	Yes
“isDefault”	“true”, “false”	Indicates whether the design option is set as the default. When a design option is marked as default, it will automatically be applied when inserting a content block or component.	No
“thumbnail”	String	File name copied in the same folder as design option json file . This image is used as a thumbnail in the Visual properties panel.	Yes
“styles”	Array	“styles” array contains entries of list of elements and their corresponding styles for a given content block or compoenent.	Yes

Get help faster and easier

New user?