DocumentaçãoAEM 6.5Guia do usuário

Usar o modo Layout para redimensionar componentes use-layout-mode-to-resize-components

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Aplica-se a:
  • Experience Manager 6.5
  • Tópicos:

Criado para:

  • Usuário
  • Desenvolvedor

A interface de criação do canal da Web de comunicação interativa permite redimensionar componentes usando o modo Layout. Arraste e solte pontos azuis dentro de colunas para definir os pontos inicial e final para posicionar componentes. Os pontos azuis são exibidos depois de tocar no componente na grade responsiva. A grade responsiva consiste em 12 colunas iguais. O sombreamento das cores branco e azul em colunas alternadas diferencia uma coluna da outra.

Você pode usar o modo Layout para redimensionar componentes para todos os tipos de dispositivos, como desktop, tablet, telefone e outros dispositivos menores. O tablet deriva automaticamente a configuração de layout da versão do desktop e os dispositivos menores derivam a configuração de layout do telefone. No entanto, você pode substituir as configurações derivadas automaticamente para definir uma configuração diferente para cada tipo de dispositivo.

NOTE
Se você estiver criando o canal da Web usando o canal de impressão como mestre para uma comunicação interativa, os componentes disponíveis para redimensionamento também incluirão os subformulários e campos gerados automaticamente no canal da Web usando o canal de impressão. O canal da Web retém o layout dos elementos do canal de impressão no modo Layout.

Modo de layout de acesso access-layout-mode

Selecione Layout na lista suspensa que aparece na parte superior da interface de criação de Comunicação interativa ao lado da opção Visualizar. O formulário é exibido no modo Layout.

  1. Faça logon na instância de autor do AEM e navegue até Adobe Experience Manager > Forms > Forms e Documentos.

  2. Crie uma Comunicação Interativa ou abra uma existente.

  3. Selecione Layout na lista suspensa que aparece na parte superior ao lado da opção Visualizar. O formulário é exibido no modo Layout.

    Modo de layout para Comunicações Interativas

Redimensionar componentes resize-components

  1. No modo Layout, selecione o componente a ser redimensionado. Os pontos azuis são exibidos no início e no fim da grade responsiva.

  2. Arraste e solte os pontos azuis para definir a posição do componente na grade responsiva.

    Redimensionando usando o modo Layout

    A barra de ferramentas exibida ao tocar em componentes consiste nas seguintes opções:

    • Pai: selecione o pai de um componente.
    • Flutuar para a nova linha: Desloque o componente para a próxima linha se houver vários componentes dentro da mesma linha.

    Você pode desfazer todas as alterações de redimensionamento e aplicar o layout padrão ao painel que contém componentes redimensionados usando a opção Reverter layout do ponto de interrupção ( Reverter ponto de interrupção ). Selecione o pai do componente redimensionado para exibir a opção.

    note note
    NOTE
    Não é possível redimensionar componentes de coluna de tabela, barra de ferramentas, botão da barra de ferramentas e área de destino usando o modo Layout. Use o modo Estilo para redimensionar esses componentes.

Exemplo example

Objetivo: você deseja inserir um componente de tabela e um componente de imagem e posicioná-los paralelamente uns aos outros em uma comunicação interativa.

  1. Insira os componentes de tabela e imagem usando o modo de Edição no canal da Web de uma Comunicação interativa. O componente de imagem é exibido após o componente de tabela.

  2. Alterne para o modo Layout e selecione o componente Tabela. Os pontos azuis para redimensionar a exibição do componente nas colunas 1 e 12.

  3. Arraste e solte o ponto azul na coluna 12 para a coluna 6 da grade responsiva.

    Definir o ponto final da tabela

  4. Da mesma forma, selecione o componente de Imagem e arraste e solte o ponto azul na coluna 1 para a coluna 7 da grade responsiva. Os componentes de tabela e imagem são exibidos paralelamente um ao outro.

    Tabela e imagem em paralelo no modo Layout

    Você pode selecionar o componente de Imagem e selecionar a opção Flutuar para a nova linha, disponível na barra de ferramentas, para deslocar o componente de Imagem para a próxima linha.

Redimensionar painéis resize-panels-layout-mode

Execute as seguintes etapas se desejar redimensionar o painel inteiro em vez de componentes individuais:

  1. Selecione qualquer um dos componentes no painel que você deseja redimensionar, selecione Selecionar pai e selecione a primeira opção na lista suspensa, se o painel for o pai imediato do componente.

    Os pontos azuis são exibidos no início e no fim da grade responsiva.

  2. Arraste e solte os pontos azuis para definir a posição do painel na grade responsiva.
    Você pode repetir as etapas 1 e 2 e selecionar Selecionar pai para deslocar o painel redimensionado para a próxima linha.

Definir layout de várias colunas para um painel

Execute as seguintes etapas para definir o número de colunas para um painel:

  1. No modo Editar, selecione o painel, selecione Configurar e selecione a opção Responsivo - tudo na página sem navegação da lista suspensa Layout do Painel.

  2. Selecione Salvar para salvar as propriedades.

  3. No modo Layout, selecione qualquer um dos componentes no painel, selecione Selecionar pai e selecione o painel.

  4. Selecione multi-column e selecione o número de colunas na lista suspensa. O número de colunas pode variar de 1 a 12. O painel é dividido em um layout de várias colunas.

várias colunas no modo de layout

Desativar o modo Layout para formulários com layout responsivo antigo disable-layout-mode-for-forms-with-old-responsive-layout

Você pode desativar o modo Layout para formulários com layout responsivo antigo editando propriedades para o modelo usado no formulário.

Execute as seguintes etapas para desativar o modo Layout:

  1. Selecione Ferramentas > Geral > Modelos e abra o modelo usado no formulário no modo Editar.

  2. Selecione o Contêiner de documentos no painel esquerdo e selecione Política.

    Desabilitar modo de layout

  3. Selecione a guia Configurações de Layout e selecione Desabilitar Modo de Layout.

  4. Selecione Salvar alterações para salvar as propriedades do modelo.

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2