Como adicionar um mega menu ao WordPress (+5 melhores plugins)

Os menus desempenham um papel importante no design e na funcionalidade do seu site. Eles ajudam os visitantes a navegar entre suas páginas e podem melhorar a usabilidade geral. Ainda assim, quando você tem muito conteúdo, descobrir como exibi-lo sem parecer lotado ou caótico pode ser um desafio.

É aí que entram os mega menus. Um mega menu WordPress pode dar ao seu site uma aparência mais profissional e ajudar as pessoas a encontrar o conteúdo que procuram com mais facilidade. Além disso, existem vários métodos que você pode usar para adicionar um ao seu site.

Neste post, explicaremos o que é um mega menu e os benefícios de usar um no WordPress. Em seguida, vamos orientá-lo através de suas opções para criar um e explorar cinco das melhores opções de plugins de mega menu.

O que é um mega menu no WordPress?

Seu menu WordPress é a estrutura que você usa para organizar e exibir as páginas do seu site. Geralmente fica no topo do site – embora também possa estar ao lado ou mostrado de outra forma única.

Para acessar o sistema de menus integrado, você pode começar fazendo login no seu site WordPress. Em seguida, no painel de administração, navegue até Aparência → Menus .

Por padrão, o WordPress usa menus padrão, que mostram uma lista de páginas, às vezes com menus suspensos de uma coluna. Não há informações ou conteúdos adicionais como imagens, descrições, etc. — é apenas uma série de listas. Normalmente é bastante simples e direto, mas limita você quando se trata do número de páginas ou volume ou informações que você pode incluir. Aqui está um exemplo do WooCommerce:

Um mega menu é um tipo de menu suspenso que permite aos usuários acessar uma grande quantidade de conteúdo em um só lugar. Mega menus são frequentemente usados ​​em sites de comércio eletrônico e estão se tornando cada vez mais populares em outros tipos também. Você pode ver um exemplo no site da Nalgene, que mostra fotos de produtos, controles deslizantes e outros conteúdos em um estilo mais horizontal:

A principal diferença é que um mega menu normalmente possui várias colunas de conteúdo, enquanto um menu suspenso tradicional possui apenas uma coluna. Isso permite um menu muito mais robusto e abrangente, o que pode ser especialmente útil em sites com muita informação.

Por que usar um mega menu no WordPress?

Um dos benefícios de usar um mega menu é que ele pode reduzir o número de cliques necessários para navegar até um determinado conteúdo. Isso é ótimo para visitantes que procuram algo específico em seu site, mas também melhora a experiência do usuário para visitantes de primeira viagem, ajudando-os a explorar seu site com mais eficiência.

Os mega menus também podem ser usados ​​para melhorar a aparência do seu site e até mesmo promover conteúdo específico ou incentivar as ações que você deseja que os visitantes realizem. Além disso, eles são altamente personalizáveis ​​- para que possam aproveitar o resto da sua marca para fornecer uma experiência perfeita e visualmente atraente.

Como criar um mega menu WordPress

Existem algumas maneiras diferentes de criar um mega menu no WordPress. Uma opção é fazê-lo manualmente, adicionando código personalizado. A outra opção (mais rápida e fácil) é usar um plugin. Vamos dar uma olhada em como adicionar um mega menu ao WordPress usando esses dois métodos.

Criando um mega menu manualmente (sem plugin)

Se você se sente à vontade para trabalhar com os arquivos do seu site, essa pode ser uma boa opção para criar algo altamente exclusivo.

Antes de fazer isso, é importante fazer backup do seu site WordPress. Você também pode considerar a criação de um site de teste para construir e testar seu mega menu antes de colocá-lo ao vivo. Isso ajudará você a evitar problemas que interrompam a funcionalidade do seu site ativo.

Primeiro, navegue até Aparência → Menus no painel do WordPress e nomeie seu menu.

Clique no botão Criar Menu . Arraste e solte as páginas que deseja incluir no mega menu, recuando-as como submenus quando necessário.

Quando terminar, você pode selecionar Salvar Menu .

Em seguida, navegue até o Gerenciador de Arquivos do seu cPanel ou use um cliente FTP (File Transfer Protocol) para se conectar aos arquivos do seu site. Encontre a folha de estilo do seu tema indo para / wp-content → /themes → /your-theme-or-child-theme → /style.css . Na parte inferior, adicione a seguinte linha de código:

 .main-navigation ul:hover li ul, .main-navigation ul:hover li ul li ul { display: inherit; }

Isso fará com que seus itens de submenu apareçam quando alguém passar o mouse sobre um item de nível superior. Agora, personalizaremos o código para torná-lo um pouco mais visualmente atraente, garantindo que cada item de subnível seja exibido em largura total, com seções de itens aparecendo lado a lado. Adicione este código:

 .main-navigation { position: relative; } .main-navigation li { position: static; } .main-navigation ul li:hover ul { display: inherit; position: absolute; left: 0; right: 0; width: 100%; } .main-navigation ul li:hover ul li ul { display: inherit; position: relative; left: 0; } .main-navigation ul li:hover ul li { float: left; position: static; display: block; padding-top: 1em; } .main-navigation ul li:hover ul li ul li { float: none; padding-top: 0; }

Você pode então brincar com o estilo para deixá-lo do jeito que você quer, de acordo com sua marca e o resto do seu site. Por exemplo, você pode querer mudar a cor de fundo do seu mega menu ou negrito certos itens. Você também pode ajustar o espaçamento das colunas ou adicionar elementos extras, como fotos. Se você é um desenvolvedor ou tem um grau de experiência em código, pode criar seu mega menu para ter a aparência que quiser!

Quer um guia mais aprofundado? Tuts+ oferece um passo a passo completo.

Outra opção para criar um mega menu sem um plugin é verificar as opções internas do seu tema. Alguns, como o tema Hestia, incluem opções de mega menu por padrão. Isso nem sempre é o caso, no entanto.

Criando um mega menu com um plugin WordPress

Se você não se sente à vontade para editar os arquivos do seu site ou o seu tema não oferece opções de mega menu embutidas, outro método que você pode usar para criar um mega menu no WordPress é com um plugin. Há muitas opções disponíveis, que discutiremos na próxima seção.

Embora esta seja uma opção mais segura do que criar um manualmente, você ainda deve fazer backup do seu site WordPress antes de fazer qualquer alteração.

Os recursos e funcionalidades específicos do plug-in variam dependendo de qual ferramenta você decidir usar. Mas no geral, o conceito será o mesmo.

Usaremos o Max Mega Menu como exemplo. Para começar, você pode instalar e ativar o plugin em seu site WordPress.

Em seguida, você precisará habilitar a funcionalidade do mega menu navegando até Aparência → Menus . Você pode escolher o local desejado para o seu menu e clicar na caixa ao lado de Ativar.

Salve suas alterações quando terminar. Para personalizar a aparência e as configurações do seu mega menu, você pode ir para Mega Menu → Menu Themes .

Aqui, você encontrará uma variedade de opções para estilizar o menu. Você pode modificar o tipo de menu, bem como sua aparência e funcionalidade.

Cinco melhores plugins de mega menu do WordPress

Se você decidir usar um plugin WordPress de mega menu, há muitas opções para escolher. Ao pesquisá-los, é importante considerar os recursos específicos que você está procurando, bem como seu orçamento. Com isso em mente, vamos dar uma olhada detalhada em cinco dos melhores plugins de mega menu do WordPress.

1. Mega Menu Máximo

Max Mega Menu é um plugin incrivelmente popular que permite adicionar facilmente menus personalizáveis ​​de alta qualidade ao seu site WordPress. Inclui um construtor de arrastar e soltar que é fácil de usar. Ele também suporta vários mega menus para vários locais em seu site.

Principais recursos do Max Mega Menu:

• Vários locais de menu configuráveis ​​individualmente
• Um construtor de layout de grade
• Opções de foco e transição do menu
• Um construtor de arrastar e soltar
• Códigos de acesso
• Ícones de itens de menu
• Uma caixa de pesquisa
• Logotipos de menu

Prós do Max Mega Menu:

• Existem opções gratuitas e premium disponíveis.
• É leve, com código limpo.
• Inclui suporte para WooCommerce e Easy Digital Downloads.
• Você pode colocar mega menus em vários locais.
• Os widgets permitem adicionar mapas, formulários de contato e muito mais.
• Você também pode criar mega menus do zero ou usar seus menus existentes.
• A navegação pelo teclado melhora a acessibilidade.

Contras do Max Mega Menu:

• As opções avançadas de personalização estão disponíveis apenas com uma licença profissional.
• Não há avaliação gratuita para planos premium.

Facilidade de uso :

Max Mega Menu é muito fácil de usar. Converte automaticamente menus existentes em mega menus. Ele tem uma interface amigável que é simples de navegar. Uma licença pro também inclui atualizações e suporte prioritário.

Preço :

Max Mega Menu oferece uma versão gratuita com opções de personalização limitadas. Os planos Pro com recursos avançados começam em US$ 29 para uma licença de site único. Isso também inclui um ano de suporte.

2. QuadMenu

QuadMenu é outro plugin de mega menu popular que é fácil de usar, independentemente do seu nível de experiência. A ferramenta flexível inclui um construtor intuitivo de arrastar e soltar e uma ampla variedade de opções de estilo e personalização para criar menus e submenus para WordPress.

Principais recursos do QuadMenu :

• Um construtor de arrastar e soltar
• Vários locais de menu
• Menus fora da tela, fixos e verticais
• Opções para alinhar links
• Menus suspensos flutuantes
• Font Awesome ícones e Google Fonts
• Animações suspensas
• Uma variedade de filtros
• Exibir widgets

Prós do QuadMenu:

• Há uma versão gratuita e premium.
• É adequado para iniciantes e desenvolvedores.
• Ele suporta temas filhos.
• Há integração de menu automática e manual.
• É intuitivo e fácil de usar.
• Existem menus de guia e carrossel disponíveis com a versão pro.

Contras do QuadMenu:

• Opções avançadas de estilo exigem uma licença profissional.
• Existem opções limitadas de visualização ao vivo.

Facilidade de uso :

QuadMenu é adequado para iniciantes e desenvolvedores. O construtor de arrastar e soltar torna a criação e personalização de seus mega menus rápidos e fáceis.

Preços:

QuadMenu tem uma versão gratuita. As licenças Pro estão disponíveis a partir de US$ 30 para um único site.

3. Menu Uber

Se você está procurando um mega construtor de menus premium, vale a pena conferir o UberMenu. Essa ferramenta poderosa e rica em recursos usa um sofisticado sistema de grade que permite criar rapidamente um mega menu com aparência profissional.

Principais recursos do UberMenu :

• Um sistema de grade exclusivo
• Mais de 50 configurações de estilo
• Geração dinâmica de itens
• Submenus baseados em postagens, categorias e muito mais
• A opção de adicionar guias nos menus
• Menus habilitados para toque
• Transições CSS3 suspensas
• Vários gatilhos de menu (passar o mouse, passar o mouse e clicar)
• Vários locais de menu
• Layouts flexíveis

Prós do UberMenu :

• É amplamente utilizado e altamente avaliado entre os proprietários de sites WordPress.
• Existem opções para adicionar HTML personalizado, códigos de acesso e widgets.
• Ele usa a interface nativa do WordPress Customizer.
• Existem temas de menu ilimitados.

Contras do UberMenu :

• Há apenas uma versão premium disponível.
• Dependendo do seu tema, pode não ser a melhor opção se você não tiver habilidades de programação CSS/PHP.

Facilidade de uso :

Usar o UberMenu provavelmente será fácil para usuários experientes do WordPress, porque a interface é construída no personalizador nativo. Você pode visualizar visualizações em tempo real do seu menu à medida que o cria. Para iniciantes do WordPress, no entanto, isso pode ser mais difícil de navegar do que uma interface intuitiva do construtor de arrastar e soltar.

Preço :

Uma licença UberMenu para um único site custa US$ 26. Isso inclui seis meses de suporte ao desenvolvedor.

4. Kit de Elementos

Se você estiver familiarizado e usar o construtor de páginas Elementor, o ElementsKit é um excelente plugin de mega menu a ser considerado. A ferramenta inclui uma ampla biblioteca de módulos personalizados, com um construtor de cabeçalho e rodapé.

Principais recursos do ElementsKit :

• Uma interface de conteúdo ao vivo
• Uma biblioteca de módulos personalizados
• Um construtor de cabeçalho e rodapé
• Rolagem de paralaxe
• Mais de 200 modelos de página pré-projetados
• Um widget de contagem regressiva
• Animações suspensas
• Menus fora da tela, fixos e verticais
• Ícones incríveis de fonte
• Temas claros e escuros
• Dois layouts de menu móvel
• CSS customizado

Prós do ElementsKit :

• Ele se integra totalmente ao construtor de páginas Elementor.
• Inclui a funcionalidade de arrastar e soltar.
• É iniciante e fácil de usar.
• Possui personalizações para cores de texto de ícones e crachás.
• Possui recursos internos do WooCommerce.
• Oferece opções avançadas de mega menu.

Contras do ElementsKit :

• Não é ideal, a menos que você use o construtor de páginas Elementor.
• Pode ser esmagador se você estiver procurando apenas por uma ferramenta de mega construtor de menus.

Facilidade de uso :

ElementKits é uma ferramenta simples e versátil. Se você não estiver familiarizado com o Elementor, a interface pode levar algum tempo para se acostumar. Embora, se você já usa o plug-in do construtor de páginas, provavelmente pegará o jeito desse complemento em pouco tempo.

Preço :

ElementsKit oferece uma versão gratuita. As licenças premium começam em US$ 39 por ano para um único site.

5. Megamenu WP

Se você está procurando uma ferramenta freemium simples e direta para construir mega menus no WordPress, o WP Mega Menu é outra opção sólida. Este plugin é fácil de usar e fornece todos os recursos básicos e funções necessárias para construir um mega menu de qualidade para uma ampla variedade de sites. Para uma ferramenta gratuita, ele também vem com um impressionante conjunto de opções de personalização e estilo.

Principais recursos do WP Mega Menu :

• Navegação intuitiva
• Uma interface de arrastar e soltar
• A opção de criar e salvar temas de menu
• Logo, barra de pesquisa e imagens de fundo
• Ícones do Google Fonts e Font Awesome
• Ícones sociais
• Rotulagem do menu

Prós do WP Mega Menu :

• É totalmente gratuito para baixar e usar, com uma atualização profissional disponível.
• É fácil de navegar e usar.
• Possui recursos que outros plugins incluem apenas nas versões premium.
• Ele tem a opção de criar e salvar temas de menu para usar em vários sites.

Contras do WP Mega Menu :

• Faltam ferramentas projetadas para desenvolvedores em comparação com outras opções de plugins.
• Não há opções pegajosas ou fora da tela com a versão gratuita.

Facilidade de uso :

WP Mega Menu é um plugin amigável para iniciantes com muitas opções. Ele vem com uma interface intuitiva que é fácil de entender e navegar.

Preço :

WP Mega Menu é gratuito. Mas também oferece planos Premium a partir de US$ 29 por ano para uma única licença.

Comparação dos principais plugins de mega menu para WordPress

Perguntas frequentes (FAQs) sobre mega menus

Neste ponto, esperamos que você tenha uma sólida compreensão de como criar e adicionar um mega menu no WordPress. Mas vamos ter um momento para encerrar com algumas perguntas frequentes (FAQs).

Posso adicionar imagens e ícones a um mega menu do WordPress?

Sim, você pode adicionar imagens e ícones a um mega menu do WordPress. Alguns plugins vêm com suporte embutido para isso. Alternativamente, você também pode adicionar imagens e ícones editando o código do seu site.

Posso adicionar um mega menu à minha barra lateral do WordPress?

Sim, você pode adicionar um mega menu à sua barra lateral do WordPress. Existem alguns plugins diferentes que você pode usar para adicionar um mega menu à sua barra lateral. A maioria dos plugins que permitem exibir menus como widgets também permitem adicioná-los à barra lateral.

Comece a personalizar seus menus do WordPress

Os menus desempenham um papel essencial no design e na funcionalidade do seu site, pois podem ser usados ​​para melhorar a aparência de qualquer site. Portanto, se você tiver um grande site WordPress com muito conteúdo e páginas, considere adicionar um mega menu.

Como discutimos neste post, existem três métodos principais que você pode usar para criar um mega menu no WordPress. Uma delas é usar as opções do seu tema para adicionar um mega menu. A segunda é codificar um manualmente. Se nenhum deles for possível, ou se você quiser apenas economizar algum tempo, experimente um plugin de mega menu como Max Mega Menu, QuadMenu ou ElementsKit.

Deseja melhorar ainda mais o desempenho do seu site WordPress? Além de fornecer backups fáceis e automáticos e outros recursos de segurança do WordPress, o Jetpack pode ajudar a aumentar a velocidade e o UX do seu site!