Como criar um Mega Menu no Elementor | 5 etapas fáceis

Um mega menu é um tipo de menu de navegação expansível que revela várias opções de uma só vez, geralmente agrupadas em categorias para melhorar a experiência do usuário. Ao contrário dos menus suspensos tradicionais, os mega menus oferecem um layout mais amplo, geralmente com colunas, imagens, ícones ou até mesmo widgets.

É especialmente útil para sites de comércio eletrônico, portais de notícias ou qualquer site grande com muito conteúdo que precise ser facilmente acessível.

Mas se você quiser criar um mega menu no Elementor, isso não será possível porque o Elementor (a versão gratuita) permite layouts de navegação simples usando o widget Nav Menu; ele não tem a estrutura avançada necessária para um mega menu completo. Você se depararia com limitações como:

• Não há suporte para dropdowns de várias colunas
• Não há incorporação de imagens ou widgets nos itens de menu
• Estilo e controle de foco limitados

Portanto, se você deseja um mega menu avançado, moderno e fácil de usar com recursos avançados, precisará usar um plug-in de terceiros para ativar essa funcionalidade. Portanto, neste blog, mostrarei a você Como criar um mega menu no Elementor em 5 etapas fáceis

Esta é a visualização do mega menu que criaremos usando o Elementor:

Criar um Mega Menu do WordPress no Elementor

Criar um mega menu detalhado para seu site WordPress com o Elementor pode parecer complicado. O Elementor é ótimo para páginas, mas os menus avançados geralmente precisam de mais. Muitos plugins oferecem recursos de mega menu para o Elementor, mas o Element Pack se destaca por simplificar as coisas.

Com alguns outros plug-ins, você pode se deparar com configurações confusas, opções de design limitadas ou dificuldades para fazer com que o menu tenha a aparência certa em diferentes dispositivos. Pode parecer que você está lutando contra a interface apenas para ter um mega menu básico configurado. 

Element PackNo entanto, o Elementor oferece todo o poder necessário por meio de uma interface fácil de usar. Ele permite que você crie mega menus impressionantes sem as frustrações típicas, fornecendo uma maneira direta de adicionar conteúdo e layouts diretamente no Elementor.

Então, vamos começar a criar o mega menu inteiro com o Element Pack.

Pré-requisito

Em primeiro lugar, confirme se esses dois plug-ins foram instalados e ativados: 

• Elementor: A versão gratuita é suficiente.
• Element Pack: Esse plug-in do WordPress adiciona recursos de mega menu especificamente para o Elementor.

Etapa 1: Habilite os módulos e widgets do Mega Menu

A ativação do recurso Mega Menu no Element Pack Pro envolve o ajuste de várias configurações no painel do WordPress. Portanto,

• Acesse o Element Pack Pro em seu painel do WordPress.

• Navegue até a seção Recursos especiais guia.
• Ative o Mega Menu Switcher e salve as configurações.

• Em seguida, vá para a seção Widgets principais guia.
• Ative os widgets Mega Menu e Sub-Menu.
• Salvar as configurações.

• Salve novamente os permalinks para garantir a funcionalidade adequada.

Etapa 2: Criar e configurar o menu Elementor

Agora você precisa criar seu mega menu. Siga as etapas básicas abaixo para um gerenciamento eficaz do menu.

• Ir para Aparência > Menus.

• Dê um nome ao seu menu e clique em Criar menu.

• Adicione itens de menu (links personalizados ou páginas existentes) ao menu.

• Para cada item que você deseja transformar em um Mega Menu, ative o Mega Menu Switcher para ativá-lo.
• Salve o menu e atualize a página.

Etapa 3: projetar o mega menu

Depois de criar o menu, a ativação do Element Pack Mega Menu Switcher permite a personalização dos itens do menu. Esse recurso destaca os itens prontos para serem convertidos em Mega Menus.

A personalização dos mega menus com opções de largura e ícones melhora a experiência do usuário. Esses elementos ajudam a integrar visualmente o menu ao design de seu site. Portanto, crie algumas noções básicas do sistema de acordo com suas necessidades.

• Passe o mouse sobre um item de menu com o Mega Menu ativado.
• Clique no botão Editar Mega Menu que aparece.

• Será exibida uma janela pop-up

• Ligar Ativar o Mega Menu.
• Defina a largura do menu (padrão ou personalizada).
• Adicione um texto de emblema, se desejar, que aparecerá próximo ao item de menu.
• Escolha um ícone de menu e a cor do ícone.
• Clique em Salvar opções.

Etapa 4: Personalizar o Mega Menu do Elementor

Agora, para personalizar o mega menu, precisamos abri-lo com o Elementor. Portanto,

• Clique no botão Editar conteúdo do menu suspenso.

• O editor Elementor será aberto.

• Arraste e solte widgets no layout do Mega Menu.
• Use o widget Sub-Menu e crie colunas, adicione imagens, ícones, texto, etc.

• Personalize os estilos, o espaçamento e o layout conforme necessário.

• Use a visualização do Elementor para ver a aparência do Mega Menu.
• Você pode usar outra maneira de criar um submenu usando Copiar e colar em tempo real
• Basta ir para Demonstração do Mega Menu Element Pack
• Escolha uma demonstração

• Agora, escolha um estilo e clique no ícone Copiar e colar em tempo real botão
• Aqui, estou copiando o elemento de menu Men's da demonstração da Adidas

• Agora, volte ao editor do Elementor e cole

• O modelo completo do mega menu estará disponível aqui.

Etapa 5: Personalização do layout e do estilo do controle

Seu layout e estilos podem exigir personalização adicional para mantê-lo semelhante ao seu site. Portanto,

• Agora, ajuste o estilo e o conteúdo conforme necessário.

• Use o modo responsivo para garantir uma boa aparência no celular.
• Verifique o menu nas visualizações para desktop e celular.

Etapa 6: Salvar e aproveitar

Agora estamos no final, 

• Vá para o modelo ou página em que deseja exibir o mega menu.

• Pesquise o widget do mega menu na seção Element Pack
• Arraste e solte-o no layout da página

• Selecione o menu e defina a direção do menu

• Agora, se você precisar fazer alguma alteração de layout ou estilo, conclua-as e clique no botão Publish (Publicar).

• Agora, visite sua página ou modelo e passe o mouse sobre o menu, e você verá o mega menu.

Mega Menu avançado no Elementor: visualização

O Element Pack Maine Focus permite que você crie um mega menu avançado. Aqui estão alguns mega menus avançados criados pelo Element Pack.

É uma cópia do dribble para criar um mega menu como o site do Dribbble

Com o Element Pack, você pode criar mega menus avançados como esse para comércio eletrônico.

Você também pode criar esse belo mega menu com o Element Pack.

Conclusão

Criar um mega menu no Elementor a partir do zero pode parecer assustador no início, mas com as ferramentas certas e uma abordagem estruturada, ele se torna uma maneira poderosa de elevar a navegação do seu site e a experiência do usuário. 

Independentemente de você ter uma loja de comércio eletrônico, um blog rico em conteúdo ou um site corporativo, um mega menu bem projetado ajuda os visitantes a encontrar o que precisam mais rapidamente, além de mostrar o profissionalismo da sua marca.

Seguindo as etapas descritas acima, você criou um mega menu totalmente funcional e visualmente atraente, que é responsivo e personalizável. Não se esqueça de testá-lo em todos os dispositivos e refinar o layout com base no feedback do usuário. O Element Pack lhe dá a flexibilidade de ajustar e dimensionar o menu à medida que o site cresce.

Está pronto para ir além? Tente integrar conteúdo dinâmico, ícones ou até mesmo elementos do WooCommerce para tornar seu mega menu realmente interativo. As possibilidades são infinitas. Portanto, continue experimentando e deixe sua criatividade guiar o caminho!

PERGUNTAS FREQUENTES

Blogs mais recentes

• Lançada a versão 9 do Element Pack Pro: O que há de interessante?
• Como adicionar um controle deslizante de depoimento no WordPress usando o Elementor
• Como você mantém o acordeão fechado por padrão no Elementor?
• Como impedir que os links Elementor sejam sublinhados (3 maneiras)
• Guia fácil: Como adicionar código a uma página no Elementor | 5 etapas fáceis