Como construir um mega menu com Elementor e ElementsKit

Você consegue imaginar um site grande sem um mega menu? 
Sem chance!

As pessoas estão cada vez mais exigentes quanto ao tempo que passam online. Um estudo recente mostra que  94% de usuários da web dizem que a navegação fácil é o recurso mais útil de um site.
Quase todo mundo, certo?

Para aumentar a usabilidade e a capacidade de envolver o usuário, o mega menu desempenha um papel vital na valorização das pessoas. Um mega menu simples, mas funcional, incentivará os usuários a explorar ainda mais áreas do seu site e a agir instantaneamente.

Até mesmo os maiores sites de comércio eletrônico, como Amazon e eBay, estão usando megamenus para ajudar os usuários a navegar por toda a navegação de um site em um único menu. 

Não apenas um site de comércio eletrônico, mas um mega menu também é uma ótima opção para qualquer site de notícias, revistas, editores de conteúdo, empresas e muito mais. 

Ao construir um grande site com múltiplas categorias e subcategorias, o Megamenu é um grande menu expansível com várias colunas onde tudo fica visível ao mesmo tempo.
Tenho certeza de que muitas perguntas vêm à mente! Certo? 

Não se preocupe… Aqui vou te ajudar a obter todas as respostas para suas dúvidas e ao final deste artigo você aprenderá como criar seu próprio mega menu com facilidade. 

Apresentando o Construtor de Mega Menu ElementsKit

Usando o rico em recursos Construtor de Megamenu ElementsKit você pode criar e personalizar qualquer tipo de Megamenu com uma interface de conteúdo ao vivo Elementor. 

Você obterá variações no mega menu, como o menu de navegação e o mega menu vertical, além de muitas opções de personalização. 

No geral, ElementsKit Elementor Mega Menu é um construtor de menu completo e repleto de recursos para o seu site profissional. 

Como criar um mega menu com Elementor? 

Elementor oferece muitas funcionalidades para projetar seu mega menu, mas para obter funcionalidades adicionais você pode usar um plugin de terceiros.

Exatamente, você precisa Kit de Elementos. Embora existam tantos plug-ins para criar um mega menu, o ElementsKit oferece suporte a diferentes tipos de mega menus, incluindo mega menu vertical, mega menu horizontal e muitas outras opções de personalização.

Aqui mostraremos detalhadamente o processo passo a passo para criar um mega menu totalmente funcional.

O que você precisa para criar um Megamenu com Elementor

Para seguir este blog tutorial, você precisará de duas coisas–>

• Elementor
• Kit de Elementos

Ou siga as instruções passo a passo:

Certificar-se Megamenu módulo é SOBRE de Kit de Elementos → MÓDULOS.

Etapa #1: Adicionar cardápio

• Clique em Crie um novo cardápio.
• Fornecer Nome do cardápio=> Verifique o Caixa de seleção=> Criar cardápio.
• Clique em Link personalizado=> Fornecer Link e Adicionar itens de menu do mesmo jeito.

Etapa #2: Personalize o conteúdo do Megamenu

Marque a caixa de seleção “Ative este menu para conteúdo do Megamenu” => Clique no Mega Menu com ícone de configuração em qual item de menu você deseja adicionar o Mega Menu.

• Um pop-up será aberto, alterne o Mega Cardápio opção, e Salvar. Depois disso cliquee EDITAR CONTEÚDO DO MEGAMENU botão.

Escolha o modelo

• Clique no Kit de elementos Ícone da biblioteca de modelos e navegue até Cabeçalhos.
• Clique em Cabeçalho=> Conteúdo do megamenu=> Insira qualquer Mega Cardápio.

Ao controle Disposição

• Edite a seção interna clicando na seção pontilhada.
• Caixa de largura de conteúdo: personalize a largura do conteúdo arrastando para a direita ou para a esquerda.
• Largura total do conteúdo: Selecione Largura completa.

Selecione Lacuna da coluna

• Lacuna da coluna=> Selecione sua lacuna de coluna em suspenso.

Escolha a posição

• Altura: Selecione sua altura arrastando da esquerda para a direita.
• Alinhamento vertical: selecione Alinhamento vertical no menu suspenso.
• Overflow: Selecione Overflow Padrão ou Oculto.

Selecione Etiqueta HTML

• Selecione seu Etiqueta HTML de Suspenso.

Personalize o Mega Menu Texto do título

• Selecione o tipo de ícone.
• Ativar para adicionar ícone.
• Carregar ícone de cabeçalho.
• Adicionar ou editar título.
• Adicionar Editar Descrição.

Personalizar texto

• Adicionar ou editar texto.
• Adicionar ou editar subtítulo.
• Ativar para mostrar rótulo.
• Adicionar ou editar rótulo.
• Personalize cor de fundo, tipografia, preenchimento, alinhamento, raio.

Etapa #3: Personalizar Ícone

1. Clique em 'Atualizar' para salvar o menu=> Fechar o editor.
2. Agora vá para Icon Tab => Escolha qualquer cor na paleta de cores.
3. Selecione Ícone na Biblioteca de Ícones.
4. Agora vá para o site => Ícone selecionado e cor exibida.

Etapa #4: Personalizar Distintivo

• Adicionar ou editar texto.
• Escolher Cor do emblema.
• Escolher Cor de fundo do emblema.
• Clique Salvar.

Etapa #5: Configurações

Largura padrão

• Selecione a largura do Mega Menu: Padrão.
• Selecione a posição do Mega Menu: Padrão.
• Salve a janela.
• Visualização do site: Mostrando largura padrão com posição padrão.

Relativo Padrão 

• Selecione a largura do Mega Menu: Padrão.
• Selecione a posição do Mega Menu: Relativo.
• Clique Salvar.
• Visualização do site: Mostrando largura padrão com posição relativa.

Largura total padrão

• Selecione a largura do Mega Menu: Largura completa.
• Selecione a posição do Mega Menu: Padrão.
• Clique Salvar.
• Visualização do site: Mostrando largura total com posição padrão.

Posição relativa da largura total

• Selecione a largura do Mega Menu: Largura completa.
• Selecione a posição do Mega Menu: Relativo.
• Clique Salvar.
• Visualização do site: Mostrando Largura total com posição relativa.

Largura padrão personalizada

• Selecione a largura do Mega Menu: Largura personalizada.
• Forneça qualquer largura personalizada, mas por padrão, é 750 px.
• Selecione a posição do Mega Menu: Padrão.
• Clique Salvar.
• Visualização do site: Mostrando Largura personalizada com posição padrão.

Largura padrão personalizada Relativo

• Selecione a largura do Mega Menu: Largura personalizada.
• Forneça qualquer largura personalizada, mas por padrão, é 750 px.
• Selecione a posição do Mega Menu: Relativo.
• Clique Salvar.
• Visualização do site: Mostrando Largura personalizada com posição relativa.

Etapa #6: Crie um modelo de cabeçalho

Aqui você pode usar o Modelo de cabeçalho Elementor ou você pode usar o Modelo de cabeçalho do ElementsKit.

• Agora pesquise Menu de navegação=> Arraste o Menu de navegação do Ekit e Derrubar na área selecionada. Certifique-se de arrastar o menu ElementsKit Nav, caso contrário o Megmenu criado não aparecerá.
• Vá para Configurações do menu=> selecione seu criado Menu de cabeçalho no menu suspenso.
• Você pode adicionar qualquer tipo de widget aqui para personalizar seu modelo de cabeçalho.

Resultado Final

• Feito isso, clique no Atualizar botão para salvar o menu.
• Agora vá para o seu site e você verá que o Megamenu selecionado está sendo exibido de acordo.

Empacotando

Finalmente, chegamos ao fim com sucesso. Espero que tenhamos ajudado você com este tutorial! E agora você pode construir um mega menu Elementor personalizado usando Kit de Elementos!

Você pode ver todas essas etapas em um único vídeo aqui.

Se você tiver mais dúvidas ou tiver encontrado outros problemas, informe-nos na seção de comentários!