Usar o modo Layout para redimensionar componentes

A interface de criação do canal Web de Comunicação interativa permite redimensionar componentes usando o modo Layout . Arraste e solte pontos azuis nas colunas para definir os pontos inicial e final para posicionar os componentes. Os pontos azuis são exibidos após tocar no componente dentro da grade responsiva. A grade responsiva consiste em 12 colunas iguais. O sombreamento de cores branco e azul em colunas alternativas 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 de desktop e os dispositivos menores derivam a configuração de layout do telefone. No entanto, é possível substituir as configurações derivadas automaticamente para definir uma configuração diferente para cada tipo de dispositivo.

OBSERVAÇÃO

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

Modo de Layout de Acesso

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

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

  2. Crie uma nova ou abra uma Comunicação interativa 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

  1. No modo Layout , toque no componente para redimensionar. 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.

    Redimensionamento usando o modo Layout

    A barra de ferramentas que é exibida após tocar nos componentes consiste nas seguintes opções:

    • Pai: seleciona o pai de um componente.
    • Flutuar para uma nova linha: move o componente para a próxima linha se houver vários componentes na 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). Toque no pai do componente redimensionado para exibir a opção.

    OBSERVAÇÃO

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

Exemplo

Objetivo: você deseja inserir um componente de tabela e um componente de Imagem e posicioná-los em paralelo um ao outro em uma Comunicação interativa.

  1. Insira os componentes de tabela e imagem usando o modo Editar no canal da Web de uma Comunicação interativa. O componente de imagem é exibido depois do componente de tabela.

  2. Alterne para o modo Layout e toque no 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 Imagem e arraste e solte o ponto azul na coluna 1 até a coluna 7 da grade responsiva. Os componentes de tabela e imagem são exibidos em paralelo.

    Tabela e imagem em paralelo no modo Layout

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

Redimensionar painéis

Execute as seguintes etapas se quiser redimensionar todo o painel em vez de componentes individuais:

  1. Toque em 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 o 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, toque no painel, selecione Configurar e selecione Responsivo - tudo na página sem navegação na lista suspensa Layout do painel.

  2. Toque em Salvar para salvar as propriedades.

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

  4. Toque em multi-coluna 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

Desative o modo Layout para formulários com layout responsivo antigo

Você pode desativar o modo Layout para formulários com layout responsivo antigo editando as propriedades do 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 Documento no painel esquerdo e toque em Política.

    Desativar modo Layout

  3. Toque na guia Configurações de layout e selecione Desativar modo de layout.

  4. Toque em Save changes para salvar as propriedades do modelo.

Nesta página