Você está visualizando o conteúdo de ajuda da versão:

O AEM permite aplicar um layout responsivo às suas páginas usando o componente Contêiner de layout.

Este componente fornece um sistema de parágrafo que permite posicionar os componentes dentro de uma grade responsiva. Esta 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 encaixe horizontal na grade, em conjunto com a capacidade de posicionar os componentes lado a lado na grade e definir quando devem se recolher/refluir.
  • Usa pontos de interrupção pré-definidos (por exemplo, telefone, tablet) para que você possa definir o comportamento exigido do conteúdo para dispositivos relacionados/orientação. Por exemplo, você pode personalizar o tamanho do componente ou se o componente pode ser visto em dispositivos específicos.
  • Podem ser aninhados para permitir o controle da coluna.

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

Dependendo do seu caso, pode ser usado como o sistema de parágrafo padrão para a página ou como um componente disponível para ser descartado na sua página (ou ambos).

Cuidado:

Embora o componente do contêiner de layout esteja disponível na interface clássica, as suas funcionalidades estão disponíveis apenas na interface otimizada para toque.

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

  • Componente do 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 estes mecanismos de grade responsivos você pode:

  • Usar pontos de interrupção para definir layouts de conteúdo diferentes 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 na área de trabalho.
  • Usar o alinhamento com a grade (colocar componentes na grade, redimensionar como necessário, 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ágrafos padrão para suas páginas, além de estar disponível (como um componente que pode ser adicionado à página) para seleção no navegador de componentes.

Observação:

O uso dos mecanismos acima é habilitado pela configuração no modelo. Consulte Configuração de layout responsivo para obter mais informações.

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.

O AEM permite que você defina 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 ao 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).

Observação:

Seria possível definir pontos de interrupção para cada dispositivo individual, mas isso aumentaria consideravelmente o trabalho necessário para a definição e a manutenção do layout.

Ao usar o emulador, é possível selecionar um dispositivo específico para emulação e definição de layout, sendo que o ponto de interrupção também será selecionado. 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, com a seleção do dispositivo iPhone 6 Plus (definido com largura de 540 pixels) para emulação e layout, o ponto de interrupção Celular (definido como 768 pixels) também será ativado. Quaisquer mudanças de layout efetuadas para o iPhone 6 serão aplicáveis a outros dispositivos no ponto de interrupção Celulares, como o 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/geometrixx-media/en.html

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

  3. A barra de ferramentas do emulador abre. Aqui você pode:

    • Girar o dispositivo
    • Selecionar um dispositivo específico nos marcadores.
  4. Para selecionar um dispositivo específico a fim de emulá-lo, é possível:

    • Usar o 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 a linha pontilhada que representa a dobra do dispositivo atual; ex: iPhone 5:

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
  • você pode usar para definir o layout
  • responde às alterações

Observação:

Se ainda não estiver disponível, o Contêiner de layout deve ser ativado explicitamente em um sistema/página de parágrafos (por exemplo, quando você usar o modo Design).

  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 exigido na página, em seguida, é possível observar o espaço reservado Arrastar componentes aqui.

  2. Em seguida, você pode adicionar componentes ao contêiner de layout. Esses componentes contêm 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 (Copiar, colar e excluir) em um Contêiner de layout (no modo Editar):

Cuidado:

Como o contêiner de layout é um sistema de parágrafos, com a exclusão do componente a grade do layout e todos os componentes (e seu conteúdo) no contêiner são excluídos.

  1. Se você passar o mouse sobre o espaço reservado da grade, é necessário selecionar o Pai:

  2. Se o componente de layout estiver aninhado, é necessário selecionar a instância específica em que você deseja executar uma ação (quando passar o mouse sobre as opções, uma borda preta indica a seleção na página):

  3. Essa ação destacará a grade inteira e seu conteúdo. A barra de ferramentas do componente será exibida e aqui você pode selecionar uma ação; por exemplo Excluir:

Definição de layouts (modo Layout)

Observação:

Você pode definir um layout separado para cada ponto de interrupção (como determinado pelo tipo e pela orientação do dispositivo emulado).

Para configurar o layout de uma grade responsiva implementada com o Contêiner de layout, use o modo Layout. Aqui, você pode executar várias ações em uma grade:

  • Redimensione os componentes do conteúdo usando os pontos azuis. O redimensionamento sempre se ajusta à grade. A grade do fundo será exibida quando você redimensionar 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 para 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; por exemplo:

    • Pai
      Seleciona o componente do pai.
    • Mostrar componentes ocultos
      Revela todos os componentes ou apenas os individuais. O número indica quantos componentes ocultos existem.
      O indicador no exemplo a seguir mostra que há um componente oculto (o componente de texto superior).
    • 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.

    • Mostrar componentes
      Selecione os componentes principais para mostrar quantos componentes ocultos eles contêm; por exemplo, dois:

    Você pode restaurar os componentes ocultos selecionando Restaurar todos:

Esta obra está licenciada sob uma licença não adaptada da Creative Commons Attribution-Noncommercial-Share Alike 3.0  As publicações do Twitter™ e do Facebook não são cobertas pelos termos do Creative Commons.

Avisos legais   |   Política de privacidade online