Руководство пользователя Отмена

Add padding to content blocks and components in Adobe Captivate

  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 

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

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

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

    This is an image that shows how to add padding for a content block
    Content block padding

  2. 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.

  3. 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. 

    This is an image that shows content block padding for tablet view with Auto layout disabled
    Content block padding for tablet view with Auto layout disabled

    Примечание.

    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.

This is an image

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

This is an image

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.

This is an image

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.

This is an image

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:

This is an image

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. 

This is an image

Примечание.

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.

This is an image

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.

This is an image

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

This is an image
Tablet view when Auto layout is enabled

This is an image
Mobile(portrait) 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): 

Auto layout disabled for Desktop view (padding: 50px)

Tablet view (Padding manually changed to 10px while keeping Auto layout disabled): 

This is an image

Mobile view (Padding manually changed to 20px): 

This is an image

 Adobe

Получайте помощь быстрее и проще

Новый пользователь?

Adobe MAX 2024

Adobe MAX
— творческая конференция

С 14 по 16 октября очно в Майами-Бич и онлайн

Adobe MAX

Творческая конференция

С 14 по 16 октября очно в Майами-Бич и онлайн

Adobe MAX 2024

Adobe MAX
— творческая конференция

С 14 по 16 октября очно в Майами-Бич и онлайн

Adobe MAX

Творческая конференция

С 14 по 16 октября очно в Майами-Бич и онлайн