Ir para o conteúdo principal

Revisão de plugins WordPress: Divi Mega Pro

Você está procurando os melhores temas e plugins do WordPress?

Baixe os melhores plugins e temas WordPress no Envato e crie facilmente o seu site. Já mais do que 49.720.000 downloads. [EXCLUSIVO]

Menus mega são um elemento de design popular que pode dar ao seu site um impulso de elegância, proporcionando aos visitantes uma camada extra de navegação. Existem várias maneiras de adicionar mega-menus para Divi. Um dos métodos mais simples que usei é o deum plug-in de terceiros chamado Divi Mega Pro .

O Divi Mega Pro facilita a criação de mega menus usando o Divi Builder. Cada menu pode ser adicionado a qualquer elemento usando uma classe CSS. Isso significa que você pode adicionar um layout Divi a qualquer link de menu, mas pode ir além e adicioná-los a qualquer elemento de um layout Divi simplesmente adicionando uma classe CSS.

É ótimo para criar menus e pop-ups com módulos de armazenamento, imagens, sliders, portfólios, ícones, textos de apresentação, vídeos, blogs, etc. Também funciona com o Extra.

Criar um Mega Menu Mega Pro

crie um mega menu divi com divi mega.png

O menu Divi Mega Pro é adicionado ao menu do painel. Aqui você pode inserir sua chave de licença, visualizar os menus criados e criar um novo menu. Quando você clica para adicionar um novo menu, você verá um editor para o tipo de publicação do menu. A tela é simples, mas muitas coisas estão acontecendo aqui.

design de um menu Mega Pro.png

Editor - você pode criar o mega-menu ou uma dica de ferramenta usando o Divi Builder.

mude o fundo do mega menu.png

Mega Pro Background - Você pode selecionar o fundo e as cores da fonte.

escolha a localização do menu.png

Visualizar localizações - escolha todas as páginas ou nomeie páginas específicas e insira exceções.

escolha a animação do menu.png

Mega Pro Animation - selecione uma animação. Escolha entre offset, offset, perspective, fade ou scale.

escolha o gatilho css.png

Mega Pro Triggers - adicione um gatilho como seletor CSS. Depois de salvá-lo, você verá a classe CSS que será colada no campo de classe CSS de um item de menu, módulo, linha ou seção. Isso é clicado ou voado para exibir o menu. Tudo pode ser usado como um gatilho e não apenas como um item de menu. Isso significa que você também pode usar o Divi Mega Pro para criar pop-ups ou dicas de ferramentas.

estilo de menu de configuração divi.png

Configurações de exibição Mega Pro : Escolha a direção de exibição (para cima ou para baixo), insira as margens superior e inferior em pixels, escolha uma porcentagem de largura e ative uma seta. Ativar a seta revela mais personalizações nas quais você pode escolher o tipo de seta (triângulo ou redonda), escolher a cor, definir a largura e a altura e visualizar a seta.

personalização de botões divi.png

Divi: O melhor tema WordPress de todos os tempos!

mais Downloads 554.000Divi é o tema WordPress mais popular do mundo. É completo, fácil de usar e vem com mais de modelos livres 62. [Recomendado]

personalizações o botão fechar: ative o botão fechar na área de trabalho ou no celular e personalize o botão fechar. Se você ativá-lo, a cor do texto, a cor do plano de fundo, o tamanho da fonte, o raio da borda, o preenchimento e as personalizações de exibição serão visualizados.

configuração adicional divi mega pro.png

Parâmetros adicionais Mega Pro - escolha o tipo de trigger (pairado ou clicado), o tipo de saída (pairou ou clicou) e insira o retardo de saída.

Modelos Divi Mega Pro

modelos diferentes disponíveis divi mega pro.png

O desenvolvedor forneceu vários modelos para o Divi Mega Pro. Quando você compra o plug-in, esses modelos estão disponíveis em sua conta, na guia Modelos de layout dos plug-ins. Estes são ótimos para ajudar você a começar a projetar seus mega menus. Vou usar alguns deles nos meus exemplos.

Menu Divi Mega Pro

menu divi mega pro.png

Depois de criar um mega-menu, ele aparecerá na lista. Aqui você pode editar, editar rapidamente ou excluir menus. Você também pode pesquisar, filtrar por data, visualizar por status, etc. Ele também fornece a exclusiva classe Mega Pro para que você possa copiá-los daqui em vez de abrir cada um deles para obter a classe.

Quando você copiar a turma, cole-a sem espaços extras. Caso contrário, todos os mega menus da página não funcionarão mais.

Tenho certeza de que não seria fácil adicionar, mas um recurso de cópia e edição seria conveniente. Você pode salvar layouts Divi em sua biblioteca para reutilização, mas isso não inclui as configurações vizinhas.

Adicionando um gatilho

escolha o seletor divi.png

No campo Mega Pro Triggers você verá uma classe Mega Pro exclusiva. Copie e cole-o no campo Classe CSS do item que você deseja usar como um acionador.

classes css.jpg

Para adicionar o campo Classe CSS a um item de menu, você deve ativar as classes CSS. Na tela do menu, selecione Opções de tela e habilite classes CSS.

adicione uma classe css menu divi.png

Crie facilmente sua loja online

Baixe gratuitamente o WooCommerce, os melhores plugins de e-commerce para vender seus produtos físicos e digitais no WordPress. [FREE]

Cole a classe CSS no campo de menu. Agora, este item de menu exibirá o mega-menu passando o mouse e levará você para a página click-to-click.

divi mega menu design pro.png

Você notará que o Divi Mega Pro também é uma opção nas opções de link do menu. Eles são ótimos para adicionar um item de menu para o menu que realmente não vai a lugar nenhum. Adicione a classe CSS como qualquer outro item de menu.

Seção de contato no menu mega

seção de contato mega menu pro.png

O menu abre em foco. Eu sempre posso clicar no link Contato para abrir a página de contato, se desejar. Se eu apenas quisesse que o mega-menu fosse exibido, eu poderia simplesmente usar o link do menu principal Contato e renomeá-lo (como no exemplo acima).

Neste, eu modifiquei ligeiramente as cores usando as configurações de fundo e exibição, em vez de usar o Divi Builder. Ele adiciona uma barra na parte inferior do menu.

Chamada simples para ação com colunas de menu

design contact section divi mega pro.png

Este é um dos modelos que adicionam vários colunas. Eu faço ajustes nas cores de plano de fundo e de fonte. Eu também adicionei uma seta e fiz a largura de 75%.

mudar de cor de fundo divi mega pro.png

As opções de cor e fonte de fundo adicionam um pouco mais para destacá-lo. Deixei o alinhamento padrão, que coloca o menu no lado direito da tela. Você pode ajustar o posicionamento nas configurações.

abas

design de menu com abas mega menu divi.png

O modelo de guia inclui um módulo de código com jQuery para criar o efeito de rollover.

menu de demonstração com aba divi mega pro.png

Eu adicionei conteúdo às guias e as adaptei ao site. Cada um dos links à esquerda mostra uma guia diferente na maior parte do menu.

Configurações de bolhas de informação

demo infobulles divi.png

Para este, adicionei a classe CSS a um texto de apresentação para abrir uma pequena janela pop-up. O pop-up é apenas uma imagem com uma sombra por baixo.

Na imagem acima, meu mouse passa sobre as palavras LIVE WEBSITE. Ainda não ajustei o posicionamento, mas é fácil fazer com que pareça onde você quer.

design de informação bull divi mega pro.png

Para este, criei um pop-up para mostrar uma imagem com texto. Defina a direção da exibição como Baixa e, para que ela apareça ao lado da imagem que desejo adicionar, adicionei uma margem de -300.

resultado info bubble divi.png

A janela pop-up agora aparece à esquerda e no topo da imagem enquanto eu sobrevoar. Eu adicionei uma cor de fundo transparente, uma cor de borda, um preenchimento e um contorno arredondado.

Licença e documentação

licença e demonstração.png

Você tem a escolha entre quatro licenças:

  • Único site - 15 $ por ano
  • Três sites - US $ 29 por ano
  • Sites ilimitados - 59 $ por ano
  • Tempo de vida ilimitado - 129 $ uma vez

A documentação é fornecido por uma demonstração em vídeo e um artigo no site explica os recursos e explica, passo a passo, como usar o plugin.

Outros tutoriais Divi

Este artigo contém comentários 2
  1. Olá:
    Onde posso ver como uma janela pop-up é feita?
    Não tenho como consegui-lo. Eu só poderia criar um mega menu, mas os popups que eu vinculei não abrem.
    Eu encontrei alguns e-mails com Divi Life, mas eles não esclareceram nada.
    Muito obrigado.

Deixe um comentário

Seu endereço de email não será publicado. Campos obrigatórios estão marcados com *

Este site usa Akismet para reduzir indesejados. Saiba mais sobre como seus dados de comentários são usados.

De volta ao topo
8 ações
ação8
chilrear
Enregistrer
Whatsapp