Quando a instância do AEM é instalada imediatamente, uma seleção de componentes é disponibilizada imediatamente no navegador de componentes.
Além desses, vários outros componentes também estão disponíveis. Você pode usar o modo Design para ativar/desativar esses componentes. Quando ativado e localizado na sua página, você pode usar o modo Design para configurar aspectos do design do componente editando os parâmetros de atributo.
Tenha cuidado ao editar esses componentes. As configurações de design são geralmente parte integrante do design de todo o site, portanto, elas só devem ser alteradas por alguém com os privilégios e a experiência apropriados, geralmente um administrador ou um desenvolvedor. Consulte Desenvolvendo componentes para obter mais informações.
O modo Design está disponível somente para modelos estáticos. Os modelos criados com os 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 em /apps
para suportar cenários de implantação contínua. Designs armazenados em /apps
não são editáveis em tempo de execução e o modo Design não estará disponível para usuários não administradores desses modelos.
Isso envolve adicionar ou remover os componentes permitidos no sistema de parágrafo da página. O sistema de parágrafos ( parsys
) é um componente composto que contém todos os outros componentes de parágrafo. O sistema de parágrafo permite que os autores adicionem componentes de diferentes tipos a uma página, pois ela 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 que contenha o seguinte:
Consulte Desenvolvendo componentes e Diretrizes para o uso de modelos e componentes para obter mais informações sobre parsys
.
A edição do design usando o Modo de design conforme 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 é a prática recomendada e a aplicação de tais designs pode variar do comportamento esperado. Consulte o documento do desenvolvedor Modelos de página - Estáticos para obter mais informações.
Para ativar ou desativar um componente:
Selecione o Design modo.
Clique em um componente. Quando selecionado, o componente tem uma borda azul.
Clique em Pai ícone.
Isso selecionará o sistema de parágrafo que contém o componente atual.
A variável Configurar O ícone do sistema de parágrafo é mostrado na barra de ação do pai.
Selecione esta opção para mostrar 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.
Você define a configuração por componente de página. Se as páginas secundárias usarem o mesmo modelo e/ou componente de página (geralmente alinhado), a mesma configuração será aplicada ao sistema de parágrafo correspondente.
Os componentes do formulário adaptável são projetados para funcionar dentro do Contêiner de formulário adaptável para usar o ecossistema do Forms. Portanto, esses componentes devem ser usados somente no editor de formulário adaptável e não funcionarão no editor de páginas do Sites.
Configurações
No Configurações guia é possível definir opções adicionais, como 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 Design modo.
Clique em um componente com uma borda azul. Neste exemplo, um componente de imagem herói é selecionado.
Use o Configurar ícone para abrir o 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 variável Propriedades permite configurar os parâmetros de design importantes do componente. Por exemplo, para um componente de imagem, é possível definir o tamanho máximo e mínimo da imagem permitida.
Recursos
A variável Recursos permite ativar ou desativar recursos adicionais do componente. Por exemplo, para um componente de imagem, é possível definir a orientação da imagem, as opções de corte disponíveis e se uma imagem pode ser carregada.
Estilos
A variável Estilos permite que você defina as classes e os estilos CSS a serem usados com o componente.
Use o Adicionar botão para adicionar entradas adicionais a uma lista de caixas de diálogo de várias entradas.
Use o Excluir ícone para remover uma entrada de uma lista de caixas de diálogo de várias entradas.
Use o Mover ícone para reorganizar a ordem das entradas em uma lista de caixas de diálogo de várias entradas.
Clique em Concluído ícone para salvar e fechar o diálogo.