Layout Masonry e Menu especial

Guia prático Pro Navigation 3 min de leitura

Em um mega menu normal, cada bloco tem a própria coluna, então uma lista de links curta deixa um espaço vazio embaixo. O Layout Masonry agrupa vários blocos em uma coluna para que fiquem empilhados — por exemplo, duas listas curtas de marcas dividindo a primeira coluna.

Modelos

Ambos ficam no grupo Menu especial de Selecionar modelo.

Layout Masonry

Quatro colunas (blocos Grupo de itens) com listas de links empilhadas dentro de cada coluna.

Menu especial

Uma lista de categorias à esquerda; cada categoria tem o próprio painel de listas de links e imagens à direita, como nos grandes menus de marketplaces.

Começar pelo modelo Layout Masonry

1. Adicione o modelo

   Na árvore de Elementos do editor, clique em Adicionar submenu sob um item de nível superior. Aponte para Menu especial (1) e clique em Selecionar em Layout Masonry (2).

   

   (1) Aponte para o grupo Menu especial, (2) escolha Layout Masonry

2. Edite o conteúdo de exemplo

   O modelo adiciona 4 blocos Grupo de itens com 25% de largura, com listas de links dentro. Passe o mouse sobre cada título ou link, clique em Editar item e altere o Título e o Link.

3. Adicione ou remova blocos em uma coluna

   Dentro de um grupo, clique em Adicionar bloco para empilhar outro bloco, como uma lista de links ou uma imagem. Para remover um, passe o mouse sobre ele e clique em Excluir item.

4. Salve e publique

   Clique em Salvar e depois em Publicar.

Criar um Layout Masonry a partir de um mega menu em branco

1. Adicione um mega menu em branco

   Clique em Adicionar submenu, aponte para Mega menu e clique em Selecionar em Em branco. Um mega menu existente também serve.

2. Adicione um Grupo de itens por coluna

   Clique em Adicionar bloco, escolha Multibloco e selecione Grupo de itens; cada grupo é uma coluna. Na árvore de Elementos, ele aparece como Grupo de itens (layout de grade Masonry).

   

   (1) Escolha uma aba, (2) passe o mouse sobre um layout e clique em Selecionar.

3. Defina as larguras dos grupos

   Um novo grupo tem 50% de largura. Defina a Largura de cada grupo para que as colunas caibam em uma linha, por exemplo 25% para 4 colunas ou 33,33% para 3.

4. Preencha cada grupo

   Dentro de cada grupo, clique em Adicionar bloco e adicione os blocos dessa coluna. Defina a Largura de cada bloco interno como 100% para que fiquem empilhados em vez de lado a lado.

5. Salve e publique

   Clique em Salvar e depois em Publicar.

Usar o modelo Menu especial

1. Adicione o modelo

   Clique em Adicionar submenu, aponte para Menu especial e clique em Selecionar no modelo Menu especial.

   

   (1) Aponte para o grupo Menu especial, (2) escolha Layout Masonry

2. Edite as categorias e os painéis

   Cada categoria à esquerda é uma aba: renomeie-a e depois preencha o painel dela usando Adicionar bloco. Veja Menu com abas.

3. Salve e publique

   Clique em Salvar e depois em Publicar.

Os dois modelos abrem em um painel de mega menu, então a seção Submenu do item pai define a largura, o alinhamento e o fundo do painel. Veja Layout do painel do mega menu.

Solução de problemas

Os blocos ficam lado a lado em vez de empilhados

Confira na árvore de Elementos se os blocos internos estão dentro de um Grupo de itens e se a Largura deles é 100%.

Os grupos quebram para uma segunda linha

As larguras dos grupos somam mais de 100%. Diminua-as para que caibam em uma linha.

Páginas relacionadas

• Mega menuCrie um painel de submenu largo com blocos como listas de links, imagens, produtos e um formulário de contato.
• Menu com abasPermita que os compradores alternem entre grupos de conteúdo, como Masculino, Feminino e Infantil, dentro de um único submenu.
• Visão geral dos blocosAdicione blocos como links, imagens, produtos e contagens regressivas a um mega menu ou a uma aba.

Esta página foi útil?

Relatar um problema