Como adicionar Mega Menu no site WordPress?

Você pode criar um menu de cabeçalho no WordPress para mostrar qualquer postagem, página, categoria ou link personalizado. Também é possível usar o widget “Menu de navegação” para mostrar uma lista de links em qualquer lugar do seu site. Por padrão, você pode mostrar os links como itens de submenu em uma única coluna que aparece como um menu suspenso. Um mega menu é um menu suspenso maior do que o normal que permite exibir muito mais informações do que um menu suspenso padrão. Mega menus permitem que você inclua menus suspensos de várias colunas com mídia avançada, como imagens e vídeos, em sua navegação. Neste artigo, vamos explorar como adicionar megamenu no site WordPress.

Exemplo de Mega Menu

Mega menus são usados ​​por sites populares para oferecer menus de navegação interativos e altamente envolventes. O site da CNET é um excelente exemplo de site com mega menu. Você pode passar o mouse sobre diferentes itens de menu para revelar mega itens de menu organizados em categorias.

Nesta forma bidimensional de layout de menu, todos os tópicos relacionados são divididos em seções para uma navegação mais direta, vertical ou horizontalmente.

Benefícios de usar Mega Menu

Comparado a um menu suspenso simples, o megamenu tem as seguintes vantagens.

• Mega menus são uma forma amigável de chamar a atenção para materiais mais profundos em seu site. É especialmente útil para sites que têm muito conteúdo e os proprietários de sites podem exibir widgets adicionais em seu menu superior.
• Eles são uma ótima estratégia de design para ajustar muitas opções ou revelar páginas da web de nível inferior em um piscar de olhos.
• Mega menus fornecem aos usuários uma experiência de navegação no site mais detalhada e bem organizada.
• Mega menus são uma excelente forma de apontar para partes do seu site que, de outra forma, seriam difíceis de encontrar.
• Você pode usar um mega menu para mostrar vários links de uma vez.

No entanto, nem todos os sites precisam de mega menus. Geralmente, sites como notícias, revistas e sites de grande escala com muitas categorias podem fazer uso do mega menu para mostrar seu conteúdo. Você também precisa tomar cuidado para que a tela seja ajustada de forma responsiva à largura em smartphones e tablets.

Adicionar Mega Menu no WordPress com Plugin

Existem vários plug-ins que você pode usar para adicionar Mega Menu no site WordPress. No entanto, o plug-in “Max Mega Menu” é um dos plug-ins mais populares que você pode usar. Ele vem com a versão gratuita e a versão premium. Felizmente, a versão gratuita é suficiente para criar um excelente menu para o seu site.

Menu de configuração e localizações com o plugin Max Mega Menu

Antes de começar a usar o plugin Max Mega Menu, crie um menu em seu site navegando até a seção “Aparência> Menus” no painel de administração. Mais tarde, você pode converter este menu normal em um mega menu com a ajuda do plugin. Quando terminar, vá para a seção “Plugins> Adicionar Novo”, instale e ative o plugin Max Mega Menu conforme mostrado abaixo.

O plugin irá adicionar um novo item de menu na barra lateral chamado - Mega Menu. Clique neste menu para definir o local onde deseja adicionar o mega menu. Uma janela aparecerá mostrando os diferentes locais do menu fornecidos pelo seu tema. Selecione um local onde deseja colocar o mega menu. Conforme mencionado, você já deve ter um menu disponível no local selecionado. No nosso caso, criamos um menu “primaryMenu” e definimos sua localização na “Barra Superior”. Portanto, nesta postagem, selecionaremos “Barra Superior” como o local de destino para nosso Mega Menu.

Observação: ao tentar adicionar o mega menu a um local sem menu definido, você verá uma mensagem de aviso “Atribua um menu a este local para usar essas opções”.

Depois de selecionar um local para o mega menu, navegue até a página “Menus” em “Aparência”. Você verá que o plugin Max Mega Menu adicionou um botão “Mega Menu” aos títulos do seu menu. Este botão só fica visível quando você passa o mouse sobre os itens do menu. Por exemplo, você pode ver este botão quando passamos o mouse sobre o item de menu “Home” conforme mostrado na imagem abaixo.

Criando um Mega Menu usando o plugin Max Mega Menu

Neste exemplo, iremos criar um mega menu no item de menu “Tecnologia”, que aparecerá em nossa localização “Barra Superior”. A imagem abaixo mostra nosso site antes de adicionar um mega menu.

Para começar, navegue até a seção “Aparência> Menus” e passe o mouse sobre o item de menu “Tecnologia”, conforme mostrado na imagem abaixo. Você verá um conjunto de opções para personalizar a aparência do seu mega menu na seção “Configurações do menu máximo do Mega”. Certifique-se de que a caixa “Ativar” esteja marcada e personalize o efeito de animação / tema / evento acionador. Clique em “Salvar” para aplicar suas alterações.

Ao clicar no botão “Mega menu”, aparecerá uma janela onde você poderá personalizar a aparência do Mega menu. Na “lista suspensa do modo de exibição de submenu”, selecione a opção “Mega Menu - Layout de grade”. Isso irá revelar os botões “Coluna” e “Linha”, como mostrado na imagem abaixo.

Vamos criar um mega menu composto por duas linhas e quatro colunas. Clique no botão “+ Linha” para criar linhas adicionais e no botão “+ Coluna” para criar mais colunas. A imagem de grade resultante é mostrada abaixo.

Agora, para adicionar itens ao nosso mega menu, usaremos os widgets fornecidos pelo nosso tema. No canto superior direito, você verá uma opção para selecionar um widget que deseja usar no seu mega menu, conforme mostrado na imagem abaixo.

Dica: Criar um Mega Menu a partir de itens de widget pode ser um pouco complicado, pois a maioria dos itens se destina à barra lateral ou ao rodapé. No entanto, existe um truque. Existem alguns widgets principais que você pode usar - Menu de navegação, imagem, HTML personalizado e categorias. Por exemplo, você pode criar vários menus, cada um contendo suas próprias páginas e adicioná-los ao mega menu usando o widget “Menu de navegação”. Da mesma forma, você pode inserir categorias usando o widget “Categorias”, se necessário. Para entender isso melhor, vamos entrar em ação.

Vamos criar quatro menus adicionais “menuONE, menuTWO, menuTHREE e menuFOUR” na seção “Appearance> Menus”. Cada menu contém diferentes postagens, páginas e links personalizados. Usaremos o widget “Menu de navegação” para importar esses menus para o nosso mega menu.

Em nossa janela de configuração do Mega Menu, arrastaremos o widget “Menu de Navegação” e colocá-lo nas células de nossa primeira linha. Em seguida, usaremos este widget para selecionar nossos menus 'menuONE, menuTWO, menuTHREE e menuFOUR' conforme mostrado na imagem abaixo e alterar os títulos.

Para aplicar as alterações, certifique-se de clicar no botão “Salvar Menu” na página “Menus”. Quando recarregamos o site, você pode ver que criamos com sucesso a primeira linha de nosso Mega Menu.

Vamos agora preencher as outras linhas do mega menu usando os vários widgets disponíveis. Usaremos widgets como Menu de Navegação, Imagem, HTML Personalizado, etc. O mega menu resultante se parece com o mostrado na imagem abaixo.

Você pode usar qualquer widget padrão ou personalizado e inserir o conteúdo no seu mega menu.

Usando Mega Menu com Temas

Além de plug-ins, também existem temas WordPress que suportam a criação de um mega menu. Se quiser usar seu tema para definir um mega menu, primeiro você deve confirmar se o seu tema suporta ou não essa funcionalidade. A maioria dos temas comerciais do WordPress oferece esse recurso integrado, portanto, você não precisa de um plug-in separado. Uma das desvantagens significativas de usar o tema é que você perderá o mega menu ao alterar o seu tema. No entanto, quando você usa um plugin, o mega menu ainda estará disponível, a menos que você desative o plugin.

Conclusão

Um mega menu é um sistema de navegação online altamente eficaz que pode ajudar a melhorar significativamente a navegação do seu site. Um mega menu é benéfico se você tiver um site sofisticado com muitas páginas e categorias de produtos. Você pode criar um mega menu se o tema do seu site suportar ou usar o plugin Max Mega Menu para criar mega menus com várias colunas. O plugin permite até que você adicione alguns widgets atraentes para ir com seus itens de menu.