Pular para o conteúdo
GloboGlobo Docs
Instalar aplicação
Português (Portugal)

Disposição em mosaico e Special menu

Empilhe corretamente em colunas blocos de alturas diferentes ou mostre uma lista de categorias com um painel para cada categoria.

Guia prático Pro Navigation 3 min de leitura

Num mega menu normal, cada bloco tem a sua própria coluna, por isso uma lista de ligações curta deixa um espaço vazio por baixo. A disposição em mosaico (Masonry) agrupa vários blocos numa coluna para que fiquem empilhados; por exemplo, duas listas curtas de marcas a partilhar a primeira coluna.

Modelos

Ambos estão no grupo Special menu (menu especial) de Select template (selecionar modelo).

Masonry layout (disposição em mosaico)
Quatro colunas (blocos Group of items, grupo de itens) com listas de ligações empilhadas dentro de cada coluna.
Special menu (menu especial)
Uma lista de categorias à esquerda; cada categoria tem o seu próprio painel de listas de ligações e imagens à direita, como nos menus dos grandes marketplaces.

Começar com o modelo Masonry layout

  1. Adicione o modelo

    Na árvore Elements (elementos) do editor, clique em Add submenu (adicionar submenu) por baixo de um item de primeiro nível. Aponte para Special menu (1) e clique em Select em Masonry layout (2).

    (1) Aponte para o grupo Special menu, (2) escolha Masonry layout

  2. Edite o conteúdo de exemplo

    O modelo adiciona 4 blocos Group of items com 25% de largura, com listas de ligações no interior. Passe o rato por cima de cada título ou ligação, clique em Edit Item (editar item) e altere o Title e o Link.

  3. Adicione ou remova blocos numa coluna

    Dentro de um grupo, clique em Add block (adicionar bloco) para empilhar outro bloco, como uma lista de ligações ou uma imagem. Para remover um, passe o rato por cima dele e clique em Delete Item.

  4. Guarde e publique

    Clique em Save e, depois, em Publish.

Criar um mosaico a partir de um mega menu em branco

  1. Adicione um mega menu em branco

    Clique em Add submenu, aponte para Mega menu e clique em Select em Blank. Também pode usar um mega menu existente.

  2. Adicione um Group of items por coluna

    Clique em Add block, escolha Multi block e selecione Group of items; cada grupo é uma coluna. Na árvore Elements, aparece como Group of items (Masonry grid layout).

    (1) Escolha um separador, (2) passe o rato por cima de um esquema e clique em Select.

  3. Defina as larguras dos grupos

    Um grupo novo tem 50% de largura. Defina a Width (largura) de cada grupo para que as colunas caibam numa linha, por exemplo 25% para 4 colunas ou 33,33% para 3.

  4. Preencha cada grupo

    Dentro de cada grupo, clique em Add block e adicione os blocos dessa coluna. Defina a Width de cada bloco interior como 100% para que fiquem empilhados em vez de lado a lado.

  5. Guarde e publique

    Clique em Save e, depois, em Publish.

Usar o modelo Special menu

  1. Adicione o modelo

    Clique em Add submenu, aponte para Special menu e clique em Select no modelo Special menu.

    (1) Aponte para o grupo Special menu, (2) escolha Masonry layout

  2. Edite as categorias e os painéis

    Cada categoria à esquerda é um separador: mude-lhe o nome e preencha o respetivo painel com Add block. Consulte Menu com separadores.

  3. Guarde e publique

    Clique em Save e, depois, em Publish.

Ambos os modelos abrem num painel de mega menu, por isso a secção Submenu do item pai define a largura, o alinhamento e o fundo do painel. Consulte Disposição do painel do mega menu.

Resolução de problemas

Os blocos ficam lado a lado em vez de empilhados

Verifique na árvore Elements se os blocos interiores estão dentro de um Group of items e se a respetiva Width é 100%.

Os grupos passam para uma segunda linha

As larguras dos grupos somam mais de 100%. Reduza-as para que caibam numa linha.

Esta página foi útil?

Comunicar um problema