Destaque do plug-in Divi: Divi MadMenu

Divi MadMenu é um módulo de terceiros que adiciona dois novos módulos ao Divi Builder para criar designs de menu interessantes e elegantes. Os módulos incluem muitos recursos para adicionar CTAs, criar formulários pop-up de login e menus deslizantes, e você pode criar menus verticais. Neste post, veremos mais de perto o Divi MadMenu, veremos o que ele pode fazer e como é fácil. Esperançosamente, isso ajudará você a decidir se este é o produto certo para suas necessidades.

Módulos Divi MadMenu

MadMenu adiciona dois novos módulos ao Divi Builder. Segue a descrição de cada módulo:

• Divi MadMenu é o módulo original com as principais características. Inclui botões, opções pop-up, opções de slide-in e muitas opções de layout.
• Divi MadMenu Vertical Menu Module é um novo módulo que adiciona opções de menu vertical.

Recursos do Divi MadMenu

Primeiro, vamos olhar para o módulo original. O módulo Divi MadMenu adiciona muitos recursos. Aqui está uma olhada na guia Conteúdo e nas ferramentas que ela inclui.

elementos

Elementos são todas as coisas que você pode adicionar ao menu. Isso inclui escolher o menu da área de trabalho ou do celular, habilitar o logotipo, a pesquisa, o carrinho, o botão um e o botão dois. Cada elemento é selecionado e ajustado em suas próprias seções na guia Conteúdo. Você os habilitaria aqui e os configuraria abaixo disso.

Menu da área de trabalho

Escolha o menu a ser exibido, defina o ponto de interrupção que muda para a versão do menu móvel do seu menu, escolha a animação do submenu e a duração da animação.

Menu Móvel

O menu móvel permite estilizar a versão móvel do menu separadamente da versão desktop. Escolha o menu móvel a ser exibido, defina o ponto de interrupção, escolha se eles serão recolhidos, feche ao clicar fora, escolha o posicionamento do menu suspenso e ajuste as configurações de animação.

Recolher submenus torna os submenus fechados por padrão. Se você recolhê-los, terá a opção de escolher como eles abrem quando clicados. Escolha entre Expandir, Deslizar para a direita ou Deslizar para a esquerda. Isso também adiciona a opção Usar texto do cabeçalho do submenu, permitindo que você escolha entre Texto do item pai, Texto personalizado e Sem texto.

Deslizar para a direita e Deslizar para a esquerda apontam as setas para a direita ou para a esquerda. Clicar neles desliza o menu nessa direção. Este é o Deslize para a direita. Mostra o submenu aberto e setas indicando que este é um submenu. Ele usa o texto do item pai para o texto do cabeçalho do submenu.

Alternar menu móvel

Ative para exibir apenas um ícone, ajustar um rótulo ou o ícone e o rótulo. Escolha o formato, a etiqueta aberta e fechada e a posição da etiqueta. A posição coloca o rótulo no lado direito ou esquerdo do ícone do menu.

Logotipo

Selecione o logotipo, adicione a URL e escolha se o link abre na mesma janela ou em outra janela.

Procurar

Escolha entre um ícone ou uma imagem e insira o texto do espaço reservado. O texto do espaço reservado aparece na caixa de pesquisa que mostra quando o ícone de pesquisa é clicado.

Carrinho

Selecione o formato do carrinho e escolha entre um ícone ou uma imagem. Isso é compatível com WooCommerce e mostrará o número de itens no carrinho.

A opção de imagem adiciona um seletor de imagem do carrinho onde você pode escolher qualquer imagem em sua biblioteca de mídia como link do carrinho de compras. Ele é redimensionado para corresponder ao menu, mas você pode ajustá-lo nas configurações de Design, se desejar.

Botão um e botão dois

Divi MadMenu adiciona dois botões ao menu que funcionam como CTAs. Você pode adicionar um ou ambos os botões. Adicione o texto do botão, habilite um ícone e escolha entre um URL ou pop-up. O Botão Um e o Botão Dois funcionam da mesma forma.

Para o ícone do botão, você pode escolher entre um ícone ou uma imagem. Você também pode configurá-lo para exibir o ícone ou apenas mostrá-lo ao passar o mouse.

Selecione a guia Autenticação para habilitar o conteúdo do usuário autenticado. Habilitar o conteúdo do usuário abre um novo conjunto de opções onde você pode selecionar o tipo de autorização entre uma URL e um formulário de login. Defina o tipo de link e a URL de redirecionamento de logout.

Configurações do Construtor

Mostrar contornos cria um contorno em torno de cada elemento. Você pode escolher a cor do contorno. Ativar o modo conectado destaca o botão um e altera o texto para mostrar logout, indicando que eles estão conectados.

Divi MadMenu Opções de layout

A guia Design inclui várias configurações especializadas para personalizar o layout do menu.

Divi MadMenu Layout Geral

As configurações incluem Alinhamento de elementos, Direção do menu suspenso, Ordem do menu, Ordem do logotipo, Ordem de pesquisa, Ordem do carrinho e Ordem dos botões. Misturá-los oferece muitas opções de layout.

Elementos de layout

Essas configurações permitem que você faça ajustes em cada um dos elementos individualmente. Altere o alinhamento vertical e horizontal, personalize a largura e personalize a largura máxima. Usados ​​em combinação, eles podem criar alguns layouts interessantes.

Opções de estilo

As configurações do Mad Menu Design incluem todas as opções que você esperaria de um módulo Divi. Adicionei várias configurações de design neste exemplo.

Módulo de menu vertical Divi MadMenu

O módulo de menu vertical Divi MadMenu parece simples no início. Ele inclui uma seção de menu onde você pode escolher o menu a ser exibido e ativar os submenus de recolhimento.

Recolher submenus

A ativação de submenus de recolhimento adiciona opções para o estilo de submenu, tornando os links pai clicáveis, habilita o modo sanfona, escolhe o ícone pai e anima o ícone pai.

Estilo do Submenu

A caixa suspensa Estilo do submenu permite selecionar entre Expandir, Deslizar para a direita e Deslizar para a esquerda.

Este exemplo mostra a opção Slide Left. Também alterei o texto do cabeçalho para Texto personalizado.

Divi MadMenu Opções de layout de menu vertical

A guia Design inclui todas as configurações Divi padrão para estilizar o menu. Adicionei algumas opções de cores, alterei o estilo e o alinhamento da fonte, alterei os cantos arredondados dos submenus e adicionei uma sombra de caixa ao submenu.

Divi MadMenu Demonstração Treze

Divi MadMenu vem com 13 demos para você começar. Para obter a melhor visão do que o Divi MadMenu pode fazer, vamos ver a demonstração número treze para ver o que ele pode fazer. Selecionei este aleatoriamente, mas é bom. Ele usa vários módulos Divi MadMenu para criar um design interessante. Veremos as versões para desktop e telefone.

Divi MadMenu Demonstração Treze Wireframe

A demonstração treze usa dois módulos Divi MadMenu, um módulo de login e um módulo de pesquisa para as configurações principais. Aqui está o wireframe que mostra os módulos.

Ele também inclui mais cinco módulos Divi MadMenu para criar os elementos deslizantes e um módulo de acompanhamento social.

Demo Treze Desktop

Aqui está uma olhada na demonstração no frontend. Os menus na parte inferior são abertos pelo menu de hambúrguer. Normalmente está fechado e fechará automaticamente quando os outros menus forem selecionados.

O ícone da conta abre um menu deslizante à direita. Ele inclui um botão Fechar e um botão Sair, bem como links para as páginas da conta da pessoa.

O ícone de mídia social abre um menu deslizante à esquerda. O ícone de pesquisa abre uma caixa de pesquisa sob o cabeçalho. Esses são os dois únicos elementos de menu que serão abertos ao mesmo tempo.

Demonstração Treze Telefone

A versão para telefone exibe o mesmo formato com o menu hambúrguer abrindo os links da página inicial e da página. Todos os submenus são estilizados para corresponder à barra superior e incluem submenus em expansão.

O ícone da conta abre o menu deslizante à direita.

Todos os ícones sociais são abertos no menu deslizante à esquerda. Como o cabeçalho da área de trabalho, ele será aberto ao mesmo tempo que os homens de pesquisa, mas a pesquisa parece melhor quando aberta sozinha.

A caixa de pesquisa é aberta sob o cabeçalho.

Onde comprar Divi MadMenus

Divi MadMenus está disponível no Divi Marketplace por US$ 39. Inclui uso ilimitado do site, garantia de reembolso de 30 dias e um ano de suporte e atualizações.

Pensamentos Finais

Essa é a nossa visão do Divi MadMenu para Divi. Eu apenas arranhei a superfície neste post. Ambos os módulos são fáceis de usar e fornecem muitas opções de design e layout para menus Divi. As opções de slide são ótimas e a opção pop-up facilita a criação de logins exclusivos. Adicione até dois botões por módulo para criar CTAs. Crie vários layouts com um único módulo ou adicione ainda mais módulos Divi MadMenu para criar cabeçalhos exclusivos. As demonstrações têm uma aparência incrível e fornecem um bom modelo para você começar a criar seus próprios designs ou usá-los como estão.

Nós queremos ouvir de você. Você já experimentou o Divi MadMenu? Deixe-nos saber o que você pensa sobre este Módulo Divi nos comentários.