Como construir um mega menu no WordPress com Elementor

Você consegue imaginar um site grande sem um menu de navegação? 
Sem chance!

94% of users say it’s the most important feature of a website. So, easy navigation matters! That’s why mega menus are so effective. They organize categories and subcategories into a single, clear layout, making it easy for visitors to find what they need.

Sites like Amazonas e eBay use mega menu to give the best user experience. Mega menus are ideal for e-commerce, news, blogs, and businesses with lots of content.

This article will show you how to create a functional and stylish mega menu com Elementor.

What do you need to create the mega menu with Elementor?

The only thing you need to create the mega menu using Elementor is ElementsKit.

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

You will get variations in the mega menu such as the Nav menu e Mega Menu Vertical along with many customization options. 

Overall, ElementsKit Elementor Mega Menu is a full featured-packed module for your professional site that easily ranks top among the best WordPress Mega Menu builders for 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 Menu

Para criar um mega menu no Elementor, você precisa criar um menu a partir do painel do WordPress. Para fazer isso,

• Navegar para Aparência > Menu.
• 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: Personalizar o conteúdo do Megamenu

In this step, you can add mega menu items from the WordPress menu you have created.

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.

Layout de controle

• 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 a 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.
• Transbordar: Selecione Overflow Padrão ou Oculto.

Selecione Etiqueta HTML

• Selecione seu Etiqueta HTML de Suspenso.

Personalize o texto do título do Mega Menu

• 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 > Feche o editor.
2. Agora vá para a aba Ícones > Escolha qualquer cor na Paleta de Cores.
3. Selecione Ícone na Biblioteca de Ícones.
4. Agora vá para o Site > Ícone selecionado e a cor apareceu.

Etapa #4: Personalizar emblema

• 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 o que você criou Menu de cabeçalho no menu suspenso.
• Você pode adicionar qualquer tipo de widget aqui para personalizar seu modelo de cabeçalho.

• 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.

Para saber mais detalhes sobre a criação de mega menu no WordPress, você pode consultar a documentação do ElementsKit Widget Mega Menu para Elementor.

Qual é o próximo?

Once you’ve finished creating the mega menu in Elementor, make sure to preview it. If you’re satisfied with the style, finalize and publish it. However, if you later find that it isn’t as attractive as you initially thought, you can change it at any time.

To understand how users interact with the style, consider integrating a heatmap tool like Clarity.

Crie um Mega Menu usando Gutenberg

Se você construiu seu site no editor de blocos do WordPress, você também pode criar mega menu em Gutenberg sem problemas. O plugin editor de blocos GutenKit vem com a maneira mais fácil de criar mega menus do WordPress no Gutenberg.

With GutenKit, you can create the entire menu in the editor and design mega menu in both vertical and horizontal orientation.

All you need is to install GutenKit Pro plugin and start building your beautiful site in Gutenberg.

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!