Verdadeiros Mega Menus no Oxygen Builder

Neste artigo, veremos algumas maneiras de adicionar um mega menu “real” ao Oxygen Builder. Os componentes de menu integrados são bons para menus simples ao criar cabeçalhos com Oxygen, mas se você deseja uma verdadeira funcionalidade de megamenu, é melhor procurar em outro lugar.

Neste artigo, vamos discutir como adicionar um mega menu no Oxygen.

O que é um Mega Menu?

Se você já usou um menu em um site que continha algo mais do que links, é isso que é um megamenu. Eles variam em complexidade, desde ícones de imagem simples até áreas preenchidas dinamicamente.

Eles podem ter layouts de coluna única, layouts de várias colunas, várias linhas, arquivos maçônicos e muito mais. Claro, você não quer chegar ao complexo, porque é para isso que servem as páginas.

Se feito corretamente, eles podem tornar a navegação do site muito mais fácil para seus visitantes.

Oxygen permite que você crie menus suspensos simples, mas quando se trata da funcionalidade do megamenu, você não tem muitas opções.

Como adicionar um mega menu ao oxigênio

Este artigo vai dar uma olhada em duas maneiras principais de adicionar um megamenu ao Oxygen. A primeira maneira pode ser feita completamente no Oxygen sem nenhum complemento de terceiros. Isso é bom para menus simples. Segue os passos de um tutorial publicado pela equipe oficial por trás do Oxygen. Este é o método que eles usaram para criar as listas suspensas vistas no site Oxygenbuilder.com.

A segunda opção usa um plugin de terceiros que oferece muito mais funcionalidade quando se trata de mega menus no Oxygen Builder. Se você deseja criar menus com várias colunas e preenchidos dinamicamente, esta é sua melhor aposta.

Claro que existem opções adicionais que podem ser usadas se você tiver um bom entendimento de HTML, CSS, JavaScript e talvez PHP. No entanto, isso está fora do escopo deste artigo. Se você estiver familiarizado com isso, pode ser uma boa terceira opção de incorporar um mega menu no Oxygen, o que não exigiria um plug-in de terceiros.

Adicionando nativamente um mega menu em oxigênio

Esta seção percorrerá as etapas básicas discutidas no tutorial do YouTube. Se você deseja implementar esse tipo de menu em seu próprio site, recomendamos ler o tutorial oficial e assistir ao vídeo do YouTube acima.

Para adicionar um megamenu nativamente no Oxygen, primeiro você precisa criar os itens iniciais do menu. Isso não é feito com o componente de menu, em vez disso, é feito criando divs, preenchendo-os com texto e envolvendo-os em links. Isso é bastante fácil de fazer com oxigênio.

Uma vez que o menu inicial está lá, é hora de criar o megamenu suspenso.

Isso é feito criando um div abaixo do link do menu que conterá todo o conteúdo no menu suspenso. Uma vez que o div suspenso é criado (assista ao vídeo para entender a estrutura real por trás dele), ele é posicionado absolutamente e alternado para ficar visível ao passar o mouse sobre o respectivo link do menu.

A implementação deste mega menu é bastante simples, especialmente se você seguir o tutorial do YouTube. Ele permite que você use qualquer bloco disponível para você no Oxygen Builder. Você também pode usar os recursos de visibilidade condicional integrados para mostrar e ocultar coisas com base nas funções do usuário.

No entanto, adicionar este megamenu dá um pouco de trabalho e quando a estrutura fica complexa, a implementação também. Também é uma criação manual, o que significa que não será atualizado automaticamente com novo conteúdo. Outro grande problema é que ele não funciona bem com dispositivos móveis. Você pode simplesmente ocultar toda a instalação do menu no celular e usar outro menu básico, mas isso não é super prático.

Dependendo do motivo pelo qual você deseja adicionar um mega menu ao seu site WordPress (criado com Oxygen), convém usar a rota dois.

Plugin Mega Menu para Oxigênio

Em vez de adicionar manualmente um megamenu, usar um plugin de terceiros pode ser uma opção melhor em algumas circunstâncias. Especialmente se você tem um menu que muda muito, um plugin pode acabar economizando muito tempo.

Há uma tonelada de plugins de megamenu por aí, e testamos vários ao tentar incorporar essa funcionalidade em sites de clientes criados com Oxygen. ao procurar o plugin, nosso critério foi que ele precisasse ser fácil de usar, dinâmico, bem projetado e totalmente compatível com o Oxygen (como você sabe, existem muitos plugins que simplesmente não são).

Dos vários plugins que testamos, o WP Mega Menu foi a melhor opção que não teve problemas de compatibilidade com o Oxygen Builder.

Há uma versão gratuita e uma versão pro. A versão pro custa $ 29,00 por ano. a versão gratuita funciona bem, mas é um pouco restrita quando se trata de funcionalidades avançadas. Se você deseja incorporar um megamenu em um site de cliente criado com o Oxygen Builder, a versão pro é provavelmente sua melhor aposta.

Gostamos deste plugin porque não é apenas fácil de usar, mas nossos clientes podem atualizá-lo rapidamente sem quebrar todo o nosso site criado com Oxygen. Ele tem uma interface simples de arrastar e soltar e vem com widgets pré-construídos. Basicamente, é um “construtor de menus”.

Também é responsivo, o que é um grande problema ao usar o método um para adicionar um megamenu ao seu site Oxygen Builder.

Depois de instalar o plugin em seu site, incorporá-lo ao seu site é bastante fácil de fazer. Você pode optar por fazer com que o plug-in substitua o menu Padrão, adicionado via shortcode ou usando o snippet PHP. Vamos incorporá-lo usando PHP. isso é fácil de fazer no Oxygen, basta adicionar um componente de bloco de código e colar o seguinte PHP (substitua ID pelo ID numérico do seu menu)

 <?php wp_megamenu( array ( 'menu' => 'ID' )); ?>
 Linguagem de código: HTML, XML ( xml )

Você pode colocar isso em qualquer lugar, mas recomendamos usar um modelo de cabeçalho e rodapé abrangente. A largura do bloco de código afeta o próprio menu, portanto, certifique-se de configurá-lo para ser amplo o suficiente para o conteúdo.

Criar o mega menu é bastante fácil. Usando um construtor visual, você pode arrastar e soltar elementos em um layout de linha/coluna definido.

Existem algumas funcionalidades bastante avançadas com este plugin, como uma pesquisa em tela cheia, widgets dinâmicos e muito mais. Se você está procurando uma maneira fácil de adicionar um megamenu ao seu site Oxygen, esta é sua melhor aposta.

Se você cria sites para clientes e precisa fornecer a eles uma ferramenta simples que eles possam usar para editar o menu, essa é uma ótima opção por causa da simplicidade.

Conclusão

Este artigo deve ter abordado duas maneiras que você pode usar para adicionar facilmente um mega menu ao seu site Oxygen Builder. Mega menus podem adicionar funcionalidade e dar ao seu site uma sensação premium. É bastante fácil adicionar 1 usando CSS e componentes padrão de oxigênio. você também pode usar um plugin de terceiros para adicionar um megamenu ao Oxygen.

Se você tiver alguma dúvida, deixe-a na seção de comentários abaixo!