Menu com abas

Guia prático Pro Navigation 2 min de leitura

Um menu com abas mostra títulos de abas como Tênis, Vestuário e Acessórios ao lado do conteúdo da aba selecionada. Ele encaixa um catálogo grande em um painel compacto.

Adicionar um menu com abas

1. Escolha um modelo

   Na árvore de Elementos do editor, clique em Adicionar submenu sob um item de nível superior. Aponte para Abas e clique em Selecionar em um modelo.

   

   Os modelos de abas. Role para ver os nove: três profundidades à esquerda, na parte superior ou à direita.

2. Renomeie as abas

   O título de cada aba é um item: passe o mouse sobre ele, clique em Editar item e altere o Título. Clique em Adicionar abas na árvore de Elementos para adicionar outra aba.

3. Preencha cada aba

   Selecione uma aba e clique em Adicionar bloco para adicionar listas de links, imagens, produtos e mais. Veja Blocos.

4. Salve e publique

   Clique em Salvar e depois em Publicar.

Modelos

Simples

Uma linha de abas, cada uma com o próprio conteúdo: Abas simples à esquerda, Abas simples superiores, Abas simples à direita.

2 níveis

Cada aba contém o próprio conjunto de abas: Abas aninhadas à esquerda (2 níveis), Abas aninhadas superiores (2 níveis), Abas aninhadas à direita (2 níveis). Por exemplo, Tênis > Corrida / Treino / Casual > produtos.

3 níveis

Abas dentro de abas dentro de abas: Abas aninhadas à esquerda (3 níveis), Abas aninhadas superiores (3 níveis), Abas aninhadas à direita (3 níveis).

Configurações do bloco de abas

Passe o mouse sobre o bloco de abas e clique no ícone de lápis.

Largura

Quanto do painel o bloco de abas usa: Automático ou de 8,33% a 100%.

Posição

Onde os títulos das abas aparecem: Esquerda, Superior ou Direita.

Um menu com abas abre em um painel de mega menu, então a seção Submenu do item pai define a largura, o alinhamento e o fundo dele. Veja Layout do painel do mega menu.

Dicas

• As abas à Esquerda combinam com listas longas de categorias; as abas Superiores combinam com 3 a 6 títulos curtos.
• Mantenha os títulos das abas curtos para que não quebrem em duas linhas.
• Para colocar abas ao lado de outros blocos, clique em Adicionar bloco em um mega menu e escolha Aba.

Páginas relacionadas

• Mega menuCrie um painel de submenu largo com blocos como listas de links, imagens, produtos e um formulário de contato.
• Visão geral dos blocosAdicione blocos como links, imagens, produtos e contagens regressivas a um mega menu ou a uma aba.
• Layout Masonry e Menu especialEmpilhe blocos de alturas diferentes em colunas ou exiba uma lista de categorias com um painel para cada uma.
• SubmenusCompare menus suspensos, mega menus, menus com abas e layouts Masonry e escolha o submenu certo para cada item.

Esta página foi útil?

Relatar um problema