Tentando um layout responsivo em We.Retail

Todas as páginas We.Retail usam o componente Container Layout para implementar um design responsivo. O container de layout fornece um sistema de parágrafo que permite posicionar 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 Surfe 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 Pré-visualização para ver a página como ela seria renderizada para um visitante do site. Role para baixo até o conteúdo do artigo Espíritos da Aloha no Norther Noruega.

    chlimage_1-178

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

    chlimage_1-179

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

    Selecionar um componente exibe opções flutuantes e ocultas no menu de edição, juntamente com alças de redimensionamento do 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 administrador Configurando o Container de layout e o 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