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: #

• Elementor Page Builder Plugin (Free version is enough)
• Elements Kit Pro

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.

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.

• Introduzir um Nome do cardápio.
• Clique no Criar cardápio botão.

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.

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.

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.

• Clique no Ícone da biblioteca de modelos do ElementsKit

• Vá para as seções=> Clique no Categoria=> Selecione Megamenu da lista.

• Insira qualquer Elementor Mega Menu Modelo.

• You’ll see your inserted pre-designed mega menu template item will display.

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.

Selecione a lacuna da coluna #

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

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.

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.

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.

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.

Etapa #3: Personalizar ícone #

• Agora vá para Guia Ícone=> Escolha qualquer cor do Paleta de cores.

• Selecione Ícone de Biblioteca de ícones.

Etapa #4: personalizar o selo #

• Adicionar ou editar texto.
• Escolher Cor do emblema.
• escolher Cor de fundo do emblema.
• Clique Salvar.

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.

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.

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.

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.

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.

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.

• 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.

• Selecione seu Estrutura da área selecionada.

• 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á.

• 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.

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.