Naudotojo vadovas Atšaukti

Add padding to content blocks and components in Adobe Captivate

Paieška

Paskutinį kartą atnaujinta 2025-06-11

Captivate User Guide
Get to know Captivate
1. What's new in Adobe Captivate
2. Adobe Captivate System Requirements
3. Download Adobe Captivate
4. Frequently Asked Questions
Adobe Captivate releases
1. Adobe Captivate 13
  1. Adobe Captivate (13.0) release notes
2. Adobe Captivate 12
Project setup
1. Slide navigator
2. Project dimensions
3. Set preferences
4. Themes
5. Configure URL access for Adobe Captivate features
Import from PowerPoint
1. Import PowerPoint presentations into Captivate
2. Work with text on imported slides
3. Work with shapes on imported slides
4. Add media to imported slides
5. Add interactions and animations to imported slides
Generative AI in Captivate
1. Generative AI overview
2. Generate text
3. Generate images
4. Generate avatar
5. Generate transcripts
Add and edit text
1. Add text to a project
2. Add Adobe fonts to a project
3. Add quotes
Add and edit images
1. Add images to a project
2. Edit the background image on a slide
3. Add SVGs to a project
Add and edit media
1. Add videos to a project
2. Add and edit audio
3. Add audio for widget interactions
4. Add closed captions
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
6. Variables in Adobe Captivate
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 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
Interactions and animations
1. Add interactions to a project
2. Create interactive video with overlay
3. Create a slide-level interaction
4. Create an object-level interaction
5. Add animations to a project
6. States in Adobe Captivate
Enhance your e-learning project
1. Add padding to content blocks and components
2. Add a header to a project
3. Add a footer to a project
4. Create a long scroll project
5. Add a conversation slide
6. Add characters to your Adobe Captivate project
7. Assets in Captivate
Simulation projects
1. Simulation overview and setup
2. Demo mode
3. Training mode
4. Assessment mode
5. Full-motion recording
Timeline and TOC
1. Timeline panel in Adobe Captivate
2. Table of Contents in Adobe Captivate
Review and collaborate
1. Share for review
2. Create and manage reviews
3. Add review comments and collaborate
4. FAQs and Troubleshooting guide for sharing projects for review
Preview and publish
1. Preview your project
2. Publish your project
Accessibility
1. Create accessible eLearning content in Adobe Captivate
2. Make a slide accessible
3. Make slide objects accessible
4. Make an interactive component accessible
5. Make a widget accessible
6. Make a quiz accessible
7. TOC and Playbar accessibility
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
Additional resources
1. Top How-tos in Captivate
2. Captivate Classic vs Adobe Captivate
3. Upgrade older Captivate projects to the latest version
4. Create and deploy Captivate packages in Admin Console

Overview

Padding creates space between the content and its borders, enhancing the visual layout and alignment of your project. It can be applied at the level of content blocks or within components to assist in improved alignment and spacing, contributing to a better viewing experience.

Benefits of padding

Creates uniform spacing around elements, ensuring a clean and professional appearance.
Increases space around interactive elements, making them easier to select, thus improving user experience.

When to use padding:

Adjust size: If you need to create more space around an element, consider adding or increasing padding. This is particularly useful for interactive elements, where additional space can improve accessibility.
Border spacing: Padding adds space between content and its border, which can help ensure better alignment with other elements on the page.

Topics on this page:

Content block padding
Component level padding
Examples of padding for different components
Auto layouts

Content block padding

Add padding to an entire content block from the boundaries and see the behavior on different viewports.

Select Visual properties from the right toolbar and expand the Alignment and Spacing section to see the padding values.

Content block padding
Utilize the Content Width slider to modify the horizontal spacing of any content block from either the left or right side. Specify the desired percentage of spacing using the slider. As you adjust the width, the padding values will automatically update to reflect the changes.
Enable Auto layout to adjust the content width proportionally across all the device viewports or turn it off to adjust them manually. Learn more about Auto layouts for different viewports.

If Auto layout is disabled, you can set padding values for all sides, and the content width for each viewport can be adjusted independently. This means you can add a content width for one viewport without affecting the others.

Content block padding for tablet view with Auto layout disabled

Pastaba:

Horizontal padding for content blocks is set as a percentage because the project width is fixed. Vertical padding is defined in pixels to accommodate long scrolling content.

Component level padding

Incorporate padding for each element within a content block, including images, text, interactive elements, cards, and widget objects. Padding for components within a content block can be added in two ways:

Uniform padding: add padding to all four sides simultaneously.

Non-uniform padding: add padding to each side individually. This is selected by default.

Here is an example of uniform padding of 50px on all four sides within the text block.

Hovering over the edges of any component shows pink handles which can be dragged to adjust spacing. For uniform padding on all sides, press and hold the Shift key while dragging the handles.

Examples of padding for different components

Here are some examples of padding for various components in a project of dimension 1366x768px:

Add padding to any text block, creating space between the content and its boundaries. For each text component (title, subtitle, or body text), use the pink handles to drag and introduce padding directly on the canvas. Alternatively, select the text component and enter the padding values in the Alignment and Spacing section under Visual Properties.

The example demonstrates how to add padding to a multi-column text block within the body component, specifically by applying 100px padding at the bottom.

Select the image and drag the pink handles located near the image's borders. Alternatively, you can enter padding values in the Alignment and Spacing section of the Visual properties menu.

The example demonstrates a bottom padding of 60 pixels from the boundary of an image container:

Add padding to images in an image grid, within widgets, cards, characters, and images in question slides, but you cannot add padding to background images.

This is an example of adding padding within an interactive button component. Add a button component and select the button inside its content block. Use the pink handles to drag and add spacing or input the padding values in the Alignment and Spacing section.

Pastaba:

The Radio Group and Dropdown interactive components do not support padding.

Add padding to any component within a widget, such as text for headings, subtitles, images, cards, and icons. In this example of a flipcard widget, you can select any component within the widget and use the pink handles to adjust padding.

Or select a component and add padding from Alignment and Spacing under Visual properties. In this example, padding of 30px is added to the flip icon inside the card. Similarly, you can select any text or image within each card and add padding to its boundaries.

Incorporate padding into all components on question slides, including text, images, and interactive buttons. Adding space between the options on question slides facilitates easier selection and enhances the question's overall aesthetic. This is an example of a multiple-choice question with padding inside the image options.

Auto layouts

When Auto Layout is enabled, padding is proportionally adjusted across device viewports for content blocks and components, with values responsive to desktop, tablet, and mobile devices based on the project's dimensions. Learn more on how to change project dimensions in Adobe Captivate.

Auto layout behavior when enabled

When Auto layout is enabled, padding is proportionally adjusted across different devices, automatically modifying the values for each viewport. In a project with a resolution of 1366x768px, a padding of 50px on the desktop is scaled to 28px on a tablet and 16px on mobile, preserving the aspect ratio.

This is an image that describes the desktop view when Auto layout is enabled — Desktop view when Auto layout is enabled

Auto layout behavior when disabled

Here is an example when Auto layout feature is disabled for a project size of 1366 x 768px. In this case, the user can manually add the padding values for each view port for the best viewing experience.

Desktop view (padding 50px):