Configuração de componentes no modo de design configuring-components-in-design-mode

CAUTION
AEM 6.4 chegou ao fim do suporte estendido e esta documentação não é mais atualizada. Para obter mais detalhes, consulte nossa períodos de assistência técnica. Encontre as versões compatíveis here.

Quando AEM instância é instalada e pronta para uso, uma seleção de componentes é disponibilizada imediatamente no navegador de componentes.

Além disso, vários outros componentes também estão disponíveis. Você pode usar o Modo de design para ativar/desativar tais componentes. Quando ativado e localizado na página, você pode usar o Modo de design para configurar os aspectos do design do componente editando os parâmetros do atributo.

NOTE
Deve-se ter cuidado ao editar esses componentes. As configurações de design muitas vezes são parte integrante do design de todo o site, por isso só devem ser alteradas por alguém com os privilégios e experiência apropriados, geralmente um administrador ou desenvolvedor. Consulte Componentes de desenvolvimento para obter mais informações.
NOTE
O modo Design só está disponível para modelos estáticos. Os modelos que são criados com modelos editáveis devem ser editados usando o editor de modelos.
NOTE
O modo 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ágrafo 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 que os autores adicionem componentes de tipos diferentes a 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:

  • Uma imagem do produto (na forma de uma imagem ou de um parágrafo de imagem)
  • A descrição do produto (como um parágrafo de texto)
  • Uma tabela com dados técnicos (como parágrafo de tabela)
  • Um formulário preenchido pelos usuários (como um formulário começa, um elemento de formulário e um parágrafo final de formulário)
NOTE
Consulte Componentes de desenvolvimento e Diretrizes para usar modelos e componentes para obter mais informações sobre parsys.
CAUTION
Editar o design usando o Modo 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 é uma prática recomendada e a aplicação desses designs pode variar do comportamento esperado. Consulte o documento do desenvolvedor Modelos de página - Estático para obter mais informações.

Ativar/desativar componentes enable-disable-components

Para ativar ou desativar um componente:

  1. Selecione o Design modo.

    screen_shot_2018-03-22at103113

  2. Toque ou clique em um componente. O componente terá uma borda azul quando selecionado.

    screen_shot_2018-03-22at103204

  3. Clique ou toque no Pai ícone .

    Isso selecionará o sistema de parágrafo que contém o componente atual.

  4. O Configurar ícone para o sistema de parágrafo será mostrado na barra de ação do pai.

    Selecione esta opção para mostrar a caixa de diálogo.

  5. Use a caixa de diálogo para definir os componentes disponíveis no navegador de componentes ao editar a página atual.

    screen_shot_2018-03-22at103329

    A caixa de diálogo tem duas guias:

    • Componentes permitidos
    • Configurações

    Componentes permitidos

    No Componentes permitidos , você define quais componentes estão disponíveis para o parsys.

    • Os componentes são agrupados por seus grupos de componentes, que podem ser expandidos e recolhidos.
    • Um grupo inteiro pode ser selecionado, marcando o nome do grupo e todos podem ser desmarcados, desmarcando.
    • Um sinal de menos representa pelo menos um, mas não todos os itens em um grupo são selecionados.
    • Uma pesquisa está disponível para filtrar um componente por nome.
    • As contagens listadas à direita do nome do grupo de componentes representam o número total de componentes selecionados nesses grupos, independentemente do filtro.

    A configuração é definida por componente de página. Se as páginas filhas usarem o mesmo modelo e/ou componente de página (normalmente alinhado), a mesma configuração será aplicada ao sistema de parágrafo correspondente.

    note note
    NOTE
    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 funcionarão no editor de páginas do Sites.

    Configurações

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

  6. Selecionar Concluído para salvar sua configuração.

Configuração do design de um componente configuring-the-design-of-a-component

  1. Selecione o Design modo.

    screen_shot_2018-03-22at103113-1

  2. Toque ou clique em um componente com uma borda azul. Neste exemplo, um componente de imagem herói é selecionado.

    screen_shot_2018-03-22at103434

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

    screen_shot_2018-03-22at103530

    A caixa de diálogo tem três guias:

    • Principal
    • Recursos
    • Estilos

    Propriedades

    O Propriedades permite configurar os parâmetros de design importantes do componente. Por exemplo, para um componente de imagem, você pode definir o tamanho máximo e mínimo da imagem permitida.

    Recursos

    O Recursos permite ativar ou desativar 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

    O Estilos permite definir as classes e os estilos de CSS a serem usados com o componente.

    screen_shot_2018-03-22at103741

    Use o Adicionar para adicionar mais entradas a uma lista de diálogo de várias entradas.

    chlimage_1-94

    Use o ícone ​ Excluir ​ para remover uma entrada de uma lista de diálogo de várias entradas.

    Use o Mover ícone para reorganizar a ordem de entradas em uma lista de diálogo de várias entradas.

  4. Clique ou toque no Concluído para salvar e fechar a caixa de diálogo.

recommendation-more-help
5f6f1f67-8db1-40cb-84e9-024e65b9fc4c