Adicionar preenchimento a blocos e componentes de conteúdo no Adobe Captivate

O preenchimento cria espaço entre o conteúdo e suas bordas, aprimorando o layout visual e o alinhamento do projeto. Pode ser aplicado no nível dos blocos de conteúdo ou dentro dos componentes para aprimorar o alinhamento e o espaçamento, contribuindo para uma melhor experiência de visualização.

Benefícios do preenchimento

Cria um espaçamento uniforme em torno dos elementos, garantindo uma aparência limpa e profissional.
Aumenta o espaço em torno de elementos interativos, facilitando sua seleção e, assim, melhorando a experiência do usuário.

Quando usar o preenchimento:

Ajustar tamanho: se precisar criar mais espaço em torno de um elemento, considere adicionar ou aumentar o preenchimento. Isso é particularmente útil para elementos interativos, em que o espaço adicional pode melhorar a acessibilidade.
Espaçamento das bordas: o preenchimento adiciona espaço entre o conteúdo e sua borda, o que pode ajudar a garantir um melhor alinhamento com outros elementos da página.

Tópicos nesta página:

Preenchimento de bloco de conteúdo
Preenchimento no nível do componente
Exemplos de preenchimento para componentes diferentes
Layouts automáticos

Preenchimento de bloco de conteúdo

Adicione preenchimento a um bloco de conteúdo inteiro a partir dos limites e veja o comportamento em diferentes janelas de exibição.

Selecione Propriedades visuais na barra de ferramentas à direita e expanda a seção Alinhamento e espaçamento para ver os valores de preenchimento.

Preenchimento de bloco de conteúdo
Utilize o controle deslizante Largura do conteúdo para modificar o espaçamento horizontal de qualquer bloco de conteúdo do lado esquerdo ou direito. Use o controle deslizante para especificar a porcentagem de espaçamento desejada. À medida que você ajustar a largura, os valores de preenchimento serão atualizados automaticamente para refletir as alterações.
Habilite o Layout automático para ajustar a largura do conteúdo proporcionalmente em todas as janelas de exibição do dispositivo ou desative-o para ajustá-las manualmente. Saiba mais sobre Layouts automáticos para diferentes janelas de exibição.

Se a opção Layout automático estiver desativada, será possível definir valores de preenchimento para todos os lados, e a largura do conteúdo de cada janela de exibição poderá ser ajustada de maneira independente. Isso significa que você pode adicionar uma largura de conteúdo a uma janela de exibição sem afetar as outras.

Preenchimento de bloco de conteúdo para exibição de tablet com layout automático desativado

Observação:

O preenchimento horizontal dos blocos de conteúdo é definido como uma porcentagem porque a largura do projeto é fixa. O preenchimento vertical é definido em pixels para acomodar conteúdo de rolagem longa.

Preenchimento no nível do componente

Incorpore o preenchimento para cada elemento em um bloco de conteúdo, incluindo imagens, texto, elementos interativos, cartões e objetos de widget. O preenchimento de componentes em um bloco de conteúdo pode ser adicionado de duas maneiras:

Preenchimento uniforme: adicione preenchimento aos quatro lados simultaneamente.

Preenchimento não uniforme: adicione preenchimento a cada lado individualmente. Essa opção é selecionada por padrão.

Aqui está um exemplo de preenchimento uniforme de 50 pixels em todos os quatro lados do bloco de texto.

Quando o cursor do mouse é passado sobre as bordas de qualquer componente, aparecem alças rosa que podem ser arrastadas para ajustar o espaçamento. Para obter um preenchimento uniforme em todos os lados, pressione e segure a tecla Shift enquanto arrasta as alças.

Exemplos de preenchimento para componentes diferentes

Aqui estão alguns exemplos de preenchimento para vários componentes em um projeto com dimensão de 1366x768 pixels:

Adicione preenchimento a qualquer bloco de texto, criando espaço entre o conteúdo e seus limites. Para cada componente de texto (título, subtítulo ou texto do corpo), use as alças rosa para arrastar e inserir o preenchimento diretamente na tela. Como alternativa, selecione o componente de texto e insira os valores de preenchimento na seção Alinhamento e espaçamento em Propriedades visuais.

O exemplo demonstra como adicionar preenchimento a um bloco de texto de várias colunas no componente Corpo, especificamente aplicando preenchimento de 100 pixels na parte inferior.

Selecione a imagem e arraste as alças rosa localizadas perto das bordas da imagem. Como alternativa, você pode inserir valores de preenchimento na seção Alinhamento e espaçamento do menu Propriedades visuais.

O exemplo demonstra um preenchimento inferior de 60 pixels a partir do limite de um contêiner de imagem:

Adicione preenchimento a imagens em uma grade de imagem, dentro de widgets, cartões, caracteres e imagens em slides de perguntas, mas não será possível adicionar preenchimento a imagens de fundo.

Este é um exemplo de adição de preenchimento em um componente de botão interativo. Adicione um componente de botão e selecione o botão dentro de seu bloco de conteúdo. Use as alças rosa para arrastar e adicionar espaçamento ou inserir os valores de preenchimento na seção Alinhamento e espaçamento.

Observação:

Os componentes interativos Grupo de botões de opção e Menu suspenso não oferecem suporte a preenchimento.

Adicione preenchimento a qualquer componente em um widget, como texto para títulos, legendas, imagens, cartões e ícones. Neste exemplo de um widget de flipcard, você pode selecionar qualquer componente dentro do widget e usar as alças rosa para ajustar o preenchimento.

Ou selecione um componente e adicione preenchimento de Alinhamento e espaçamento em Propriedades visuais. Neste exemplo, um preenchimento de 30 pixels é adicionado ao ícone de inversão dentro do cartão. Da mesma forma, você pode selecionar qualquer texto ou imagem em cada cartão e adicionar preenchimento aos seus limites.

Incorpore o preenchimento em todos os componentes de slides de pergunta, incluindo texto, imagens e botões interativos. Adicionar um espaço entre as opções nos slides de perguntas facilita a seleção e aprimora a estética geral da pergunta. Este é um exemplo de uma pergunta de múltipla escolha com preenchimento nas opções de imagem.

Layouts automáticos

Quando o Layout automático está ativado, o preenchimento é ajustado proporcionalmente nas janelas de exibição do dispositivo para blocos de conteúdo e componentes, com valores responsivos para desktop, tablet e dispositivos móveis com base nas dimensões do projeto. Saiba mais sobre como alterar as dimensões do projeto no Adobe Captivate.

Comportamento do layout automático quando ativado

Quando o Layout automático está ativado, o preenchimento é ajustado proporcionalmente em diferentes dispositivos, modificando automaticamente os valores para cada janela de exibição. Em um projeto com uma resolução de 1366 x 768 pixels, um preenchimento de 50 pixels no desktop é dimensionado para 28 pixels em um tablet e 16 pixels em dispositivos móveis, preservando a proporção.

Esta é uma imagem que descreve a exibição da área de trabalho quando o Layout automático está habilitado — Exibição no desktop quando o Layout automático está habilitado

Comportamento do layout automático quando desativado

Aqui está um exemplo de quando o recurso Layout automático está desativado para um tamanho de projeto de 1366 x 768 pixels. Nesse caso, o usuário pode adicionar manualmente os valores de preenchimento de cada janela de exibição para obter a melhor experiência de exibição.

Exibição no desktop (preenchimento de 50 pixels):