Quando a instância do AEM for instalada do modo out-of-the-box, uma seleção de componentes é imediatamente disponibilizada no navegador de componentes.
Além destes, outros componentes também estarão disponíveis. Você pode usar o Modo de design para Ativar/Desativar tais componentes. Quando ativado e localizado em sua página, você poderá usar o Modo de design para configurar os aspectos de design do componente através da edição dos parâmetros do atributo.
Alguns cuidados devem ser tomados ao editar esses componentes. As configurações de design muitas vezes são uma parte integrante do design de todo o site, por isso só devem ser alteradas por alguém com os privilégios adequados e experiência, normalmente um administrador ou desenvolvedor. Consulte Desenvolvimento de componentes para obter mais informações.
O modo de Design só está disponível para modelos estáticos. Os modelos criados com modelos editáveis devem ser editados usando o editor de modelo.
O modo de design só está disponível para configurações de design armazenadas como conteúdo em ( /etc
).
A partir do AEM 6.4, é recomendável armazenar designs como dados de configuração no /apps
para oferecer suporte a cenários de implantação contínua. Designs armazenados em /apps
não são editáveis no tempo de execução e o modo Design não estará disponível para usuários não administradores nesses modelos.
Isso envolve adicionar ou remover os componentes permitidos no sistema de parágrafos da página. O sistema de parágrafo (parsys
) é um componente composto que contém todos os outros componentes de parágrafo. O sistema de parágrafo permite aos autores adicionar componentes de diferentes tipos em uma página, pois contêm todos os outros componentes de parágrafo. Cada tipo de parágrafo é representado como um componente.
Por exemplo, o conteúdo de uma página de produto pode conter um sistema de parágrafo com o seguinte:
Consulte Desenvolvimento de componentes e diretrizes para o uso de modelos e componentes para obter mais informações sobre o parsys
.
Editar o design usando o Modo Design como descrito neste artigo é a maneira recomendada de definir designs de modelos estáticos
A modificação de designs no CRX DE por exemplo não uma prática recomendada e a aplicação desses designs pode variar do comportamento esperado. Consulte o documento de desenvolvedor Modelos de Página - Estático para obter mais informações.
Para ativar ou desativar um componente:
Selecione o modo de Design.
Toque ou clique em um componente. O componente terá uma borda azul quando selecionado.
Clique ou toque no Pai ícone .
Isso vai selecionar o sistema de parágrafo que contém o componente atual.
O ícone de Configuração para o sistema de parágrafo será mostrado na barra de ação do item pai (principal).
Selecione essa opção para exibir a caixa de diálogo.
Use a caixa de diálogo para definir os componentes disponíveis no navegador de componentes ao editar a página atual.
A caixa de diálogo tem duas guias:
Componentes permitidos
No Componentes permitidos , você define quais componentes estão disponíveis para o parsys.
A configuração é definida por um componente de página. Se as páginas secundárias usarem o mesmo modelo e/ou o componente de página (normalmente alinhado), então, a mesma configuração será aplicada ao sistema de parágrafo correspondente.
Os componentes de formulário adaptável são projetados para funcionar dentro do Contêiner de formulário adaptável para aproveitar o ecossistema do Forms. Portanto, esses componentes devem ser usados somente no editor de formulário adaptável e não funcionam no editor de páginas do Sites.
Configurações
Na guia Configurações, é possível definir opções adicionais como para desenhar uma âncora para cada componente e definir o preenchimento da célula de cada contêiner.
Selecionar Concluído para salvar sua configuração.
Selecione o modo de Design.
Toque ou clique em um componente com uma borda azul. Neste exemplo, um componente de imagem de herói é selecionado.
Use o ícone Configurar para abrir a caixa de diálogo.
Na caixa de diálogo de design, é possível configurar o componente de acordo com os parâmetros de design disponíveis.
A caixa de diálogo tem três guias:
Propriedades
A guia Propriedades permite que você configure os parâmetros de design importantes do componente. Por exemplo, para um componente de imagem, você pode definir os tamanhos máximo e mínimo da imagem ativada.
Recursos
A guia Recursos permite habilitar ou desabilitar recursos adicionais do componente. Por exemplo, para um componente de imagem, você pode definir a orientação da imagem, as opções de corte disponíveis e se uma imagem pode ser carregada.
Estilos
A guia Estilos permite definir as classes e os estilos de CSS a serem usados com o componente.
Use o botão Adicionar para adicionar outras entradas a uma lista de diálogo de várias entradas.
Use o ícone Excluir para remover uma entrada de uma lista de diálogo de várias entradas.
Use o ícone Mover para reorganizar a ordem de entradas em uma lista de diálogo de várias entradas.
Clique ou toque no ícone Concluído para salvar e fechar a caixa de diálogo.