Índice
Você pode construir um mega menu completo no Elementor sem comprar o Elementor Pro. Um mega menu é um dropdown amplo e multicolunas que mostra uma seção inteira do seu site de uma só vez: links, imagens, ícones, até mesmo um formulário de contato, em vez de uma fina lista vertical A versão gratuita do Elementor não tem nenhum widget de mega menu, mas o gratuito Menu Mega de complementos mestres adiciona um e você projeta cada painel com o editor Elementor normal.
Este guia cobre toda a construção: habilitar a extensão, anexar um mega menu a um item de menu, projetar o painel suspenso e acertar no celular, a etapa que a maioria dos tutoriais pula.
Você precisa do Elementor Pro para um megamenu?
Não. Existem três rotas para um mega menu no Elementor, e apenas uma delas custa dinheiro:
| Rota | Custo | Compensação |
|---|---|---|
| Widget do menu Elementor Pro Mega | Licença anual paga | Requer Pro em todos os sites que você constrói |
| Menu personalizado CSS/codificado à mão | Grátis | Frágil, difícil de editar depois, sem edição visual |
| Menu Mega de complementos mestres | Grátis | Adiciona um plugin; painéis construídos visualmente no Elementor |
Se um mega menu é a única razão pela qual você estava prestes a atualizar, a rota gratuita faz o mesmo trabalho Master Addons é executado ao lado Elementor Pro sem conflito também, então uma licença Pro existente não é desperdiçada Elementor documenta seu próprio fluxo de trabalho de mega menu Pro aqui se você quiser comparar as duas abordagens lado a lado; requer ativar vários recursos experimentais antes de começar.
O que você precisa antes de começar
- Elementor (versão gratuita está bem) instalado e ativo
- Complementos Mestres para Elementor instalado e ativo
- Um menu WordPress já criado em Aparência → Menus (mesmo que seja difícil, você pode editá-lo mais tarde)
Passo 1: Habilite a extensão do mega menu
Ir para Complementos Mestres → Complementos e Extensões no seu painel WordPress, encontre Menu Mega na lista de extensões, e alterne com ela. Salvar.
Os complementos mestres são enviados com tudo desligado por padrão para que você carregue apenas o que usa. É por isso que esta etapa existe. Se você não vir a opção imediatamente, atualize a página de administração (Cmd/Ctrl + Shift + R); os plug-ins de cache mantêm o menu de administração antigo por um minuto.
Passo 2: Transforme um item de menu em um mega menu
Aberto Aparência → Menus e expanda o item de nível superior do qual deseja que o megapainel seja retirado, normalmente algo amplo como “Products”, “Services” ou “Shop”.
- Marque o Habilitar Mega Menu opção nesse item de menu.
- Escolha a largura do painel A largura total estende de ponta a ponta, a largura do contêiner se alinha ao seu conteúdo.
- Salve o menu.
Ative-o apenas em itens que realmente precisam do espaço Um mega menu em um único link “Contact” é pior do que um link simples: faz as pessoas trabalharem mais para um destino.
Passo 3: Projete o Painel suspenso no Elementor
O conteúdo do painel é um modelo Elementor, que é o que torna essa abordagem flexível: qualquer coisa que você possa construir em uma página, você pode colocar dentro do menu.
- Clique Editar conteúdo do mega menu no item de menu para abrir o editor Elementor.
- Construa um layout de várias colunas Três ou quatro colunas se adequam à maioria das navegações.
- Preencha as colunas: widgets de cabeçalho como rótulos de categoria, listas de ícones como grupos de links, uma imagem ou duas para ancoragem visual.
- Publicar o modelo.
Algumas coisas que fazem mega menus funcionarem em vez de apenas parecerem ocupados:
- Agrupe pela forma como os clientes pensam, não pelo seu organograma. Os títulos das colunas devem corresponder às palavras usadas pelos visitantes.
- Limite-o em cerca de cinco a sete links por coluna. Depois disso, a digitalização desmorona e o menu se torna uma parede.
- Dê um trabalho a uma coluna. Um produto em destaque, uma promoção ou um chamada à ação ganha seu espaço mais do que uma quarta lista de links.
- Mantenha as imagens leves. Imagens do menu carregam em cada página Comprima-as e sirva WebP: um mega menu pesado arrasta o do seu site inteiro carga tempo, não apenas uma página.
Passo 4: Adicione o Menu ao Seu Cabeçalho
Se o seu tema já renderiza o menu WordPress em seu cabeçalho, o mega menu funciona imediatamente Nenhum passo adicional é necessário.
Para controle total sobre o cabeçalho em si, construa um com o livre Construtor de temas Master Addons: crie um modelo de cabeçalho, coloque no Widget do menu Nav, selecione o menu que carrega seu mega menu, e defina a condição de exibição para todo o seu site Esse emparelhamento, construtor de temas gratuito mais mega menu gratuito, substitui os dois recursos que as pessoas mais compram Pro.
Passo 5: Corrigir a Experiência Móvel
É aqui que a maioria dos mega menus se desfaz Um painel de quatro colunas que parece nítido em uma tela de 1440 px se torna um pergaminho sem fim em um telefone.
- Mude para a visualização móvel no Elementor e verifique a altura real do painel Se ele passar por duas telas, corte o conteúdo para dispositivos móveis.
- Esconda imagens decorativas no celular usando os controles de visibilidade responsivos da Elementor; mantenha os links, solte o ornamento.
- Empilhe colunas verticalmente e confirme se os alvos de toque são confortavelmente grandes.
- Teste em um telefone real, não apenas na visualização do editor. A visualização se aproxima; não reproduz o comportamento do toque.
Se seus pontos de interrupção não estiverem alinhados com seu design, o grátis Extensão de pontos de interrupção personalizados permite que você defina o seu próprio Isso é útil quando o ponto de interrupção padrão do tablet corta seu menu em uma largura estranha.
Solução de problemas
- Mega menu não aparece. Confirme se a extensão está ativada, se o item de menu tiver Ativar Mega Menu marcado e se o modelo do painel for publicado, não deixado como rascunho Em seguida, limpe seu cache.
- O painel aparece, mas não tem estilo. Geralmente uma folha de estilo em cache Purgue seu cache de página e qualquer CDN, em seguida, hard-reload.
- Painel é cortado ou escondido atrás do conteúdo. Um contêiner pai possui
overflow: hiddenou um índice z baixo Eleve o índice z do cabeçalho e verifique a configuração de estouro do contêiner de cabeçalho. - Funciona no desktop, quebrado no celular. Quase sempre a área de alternância/hambúrguer Verifique as configurações móveis do widget de menu e confirme se nada se sobrepõe ao alvo de toque.
Perguntas frequentes
Como faço para criar um mega menu no Elementor sem Pro?
Instale o plugin gratuito Master Addons for Elementor, habilite a extensão Mega Menu em Master Addons > Addons & Extensions, depois abra Aparência > Menus e marque Habilitar Mega Menu no item que você deseja Clique em Editar conteúdo do mega Menu para projetar o painel suspenso no editor normal do Elementor e publicá-lo.
Como posso criar um menu no Elementor gratuitamente?
A versão gratuita do Elementor permite construir um menu padrão do WordPress através de Aparência > Menus e exibi-lo com o widget gratuito do Menu Nav. Para um dropdown de mega estilo, o Elementor gratuito por si só não inclui esse widget, então você precisa de uma extensão gratuita, como o Master Addons Mega Menu para adicionar painéis de várias colunas.
Como posso criar um mega menu no WordPress sem usar plugins?
Você pode codificar manualmente um dropdown com CSS e HTML personalizados, mas é frágil. Ele interrompe as atualizações do tema, precisa de um desenvolvedor para cada alteração e não oferece edição visual. Em vez disso, a maioria dos proprietários de sites obtém um resultado mais rápido e sustentável de um plugin gratuito, como Master Addons.
Max Mega Menu é gratuito?
Max Mega Menu tem uma versão gratuita no repositório de plugins do WordPress, além de um complemento Pro pago para opções extras de estilo, e funciona independentemente do seu construtor de páginas Master Addons Mega Menu é construído especificamente para Elementor, então os painéis são projetados com o mesmo editor de arrastar e soltar que você já usa para páginas.
Qual é o melhor plugin de mega menu para Elementor?
Depende do que você já executa Se você usa Elementor e quer painéis projetados visualmente sem aprender uma nova interface, Master Addons Mega Menu é uma opção gratuita sólida Se você precisa de menus multiníveis avançados com condições dinâmicas, uma ferramenta paga pode valer o custo de teste com seu próprio conteúdo antes de se comprometer com qualquer um deles.
Como faço um mega menu Elementor responsivo no celular?
Mude para a visualização móvel do Elementor e verifique a altura real do painel Empilhe colunas verticalmente, oculte imagens decorativas com os controles de visibilidade responsivos, mantenha os alvos de toque grandes e teste em um telefone real em vez da visualização do editor Se os pontos de interrupção padrão cortarem o menu desajeitadamente, defina o seu próprio com a extensão Pontos de interrupção personalizados.
Por que meu mega menu Elementor não está aparecendo?
Marque quatro coisas em ordem: a extensão Mega Menu está habilitada, o item de menu tem Habilitar Mega Menu marcado, o modelo do painel é publicado em vez de salvo como rascunho e seu cache é limpo Se o painel aparecer, mas estiver cortado, o estouro de um contêiner pai: oculto ou um índice z baixo está ocultando-o.
Leitura Relacionada
