Tentando Layout responsivo no We.Retail

Todas as páginas We.Retail usam o componente Contêiner de layout para implementar um design responsivo. O contêiner de layout 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 é usado em conjunto com o modo Layout no editor de páginas, que permite criar e editar seu layout responsivo dependendo do dispositivo.

Tentando sair

  1. Edite a página Navegação no Ártico na seção Experiências do ramo de idioma principal.

    http://localhost:4502/editor.html/content/we-retail/language-masters/en/experience/arctic-surfing-in-lofoten.html

  2. Alterne para Visualizar para ver a página como ela seria renderizada para um visitante do site. Role para baixo até o conteúdo do artigo Aloha espíritos no Norther Norway.

    chlimage_1-178

  3. Redimensione a janela do navegador e observe o layout se adaptando dinamicamente ao redimensionamento.

    chlimage_1-179

  4. Alterne para o modo Layout . A barra de ferramentas do emulador é exibida automaticamente, permitindo que você planeje o layout por dispositivo de destino.

    Selecionar um componente exibe opções flutuantes e de ocultação no menu de edição junto com alças de redimensionamento para o componente.

    chlimage_1-180

  5. Agarrar e arrastar a alça de redimensionamento do componente mostra automaticamente a grade de layout para ajudá-lo com o redimensionamento.

    chlimage_1-181

Informações adicionais

Para obter mais informações, consulte o documento de criação Layout responsivo ou o documento de administrador Configuração do contêiner de layout e modo de layout para obter detalhes técnicos completos.

Nesta página

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now