Layout responsivo

AEM permite ter um layout responsivo para suas páginas usando o Contêiner de layout componente.

Ele fornece um sistema de parágrafo que permite posicionar os componentes dentro de uma grade responsiva. Essa grade pode reorganizar o layout de acordo com o dispositivo/tamanho e formato da janela. O componente é utilizado em conjunto com o modo de Layout, que permite criar e editar o seu layout responsivo dependendo do dispositivo.

O contêiner de layout:

• Fornece alinhamento horizontal à grade, juntamente com a capacidade de colocar componentes lado a lado na grade e definir quando devem ser recolhidos/refluir.

• Usa pontos de interrupção predefinidos (por exemplo, para telefone, tablet etc.) para permitir que você defina o comportamento necessário do conteúdo para dispositivos/orientações relacionados.

  • Por exemplo, você pode personalizar o tamanho do componente ou se o componente pode ser visto em dispositivos específicos.

• Pode ser aninhado para permitir o controle da coluna.

O usuário pode então ver como o conteúdo será renderizado para dispositivos específicos usando o emulador.

O AEM permite um layout responsivo para suas páginas usando uma combinação de mecanismos:

• Componente Contêiner de layout

  Este componente está disponível no navegador de componentes e fornece um sistema de parágrafo de grade para que você possa adicionar e posicionar componentes em uma grade responsiva. Ele também pode ser definido como o sistema de parágrafos padrão na sua página.

• Modo de layout

  Depois que o contêiner de layout é posicionado na página, você pode usar o modo Layout para posicionar conteúdo na grade responsiva.

• Emulador
  Permite criar e editar sites responsivos que reorganizam o layout de acordo com o tamanho do dispositivo ou da janela, redimensionando componentes interativamente. O usuário pode observar como o conteúdo será renderizado utilizando o Emulador.

Com esses mecanismos de grade responsivos você pode:

• Use pontos de interrupção para definir diferentes layouts de conteúdo com base na largura do dispositivo (relacionado ao tipo e à orientação do dispositivo).
• Usar os mesmos pontos de interrupção e layouts de conteúdo para certificar-se de que o conteúdo responde ao tamanho da janela do navegador no desktop.
• Usar o alinhamento com a grade para permitir colocar componentes na grade, redimensionar como necessário e definir quando devem ser recolhidos/refluir para ficarem lado a lado ou acima/abaixo.
• Ocultar componentes de layouts específicos de dispositivos.
• Executar o controle da coluna.

Dependendo do projeto, o Contêiner de layout pode ser usado como o sistema de parágrafo padrão para suas páginas, ou como um componente disponível para ser adicionado à sua página por meio do navegador componente (ou ambos).

Definições de layout, emulação de dispositivo e pontos de interrupção

Ao criar o conteúdo do seu site, você quer garantir que o conteúdo seja exibido apropriadamente no dispositivo usado para exibi-lo.

AEM permite definir layouts dependendo da largura do dispositivo:

• O emulador permite que você emule esses layouts em vários dispositivos. Além do tipo de dispositivo, a orientação, selecionada pela opção Girar dispositivo, pode afetar o ponto de interrupção selecionado à medida que a largura muda.

• Os pontos de interrupção são pontos que separam as definições de layout.

  • Eles definem efetivamente a largura máxima (em pixels) de qualquer dispositivo com um layout específico.
  • Normalmente, os pontos de interrupção são válidos para alguns dispositivos, dependendo da largura das telas.
  • O alcance do ponto de interrupção se estende da esquerda até o próximo ponto de interrupção.
  • Não é possível selecionar um ponto de interrupção específico, pois o ponto de interrupção apropriado é selecionado quando você seleciona um dispositivo e uma orientação.

O dispositivo Desktop sem uma largura específica e que está relacionado ao ponto de interrupção padrão (isto é, todos os itens acima do último ponto de interrupção configurado).

Ao usar o emulador, você seleciona um dispositivo específico para emulação e definição de layout, e o ponto de interrupção relacionado também será realçado. Quaisquer alterações de layout efetuadas serão aplicáveis a outros dispositivos em que o ponto de interrupção se aplica, isto é, quaisquer dispositivos posicionados à esquerda do marcador do ponto de interrupção ativo, mas antes do próximo marcador do ponto de interrupção.

Por exemplo, ao selecionar o dispositivo iPhone 6 Plus (definido com uma largura de 540 pixels) para emulação e layout, o ponto de interrupção Telefone (definido como 768 pixels) também será ativado. Qualquer alteração no layout feita para a iPhone 6 será aplicável a outros dispositivos da Telefones ponto de interrupção, como iPhone 5 (definido como 320 pixels).

Selecionar um dispositivo para emular

1. Abra a página para edição. Por exemplo:

   http://localhost:4502/editor.html/content/we-retail/us/en/experience.html

2. Selecione o ícone Emulador na barra de ferramentas superior:

   

3. A barra de ferramentas do emulador abre.

   

   A barra de ferramentas do emulador exibe opções adicionais de layout:

   • Girar dispositivo - Permite que você gire um dispositivo de orientação vertical (retrato) para a orientação horizontal (paisagem) e vice-versa.

   

   • Selecionar dispositivo - defina um dispositivo específico para emular de uma lista (consulte a próxima etapa para obter detalhes)

   

4. Para selecionar um dispositivo específico para emular, você pode:

   • Use o ícone Selecionar dispositivo e selecione em um seletor suspenso.
   • Toque/clique no indicador do dispositivo na barra de ferramentas do emulador.

   

5. Depois que um dispositivo específico é selecionado, você pode:

   • Visualizar o marcador ativo do dispositivo selecionado, como iPad.
   • Visualizar o marcador ativo do ponto de interrupção apropriado como Tablet.

   

   • A linha pontilhada azul representa a variável dobra para o dispositivo selecionado (aqui, um iPhone 6).

   

   • A dobra também pode ser considerada a quebra de linha da página (não confundir com a pontos de interrupção) para o conteúdo. Isso é exibido para conveniência de mostrar qual parte do conteúdo será vista pelo usuário no dispositivo antes da rolagem.
   • A linha para a dobra não será mostrada se a altura do dispositivo que está sendo emulado for maior que o tamanho da tela.
   • A dobra é mostrada para a conveniência do autor e não é mostrada na página publicada.

Adicionar um contêiner de layout e seu conteúdo (Modo de edição)

Um Contêiner de layout é um sistema de parágrafos que:

• Contém outros componentes.
• Define o layout.
• Responde às alterações.

1. O Contêiner de layout está disponível como um componente padrão no Navegador de componentes. Aqui, você pode arrastá-lo até o local desejado na página, onde verá o espaço reservado Arrastar componentes aqui.

2. Em seguida, é possível adicionar componentes ao contêiner de layout. Esses componentes terão o conteúdo real:

   

Selecionar e executar ações em um contêiner de layout (modo Editar)

Assim como em outros componentes, você pode selecionar e executar ações (recortar, copiar ou excluir) em um Contêiner de layout (no modo Editar):

1. Se você passar o mouse sobre ou tocar no espaço reservado da grade, o menu de ação será exibido.

   

   É preciso selecionar a opção Pai.

   

2. Se o componente de layout estiver aninhado, selecione o Pai apresenta uma seleção suspensa, permitindo selecionar o contêiner aninhado do layout ou seus pais.

   Ao passar o mouse sobre os nomes de contêiner na lista suspensa, seus contornos serão exibidos na página.

   • O menor contêiner aninhado do layout será contornado em preto.
   • O próximo menor contêiner aninhado do layout estará em um cinza escuro.
   • Cada contêiner sucessivo será destacado por uma sombra mais clara de cinza.

   

3. Essa ação destacará a grade inteira e seu conteúdo. A barra de ferramentas da ação será exibida e aqui você pode selecionar uma ação, como Excluir.

   

Definição de layouts (modo Layout)

Para configurar o layout de uma grade responsiva implementada com o Contêiner de layout, use o modo Layout.

O modo Layout pode ser iniciado de duas maneiras.

• Ao usar o modo de menu na barra de ferramentas e escolher o modo Layout

  • Selecione o modo Layout da mesma maneira que você alternaria para o modo de Edição ou o modo de Segmentação.
  • O modo Layout permanece persistente e você não sai do modo Layout até que você selecione outro modo por meio do seletor de modo.

• When editar um componente individual.

  • Ao usar a variável Layout no menu de ação rápida do componente, você pode alternar para Layout modo.
  • Layout O modo persiste ao editar o componente e reverte para Editar assim que o foco mudar para outro componente.

No modo de layout, é possível executar várias ações em uma grade:

• Redimensione os componentes do conteúdo usando os pontos azuis. O redimensionamento sempre se ajusta à grade. Ao redimensionar a grade de fundo, ela será exibida para auxiliar no alinhamento:

  

  OBSERVAÇÃO

  As proporções e as taxas são mantidas quando os componentes como Imagens são redimensionados.

• Clique/toque em um componente de conteúdo, a barra de ferramenta permite que você:

  • Pai

    Permite que você selecione o componente do contêiner de layout inteiro para executar uma ação em tudo.

  • Flutuar até a nova linha

    O componente será movido para uma nova linha, dependendo do espaço disponível na grade.

  • Ocultar componente

    O componente ficará invisível (ele pode ser restaurado na barra de ferramentas do contêiner de layout).
    

• No modo Layout, você pode tocar/clicar em Arrastar componentes aqui para selecionar o componente inteiro. Isso mostrará a barra de ferramentas para este modo.

  A barra de ferramentas terá opções diferentes, dependendo do estado do componente de layout e dos componentes que pertencem a ela. Por exemplo:

  • Pai - seleciona o componente do pai.

  

  • Mostrar componentes ocultos - revela todos os componentes ou componentes individuais. O número indica quantos componentes ocultos há atualmente. O contador mostra quantos componentes estão ocultos.

  

  • Reverter layout do ponto de interrupção - reverte para o layout padrão. Ou seja, nenhum layout personalizado será imposto.

  

  • Flutuar para uma nova linha - move o componente uma posição acima, se o espaço permitir.

  

  • Ocultar componente - oculta o componente atual.

  

  OBSERVAÇÃO

  No exemplo acima, as ações flutuar e ocultar estão disponíveis porque este Contêiner de layout está aninhado em um Contêiner de layout pai.

  • Revelar componentes Selecione os componentes principais para mostrar a barra de ferramentas de ação com a
    opção Mostrar componentes ocultos. Neste exemplo, dois componentes estão ocultos.
    

  Selecionar a opção Mostrar componentes ocultos exibirá em azul os componentes que estão ocultos no momento em suas posições originais.

  

  Selecionar Restaurar tudo revelará todos os componentes ocultos.

Recursos do Business.Adobe.com

Ecommerce Integrations Auto Form Fill Targeted Content Personalized Experiences Document Generation Digital Rights Management