Um dropdown padrão mostra uma lista fina de links Um mega menu abre um painel amplo que apresenta uma seção inteira do seu site de uma só vez: colunas de links agrupados, imagens, ícones, até mesmo uma chamada à ação Menu Mega extensão em Complementos Mestres para Elementor anexa um desses painéis a qualquer item de menu do WordPress, e você projeta o próprio painel no editor normal do Elementor, para que qualquer coisa que você possa construir em uma página possa viver dentro de sua navegação Para uma visão geral e demonstrações rápidas, consulte o construtor de mega menu Elementor grátis página.
Aqui está o resultado final da demonstração: produtos flutuantes abre um painel de três colunas com links agrupados e uma imagem em destaque.
O que a extensão Mega Menu faz #
Uma vez ativado, cada item do seu menu WordPress recebe um pop-up de configuração do Mega Menu Aparência → Menus. Ligue-o para um item e o dropdown desse item se tornará um modelo Elementor. A extensão lida com:
- Painéis por item: habilite o megapainel apenas nos itens que dele necessitam; o resto permanece links comuns.
- Projeto de painel visual: o conteúdo suspenso é construído com o editor Elementor, usando todos os widgets que você gosta.
- Largura do megamenu: Largura padrão, total ou largura personalizada com um valor exato de pixel.
- Efeito Gatilho: abra o painel ao passar o mouse ou ao clicar.
- Transição: escolha como o painel é animado, desvanece-se na demonstração.
- Menu Móvel: decida o que os telefones recebem, inclusive mostrando o conteúdo do construtor dentro do menu alternar.
- Distintivo e Ícone: anexe um crachá de destaque ao rótulo do item de menu (gratuito) ou um ícone com sua própria cor (Pro).
Antes de começar #
- WordPress com Elementor instalado e ativo; a versão gratuita é suficiente.
- Complementos Mestres para Elementor instalado e ativo. Novo no plugin? siga o guia instalação primeiro.
- Um menu WordPress já criado em Aparência → Menus, mesmo um áspero; você pode refiná-lo mais tarde.
NOTA: Você pode controlar o fundo do seu mega menu a partir da opção de estilo de página Certifique-se de colocar a cor de fundo, imagem ou o que você preferir na opção de estilo Por padrão, será definido um fundo branco Mas você pode fazer a personalização do seu fundo a partir desta configuração Dê uma olhada & quot; Dê uma olhada
Passo 1: Habilite a extensão Mega Menu #
Do seu painel WordPress, vá para Adições Mestres e abra o Extensões guia. Mega Menu fica no Exibir widgets grupo. Clique em sua alternância para que fique roxo e depois bata Salvar alterações e aguarde o aviso verde “Settings saved succcess com sucesso O Master Addons envia tudo desligado por padrão para que seu site carregue apenas o que você realmente usa Se a nova opção não aparecer no admin imediatamente, atualize a página com força (Cmd/Ctrl + Shift + R); os plugins de cache tendem a manter o menu de administrador antigo por um minuto.
Passo 2: Ligue o Mega Menu para o seu menu #
Aberto Aparência → Menus. Um novo Menu Mega de complementos mestres a caixa aparece acima da lista de itens do menu. Trocar Habilitar Mega Menu on e aguarde o verde “Mega Menu Saved” confirmação Cada item na estrutura do menu agora carrega um roxo Mestre Mega emblema, o que significa que pode hospedar um painel.
Passo 3: Habilite o painel em um item de menu #
Passe o mouse sobre um item de nível superior, normalmente algo amplo como Produtos ou Serviços, e abra suas configurações do Mega Menu. No pop-up Conteúdo guia, inverta Megamenu habilitado para SIM. O Editar conteúdo do Megamenu botão aparece; ele abre o editor Elementor para o painel deste item Hit Salvar no pop-up quando você terminar.
Ative apenas o painel sobre itens que realmente precisam do espaço Um mega menu em um único link de contato faz com que os visitantes trabalhem mais para um destino.
Passo 4: Projete o painel no Elementor #
Clique Editar conteúdo do Megamenu e o editor Elementor familiar abre com o painel como a tela A demonstração constrói três colunas: dois grupos de links sob os títulos Gravar e Analisar, além de uma coluna de imagem para que o painel não seja uma parede de texto Publique o modelo quando o layout estiver pronto; um modelo de rascunho não será renderizado no menu ao vivo, o que faz as pessoas subirem mais do que qualquer outra coisa.
Links de grupo por como os clientes pensam em vez de seu organograma, e limite cada coluna em cinco a sete links; passado isso, a digitalização entra em colapso Dê a uma coluna um trabalho além dos links, como um produto em destaque ou um chamada à ação. E mantenha as imagens compactadas, pois o painel carrega em cada página do site, não apenas em uma.
Etapa 5: defina largura, gatilho e transição #
De volta ao pop-up do item, o Configurações tab controla como o painel se comporta:
- Largura do megamenu: O padrão corresponde ao menu, a largura total estende de ponta a ponta, a largura personalizada assume um valor exato de pixel, como 800 px.
- Menu Móvel: o que os telefones recebem; O conteúdo do construtor mostra o mesmo painel projetado dentro do menu de alternância do celular.
- Efeito Gatilho: Hover abre o painel com o mouse; alterne para clicar se preferir aberturas deliberadas.
- Transição: a animação de entrada, Fade in the demo.
- Mostrar etiqueta do menu/Mostrar descrição (Pro): rótulo opcional e texto de descrição no item.
O Distintivo a guia no mesmo pop-up anexa um crachá de destaque, útil para marcar uma entrada Nova ou Venda. O Ícone tab, para uma cor de ícone e ícone, precisa de Master Addons Pro.
Passo 6: Coloque o menu no seu cabeçalho #
Se o seu tema já renderiza o menu WordPress, o mega menu funciona imediatamente Para controle total do cabeçalho, construa um com o gratuito Construtor de temas Master Addons: crie um modelo de cabeçalho, coloque no Widget do menu Nav, e selecione o menu que carrega seus mega painéis A seção Geral do widget cobre layout, alinhamento e o ponto de interrupção onde o menu entra em colapso.
Verifique a visualização móvel #
Mude o editor Elementor para visualização móvel antes de publicar O menu desmorona atrás de um alternador de hambúrguer e os links empilham verticalmente Verifique a altura real do painel aqui; um painel de quatro colunas que parece nítido em 1440 px pode se transformar em um pergaminho sem fim em um telefone Se ele funcionar por muito tempo, esconda as imagens decorativas com os controles de visibilidade responsivos do Elementor e mantenha os links Em seguida, teste em um telefone real, já que a visualização se aproxima do comportamento do toque, mas não o reproduz.
O resultado na página #
Com a Largura Total selecionada, o painel publicado abrange toda a janela de visualização borda a borda; a versão em caixa na parte superior desta página mostra a largura Padrão para comparação De qualquer forma, passar o item abre o modelo projetado com a transição que você escolheu.
Onde um mega menu funciona bem #
- Lojas. Categorias de produtos, best-sellers e uma imagem promocional em um painel em Loja.
- Agências e negócios de serviços. Serviços agrupados por resultado com um estudo de caso em destaque.
- Editores e blogs. Hubs de tópicos com a última postagem puxada para dentro do painel.
- Sites SaaS. Recursos, soluções e recursos organizados lado a lado em vez de dropdowns aninhados.
- Universidades e organizações. Departamentos e links rápidos que de outra forma enterrariam três níveis de profundidade.
Solução de problemas #
- Mega menu não aparece. Confirme se a alternância de extensão está ativada, se o item de menu tiver Megamenu Habilitado definido como SIM e se o modelo do painel for publicado em vez de salvo 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. Um contêiner pai tem estouro oculto ou 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 Verifique as configurações móveis do widget do Menu Nav e confirme se nada se sobrepõe ao destino do toque.
Perguntas frequentes #
Como adiciono um mega menu no Elementor sem Pro?
Habilite a extensão Mega Menu na guia Extensões de complementos mestres, alterne Habilitar Mega Menu em Aparência → Menus, defina Megamenu Habilitado para SIM no item desejado e projete o painel com Editar conteúdo do Megamenu Elementor Pro não é necessário.
A extensão Mega Menu é gratuita?
Sim. Mega Menu é fornecido com a versão gratuita de Master Addons for Elementor, no grupo Display Widgets da guia Extensões. O página preços cobre o que os planos Pro adicionam.
O painel pode ser largura total?
Sim. A guia Configurações do pop-up de itens oferece Largura padrão, total e Largura personalizada. A largura personalizada assume um valor exato de pixel, como 800 px, quando você deseja que o painel seja mais estreito que a página.
O que posso colocar dentro do painel suspenso?
Qualquer coisa Elementor pode construir: widgets de cabeçalho, listas de ícones, imagens, botões, formulários O painel é um modelo Elementor regular, então cada widget disponível em uma página está disponível no menu.
Como se comporta o mega menu no celular?
O menu colapsa atrás de uma alternância de hambúrguer e os links se empilham verticalmente A configuração do Menu Móvel controla se os telefones obtêm o conteúdo do construtor projetado dentro da alternância, e os controles responsivos do Elementor permitem ocultar elementos pesados do painel em telas pequenas.
Embrulhando #
O Extensão do mega menu transforma um menu WordPress simples em navegação projetada com três movimentos: ativar a extensão, ativar o painel em um item e criar o menu suspenso no Elementor. Largura, gatilho, transição, emblemas e ícones (com Pro) são todos definidos a partir do pop-up do item e emparelhá-lo com o gratuito Construtor Tema e Widget do menu Nav dá-lhe um cabeçalho personalizado completo sem Elementor Pro. O conjunto completo de Widgets e extensões Master Addons está a uma página de distância.
