Editor do Wix Studio: adicionar e personalizar um mega menu

4 min de leitura

Neste artigo

Adicionar e configurar um contêiner do mega menu
Criar um menu dropdown
Ajustar o layout do contêiner do mega menu
Fazer o design do mega menu

Mega menus são contêineres que você pode adicionar a um menu horizontal. Quando os visitantes passam o mouse sobre o item de menu relevante, o contêiner é aberto. Faça o design do contêiner do zero e decida para o que você deseja usá-lo: navegação em vários níveis, exibição de produtos em destaque ou qualquer outro fim.

Exemplo de um mega menu no estilo e-commerce, onde o contêiner mostra muitos links de navegação para diferentes categorias de produtos

É importante saber que:

Só é possível adicionar um contêiner do mega menu a um menu horizontal. Os contêineres de mega menu não são suportados em menus verticais, menus âncora e menus hambúrguer.

Adicione o contêiner do mega menu como um item a um menu existente e dê o nome que você quiser. Recomendamos o uso de um título que reflita o conteúdo mostrado, como "Serviços" ou "Nossa história".

Depois de adicionar e nomear seu contêiner, adicione elementos como botões, formas e texto para criar o conteúdo desejado.

Para adicionar um mega menu:

Selecione o menu horizontal relevante no seu editor.
Clique em Gerenciar menu.
Clique em + Adicionar item na parte inferior do painel.
Selecione Mega menu.
Insira um título para o mega menu.
Dica: esse é o título sobre o qual os visitantes passam o mouse para ver o mega menu.
Clique em OK.
Adicione conteúdo ao mega menu:
1. (No painel Gerenciar menu) Clique em Editar ao lado de Contêiner.
2. Adicione todos os elementos necessários ao contêiner.

O painel Gerenciar menu, clicando em Editar para começar a adicionar elementos a um novo contêiner do mega menu

Use um mega menu para organizar itens específicos em um site ao criar um menu dropdown. Quando os visitantes clicam no mega menu, o menu dropdown e seus itens aparecem no contêiner.

Um menu dropdown aberto em um site Wix online.

O que você precisa saber:

Você adiciona e gerencia itens dropdown no mesmo painel que o menu principal. Fica ainda mais fácil configurar a navegação no site.

Para criar um menu dropdown:

Selecione o menu horizontal relevante no seu editor.
Clique em Gerenciar menu.
(Se o item não tiver sido adicionado ao menu horizontal) Clique em Adicionar item e configure o item de menu que você deseja.
Aninhe os itens de menu relevantes no mega menu:
1. Selecione o item no painel Gerenciar menu.
2. Arraste e solte o item no mega menu.

Um GIF mostrando itens sendo arrastados e soltos em um mega menu no painel Gerenciar menu, criando um menu dropdown.

Quer gerenciar os itens do menu dropdown?

Use o painel Gerenciar menu para reordenar, renomear e remover itens em um menu dropdown.

Após adicionar os elementos que você deseja ao mega menu, altere o layout para combinar com a estrutura da sua página. Você pode ajustar o espaçamento e decidir até onde o contêiner se estende.

Para alterar o layout:

Selecione o menu relevante no seu editor.
Clique no ícone Layout .
Clique em Mega menu.
Use as opções para ajustar o layout:
- Esticar contêiner: decida se o contêiner se estende ou não para a largura total da tela do visitante. Quando desativada, você pode definir a largura desejada na tela ou no painel Inspetor.
- Margens: adicione espaço (em px ou %) entre o contêiner do mega menu e as bordas da tela.
- Espaço entre os itens e contêiner: arraste o slider para aumentar ou diminuir o espaço entre o menu e o contêiner do mega menu.

A aba do mega menu no painel de layout do menu no Editor do Wix Studio.

Depois de ajustar o layout do contêiner, faça o design das bordas, background e mais. Para manter uma aparência consistente, as alterações feitas no mega menu também se aplicam a todos os submenus que você adicionou.

Para personalizar o design do contêiner:

Selecione o menu relevante no seu editor.
Clique no ícone Abrir inspetor no canto superior direito do editor.

Uma captura de tela da abertura do painel Inspetor no Editor do Wix Studio.

Selecione Contêiner do submenu no dropdown O que você deseja criar?.
Use as opções disponíveis para fazer o design do contêiner:
- Background: defina uma cor, gradiente ou background de imagem para o contêiner. Você pode adicionar várias camadas de background com diferentes níveis de opacidade.
- Bordas: adicione e faça o design das bordas para o contêiner.
- Cantos: deixe os cantos do contêiner mais redondos ou retangulares.
- Sombras: adicione uma sombra atrás do contêiner para um efeito 3D.