Como adicionar um mega menu em seu site WordPress (passo a passo)

Os megamenus permitem que você exiba uma ampla 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 outros links importantes. Essa configuração nos permitiu criar um menu de navegação limpo e organizado, apresentando uma ampla gama de opções sem fazer com que a página pareça desordenada.

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

Por que adicionar um Mega Menu em seu site WordPress?

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

No entanto, se o seu site tiver muito conteúdo, talvez seja necessário criar um mega menu. Isso permite que você adicione menus suspensos de várias colunas à estrutura de menu padrão do WordPress.

Você pode usar os mega menus para organizar o conteúdo em diferentes títulos e subtítulos, para que os visitantes possam encontrar rapidamente o que estão procurando. Por exemplo, se você criar um mercado on-line, poderá organizar todas as suas categorias e subcategorias de produtos em um mega menu.

Os mega menus também podem exibir conteúdo avançado para seus visitantes, como vídeos, texto, pesquisa e postagens recentes.

Você também pode adicionar imagens, o que facilita a leitura dos mega menus.

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

Como criar um mega menu para seu site WordPress

A maneira mais fácil de adicionar um mega menu ao seu site WordPress é usar o Max Mega Menu. Esse plug-in permite que você adicione conteúdo avançado aos seus megamenus, 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 plug-in. Se precisar de ajuda, consulte nosso guia sobre como instalar um plug-in do WordPress.

Habilite os mega menus em seu site WordPress

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

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

Para começar, você precisará ativar os mega menus em todos os locais em que deseja usá-los.

Para fazer isso, basta clicar para expandir um local e marcar a caixa “Ativado”.

Depois disso, você pode alterar o “Evento” que abrirá o mega menu.

A configuração padrão é “Hover intent”, o que significa que o visitante deve passar o mouse sobre o mega menu por alguns segundos para ativá-lo. Isso funciona bem para a maioria dos sites do WordPress, mas você também pode abrir o menu suspenso “Effect” e escolher “Hover” ou “Click”.

Se você escolher “Click”, o visitante precisará clicar para explorar o mega menu. Isso pode ser útil se você estiver preocupado com a possibilidade de os visitantes acionarem o menu por acidente, o que pode ser frustrante.

Enquanto isso, o “Hover” abrirá o mega menu assim que o visitante passar o mouse sobre ele. Isso pode incentivar os visitantes a explorar diferentes áreas do seu site, portanto, talvez você queira usar o “Hover” em páginas de destino ou na página inicial do seu site.

Depois de tomar essa decisão, você pode alterar a forma como o menu é aberto 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 menu suspenso e selecionar “None” (Nenhuma).

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

Se quiser testar seus mega menus no celular, confira nosso guia sobre como visualizar a versão móvel dos sites do WordPress em um desktop.

Se você escolheu “Click” (Clique) no menu suspenso “Event” (Evento), certifique-se de selecionar a guia “Advanced” (Avançado) em seguida.

Aqui, você pode usar o “Click Event Behavior” 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.

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

Quando estiver satisfeito com a configuração do plug-in, clique em “Save Changes” (Salvar alterações).

Para ativar os mega menus para mais locais, basta seguir o mesmo processo descrito acima.

Personalize a aparência dos mega menus em seu site

A próxima etapa é configurar a aparência dos mega menus em seu site.

Isso pode ser feito selecionando a guia “Menu Themes” à esquerda da tela.

Nessa 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 “Save Changes” (Salvar alterações).

Se você quiser remover essas alterações em qualquer momento, basta marcar a caixa “Reset Widget Styling” (Redefinir estilo do widget) e clicar em “Save Changes” (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, recolhido.

Para fazer essas alterações, clique na guia “Menu Bar” e use as configurações para alterar a cor do plano de fundo, o preenchimento, o raio da borda e muito mais.

É possível até mesmo criar um gradiente de cores selecionando duas cores diferentes na seção “Menu Background” (Plano de fundo do menu).

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

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

Como eles são muito importantes, talvez você queira 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 “Hover State”, é possível destacar o item de menu de nível superior selecionado no momento.

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 foco, role até a parte inferior da tela e marque a caixa “Highlight Current Item” (Destacar item atual).

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

Esse é 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 guia “Mega Menus”.

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

Você adiciona conteúdo aos seus mega menus usando widgets. Por exemplo, você pode adicionar um widget Gallery e exibir seus produtos mais populares do WooCommerce, ou incorporar uma nuvem de tags dentro do mega menu. Esses widgets podem fornecer informações adicionais 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.

Nessa tela, você também pode personalizar a aparência dos itens de menu de segundo nível e dos itens de menu de terceiro nível no seu site, blog ou mercado on-line. Esses são os filhos dos itens de menu de nível superior.

Ao criar seus menus, é possível adicionar quatro ou mais níveis para criar um mega menu aninhado. Se você fizer isso, o WordPress simplesmente usará o estilo do 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 o terceiro e o quarto níveis usam o mesmo texto azul.

Quando você estiver satisfeito com a configuração do menu, não se esqueça de clicar em “Save Changes” (Salvar alterações).

Como adicionar um mega menu em seu site WordPress

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

Basta acessar a página Appearance ” Menus na barra lateral do administrador.

Se você quiser transformar um menu existente em um megamenu, abra o menu suspenso “Select a menu to edit” (Selecionar um menu para editar) e escolha-o na lista. Lembre-se de que o menu escolhido deve ser atribuído a um local em que você tenha ativado o recurso de mega menu.

Se você quiser começar do zero, clique em “Create a new menu” (Criar um novo menu) e digite um título para o seu novo megamenu.

Em seguida, você pode selecionar o local que deseja usar e clicar em “Criar menu”. Mais uma vez, esse deve ser um local em que você ativou os mega menus.

Adicionar conteúdo ao seu menu do WordPress

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

Para obter 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 os itens em pais e submenus que deseja usar no megamenu. Para criar um submenu, arraste um item abaixo 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 eles apareçam recuados um abaixo do outro. Isso é semelhante à criação de um menu suspenso no WordPress.

Ativar o recurso Mega Menu

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

Nessa 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, vá em frente e faça as alterações que desejar.

Depois disso, clique em “Salvar”.

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”. Vá em frente e clique no botão.

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

Por padrão, o Max Mega Menu usará o estilo flyout, em que os submenus “saem” pela lateral. Para criar um mega menu, abra o menu suspenso “Modo de exibição do submenu” e escolha “Layout padrão” ou “Layout de grade”.

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

Enquanto isso, o layout de 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 da sua loja on-line, ou se tiver um layout muito específico em mente.

Depois de selecionar o layout padrão ou de grade, você verá todos os submenus atribuídos a esse pai.

Agora, você pode ir em frente e alterar a forma como esses itens são organizados no mega menu.

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

Se estiver usando um layout de grade, você poderá adicionar colunas e linhas usando os botões “+Column” e “+Row”.

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

Depois disso, é hora de alterar a quantidade de 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 aumentar ou diminuir a fração.

Criar um mega menu compatível com dispositivos móveis (somente layout de grade)

Por padrão, o Max Mega Menu mostrará o mesmo conteúdo em dispositivos móveis e de desktop. Isso pode ser um problema com layouts de grade, pois os 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 tenham que 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 “Hidden on mobile”, que se parece com um pequeno telefone celular.

Basta ativar e desativar o ícone para ocultar e exibir conteúdo diferente no desktop e no celular.

Adicionar conteúdo avançado com widgets do Mega Menu

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

Por exemplo, você pode usar imagens para promover uma venda em sua loja on-line ou destacar seus produtos mais recentes.

Para adicionar um widget, basta clicar para abrir o menu suspenso ‘Select a widget….’.

Agora você pode escolher um widget da lista.

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

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

Isso abre uma janela pop-up na qual você pode adicionar conteúdo ao widget e alterar suas configurações.

Você verá diferentes opções, dependendo do tipo de widget que estiver criando. Por exemplo, se você adicionar um widget de reprodutor de música de áudio ao mega menu, verá configurações nas quais poderá carregar uma faixa de áudio.

Todos os widgets têm um campo “Title” (Título) onde você pode adicionar o texto que aparecerá acima do widget.

Quando terminar, clique em “Salvar” para armazenar suas alterações e selecione “Fechar”. Para adicionar mais widgets ao mega menu, basta seguir o mesmo processo descrito acima.

Revisar as configurações padrão do Mega Menu

Em seguida, basta clicar na guia “Settings” (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 seja aberto à 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 “Save Changes” (Salvar alterações).

Adicionar ícones de imagem ao Mega Menu do WordPress

Os ícones de imagem ajudam os visitantes a entender do que se trata um item de menu, mesmo sem precisar ler o rótulo de navegação. Isso é particularmente útil para menus grandes em que o visitante pode preferir examinar 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 guia “Icon” (Ícone).

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

Concluir a configuração do Mega Menu em seu site WordPress

Depois de passar por todas essas configurações, você pode fechar a janela pop-up para retornar à página principal Appearance ” Menus.

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

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

Agora, basta acessar o front-end de seu site para ver o mega menu em ação.

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

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