Como criar um Popup Mega Menu com Elementor Pro WordPress
Neste vídeo tutorial ensino como criar um Popup Mega Menu utilizando o Elementor Pro e WordPress. Vamos aprender também como fazer a troca das imagens dos itens de menu ao passar o mouse sobre cada um deles, e por fim colocar links nas categorias e sub-categorias de menu, bem como adicionar produtos as mesmas.
Para este trabalho vamos usar o Elementor e o Elementor PRO e como tema o Hello Elementor, um tema em branco muito leve.
► ÍNDICE
00:00 INTRODUÇÃO
03:23 CRIANDO MODELO DE POPUP
04:33 CONFIGURAÇÕES INICIAIS POPUP
07:30 CRIANDO SEÇÃO CABEÇALHO POPUP
18:43 CRIANDO SEÇÃO NOVIDADES / LOJA
21:01 CRIANDO SEÇÃO CONTEÚDO
21:01 CRIANDO A COLUNA FEMININO
29:04 CRIANDO A COLUNA MASCULINO / INFANTIL
30:11 AJUSTANDO A PORCENTAGEM DAS COLUNAS
31:07 PUBLICANDO O POPUP MEGA MENU
33:23 ADICIONANDO AS IMAGENS
39:10 ADICIONANDO CSS
44:08 ADICIONANDO AS IMAGENS NA 2ª COLUNA
46:33 AJUSTANDO IMAGENS NA 2ª COLUNA
48:10 ADICIONANDO IMAGENS NA 3ª COLUNA
49:38 AJUSTANDO IMAGENS NA 3ª COLUNA
54:12 COLOCANDO LINKS NOS ITENS DE MENU
58:06 COLOCANDO PRODUTOS EM SUAS CATEGORIAS
1:01:37 CHAMANDO O POPUP PELO BOTÃO NA HOME
Olá Pessoal! Sejam Bem-Vindos!
Deixo abaixo minha chave PIX. Quem quiser apoiar o canal e puder contribuir com qualquer valor, será de grande ajuda.
Desde já, muito obrigado e grande abraço a todos.
✅ Chave Pix:
9ce174b0-f45a-4e7e-9364-87bde6168a22
► Links importantes:
✅ HostGator: https://partners.hostgator.com/x3Gr1
✅ Elementor: https://be.elementor.com/visit/?bta=8...
✅ Junior TI: https://juniorti.com
Este é meu cupom de desconto Hostgator: juniortipromo (com ele você terá o mais alto desconto possível)
✅ Link de afiliado HostGator: https://partners.hostgator.com/x3Gr1
👍 Se você gostou do vídeo, CURTA, COMPARTILHE e INSCREVA-SE no canal!
🔔 Clique no sininho para receber as notificações de novos vídeos!
❤️ Espero que vocês gostem deste trabalho tanto quanto eu. Muito obrigado a todos por terem assistido.
✅ Crédito CSS:
Efeito de imagem hover CSS: • Create a Popup Text Path Menu with a Hover...
.esconder{
opacity:0;
}
.mostrar:hover + .esconder{
opacity:1;
}
✅ Créditos Imagens
https://unsplash.com
https://pixabay.com/pt
✅ Créditos Música
Biblioteca gratuita de áudios YouTube
Free mp3: Apex - / audiolibrary
✅ Créditos Animações
▶▶▶▶▶
ANIMAÇÕES CRIADAS PELO CANAL SAVIO FERRAZ ( / savioferraz .
BAIXE VOCÊ TAMBÉM, É GRÁTIS!!!
▶▶▶▶▶