Layout responsivo responsive-layout
O AEM permite ter um layout responsivo para suas páginas usando o componente Contêiner de layout.
Isso fornece um sistema de parágrafo que permite posicionar componentes em uma grade responsiva. Essa grade pode reorganizar o layout de acordo com o tamanho e o formato do dispositivo/janela. O componente é usado em conjunto com o modo Layout, que permite criar e editar seu layout responsivo dependendo do dispositivo.
O container de layout:
-
Fornece a opção de encaixe horizontal na grade, juntamente com a capacidade de posicionar componentes lado a lado na grade e definir quando devem ser recolhidos/refluídos.
-
Usa pontos de interrupção predefinidos (por exemplo, para telefone, tablet e assim por diante) para permitir que você defina o comportamento necessário do conteúdo para dispositivos/orientações relacionadas.
- Por exemplo, você pode personalizar o tamanho do componente ou se ele pode ser visualizado em dispositivos específicos.
-
Pode ser aninhado para permitir o controle de coluna.
O usuário pode 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.
-
Depois que o container de layout é posicionado na página, você pode usar o modo Layout para posicionar conteúdo na grade responsiva.
-
Emulador
Isso 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 ver como o conteúdo será renderizado usando o emulador.
Com esses mecanismos de grade responsivos, você pode:
- Usar pontos de interrupção para definir layouts de conteúdo diferentes com base na largura do dispositivo (de acordo com o tipo e a 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 layout-definitions-device-emulation-and-breakpoints
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 definir layouts dependendo da largura do dispositivo:
-
O emulador permite simular 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.
Um dispositivo de desktop que não possui uma largura específica utiliza o 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á destacado. Quaisquer alterações de layout efetuadas serão aplicáveis a outros dispositivos aos quais 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. Quaisquer alterações de layout feitas no iPhone 6 serão aplicáveis a outros dispositivos sob o ponto de interrupção Telefones, como iPhone 5 (definido como 320 pixels).
Selecionar um dispositivo para emular selecting-a-device-to-emulate
-
Abra a página que deseja editar. Por exemplo:
http://localhost:4502/editor.html/content/we-retail/us/en/experience.html -
Selecione o ícone Emulador na barra de ferramentas superior:
-
A barra de ferramentas do emulador se abre.
A barra de ferramentas do emulador exibe opções adicionais de layout:
-
Girar dispositivo - Permite girar 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)
-
-
Para selecionar um dispositivo específico para emular, você pode:
- Usar o ícone Selecionar dispositivo e escolher um na lista suspensa.
- Clique no indicador do dispositivo na barra de ferramentas do emulador.
-
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 dobra do dispositivo selecionado (aqui uma iPhone 6).
- A dobra também pode ser considerada a quebra de linha da página (não deve ser confundida com os pontos de interrupção) do conteúdo. Isso é exibido para maior comodidade, a fim de mostrar qual parte do conteúdo o usuário verá no dispositivo antes de rolar a tela.
- A linha da 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) adding-a-layout-container-and-its-content-edit-mode
Um Contêiner de layout é um sistema de parágrafos que:
- Contém outros componentes.
- Define o layout.
- Responde às alterações.
-
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.
-
Em seguida, você pode adicionar componentes ao container de layout. Esses componentes conterão o conteúdo real:
Selecionar e executar ações em um contêiner de layout (modo Editar) selecting-and-taking-action-on-a-layout-container-edit-mode
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):
-
Se você passar o mouse sobre ou selecionar o espaço reservado da grade, o menu de ação será exibido.
É preciso selecionar a opção Pai.
-
Se o componente de layout estiver aninhado, selecionar a opção Pai apresentará uma seleção suspensa, permitindo selecionar o contêiner de layout aninhado ou seu(s) pai(s).
Ao passar o mouse sobre os nomes do container no menu suspenso, suas estruturas de tópicos serão exibidas na página.
- O menor contêiner aninhado do layout será contornado em preto.
- O próximo contêiner aninhado de layout mais baixo estará em cinza escuro.
- Cada contêiner sucessivo será destacado por uma sombra mais clara de cinza.
-
Essa ação destacará a grade inteira e seu conteúdo. A barra de ferramentas da ação será exibida, na qual é possível selecionar uma ação, como Excluir.
Definição de layouts (modo Layout) defining-layouts-layout-mode
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.
-
Ao editar um componente individual.
- Ao usar a opção Layout no menu de ação rápida do componente, é possível alternar para o modo Layout.
- O modo Layout persiste ao editar o componente e reverte para o modo Editar assim que o foco muda para outro componente.
Quando estiver no modo de layout, você poderá executar várias ações em uma grade:
-
Redimensione os componentes de conteúdo usando os pontos azuis. O redimensionamento sempre se ajustará à grade. Ao redimensionar, a grade de plano de fundo é mostrada para auxiliar o alinhamento:
note note NOTE As proporções e as taxas são mantidas quando os componentes como Imagens são redimensionados. -
Clique em um componente de conteúdo, a barra de ferramentas permite:
-
Pai
Permite selecionar 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 clicar em Arrastar componentes aqui para selecionar o componente inteiro. Isso mostrará a barra de ferramentas para esse modo.
A barra de ferramentas terá opções diferentes dependendo do estado do componente de layout e dos componentes que pertencem a ele. Por exemplo:
-
Pai - seleciona o componente do pai.
-
Mostrar componentes ocultos - Revelar 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. Isso significa que 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.
note note NOTE 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.
-