Como adicionar itens de menu Elementor no WordPress

Elementor_MegaMenu_Wpmet

Want to Add a Menu to Your Elementor Site?

This guide will show you how to create, set up, and customize a navigation menu in Elementor using the ElementsKit Nav Menu Widget.

Navigation menus are key for any website, helping visitors quickly find what they need. Most site owners place menus in the header for easy access across all pages.

With the tips in this guide, you’ll have a functional, stylish menu ready in no time. Let’s get started!

What is an Elementor Mega Menu in WordPress?

Mega menus have become a popular way to improve website navigation, helping users easily browse your content and find what they need.

In WordPress, the default navigation menu allows you to include pages, posts, categories, and URLs, with the design typically controlled by your theme. However, upgrading to a mega menu offers more flexibility and customization to provide better site’s experience to users.

Why Use the ElementsKit Nav Menu Widget?

  • You can create custom and advanced menus in the drag and drop style
  • ElementsKit offers all-in-one solution along with the navigation menu

With the ElementsKit add-on for Elementor, you can build a feature-rich mega menu that enhances your website’s functionality and design effortlessly.

🔔 Did you know?
Using a WordPress theme or page builder often limits your control over the header and footer design.
What about getting full control in customization? Check this out to learn more Como criar e personalizar o rodapé do cabeçalho – Elementor Page Builder

O que o Mega Menu da Elementor da ElementsKit tem a oferecer:

Elementor Mega Menu_ElementsKit
Menu Elementor, ElementsKit

Como o mega menu for ElementorO ElementsKit também abre uma série de possibilidades para "hackear" seu menu normal do WordPress.

Para ser mais específico, o plugin irá ajudá-lo nos seguintes aspectos:

  • Customize menus with tags, colors, hover effects, and icons
  • Style top-level and submenu appearances
  • Create vertical or horizontal menus
  • Choose header layouts from the ElementsKit library
  • Add animations for submenu displays
  • Drag-and-drop the nav menu widget with one click
  • Compatible with eCommerce platforms like WooCommerce
  • Build content using Elementor widgets
  • Fully responsive with off-canvas menus for tablets
  • Display builder content or simple lists as submenus on tablets
Crie Menu de Navegação e Mega Menu WordPress com ElementsKit

E claro, o melhor é que o O menu ElementsKit Nav está disponível gratuitamente e premium versões. Portanto, mesmo que você não compre as assinaturas pagas, você ainda experimentará esse incrível recurso de menu Elementor em seu site.

Como criar itens de menu no Elementor

Vamos dar uma olhada em alguns casos do mundo real e revisar nossa grande lição do menu WordPress. Agora você está prestes a viajar para o exterior para criar seu mega menu WordPress, cabeçalho e adicionar seu conteúdo.

Crie um cardápio

Para criar um menu Elementor, você precisa fazer é Ligar a opção de mega menu da inicialização do ElementsKit Módulos página e depois de ligá-lo, clique no botão Salvar alterações botão.

Ative o Mega Menu WordPress ElementsKit
Ativar Mega Menu ElementsKit

Creating a menu in Elementor requires a few simple steps. Go to your Painel WordPress e depois clique em Cardápios. Depois disso, você verá uma seção chamada Estrutura do menu. Então insira seu Nome do cardápio ou cabeçalho do menu e clique em Criar cardápio.

Configuração da estrutura do mega menu do WordPress
Configuração da estrutura do mega menu

Agora expanda Links personalizados e coloque o seu URL assim como Texto do link, then click on Adicionar ao cardápio.

📝Nota rápida
Você pode adicionar, remover ou editar quantos itens de mega menu desejar, repetindo o mesmo método.

É hora de adicionar seus itens de menu no Elementor através do ElementsKit. Mas antes disso, você precisa marcar ✅ o habilite o menu para o conteúdo do mega menu section as shown in the image, underneath the Menu Name section. 

Habilitar ElementsKit Mega Menu WordPress
Ativar o Mega Menu do ElementsKit

Então você verá uma tag Mega Menu em seu Texto do link. Depois de clicar no Mega Cardápio tag um pop-up será aberto.

Editar Mega Menu WordPress Content ElementsKit
Editar Kit de Elementos de Conteúdo do Mega Menu

Para ativar a opção Mega Menu você precisa clicar no botão ativar EDITAR CONTEÚDO DO MEGA MENU botão e salve. Está tudo pronto! 

🧐 Mais informações no menu Elementor
Não se esqueça de visitar nossa documentação em ElementsKit Mega Menu Builder para Elementor

Solução WooCommerce mais completa

Importar um menu (Mega Menu Vertical)

Para criar um menu vertical, primeiro você precisa ligar o cardápio vertical ferramenta. Então clique em salvar alterações.

Ativar widget de menu vertical, ElementsKit
Ativar widget de menu vertical, ElementsKit

Então clique em Modelos no lado esquerdo do seu painel. Depois de apenas clicar Importar modelos.

Clique em Importar modelos, ElementsKit
Clique em Importar modelos, ElementsKit

Agora você tem que selecionar escolher arquivo do seu dispositivo. Depois é só clicar Importar agora. E você verá todos os seus dados importados de uma só vez.

Importar arquivo, ElementsKit
Importar arquivo, ElementsKit

Além disso, para criar um menu vertical com seus dados você precisa ir para Aparência então clique em Cardápios. Você também pode criar um menu acima. Para mais detalhes, você pode visitar nosso site de documentação no menu vertical.

Personalizando o Menu 

É hora de customizar seu conteúdo e para isso você precisa clicar no botão EDITAR CONTEÚDO DO MEGA MENU botão. Logo após clicar no botão, você verá que uma tela estilo menu Elementor apareceu. 

Clique em Editar conteúdo do MegaMenu
Clique em Editar conteúdo do MegaMenu

Tudo que você precisa fazer é clicar no Ícone do ElementsKit e selecione qual cabeçalho predefinido você deseja inserir em seu site. 

Botão do widget ElementsKit
Botão do widget ElementsKit

Logo após clicar no Botão do widget ElementsKit, ele o levará à sua biblioteca de widgets. Nele, você obterá toneladas de páginas, modelos e seções pré-fabricadas. Mas para criar uma seção de mega menu você precisa clicar no botão Seções

Selecione WordPress MegaMenu Layout ElementsKit
Selecione MegaMenu Layout ElementsKit

Para criar e personalizar seus itens de menu no Elementor. Você precisa selecionar o layout dos itens do Mega Menu e começar a personalizar como quiser!

Aqui você encontrará 3 partes (Layout, estilo e avançado) de personalizar seu menu Elementor através do ElementsKit:

Disposição:
Nesta seção, você verá múltiplas opções para editar o layout e a estrutura de um menu Elementor. Você tem total controle sobre como seu mega menu deve ser apresentado.

Editar layout do MegaMenu
Editar layout do MegaMenu

Agora, com o widget de mega menu ElementsKit, você pode personalizar seu Largura do conteúdo, você pode criar um menu em tela cheia ou personalizar o tamanho que preferir deslizando para a direita ou para a esquerda. Lacunas de coluna entre o seu mega menu também pode ser personalizado do jeito que você quiser.

Opções de layout - ElementsKit
Opções de layout – ElementsKit

Com o menu ElementsKit Elementor, você pode editar a altura dos itens do menu. Ele também tem várias opções para editar o Alinhamento vertical, Transbordar, Etiquetas HTML que pode ser alterado de acordo com sua demanda.

Estilo:
Com as opções de estilo de mega menu do ElementsKit, você pode alterar a aparência inteira do menu. Para ser mais específico, você pode alterar ou editar o Fundo, Sobreposição de fundo, Fronteira, Divisor de formas, e claro Tipografia.

Opções de estilo - ElementsKit
Opções de estilo – ElementsKit

O widget de mega menu Elementor da ElementsKit é um salva-vidas. Possui uma variedade de elementos de estilo de menu que o ajudarão a aproveitar ao máximo seus itens de menu. 

Avançado:
Nossas opções avançadas de estilo de menu para o seu menu WordPress são algo que você sempre procurou. Sim, as opções do mega menu ElementsKit Elementor também ajudarão você a acessar e editar todas as seções avançadas. 

Opções Avançadas - ElementsKit
Opções Avançadas – ElementsKit

No qual você pode criar um novo layout de menu. ElementsKit tem alternativas mais avançadas como somar efeitos, pegajoso, efeitos de movimento, flutuar customização e muito mais que irão melhorar ainda mais sua experiência editorial e tornar seu mega menu mais inteligente. 

Configurando o menu de navegação para Elementor

A última e mais importante parte é sincronizar um mega menu que você precisa para criar um cabeçalho em seu site Elementor. 

Agora mostraremos como criar um modelo de cabeçalho personalizado Elementor. Bem, há outra boa notícia para você com o widget de menu de navegação ElementsKit. Você pode criar o layout do menu de navegação apenas clicando em nossas opções de layout de menu WordPress pré-construídas. 

Vamos começar! 

Primeiro de tudo, você precisa ir para Kit de Elementos no painel do WordPress e clique no botão cabeçalho rodapé, para ativar o widget do menu de navegação em seu site. 

Selecione o rodapé do cabeçalho no ElementsKit
Selecione o rodapé do cabeçalho no ElementsKit

Então clique em adicionar novo mencionado logo após os modelos. 

Criar cabeçalho no ElementsKit
Criar cabeçalho no ElementsKit

Depois de clicar no adicionar novo botão um Configurações do modelo aparecerá, que é a parte final da integração de um mega menu em seu site.

Configurações de modelo no ElementsKit
Configurações de modelo no ElementsKit

Aqui nesta seção, você precisa dar ao seu menu de navegação um nome chamado título do cabeçalho. Você também pode alterar o condições do cabeçalho e clique em ativação (se você estiver pronto e satisfeito com seus itens do mega menu).

Na parte final, não esqueça de clicar no botão editar com elementor botão logo antes do salvar alterações botão. 

Agora mostraremos 2 maneiras de adicionar seu mega menu através do widget de menu de navegação do ElementsKit.

Método um: 

Para adicionar um widget de menu de navegação ao seu site, o primeiro método que você pode seguir depois de clicar nele editar com elementor botão, tudo que você precisa fazer é clicar no ElementsKit ícone do widget então vá para Seções e selecione um estilo de cabeçalho o que você preferir. 

Método um do menu de navegação - ElementsKit
Método um do menu de navegação – ElementsKit

Depois disso, você verá seu Cabeçalho o título que você adicionou do painel do WordPress aparecerá na seleção seção do menu. E apenas clicando no título do cabeçalho, você verá que todos os itens do seu mega menu estão visíveis.

Método dois:

Você também pode incorporar o widget do menu de navegação por meio do opção arrastar e soltar e também adicionar diferentes elementos ao seu redor (por exemplo, imagens, vídeos, outras seções, etc.)

Tudo que você precisa fazer é selecionar qualquer tipo de seção (selecionei três seções para este exemplo). A pesquisa quais widgets você prefere adicionar no painel do Elementor.

Aqui neste exemplo, arrastamos uma imagem, um menu de navegação e um vídeo. Você pode adicionar quantas seções e widgets desejar. 

Método dois do menu de navegação - ElementsKit
Método dois do menu de navegação – ElementsKit

Então, novamente, o mesmo método pode ser usado para ativar seu menu de navegação: no Selecione o menu seção, você verá o título do cabeçalho que você adicionou no painel do WordPress. E apenas clicando no título do cabeçalho, você verá que todos os itens do seu mega menu foram inseridos. 

Agora você sabe que usar o widget do menu de navegação é super simples e está pronto para o rock 'n roll! Lembre-se de que você também pode criar um menu fora da tela no ElementsKit. 

🛠 Informação adicional
Para saber mais sobre menu fora da tela no ElementsKit, não se esqueça de conferir nosso vídeo mais recente sobre construindo um menu fora da tela usando ElementsKit

Pensamentos finais

Mega menus são ferramentas maravilhosas para melhorar a navegação no site. Eles permitem que você organizar um grande número de categorias e produtos para facilitar aos usuários para navegar pelo seu conteúdo.

A criação do Mega Menu com o complemento ElementsKit para Elementor está sempre disponível para oferecer o melhor suporte sem nenhum preço. Se você estiver adicionando sozinho, a opção Nav Mega Menu integrada do complemento ElementsKit pode ser um começo para você.

O ElementsKit é simples, leva pouco tempo para configurar e ajustar e também é simples de usar. No entanto, esperamos que este artigo tenha sido útil o suficiente para fornecer uma visão geral de todo o aspecto do mega menu.

Deixe um comentário abaixo se você tiver alguma dúvida sobre o Mega Menu, Menu de Navegação ou suas funcionalidades.

Se você gostou deste artigo, certamente encontrará mais dicas e blogs úteis juntando-se ao nosso Comunidade WPmet Siga-nos no Facebook Twitter. Por fim, não se esqueça de se inscrever em nosso canal no YouTube para tutoriais úteis.


Comentários

Deixe um comentário

Seu endereço de e-mail não será publicado. Campos obrigatórios marcados com *