Criar uma opção de design personalizado

As opções de design no Adobe Captivate oferecem aos usuários a flexibilidade de criar variações no layout e no estilo do conteúdo para slides, blocos de conteúdo, slides de perguntas e widgets. Selecione qualquer bloco de conteúdo ou componente apresentado para ver a série de opções de design disponíveis. Saiba mais sobre opções de design no Adobe Captivate.

No entanto, se você precisar implementar designs e layouts pessoais ou da organização, poderá criar opções de design personalizado. Este artigo explica como criar, personalizar e reutilizar ou compartilhar opções de design personalizado no Adobe Captivate. Ele aborda alterações de layout usando Propriedades de grade CSS, atualizando layouts para diferentes janelas de exibição e personalizando o estilo de objetos.

Tópicos nesta página:

Local das opções de design instaladas
Criar uma pasta de opções de design personalizado
Limitações

Alterar campos essenciais no arquivo JSON
Estilo e propriedades CSS

Dica:

Para economizar tempo, crie uma cópia de uma opção de design padrão existente no Captivate e salve-a em um local separado (<eLearningAssets>\12.0\).

Por exemplo, se quiser criar um design personalizado para um bloco de imagens, copie uma opção de design de bloco de imagens padrão e use-a como base para suas personalizações.

Copiar esta pasta do caminho C:\Program Files\Adobe\Adobe Captivate\DesignOptions\content_blocks\Image\Single Image Default Design Option to user location <elearning>

Local das opções de design instaladas

Local instalado:

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

Você pode localizar as pastas de opções de design instaladas para vários tipos de conteúdo, incluindo blocos de conteúdo, slides de layout, slides de perguntas, widgets e componentes interativos. Essas pastas contêm arquivos de opções de design que você pode copiar e personalizar para criar seus próprios designs. Abra cada pasta para explorar os diferentes tipos de blocos de conteúdo, slides de layout, widgets, slides de perguntas e componentes interativos disponíveis.

Observação:

Você pode usar qualquer editor de texto/HTML para abrir e editar os arquivos JSON. Verifique se a pasta contém estes arquivos: designOption.json, localized.json e Thumbnail.png.

Criar uma pasta de opções de design personalizado

Os usuários podem fazer upload de um arquivo JSON de opção de design aqui para incorporar uma opção de design criada externamente. Depois que o arquivo é adicionado, a opção de design aparecerá no painel Propriedades visuais ao selecionar um bloco de conteúdo ou componente durante inicializações subsequentes do Captivate.

Crie uma pasta separada nos ativos de e-learning especificamente para opções de design personalizado. O Captivate pode ler as opções de design da pasta de ativos de e-learning, permitindo que os usuários criem designs personalizados aqui para distinguir entre as opções de design padrão e personalizado.

Se ainda não existir, crie uma pasta denominada designOptions em <eLearningAssets>\12.0\.
- Windows: C:\Users\Public\Documents\Adobe\eLearning Assets\12.0\designOptions
- macOS: /Users/<user>/Documents/Adobe/eLearning Assets/12.0/designOptions/
Observação:

O nome da pasta de opções de design personalizado começa com um “d” minúsculo para se diferenciar das opções de design instaladas.
Renomeie as pastas de opções de design personalizado para cada tipo de bloco de conteúdo ou layout de slide na pasta Ativos de eLearning.
Abra qualquer editor de texto e navegue até selecionar a opção de design personalizado em Ativos de eLearning. Os arquivos devem ser carregados automaticamente no editor.

Saiba mais sobre como entender as partes de um arquivo de opções de design.

Alterar campos essenciais no arquivo JSON

As opções de design residem em um arquivo JSON. Acesse o arquivo designOption.json para adicionar uma ID exclusiva para este design personalizado. Veja um exemplo:

"designOptionId": "Custom Paragraph style 1"

Alerta:

Atribua uma ID exclusiva ao “designOptionID” para diferenciá-lo de outras opções de design personalizado.
No arquivo designOption.json, certifique-se de definir o valor “isDefault” como false. Isso é feito para garantir que não haja conflito com a opção de design instalada. esta é uma etapa obrigatória.
Edite o arquivo localized.json para atualizar os valores dos campos nome e descrição. Esse nome aparecerá como uma dica de ferramenta para esse design personalizado dentro do Captivate quando você passar o mouse sobre sua miniatura no painel Propriedades visuais.

“en-US”: {

"name": "Paragraph Default Design Option",

"description": "Default design option For Paragraph"

},
Atualize a miniatura da opção de design personalizado. Salve esta imagem na pasta de opções de design personalizado e renomeie o novo arquivo PNG em miniatura. O limite de tamanho da miniatura deve ser de 130x78 px.

Observação:

Certifique-se de atualizar o nome da miniatura no arquivo designOption.json usando um editor de texto.

Atualizar o nome da miniatura no arquivo JSON da opção de design

Estilo e propriedades CSS

O Adobe Captivate oferece suporte a propriedades CSS (Cascading Style Sheets), permitindo que você modifique facilmente variáveis predefinidas para personalizar opções de design. Esse recurso simplifica o processo de design e permite a criação de projetos de eLearning profissionais e visualmente atraentes personalizados para sua marca ou tema de projeto.

As propriedades CSS controlam a aparência e o comportamento de elementos HTML e XML. Elas oferecem controle preciso sobre cores, fontes, layouts, espaçamento e muito mais, garantindo que os designs se alinhem ao estilo desejado.

Propriedades personalizadas

O Captivate inclui propriedades personalizadas de CSS incorporadas que utilizam um sistema de layout baseado em grade com linhas e colunas, ideal para a criação de designs responsivos. Estas são todas as propriedades listadas no painel Propriedades visuais. Você também pode modificar essas propriedades no arquivo de opções de design.

Estilos personalizados

A seção customStyles no arquivo designOptions.json define as propriedades de estilo CSS. Use esta seção para criar elementos de design exclusivos, oferecendo flexibilidade e liberdade criativa para personalizar seus projetos de eLearning.

Os estilos personalizados oferecem suporte a todas as propriedades CSS. Use a formatação camelCase em vez dos atributos CSS separados por hífen.
Exemplo: use flexDirection em vez de flex-direction.
As propriedades CSS também podem ser aplicadas com base no tamanho da tela do dispositivo.

Limitações

Ao estilizar e definir o layout de conteúdo usando opções de design, as restrições a seguir se aplicam:

Personalização de aparência:
- A aparência dos elementos de conteúdo (por exemplo, cores, fontes) só pode ser modificada usando predefinições de tema. Os valores codificados devem ser evitados.
- Se uma propriedade visual for suportada em Propriedades personalizadas, não a inclua em Estilos personalizados. Isso codificará o valor, tornando-o não modificável pelo painel Propriedades.
- No entanto, propriedades como margens podem ser adicionadas usando a chave customStyles no arquivo JSON.
Contêineres pai:
- O pai de um contêiner ou elemento não pode ser alterado.
Contêineres ocultos:
- Contêineres ocultos (não selecionáveis no Captivate), como botões, devem ser passados como nós filho em customStyles.
- Como esses contêineres não oferecem suporte a customProperties, eles devem ser incluídos usando uma tag object como chave. Consulte exemplos de customStyles de nó filho para obter orientação.
Componentes da interface do usuário (UICs):
- As propriedades para UICs, como botões de opção e listas suspensas, estarão disponíveis em uma próxima versão. Atualmente, um conjunto fixo de opções de design é compatível com UICs.
- Quando esses componentes fazem parte de um bloco de conteúdo, o bloco de conteúdo inteiro pode ter o estilo definido. Os autores podem utilizar a estrutura modular das opções de design (conforme descrito acima) por meio de um arquivo de opção de design externo.

Ao compreender essas limitações, você pode criar e estilizar o conteúdo de maneira eficiente e, ao mesmo tempo, cumprir as restrições da plataforma.

Receba ajuda com mais rapidez e facilidade

Novo usuário?