Como criar um Mega Menu no Elementor | Mega Menu Builder

Se você está procurando criar um mega menu Elementor no WordPress, o módulo Mega Menu do ElementsKit pode tornar o processo fácil e rápido. Leia esta documentação para aprender como criar um mega menu no WordPress usando o ElementsKit em algumas etapas simples.

Visão geral #

Kit de Elementos is the all-in-one addon that gives you the best possible way to build WordPress websites with a wide range of widgets, modules, and highly customizable pre-designed templates.

Isso inclui o Módulo Mega Menu do ElementsKit plugin. A mega menu is a powerful feature in WordPress that allows you to create a category-based expandable menu with flexible layouts. Elementor Mega menus are easy to use and can be a great way to show the multi-level website menu in an organized way.

Watch our video guide on Elementor Mega Menu Building:

Ou siga as instruções passo a passo sobre como criar um mega menu no Elementor:

Pré-requisito: #

Como criar um mega menu no WordPress Elementor #

Antes de tudo, antes criando um Mega Menu Elementor no WordPress certifique-se de habilitar o ElementsKit Mega Cardápio módulo de ElementsKit > Módulo no painel do WordPress.

Como criar um mega menu Elementor no WordPress

Step #1: Configure WordPress Menu #

Para crie um mega menu WordPress em seu site,

  • Navegar para Aparência > Menus no painel do WordPress.
  • Clique em Crie um novo cardápio.
como criar mega menu no elementor
  • Introduzir um Nome do cardápio.
  • Clique no Criar cardápio botão.
criando um mega menu no WordPress

Agora você pode adicionar itens ao mega menu. Por isso,

  • Expandir Links personalizados on the “Add menu item” on the right column.
  • Introduzir um URL e Texto do link.
  • Clique em Adicionar ao cardápio.

Em seguida, adicione outros itens de menu da mesma maneira.

personalize o mega menu em sites WordPress

Depois disso, marque a caixa de seleção “Habilite este menu para conteúdo do Megamenu”. Quando o mega menu estiver habilitado, você clicará ícone de configurações do mega menu quando você passa o mouse sobre os itens do menu.

Criação de mega menu Elementor

Etapa #2: personalizar o conteúdo do Elementor Megamenu #

Ao clicar no ícone de configurações do mega menu, um pop-up será aberto. No pop-up,

  • Botão de alternância para ativar o Mega Menu.
  • Clique no Salvar botão.
  • Depois disso clique no EDITAR CONTEÚDO DO MEGAMENU botão. Isso o levará ao botão do editor Elementor.
personalizar o conteúdo do mega menu para Elementor
  • Clique no Ícone da biblioteca de modelos do ElementsKit
Mega cardápio do Ekit
  • Vá para as seções=> Clique no Categoria=> Selecione Megamenu da lista.
Plugin de mega menu do ElementsKit
  • Insira qualquer Elementor Mega Menu Modelo.
conteúdo do mega menu
  • You’ll see your inserted pre-designed mega menu template item will display.
visualização do mega menu no Elementor

Layout de controle #

  • Edite a seção interna clicando na seção pontilhada.
  • Caixa de largura de conteúdo: personalize a largura do conteúdo arrastando para a direita ou para a esquerda.
  • Largura total do conteúdo: Selecione Largura completa.
layout do megamenu

Selecione a lacuna da coluna #

  • Lacuna da coluna=> Selecione sua lacuna de coluna no suspenso.
menu suspenso para mega menu

Escolha a posição #

  • Altura: Selecione sua altura arrastando da esquerda para a direita.
  • Alinhamento vertical: Selecione Alinhamento vertical no menu suspenso.
  • Transbordar: Selecione Overflow Padrão ou Oculto.
personalize as posições do mega menu

Seção de alongamento #

Toggle this button to turn the Elementor mega menu to full-width, which spans from right to left of the screen’s width.

Selecione a etiqueta HTML #

  • Selecione seu Etiqueta HTML de Suspenso.
menu suspenso do mega menu

Se você quiser ver em ação, assista a este vídeo e faça você mesmo em poucos minutos.

Personalize o texto do título do Mega Menu #

  • Selecione o tipo de ícone.
  • Ativar para adicionar ícone.
  • Carregar ícone de cabeçalho.
  • Adicionar ou editar título.
  • Adicionar Editar Descrição.
layout do megamenu

Personalizar texto #

  • Adicionar ou editar Texto.
  • Adicionar ou editar Legenda.
  • Habilitar para Mostrar etiqueta.
  • Adicionar ou editar Rótulo.
  • Customizar Cor de fundo, tipografia, preenchimento, alinhamento, raio.
  • Quando terminar, clique em atualizar e feche a janela.
personalizar textos do mega menu

Etapa #3: Personalizar ícone #

  • Agora vá para Guia Ícone=> Escolha qualquer cor do Paleta de cores.
personalização de ícones para o menu
  • Selecione Ícone de Biblioteca de ícones.
biblioteca de ícones de menu do ElementsKit, um mega plugin de menu para Elementor

Etapa #4: personalizar o selo #

  • Adicionar ou editar texto.
  • Escolher Cor do emblema.
  • escolher Cor de fundo do emblema.
  • Clique Salvar.
Como adicionar mega menu no WordPress Elementor

Etapa #5: Configurações #

Largura padrão #

  • Selecione a largura do Mega Menu: Padrão.
  • Selecione a posição do Mega Menu: Padrão.
  • Salvar a janela.
  • Visualização do site: Mostrando largura padrão com posição padrão.
Como adicionar megamenu no WordPress Elementor

Relativo Padrão  #

  • Selecione a largura do Mega Menu: Padrão.
  • Selecione a posição do Mega Menu: Relativo.
  • Clique Salvar.
  • Visualização do site: Mostrando largura padrão com posição relativa.
Como construir um mega menu com o ElementsKit

Largura total padrão #

  • Selecione a largura do Mega Menu: Largura completa.
  • Selecione a posição do Mega Menu: Padrão.
  • Clique Salvar.
  • Visualização do site: Mostrando largura total com posição padrão.
Configurações do mega menu usando ElementsKit

Posição relativa da largura total #

  • Selecione a largura do Mega Menu: Largura completa.
  • Selecione a posição do Mega Menu: Relativo.
  • Clique Salvar.
  • Visualização do site: Mostrando Largura total com posição relativa.
Definir posição relativa de largura total do mega menu usando o ElementsKit

Largura padrão personalizada #

  • Selecione a largura do Mega Menu: Largura personalizada.
  • Forneça qualquer largura personalizada, mas por padrão, é 750 px.
  • Selecione a posição do Mega Menu: Padrão.
  • Clique Salvar.
  • Visualização do site: Mostrando Largura personalizada com posição padrão.
Como editar o menu de navegação usando o ElementsKit

Largura padrão personalizada Relativo #

  • Selecione a largura do Mega Menu: Largura personalizada.
  • Forneça qualquer largura personalizada, mas por padrão, é 750 px.
  • Selecione a posição do Mega Menu: Relativo.
  • Clique Salvar.
  • Visualização do site: Mostrando Largura personalizada com posição relativa.

Etapa #6: Crie um modelo de cabeçalho #

Aqui você pode usar o Modelo de cabeçalho Elementor ou você pode usar o Modelo de cabeçalho do ElementsKit. Vamos ver como adicioná-lo.

  • Navegar para ElementsKit→ Cabeçalho Rodapé→ e clique Adicionar novo.
  • Uma caixa pop-up será aberta com opções.
Como construir um modelo de cabeçalho usando o ElementsKit
  • Na caixa pop-up digite um Título, selecione os Tipo→ Cabeçalho.
  • Selecione os Condições→ Site inteiro.
  • Alterne o Ativação opção e clique em Editar com Elementor.
Crie um cabeçalho usando o ElementsKit
  • Selecione seu Estrutura da área selecionada.
Crie um menu de navegação usando o ElementsKit
  • Agora pesquise Menu de navegação=> Arraste o Menu de navegação do Ekit e Derrubar na área selecionada.

** Nota: Certifique-se de arrastar o menu ElementsKit Nav, caso contrário o Megmenu criado não aparecerá.

Como adicionar menu de navegação usando o ElementsKit
  • Agora vá para Configurações do menu=> selecione seu criado Menu de cabeçalho no menu suspenso.
  • Você pode adicionar qualquer tipo de widget aqui para personalizar seu modelo de cabeçalho.
Arraste e solte o menu de navegação para criar o cabeçalho

Resultado Final #

Feito isso, clique no Atualizar botão para salvar o menu.

Agora vá até seu site e você poderá ver que o menu Elementor Mega selecionado está sendo exibido corretamente.

visual final do mega menu
Quais são os seus sentimentos
Updated on Julho 15, 2025