Todo site precisa de um menu, e o cabeçalho padrão do tema raramente corresponde a um design personalizado do Elementor O gratuito Widget do menu Nav em Complementos Mestres para Elementor renderiza qualquer menu WordPress dentro do editor Elementor: layouts horizontais ou verticais definidos por dispositivo, submenus estilizados e uma alternância de hambúrguer que assume o controle dos telefones.
Este guia percorre o widget desde o primeiro arrasto até um menu estilizado com um menu suspenso funcional na página ao vivo.
O que o widget Menu de navegação faz #
O widget puxa um menu que você construiu em Aparência, Menus e o renderiza como um elemento Elementor Você escolhe o layout e o comportamento, estiliza cada estado dos itens, os dropdowns e a alternância do celular, tudo no painel Elementor Os próprios itens de menu, seus rótulos, pedido e submenus, permanecem gerenciados no WordPress, para que os editores de conteúdo nunca toquem no Elementor para adicionar uma página ao menu.
Antes de começar #
- WordPress com Elementor instalado e ativo.
- Complementos Mestres para Elementor instalado e ativo. Novo no plugin? veja o guia instalação.
- O widget Menu Nav habilitado no painel de opções Master Addons, em Widgets de navegação.
- Um menu criado em Aparência, Menus no seu painel A demonstração usa um menu “main” com Home, Pricing, Team e Contact, além de um submenu FAQ em Contact.
Como adicionar o widget Menu de navegação #
No editor Elementor, pesquise no Elementos painel para Menu NAV e arraste-o para a página, normalmente em uma seção de cabeçalho O widget renderiza seu primeiro menu WordPress imediatamente.
Escolha o menu e o layout #
O Geral seção conduz o widget inteiro. Selecione Menu lista todos os menus da tela Menus; escolha aquele para renderizar. Layout ofertas Horizontal, Vertical e Hambúrguer (Pro), e você pode configurá-lo separadamente para cada dispositivo Para menus verticais, Tipo adiciona o comportamento: Normal, Alternar, Acordeão ou Lado. Aqui está o menu de demonstração em um layout vertical:
Para um cabeçalho, Horizontal é a escolha usual. Alinhamento coloca os itens à esquerda, centro, direita ou justificado Não existe uma única configuração de ponto de interrupção: alternar Elementor para tablet ou visualização de telefone e escolher o layout para esse dispositivoOs telefones usam o alternador de hambúrguer por padrãoVale a pena tentar Vertical uma vez, mesmo que você não precise; ver ambos os layouts faz com que as opções de alinhamento cliquem.
Configurar a descida #
O Menu Dropdown a seção controla o comportamento e o indicador do submenu:
- Indicador suspenso: mostre ou oculte a seta ao lado de itens que carregam um submenu.
- Posição do indicador, lacuna entre, tamanho do ícone: onde a flecha se senta e quão grande ela é.
- Ícone suspenso: troque a divisa padrão por qualquer ícone, com estados Normal e Hover e um controle Rotate.
- Largura e alinhamento suspenso: o tamanho e o alinhamento do texto do painel de submenu.
- Indicador de submenu: o ícone para menus de terceiro nível.
Configure o alternador móvel #
Quando um dispositivo usa o layout do hambúrguer, o menu entra em colapso atrás de um botão de alternância. O Menu Hambúrguer a seção configura: Alinhamento, Tipo (Ícone, texto ou ambos), Ver (Padrão, empilhado ou emoldurado), Forma (Quadrado ou Círculo), e ícones separados para os estados Normal e Activo Mude o editor para a antevisão móvel e a alternância aparece com o menu empilhado por baixo dele:
Estilize os itens do menu #
No Estilo guia, Item do menu principal abrange os links de nível superior. Tipografia lida com a fonte:
Abaixo dele, Normal, Pairar, e Ativo abas cada transporte Cor, Cor do fundo do item, e Sombra de texto, mais compartilhado Preenchimento Horizontal e Vertical, Espaço Entre, e controles de borda A demonstração define uma cor azul hover, visualizando ao vivo como o cursor cruza Preços:
Estile a alternância, a lista suspensa e os itens #
Mais três seções de Estilo terminam o trabalho:
Hambúrguer estiliza a alternância: cor, fundo, raio da borda, sombras, tamanho do ícone e preenchimento, com estados Normal, Hover e Ativo.
Menu Dropdown estilos o painel do submenu: cor de fundo, lacuna da parte superior, borda e preenchimento. Submenu Dropdown abrange menus mais profundos.
Item do menu suspenso estiliza os links dentro do painel, com os mesmos três estados mais a Divisor grupo para a linha entre os itens:
O resultado na página #
Na página ao vivo, o menu renderiza em seu estilo: o hover afirma o disparo e o submenu de perguntas frequentes que cai em Contato exatamente onde as configurações suspensas o colocam.
Casos de uso comum #
- Cabeçalhos personalizados construído com Elementor, onde o menu do tema não pode seguir o design.
- Páginas de destino com seu próprio menu fino, separado do menu de todo o site.
- Navegação lateral usando o layout Vertical em páginas de documentação ou categoria.
- Menus Mobile-First apoiando-se nas opções de ícone, visualização e forma do alternador.
- Menus multiníveis com dropdowns estilizados e painéis de subnível.
Dicas para um melhor menu de navegação #
- Construa o menu no WordPress primeiro. O widget renderiza menus de Aparência, Menus; ele não os cria Estrutura lá, estilo aqui.
- Dê cores diferentes ao Hover e ao Active. O Hover responde ao cursor; o Active indica aos visitantes em que página eles estão A mesma cor desperdiça o sinal.
- Verifique cada dispositivo em um telefone real. Um menu de quatro itens pode caber bem nos tablets, enquanto um menu de sete itens também pode precisar de um layout vertical nos tablets.
- Estile o plano de fundo suspenso explicitamente. Um submenu transparente sobre o conteúdo da página é a reclamação de menu mais comum que vemos; um fundo sólido do Menu Dropdown o corrige em um clique.
Vídeo Tutorial #
Se você quiser ver o widget Menu de navegação em ação, este vídeo percorre toda a configuração, desde a escolha do menu até o menu suspenso estilizado na página ao vivo:
Perguntas frequentes #
O que é o widget Menu de Navegação em Master Addons?
É um widget Elementor que renderiza qualquer menu WordPress com controle de estilo completo Ele oferece layouts horizontais e verticais definidos por dispositivo, submenus estilizados com indicadores personalizados e um alternador de hambúrguer configurável que os telefones usam por padrão.
Onde adiciono ou removo itens de menu?
No WordPress, em Aparência, Menus O menu suspenso Selecionar menu do widget lista todos os menus que você construiu lá e renderiza o que você escolhe Os itens, pedidos e submenus são gerenciados no WordPress; o widget lida com layout e estilo.
Como faço um submenu suspenso?
Aninhe itens no seu menu WordPress arrastando-os sob um pai na tela Menus O widget mostra um indicador suspenso ao lado dos pais automaticamente, e as seções Menu suspenso e Lista suspensa controlam o comportamento e o estilo do painel.
Quando aparece o menu do hambúrguer móvel?
Nos telefones por padrão Master Addons Pro permite escolher o layout Hamburger para qualquer dispositivo, com tipos Popup e Offcanvas A seção Hamburger Menu estiliza o alternador, incluindo ícone ou tipo de texto, visualizações empilhadas ou emolduradas, forma quadrada ou circular e ícones normais e ativos separados.
O menu pode ser vertical em vez de horizontal?
Sim. O controle Layout oferece Horizontal, Vertical e Hamburger (Pro).Vertical se adequa às barras laterais e páginas de documentação, e o controle Type adiciona comportamentos Toggle, Accordion ou Side no topo.
Embrulhando #
O widget Menu de navegação coloca o menu do site onde o resto do seu design vive: escolha um menu WordPress, escolha o layout, estilo os itens, dropdowns e alternância móvel e publique Ele emparelha naturalmente com o Conteúdo Off-Canvas widget (Pro) para navegação móvel deslizante. Navegue pelo conjunto completo de Widgets e extensões Master Addons, e veja o Página do widget do menu Nav para uma comparação com os widgets de menu do Elementor Pro.
