Principais conclusões
- Elementor sem Pro não pode colocar um menu WordPress em uma página ou em um cabeçalho, porque o widget do Menu Elementor (anteriormente Menu Nav) é fornecido apenas com Elementor Pro.
- Um menu de navegação Elementor sem Pro pode ser construído com o widget Master Addons Nav Menu, que exibe qualquer menu WordPress e define seu layout separadamente para desktop, tablet e celular.
- Os submenus em um menu de navegação do Elementor vêm do WordPress: arraste um item ligeiramente para baixo do pai em Aparência > Menus até ler “sub item” e salve.
- O widget Master Addons Nav Menu tem quatro tipos verticais: Normal abre submenus para o lado no hover, Alternar e Acordeão expandê-los no clique e Side fixa o menu na borda da página.
- O widget Master Addons Nav Menu oferece aos telefones uma alternância de hambúrguer por padrão, enquanto o Hamburger na área de trabalho ou tablet e os tipos Popup e Offcanvas precisam do Master Addons Pro.
Você pode construir um menu de navegação Elementor estilo sem comprar Elementor Pro. O widget de menu próprio do Elementor é apenas Pro, mas o widget Master Addons Nav Menu puxa qualquer menu WordPress para o editor, estilos de todos os níveis do painel e colapsa para um hambúrguer em telefones.
Este guia cobre por que o Elementor principal deixa a lacuna, as maneiras de preenchê-la e a construção do cabeçalho em seis etapas Então vêm os submenus, os quatro tipos de menu vertical, o comportamento móvel, as razões usuais pelas quais um menu não aparece e as partes que precisam do Master Addons Pro.
Índice
Por que o Elementor free não possui widget de menu
O plugin gratuito da Elementor envia dezenas de widgets de layout e conteúdo e nenhuma maneira de colocar um menu de navegação WordPress em uma página ou modelo O widget que faz isso, originalmente chamado de Menu Nav e agora o widget Menu, é apenas Pro. Documentação própria do Elementor confirma isso.
Você ainda pode construir o menu em Aparência > Menus A lacuna está no lado do design: o Elementor principal não tem nada para colocar esse menu, então ele aparece onde quer que seu tema o imprima.
Em um site simples com um tema pronto para menu, isso pode ser suficiente Uma vez que você quer um cabeçalho personalizado, um hambúrguer alternar você controlar ou um mega menu, Elementor livre sozinho não pode chegar lá Tutoriais antigos chamam o Pro widget Nav Menu e os mais recentes chamam de Menu, mas sempre precisou Pro.
Três maneiras de adicionar um menu de navegação sem Pro
Existem três opções reais sem uma licença Elementor Pro. A quarta linha é Elementor Pro, para comparação.
| Método | Precisa do Elementor Pro | Estilo editor | Móvel | Melhor para |
|---|---|---|---|---|
| Localização do menu temático | Não | Nenhum, o tema controla | Depende do tema | Sites simples em um tema pronto para menu |
| Widget de menu mestre Addons Nav | Não | Cheio, do painel | Hamburger alternar em telefones | Um cabeçalho personalizado sem Elementor Pro |
| Menu Mega de complementos mestres | Não | Completo | Colapsos para uma alternância | Painéis de várias colunas, navegação grande |
| Widget do menu Elementor Pro | Sim, licença paga | Completo | Inclui off-canvas | Sites já no Elementor Pro |
Localização do menu temático. Cada tema registra pelo menos uma área de menu Atribua seu menu e ele funciona com zero plugins, mas você não obtém controle sobre seu visual do Elementor, e o comportamento móvel é o que quer que o autor do tema tenha construído Se esse menu já parecer certo em um telefone, pule o widget.
Widget do menu Nav de complementos mestre. Esta é a opção Elementor-nativa que roda sem Elementor Pro. Solte o Widget do menu Nav em qualquer modelo, aponte-o para um menu em Aparência > Menus e estilo cores, espaçamento, submenus e alternância móvel do painel.
Menu Mega de complementos mestres. Para sites com muitas categorias, a extensão Mega Menu constrói painéis multicolunas em cima do mesmo widget e roda sem Elementor Pro. Passo a passo: como construir um mega menu no Elementor sem Pro.
Elementor Pro. Se você já possui, use seu widget Menu e o Construtor de Tema Dois plugins para um trabalho adicionam peso apenas.
Quer ver cada layout antes de construir? O Página do widget do menu Nav possui demonstrações ao vivo de cabeçalhos horizontais, barras laterais verticais e hambúrguer do telefone.
Construa o menu, comece a terminar
A compilação acontece no wp-admin e no editor Elementor, sem código Primeiro verifique se o seu tema não está imprimindo seu próprio cabeçalho, porque dois cabeçalhos empilhados é a bagunça mais comum aqui.
Passo 1: Registre o menu
Vá para Aparência > Menus, crie um menu, adicione suas páginas e links e dê a ele um nome que você reconhecerá em seis meses Isso é simples WordPress, nada específico para plugins e WordPress tem um guia para a tela Menus se você não construiu um antes Configure qualquer dropdowns aqui também (veja o seção submenu).
Passo 2: Criar um modelo de Cabeçalho
Abrir o Construtor de temas Master Addons e adicione um novo modelo com o tipo definido como Cabeçalho Isso permite substituir o cabeçalho do tema em vez de combatê-lo Para começar a partir de um design acabado, importe um desses Modelos de cabeçalho do elementor e aponte seu widget de menu para o seu menu.
Passo 3: Adicione o widget Menu Nav e escolha seu menu
Pesquise no painel Elementor por “Nav Menu” e arraste-o para o cabeçalho (seu painel lê Menu de navegação).Em Conteúdo > Geral, escolha o menu que você construiu na etapa 1 no menu suspenso Selecionar menu e, em seguida, defina o layout horizontal adequado a um cabeçalho padrão, com um controle de alinhamento ao lado Vertical adequado a uma barra lateral e adiciona um controle de tipo com Normal, Alternar, Acordeão e Lado.
O layout é definido por dispositivo A área de trabalho começa no Horizontal e os telefones começam no Hamburger, de modo que o menu entra em colapso em um telefone sem configuração extra.
Passo 4: Estilo-lo
Os estados de fonte, cor, espaçamento e hover estão todos na guia Estilo, sem CSS personalizado O item do menu principal contém preenchimento, intervalo de itens, alinhamento, tipografia, cores normal, hover e ativa, fundo, borda, raio e sombra de texto O Elementor principal não pode fazer nada disso para um menu.
Passo 5: Publique e atribua-o
Salve o modelo e atribua-o a Todo o Site Sem Master Addons Pro que é a única condição de exibição disponível, que funciona quando você quer um cabeçalho em todos os lugares.
Passo 6: Verifique-o na extremidade frontal
Carregue o site e confirme apenas uma renderização de cabeçalho Se o menu do tema também mostrar, desligue-o nas configurações do Customizer do tema, já que ocultá-lo com CSS deixa a marcação na página.
Como adicionar um submenu e estilizar o menu suspenso
Para adicionar um submenu a um menu de navegação do Elementor, aninhe o item sob seu pai em Aparência > Menus, e o widget o transforma em um menu suspenso Não há configuração de submenu dentro do Elementor.
- Abrir Aparência > Menus e selecione o menu que o widget usa.
- Adicione a página ou link filho se ainda não estiver no menu.
- Arraste-o sob seu pai e ligeiramente para a direita até que o rótulo “sub item” apareça ao lado de seu nome.
- Clique em Salvar menu e recarregue o editor Elementor ou o front-end.
Em um cabeçalho horizontal, o pai obtém uma seta indicadora (definida em Conteúdo > Ícone Indicador) e o submenu é aberto ao passar o mouse.
Menu Dropdown estiliza o painel (largura, fundo, borda, raio, sombra, distância da barra superior).Item do menu Dropdown estiliza os links dentro dele: tipografia, lacuna, preenchimento, cores Normal, Hover e Active, e um divisor opcional Os menus de terceiro nível obtêm seções correspondentes do Submenu Dropdown demonstração de variações do menu suspenso mostra vários estilos de painel construídos desta forma.
Os quatro tipos de menu vertical
O menu vertical Elementor em Master Addons vem em quatro tipos: Normal, Alternar, Acordeão e Lateral Defina Layout como Vertical e um controle Tipo aparece sob ele Tipo é definido por dispositivo também, então uma barra lateral pode usar Acordeão em um tablet e Normal na área de trabalho.
normal
Normal abre cada submenu para o lado de seu pai no hover, como um flyout Ele se adapta a uma barra lateral da área de trabalho com espaço à direita.
Alternar
Toggle expande o submenu sob seu item no clique e empurra os itens abaixo para baixo Vários submenus podem permanecer abertos de uma só vez, o que ajuda quando a barra lateral dobra como um índice.
Acordeão
Accordion também se expande no clique, mas abrir um submenu fecha o aberto Isso mantém menus longos curtos em uma coluna estreita.
Lado
Side prende o menu à borda da página, com os itens principais em uma barra vertical e cada submenu em um painel ao lado dele O demonstração do menu lateral vertical mostra-o numa página inteira.
O demonstração do menu de navegação vertical mostra uma versão estilizada da barra lateral.
Fazendo funcionar no celular
Em telefones o widget Menu Nav colapsa em um alternador de hambúrguer por padrão A seção Menu Hambúrguer da guia Conteúdo define seu alinhamento, ícone, texto ou ambos, uma visualização padrão, empilhada ou emoldurada, forma e ícones normais e ativos separados.
O alternador funciona a partir do teclado, bem como pelo toque Enter and Space abri-lo, Esc fecha-lo, e um toque fora do menu fecha-lo também.
Nos telefones o menu abre no lugar sob o alternador, e submenus expandir dentro dele Que se adapta menus curtos e médios Um painel fora da tela que desliza para dentro do lado é um recurso Pro, coberto abaixo.
Teste em um telefone real, bem como na barra de ferramentas do dispositivo do navegador, porque os alvos de toque e os toques externos se comportam de maneira diferente em uma tela sensível ao toque Verifique se o ícone muda de estado quando o menu está aberto e se um item de submenu está acessível com um polegar.
Por que seu menu de navegação Elementor não está sendo exibido
Quando um menu de navegação do Elementor não é mostrado, a causa é quase sempre uma dessas quatro Verifique-as em ordem.
- Nenhum menu está selecionado ou não existe nenhum menu. Criar um menu não o conecta ao widget, então escolha-o em Selecionar menu. Se o campo disser “Não há menus no seu site”, crie um primeiro.
- O modelo de cabeçalho não é aplicado. Um modelo de Cabeçalho não faz nada até que tenha uma condição de exibição Defina o Site Inteiro no Construtor de Tema e verifique se nenhum cabeçalho de tema o cobre.
- Em um telefone, o menu está atrás do hambúrguer. Os telefones mostram a alternância em vez dos links Se a cor da alternância corresponder ao fundo do cabeçalho, o ícone fica invisível e o menu parece faltar Dê à alternância uma cor contrastante em Estilo > Hambúrguer.
- Caching ou JavaScript atrasado. Um cache de página pode servir o cabeçalho antigo, e o atraso do JavaScript pode impedir que os dropdowns e a alternância funcionem até que o visitante mova o mouse Limpe o cache e exclua os scripts de menu do atraso do JS.
O que precisa Master Addons Pro
Duas partes desta configuração precisam do Master Addons Pro.
Hamburger no desktop ou tablet, além dos tipos Popup e Offcanvas. Layout oferece Horizontal e Vertical em todos os dispositivos, com Hamburger marcado como Pro. Os telefones tiram o hambúrguer padrão da caixa, mas o Hamburger em telas mais largas e os tipos Popup ou Offcanvas precisam de Pro. Portanto, um menu deslizante fora da tela é um recurso pago aqui, através do layout Hamburger ou separado Widget de conteúdo off-canvas, que abre qualquer modelo salvo em um painel Sem Pro, a opção mais próxima é o tipo Side do layout Vertical.
A segmentação do criador de temas é uma regra. O Gratuito Construtor de Tema salva exatamente uma condição de exibição: Todo o Site Um cabeçalho diferente em uma landing page ou para membros logados precisa Pro. Nosso análise das condições de exibição explica como funcionam as regras de condição e o guia gratuito do Construtor de Tema cobre o resto desse nível.
O widget não tem animações de ponteiro hover (o menu do Elementor Pro as tem) e nenhuma configuração pegajosa em qualquer plano Para manter o cabeçalho à vista, use os Efeitos de Movimento do Elementor Pro no contêiner do cabeçalho ou adicione selector { position: sticky; top: 0; z-index: 99; } para o recipiente através do Complementos mestres Extensão CSS personalizada. O guia de cabeçalho pegajoso caminha por ambos.
Se você já possui o Elementor Pro, nada disso se aplica O diretório de widgets e extensões lista o resto do plugin e, se o cabeçalho precisar de uma seção, você continua reconstruindo manualmente, o Construtor de widgets (Pro) transforma-o num widget real O página preços lista os níveis.
Perguntas frequentes
Elementor grátis tem um widget de menu?
O widget No. Elementor's Menu vem apenas com o Elementor Pro. Master Addons adiciona seu próprio widget Nav Menu que roda sem o Elementor Pro, para que você possa colocar e estilizar um menu de navegação real sem essa licença.
Você pode criar um menu de navegação no Elementor sem Pro?
Sim. Registre o menu em Aparência > Menus, então use um addon como Master Addons para soltar um widget Nav Menu em um modelo de cabeçalho e estilizá-lo a partir do painel Elementor livre sozinho não pode colocar ou estilizar um menu.
Como adiciono um menu de hambúrguer móvel no Elementor sem Pro?
Adicione o widget Master Addons Nav Menu ao seu modelo de cabeçalho e selecione seu menu Ele entra em colapso para um hambúrguer alternar em telefones por padrão, com configurações de ícone, texto, visualização e forma na seção Hamburger Menu.
O menu fora da tela precisa do Master Addons Pro?
Sim. Off-canvas é um tipo dentro do layout Hamburger, e os tipos Popup e Offcanvas, ou Hamburger no desktop e tablet, exigem Master Addons Pro. Sem Pro você obtém layouts Horizontais e Verticais mais o hambúrguer padrão nos telefones, e o tipo Vertical Side é a opção ancorada lateralmente mais próxima.
Como faço para criar um mega menu no Elementor sem Pro?
Master Addons inclui uma extensão Mega Menu que constrói painéis multicolunas, colapsa no celular e roda sem Elementor Pro. Funciona com o widget Nav Menu para navegação maior com categorias ou conteúdo promocional.
Por que meu menu de navegação Elementor não está sendo exibido?
Normalmente nenhum menu é escolhido no campo Selecionar Menu do widget Em seguida, verifique se o modelo de cabeçalho está atribuído a Todo o Site, se o ícone do hambúrguer não é da mesma cor que o cabeçalho nos telefones e se o cache ou atraso do JavaScript não está servindo uma versão antiga.
Preciso do Master Addons Pro para o widget Nav Menu?
Não. O widget está incluído sem Pro, com estilo, submenus, layouts horizontais e verticais por dispositivo, quatro tipos verticais e o hambúrguer de telefone. O Pro adiciona Hamburger no desktop e tablet, os tipos Popup e Offcanvas e as condições do Theme Builder além de todo o site.
Como adiciono um submenu a um menu de navegação do Elementor?
Vá para Aparência > Menus, arraste o item filho sob seu pai e ligeiramente para a direita até que ele seja rotulado como “sub item”, em seguida, clique em Salvar Menu O widget Menu Nav mostra-o como um dropdown, estilizado em Estilo > Menu Dropdown e Item Menu Dropdown.
O que fazer a seguir
Construa o cabeçalho com um layout Horizontal e um ou dois submenus, em seguida, carregá-lo em seu próprio telefone antes de estilizar qualquer outra coisa A maioria dos problemas de menu são problemas móveis, e eles aparecem em dez segundos em um dispositivo real Se o menu precisa de painéis de várias colunas, o guia mega menu pega a partir daí, e o Documentação do menu Nav lista todos os controles.
- Página do widget do menu Nav: layouts, demonstrações ao vivo e uma comparação com os widgets de menu do Elementor Pro.
- Extensão do mega menu: painéis de várias colunas com qualquer widget Elementor dentro.
- Navbar carvão com mega menu demo: um cabeçalho completo construído com ambos.
Leitura relacionada
