Como Adicionar um Mega Menu no Seu Site WordPress (Passo a Passo)

Mega menus permitem que você exiba uma grande variedade de links e categorias de conteúdo em um layout estruturado e fácil de navegar.

Isso pode melhorar muito a experiência de navegação dos visitantes, tornando a navegação do seu site mais intuitiva e acessível.

No WPBeginner, usamos um mega menu para exibir nossos links mais importantes na parte superior da página. Quando os usuários clicam nele, um menu suspenso é aberto, revelando links adicionais importantes. Essa configuração nos permitiu criar um menu de navegação limpo e organizado, apresentando uma ampla gama de opções sem deixar a página com aparência desordenada.

Neste artigo, mostraremos como adicionar facilmente um mega menu ao seu site WordPress, passo a passo.

Por que adicionar um Mega Menu no seu site WordPress?

O WordPress vem com um construtor de arrastar e soltar que você pode usar para criar todos os tipos de menus, incluindo menus suspensos, menus de cabeçalho e muito mais. Existem até plugins que permitem criar menus de navegação personalizados em temas do WordPress.

No entanto, se o seu site tiver muito conteúdo, você pode precisar criar um mega menu em vez disso. Isso permite que você adicione menus suspensos de várias colunas à estrutura padrão do menu do WordPress.

Você pode usar mega menus para organizar seu conteúdo sob diferentes títulos e subtítulos, para que os visitantes possam encontrar rapidamente o que procuram. Por exemplo, se você criar um marketplace online, você pode organizar todas as suas categorias e subcategorias de produtos em um mega menu.

Mega menus também podem exibir conteúdo rico para seus visitantes, como vídeos, texto, pesquisa e posts recentes.

Você também pode adicionar imagens, que tornam os mega menus mais fáceis de escanear.

Dito isso, vamos ver como você pode facilmente adicionar um mega menu ao seu site WordPress.

Como Criar um Mega Menu para o Seu Site WordPress

A maneira mais fácil de adicionar um mega menu ao seu site WordPress é usando Max Mega Menu. Este plugin permite que você adicione conteúdo rico aos seus mega menus, incluindo vídeos, galerias de imagens, pesquisa e muito mais.

Dessa forma, você pode criar menus mais envolventes e úteis.

Você também pode alterar o estilo do menu adicionando cores diferentes, alterando o tamanho da fonte e usando ícones diferentes.

Primeiro, você precisará instalar e ativar o plugin. Se precisar de ajuda, consulte nosso guia sobre como instalar um plugin do WordPress.

Habilitar Mega Menus no Seu Site WordPress

Após a ativação, vá para a página Mega Menu » Localizações do Menu no painel do WordPress para ver todas as diferentes áreas onde você pode adicionar um mega menu.

Você pode ver opções diferentes dependendo do seu tema WordPress.

Para começar, você precisará habilitar os mega menus em todas as localizações onde deseja usá-los.

Para fazer isso, basta clicar para expandir uma localização e, em seguida, marcar a caixa 'Habilitado'.

Depois disso, você pode alterar o 'Evento' que acionará o mega menu.

A configuração padrão é 'Intenção de passar o mouse', o que significa que o visitante deve passar o mouse sobre o mega menu por alguns segundos para acioná-lo. Isso funciona bem para a maioria dos sites WordPress, mas você também pode abrir o menu suspenso 'Efeito' e escolher 'Passar o mouse' ou 'Clicar' em vez disso.

Se você escolher ‘Clique’, o visitante precisará clicar para explorar o mega menu. Isso pode ser útil se você estiver preocupado que os visitantes possam acionar o menu por acidente, o que pode ser frustrante.

Enquanto isso, ‘Passar o mouse’ abrirá seu mega menu assim que o visitante mover o mouse sobre ele. Isso pode incentivar os visitantes a explorar diferentes áreas do seu site, então você pode querer usar ‘Passar o mouse’ em páginas de destino ou na página inicial do seu site.

Após tomar essa decisão, você pode alterar como o menu abre usando as configurações de ‘Efeito’.

O Max Mega Menu tem diferentes animações que você pode experimentar, incluindo fade e slide up. Você também pode alterar a velocidade da animação. Ao experimentar diferentes animações, você pode criar um mega menu que chame a atenção do visitante.

Se você não quiser usar nenhuma animação, basta abrir o primeiro dropdown e selecionar ‘Nenhum’.

Por padrão, o Mega Menu não usa animações em dispositivos móveis, pois smartphones e tablets geralmente têm menos poder de processamento. No entanto, se você quiser criar uma animação exclusiva para visitantes móveis, poderá usar as configurações na área ‘Efeito (Mobile)’.

Se você quiser testar seus mega menus em dispositivos móveis, confira nosso guia sobre como visualizar a versão móvel de sites WordPress a partir de um desktop.

Se você escolheu ‘Clique’ no menu suspenso ‘Evento’, certifique-se de selecionar a guia ‘Avançado’ em seguida.

Aqui, você pode usar o ‘Comportamento do Evento de Clique’ para definir o que acontece quando o visitante clica no seu mega menu. Por exemplo, o segundo clique pode fechar o menu ou abrir um novo link.

Existem mais configurações que você pode verificar, mas isso deve ser suficiente para a maioria dos blogs e sites WordPress.

Quando estiver satisfeito com a configuração do plugin, clique em ‘Salvar Alterações’.

Para habilitar mega menus em mais locais, basta seguir o mesmo processo descrito acima.

Personalize a Aparência dos Mega Menus no Seu Site

O próximo passo é configurar a aparência dos mega menus no seu site.

Você pode fazer isso selecionando a guia ‘Temas de Menu’ à esquerda da tela.

Nesta tela, você pode alterar a direção dos ícones de seta, usar uma altura de linha diferente, adicionar uma sombra e muito mais.

Quando estiver satisfeito com suas configurações, não se esqueça de clicar em ‘Salvar Alterações’.

Se você quiser remover essas alterações a qualquer momento, basta marcar a caixa ‘Redefinir Estilo do Widget’ e, em seguida, clicar em ‘Salvar Alterações’.

Em seguida, você pode personalizar a barra de menu, que é a barra que os visitantes veem quando o menu está em seu estado padrão e recolhido.

Para fazer essas alterações, clique na aba ‘Barra de Menu’ e, em seguida, use as configurações para alterar a cor de fundo, o preenchimento, o raio da borda e mais.

Você pode até criar um gradiente de cor selecionando duas cores diferentes na seção ‘Fundo do Menu’.

Se você rolar para baixo, poderá alterar a aparência do menu de nível superior.

Esta é a primeira linha de itens, que fica visível quando o mega menu está em seu estado recolhido.

Como eles são tão importantes, você pode querer destacar os itens do menu de nível superior.

Por exemplo, na imagem a seguir, estamos usando uma cor de fundo diferente.

Na seção ‘Estado de Destaque’ (Hover State), você pode destacar o item de menu de nível superior atualmente selecionado.

Por exemplo, na imagem a seguir, estamos usando um efeito de sublinhado.

Isso pode ajudar o visitante a ver onde ele está no menu, o que o torna particularmente útil para sites que precisam ter mega menus grandes.

Se você adicionar um estado de destaque, role até o final da tela e marque a caixa ‘Destacar Item Atual’.

Depois disso, você pode alterar a aparência do submenu.

Este é o menu que aparece sob um pai de nível superior, como você pode ver na imagem a seguir.

Para personalizar o submenu, clique na aba ‘Mega Menus’.

Agora você pode usar essas configurações para alterar a cor de fundo do submenu, aumentar o raio para criar cantos arredondados, adicionar preenchimento e mais.

Você adiciona conteúdo aos seus mega menus usando widgets. Por exemplo, você pode adicionar um widget de Galeria e exibir seus produtos WooCommerce mais populares, ou incorporar uma nuvem de tags dentro do mega menu. Esses widgets podem fornecer informações extras ou incentivar os visitantes a clicar em determinados itens do menu.

Você pode personalizar a aparência desses widgets rolando até a seção ‘Widgets’. Por exemplo, você pode alterar a cor do título do widget, aumentar o tamanho da fonte, adicionar preenchimento e ajustar o alinhamento.

Nesta tela, você também pode personalizar como os itens do menu de segundo nível e os itens do menu de terceiro nível aparecerão em seu site, blog ou marketplace online. Estes são os filhos dos itens do menu de nível superior.

Ao construir seus menus, é possível adicionar quatro ou até mais níveis para criar um mega menu aninhado. Se você fizer isso, o WordPress simplesmente usará a estilização de terceiro nível para todos os níveis subsequentes.

Você pode ver isso em ação na imagem a seguir. O segundo nível tem texto vermelho, e tanto o terceiro quanto o quarto níveis usam o mesmo texto azul.

Quando estiver satisfeito com a configuração do menu, não se esqueça de clicar em 'Salvar Alterações'.

Como Adicionar um Mega Menu ao Seu Site WordPress

Depois de personalizar o mega menu, é hora de adicioná-lo ao seu site.

Simplesmente vá para a página Aparência » Menus na barra lateral de administração.

Se você quiser transformar um menu existente em um mega menu, abra o menu suspenso 'Selecionar um menu para editar' e escolha-o na lista. Apenas esteja ciente de que o menu que você escolher deve ser atribuído a um local onde você habilitou o recurso de mega menu.

Se você quiser começar do zero, clique em 'Criar um novo menu' e, em seguida, digite um título para o seu novo mega menu.

Você pode então selecionar o local que deseja usar e clicar em 'Criar Menu'. Mais uma vez, este deve ser um local onde você habilitou mega menus.

Adicionar Conteúdo ao Seu Menu WordPress

Depois disso, adicione todas as páginas, posts, produtos WooCommerce e qualquer outro conteúdo que você queira incluir no mega menu.

Para instruções passo a passo, consulte nosso guia para iniciantes sobre como adicionar um menu de navegação no WordPress.

Em seguida, você precisará organizar seus itens nos pais e submenus que deseja usar no mega menu. Para criar um submenu, arraste um item para baixo do pai e, em seguida, arraste-o ligeiramente para a direita antes de soltá-lo.

Para criar vários níveis, basta continuar arrastando os itens para a direita para que apareçam recuados um abaixo do outro. Isso é semelhante a criar um menu suspenso no WordPress.

Habilitar o Recurso Mega Menu

Quando terminar, clique para expandir as 'Configurações do Max Mega Menu' e marque a caixa ao lado de 'Habilitar'.

Nesta caixa, você também pode substituir as configurações padrão do mega menu. Isso permite que você crie mega menus exclusivos para diferentes áreas do seu site WordPress, portanto, prossiga e faça as alterações que desejar.

Depois disso, clique em ‘Save’.

Criar o Layout do Mega Menu

Agora, passe o mouse sobre o primeiro item de nível superior e você verá um novo botão 'Mega Menu'. Prossiga e clique no botão.

Agora você verá todas as configurações para este item de nível superior.

Por padrão, o Max Mega Menu usará o estilo flyout, onde os submenus 'saem' da lateral. Para criar um mega menu em vez disso, abra o menu suspenso 'Modo de exibição do submenu' e escolha 'Layout Padrão' ou 'Layout em Grade'.

O layout padrão mostra todos os submenus em colunas.

Enquanto isso, o layout em grade permite que você organize os itens do submenu em colunas e linhas.

Isso é ideal se você quiser mostrar muito conteúdo, como todos os produtos digitais em sua loja online, ou tiver um layout muito específico em mente.

Após selecionar o layout padrão ou em grade, você verá todos os submenus atribuídos a este pai.

Agora, você pode prosseguir e alterar como esses itens são organizados no mega menu.

Se você estiver usando o layout padrão, poderá alterar o número de colunas usando o menu suspenso no canto superior direito.

Se você estiver usando um layout de grade, poderá adicionar colunas e linhas usando os botões ‘+Coluna’ e ‘+Linha’.

Quando estiver satisfeito com o layout, você pode organizar os itens do submenu em diferentes colunas e linhas usando arrastar e soltar.

Depois disso, é hora de alterar o espaço que cada item ocupa na coluna. O Max Mega Menu mostra o tamanho atual como uma fração da largura total disponível.

Por exemplo, na imagem a seguir, ambas as colunas ocupam metade do espaço disponível.

Para alterar o tamanho de um item, basta clicar em seus botões de seta para tornar a fração maior ou menor.

Crie um Mega Menu Amigável para Dispositivos Móveis (Somente Layout de Grade)

Por padrão, o Max Mega Menu exibirá o mesmo conteúdo em dispositivos desktop e móveis. Isso pode ser um problema com layouts de grade, pois smartphones e tablets geralmente têm telas menores, e a rolagem horizontal pode ser difícil.

Se você estiver usando o layout de grade, poderá criar mega menus diferentes para dispositivos móveis. Por exemplo, você pode usar menos colunas para que os usuários não precisem rolar horizontalmente. Dessa forma, você pode criar um menu WordPress pronto para dispositivos móveis.

Você pode ocultar colunas ou linhas inteiras usando o ícone 'Oculto em dispositivos móveis', que se parece com um pequeno telefone celular.

Simplesmente ative e desative o ícone para ocultar e mostrar conteúdo diferente em desktop e dispositivos móveis.

Adicione Conteúdo Rico com Widgets de Mega Menu

Com isso feito, você pode começar a adicionar widgets ao mega menu. Isso permite que você exiba conteúdo extra no submenu, como comentários recentes, vídeos, galerias e muito mais.

Por exemplo, você pode usar imagens para promover uma promoção em sua loja online ou destacar seus produtos mais recentes.

Para adicionar um widget, basta clicar para abrir o menu suspenso 'Selecionar um widget...'.

Agora você pode escolher um widget na lista.

O WordPress adicionará o widget a uma coluna ou linha automaticamente, mas você pode movê-lo para um novo local usando arrastar e soltar.

Para configurar o widget, clique no ícone de chave inglesa.

Isso abre um pop-up onde você pode adicionar conteúdo ao widget e alterar suas configurações.

Você verá opções diferentes dependendo do tipo de widget que você está criando. Por exemplo, se você adicionar um widget de player de áudio/música ao mega menu, então você verá configurações onde pode fazer upload de uma faixa de áudio.

Todos os widgets têm um campo 'Título' onde você pode adicionar texto que aparecerá acima do widget.

Quando terminar, clique em 'Salvar' para armazenar suas alterações e depois selecione 'Fechar'. Para adicionar mais widgets ao mega menu, simplesmente siga o mesmo processo descrito acima.

Revisar as Configurações Padrão do Mega Menu

Em seguida, basta clicar na aba 'Configurações'.

Aqui, você pode usar caixas de seleção para ocultar ou mostrar diferentes conteúdos no submenu.

Você também pode ocultar ou mostrar o submenu em dispositivos móveis e desktops, e alterar o alinhamento para que o submenu abra à esquerda ou à direita do pai de nível superior.

Se você fizer alguma alteração nas configurações padrão, não se esqueça de clicar em 'Salvar Alterações'.

Adicionar Ícones de Imagem ao Mega Menu do WordPress

Ícones de imagem ajudam os visitantes a entender do que se trata um item de menu, sem precisar ler o rótulo de navegação. Isso é particularmente útil para menus grandes onde um visitante pode preferir escanear o conteúdo rapidamente em vez de ler cada rótulo de navegação.

Você pode usar ícones para destacar o conteúdo mais importante. Por exemplo, você pode incentivar os visitantes a concluir a compra adicionando um ícone de carrinho ao menu 'Checkout'.

Para adicionar ícones de imagem ao seu menu de navegação, clique na aba 'Ícone'.

Agora você pode escolher qualquer ícone de traço da biblioteca integrada ou usar sua própria imagem. Se você atualizar para o Max Mega Menu Pro, então você também terá acesso a outras fontes de ícones, Genericons e FontAwesome.

Finalize a Configuração do Mega Menu no Seu Site WordPress

Após percorrer todas essas configurações, você pode fechar a janela pop-up para retornar à página principal Aparência » Menus.

Agora você pode repetir este processo para cada pai de nível superior.

Quando estiver satisfeito com a configuração do mega menu, clique no botão Salvar Menu para torná-lo ativo.

Agora, simplesmente visite a parte frontal do seu site para ver o mega menu em ação.

Esperamos que este artigo tenha ajudado você a aprender como adicionar um mega menu no seu site WordPress. Você também pode conferir nosso guia passo a passo sobre como adicionar um botão no menu do cabeçalho do seu WordPress e nosso tutorial sobre como criar um menu de navegação flutuante fixo no WordPress.

Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.