Editor Wix: adicionar e configurar um mega menu
7 min de leitura
Neste artigo
- Etapa 1 | Adicione e configure um menu horizontal avançado
- Etapa 2 | Adicione um mega menu ao seu menu avançado
- Etapa 3 | Adicione conteúdo ao contêiner
- Etapa 4 | Ajuste o layout do contêiner do mega menu
- Etapa 5 | Personalize o design do mega menu
Mega menus são contêineres que você pode adicionar como itens ao seu menu horizontal avançado. Quando os visitantes passam o mouse sobre o item de menu no seu site online, o contêiner é aberto.
Anexe elementos ao contêiner para exibir conteúdo importante e relevante. Você também pode personalizar a aparência para fornecer uma experiência de navegação única para seus visitantes.
![Um GIF mostrando um mega menu em um site Wix online.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2023/02/21/daac785c-045b-423a-84c7-ab97b037e256/f5eea30b-7b40-4b62-bba6-531f9d6abe52.gif)
Etapa 1 | Adicione e configure um menu horizontal avançado
Para começar, adicione um menu horizontal à sua página e configure-o como avançado. Menus avançados ajudam você a criar uma experiência de navegação personalizada e organizada para seus visitantes, com várias opções de itens e navegação.
É importante saber que:
Só é possível adicionar um contêiner do mega menu a um menu horizontal que você define como avançado. Os contêineres de mega menu não são suportados em menus normais do site, menus temáticos ou menus verticais.
Para adicionar e configurar um menu horizontal avançado:
- Clique em Elementos no lado esquerdo do Editor.
- Selecione Menu e âncora.
- Clique em Menus horizontais.
- Clique e arraste o design de menu escolhido para onde quiser na página.
- Defina o menu como avançado:
- Selecione o novo menu no Editor.
- Clique no ícone Configurações .
- Selecione Definir como avançado.
- Clique em Definir como avançado no pop-up.
![A aba Menu e âncora no painel Elementos. O cursor está passando sobre um menu horizontal.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2023/12/19/87732f34-2fac-4b43-a446-faeb40986147/a9772e0f-fc70-432f-8c1a-4f92392862b1.png)
Etapa 2 | Adicione um mega menu ao seu menu avançado
Quando você tiver um menu horizontal avançado, adicione seu contêiner do mega menu como um item e nomeie-o como quiser. Recomendamos usar um título que reflita o conteúdo pretendido, como "Serviços" e "Nossa história".
Para adicionar um mega menu:
- Selecione o menu avançado no seu Editor.
- Clique em Gerenciar menu.
- Clique em + Adicionar item de menu na parte inferior do painel.
- Selecione Mega menu.
- Insira o título do contêiner no campo.
- Clique em OK.
![O painel Gerenciar menu para um menu avançado no Editor. O cursor está passando sobre a opção de adicionar um mega menu.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2023/01/31/8ad4b25d-3b9e-4c46-92d8-3863ddfefa41/a4a5533c-5ec5-4310-bf14-0ce9be6120cc.png)
Etapa 3 | Adicione conteúdo ao contêiner
Depois de adicionar e nomear seu contêiner, adicione elementos como botões, formas e texto para criar o conteúdo desejado.
Para adicionar elementos:
- Passe o mouse sobre o contêiner do mega menu no painel Gerenciar menu.
- Clique em Editar.
- Clique em Elementos no lado esquerdo do Editor.
- Escolha o elemento que você deseja adicionar.
- Clique e arraste o elemento para a posição escolhida no contêiner.
![Um GIF mostrando uma caixa de texto sendo adicionada a um contêiner do mega menu no painel Elementos.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2023/02/01/3b98c313-b1c2-4102-88d1-35bcbac63b94/57b4ff8f-dfb4-47b6-85bf-7f4aa40a14f0.gif)
Etapa 4 | Ajuste o layout do contêiner do mega menu
Depois de adicionar os elementos desejados, altere o layout do contêiner do mega menu para combinar com a estrutura da sua página. Você pode ajustar o espaçamento e escolher quanto o contêiner se estende.
Para alterar o layout:
- Clique no contêiner do mega menu.
- Clique em Alterar layout.
- Use as opções para ajustar o contêiner:
- Escolha um layout: selecione se você deseja que o contêiner preencha toda a tela dos seus visitantes ou a largura da página do seu site (dentro das linhas de grade).
- Espaçamento entre o menu e submenu: arraste o slider para aumentar ou diminuir o espaço entre o menu e o contêiner do mega menu.
![O painel de layout do contêiner para um mega menu no Editor Wix. O cursor está passando sobre o slider de espaçamento.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2023/02/02/9f9004bc-76dc-4526-b0ff-877247b91e7e/54b4d99a-96cf-4489-9668-05a6c65e3fed.png)
Etapa 5 | Personalize o design do mega menu
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:
- Clique em Sair do modo na barra de Modo Mega menu.
2. Clique no menu avançado.
3. Clique no ícone Design
.4. Clique em Personalizar design.
5. Selecione Contêiner do submenu no menu dropdown O que você deseja criar?.
6. Use as opções para personalizar o contêiner.
Mostrar opções de design
![Um GIF mostrando as opções de design para um contêiner de mega menu sendo acessado no Editor Wix.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2023/02/02/dbd3bbb9-41c5-4000-9793-02ea140d66ae/06501882-015e-4bee-8e60-9002a4dc3069.gif)
Observação:
Apenas as opções de design feitas no contêiner do submenu são aplicadas a um mega menu. As alterações feitas nos itens do submenu não são aplicadas aos elementos que você adicionou ao contêiner do mega menu.
Qual é o próximo passo?
Há uma variedade de opções disponíveis em um menu horizontal avançado. Você pode:
- Gerenciar o menu avançado para exibir os itens que você deseja.
- Personalizar o design para complementar o tema do seu site.
- Ajustar o layout do menu para definir o alinhamento, espaçamento e muito mais.