Como Criar um MEGA MENU com Elementor Pro e WordPress [Passo a Passo]

Neste vídeo eu vou te ensinar como criar  Mega menu com Elementor Pro. Fala pessoal, tudo bem? Aqui é a Micaela do Descomplicando Sites  e antes de partir pro tutorial eu quero te pedir para deixar um like nesse vídeo que ajuda demais o  canal a crescer e para você se inscrever no canal.

Bom pessoal eu vou usar como exemplo essa loja  aqui que é a loja Modas Glow que é um projeto que eu ensinei vocês a criar aqui no canal né  passo a passo com o Elementor Pro e o nosso template para quem não sabe todos os projetos  Que a Gente tá ensinando a criar aqui no canal a gente tá vendendo em forma de template que é  uma cópia do site exata você consegue instalar no seu WordPress e modificar Então eu peguei o  template dessa loja aqui essa sim eu ensinei a criar passo a passo todos os aspectos que é a Udi  Tech né Aí eu ensinei vocês a pegar esse template e transformar nesse aqui né para mostrar aqui  qualquer projeto que a gente cria você consegue adaptar para qualquer nicho e eu vou deixar o  link da loja aqui na descrição ou então você pode acessar templates. com kites. com PBR se você  quiser adquirir um dos nossos templates ok pessoal tô aqui no site da Shein para mostrar para vocês  uns exemplos Olha só de mega menu principalmente em lojas grandes eles usam muito o mega menu  para poder categorizar mais ainda os produtos e facilitar a busca né e o Elementor Pro ele tem  essa função então Ó o menu padrão a gente consegue colocar aqui só com menu suspenso e com a função  de mega menu você consegue criar o layout do jeito que você quiser né ele abre um contêiner para  você criar qualquer coisa para isso você precisa estar com essa função ativa Então você precisa  vir aqui em Elementor, configurações, recursos, a abinha de menu precisa estar em ativo e também  você precisa estar com elementos alinhados ativos aí você clica aqui em salvar alterações Lembrando  que essa função só tem no Elementor Pro inclusive Nós somos parceiros de afiliados do Elementor o  nosso link de afiliado fica aqui na descrição do vídeo Se você quiser adquirir o Elementor Pro o  nosso link você nos ajuda a trazer mais conteúdo relevante para você depois que você ativa  essa opção aí quando você acessar aqui o seu item de menu né só passar o mouse aqui em cima de  Elementor clicar em menu que aí você vai abrir o editor do menu e aí você pode substituir esse menu  aqui pelo mega menu você vem aqui na biblioteca pesquisa menu é esse aqui ó aí você joga ele  aqui vou até arrastar esse aqui para baixo esse menu que já estava vou deixar ele aqui na parte de  baixo só pra gente ficar vendo né menu novo é esse ele vem como se fosse aquele de Abas você clica  quando você não quiser que tenha o mega menu você coloca só o título e o link aqui como por exemplo  vou colocar aqui home aqui eu vou colocar o link da página home se você escreve que ele já puxa a  página né aqui eu vou colocar todas as peças vou clicar aqui no botão direito clicar em copiar o  link que aí eu já pego o link exato dele aqui esse aqui que é o de outono inverno eu não vou colocar  nenhum link porque é nele que eu vou criar o meu mega menu e em todos os outros eu vou só escrever  o título e colocar o link Então os que você não quiser que seja Mega menu você só escreve o título  e coloca o link Pronto já fiz aqui todos os itens que eu quero e no item que eu vou querer fazer  o mega menu que é esse de outono inverno eu vou abri-lo e vou ativar a função de drop Down assim  que eu ativo isso já aparece o ícone tá vendo aí se você clica ele abre um contêiner E aí nesse  contêiner você pode editar e fazer o que você quiser eu vou até ensinar para vocês um modelinho  aqui que vai ser o seguinte se você quiser fazer com machin e quando você passar o mouse ficar  na extensão da tela toda esse Mega menu aí você começa a criar a partir disso aqui mesmo ó levando  em consideração que o contêiner principal é esse daqui aí você teria que vir aqui em estilo por  exemplo colocar uma cor de fundo eu vou colocar uma cor de fundo diferente um cinza bem clarinho  só para você conseguir visualizar Mas você pode deixar branco também se você quiser e aí você vai  criando aqui na extensão desse contêiner todo por exemplo se você quiser colocar dois contêineres  aqui dentro aí você vem cria aqui nesse eu vou vir e avançado colocar um espaçamento então aqui só  precisa você ter habilidade com elemento para você criar o layout que você quiser eu vou vir aqui  vou colocar um título vou vir na biblioteca vou pegar uma lista de ícones vou dar dois exemplos  aqui bem legais para vocês vai aqui nessa lista de ícones eu vou excluir os ícones deixar só os  títulos então por exemplo a gente pode colocar as categorias casa casaco Blazer sobretudo como  eu fiz aqui casaco Blazer sobretudo moleton tricô e no final ver tudo né para ir ver todos os  produtos juntos e aí você vai modificando em cada um desses tem a abinha de link para você colocar  o link correspondente a cada uma das categorias se você não tiver em nenhuma parte aqui do site  que dê para você copiar que nem por exemplo aqui a gente já tinha feito né Blazer é só clicar com o  botão direito clicar em copiar endereço do link e vir aqui em em blazer e colar o link se você não  tiver nenhum lugar que dê para você colar você vem aqui no WooCommerce aliás aqui no produtos  categorias e copia as categorias por aqui que nem por exemplo casacos né Clica com o botão direito  clica em copiar o link e cola o link aqui a você modifica por exemplo você pode colocar um espaço  entre os itens aqui na parte de texto você vem e coloca um tamanho adequado aqui em lista também  se se você quiser deixar com divisor que às vezes tem alguns modelos ou você pode deixar também vou  vir aqui no contêiner principal e diminuir a cor desse cinza Olha você pode vir aqui na lista de  ícones em texto ao passar o mouse e deixar uma outra cor pra pessoa entender que é para clicar né  você consegue fazer várias coisas e eu recomendo que você faça também um Carrossel por exemplo se  você já tiver um Carrossel pronto você pode vir aqui no próprio editor do Elementor copiar e colar  lá se você tiver feito o Carrossel com loop Grid que nem eu Já ensinei vocês a criar aqui no canal  você pode vir aqui na biblioteca pegar o widget de loop Carrossel selecionar aqui produtos selecionar  o modelo né que no nosso Card aqui foi o card de produtos ok que já vem com o modelo pronto aqui  você configura quantos que você quer que apareça ó se colocar um fica grande colocar dois fica um  tamanho legal e aqui em consulta você seleciona o tipo da categoria que está aqui por exemplo  aqui eu vou colocar só de outono inverno então eu venho aqui coloco em seleção manual clico aqui  em incluir coloco incluir por termo qual termo que é aí eu vou colocar outono inverno outono  inverno que aí ele vai mostrar só os produtos dessa categoria aí você vem adapta do jeito que  você quiser ó fica legal assim ou você pode fazer semelhante ao da Shein também que aí no caso  seria vir aqui pegar uma uma caixa de imagem arrastar para cá só que aí você precisaria vir  aqui na biblioteca e pegar primeiro uma grade pega uma grade coloca aqui coloca a caixa de  imagem aqui e aí você vem configura né a caixa de imagem escreve tudo que você quer as mesmas  categorias que a gente tinha colocado casacos blazers coloquei todas as categorias e aí você  vai selecionando cada uma das imagens se você já tiver as imagens arredondadas que nem fazer  nesse projeto Inclusive tem vídeo aqui no canal só ensinando como fazer imagens arredondadas lá no  canva você já tiver as imagens arredondadas melhor que aí você só vem seleciona a imagem e ela já  vai ficar bonitinha agora se você não tiver você pode vir aqui pegar a imagem por exemplo pegar a  imagem desse moo aqui seleciona vem aqui em estilo vem imagem deixa a imagem do tamanho que você  quer vem aqui em conteúdo resolução da imagem deixa em personalizar E aí você coloca um tamanho  de imagem para ficar quadrado né Por exemplo 400 por 400 aí ficou a imagem quadrada Aí você vem  aqui em estilo imagem e aqui em raio da borda que é o arredondamento aí você deixa 100 para ficar  100% arredondado que aí fica dessa forma aí você vem vem conteúdo ajusta o texto vem aqui encaixa  diminuir o espaçamento entre a imagem vem aqui em imagem em Ação passar o mouse coloca uma animação  Ok fica dessa forma depois que você fizer todas as edições em um você clica com o botão direito  copia Clica com o botão direito e cola o estilo nas outras imagens e é só ir selecionando cada  um dos itens e pronto por estar aqui você pode ajustar o carrossel às vezes não precisa de todos  os Navegantes como as setas por exemplo Às vezes você pode deixar só eh os pontos então você vem  aqui em navegação as setas aí você tira aí já fica um espaçamento melhor aqui no estilo você vem  paginação ó o espaço entre os itens também você pode diminuir que já fica mais bonito o espaço  entre a paginação e os produtos também você pode diminuir um pouco então você vai ajustando E aí  depois disso é só você publicar aí só falta a gente terminar de ajustar né então por exemplo vou  vir aqui no menu vou vir em estilo aqui em menu itens eu vou ajustar a tipografia deixar igual  a que estava no menu anterior que era tamanho 17 peso 400 aqui no menu Eu também tinha colocado  essa ação passar o mouse com a cor de fundo então vou fazer isso também vou vir aqui em Rover o  tipo de plano de fundo eu vou deixar com essa cor rosa ele vai ficar assim e a cor eu vou deixar de  branco então vai ficar assim quando a gente passar o mouse e no ativo a cor eu vou deixar branco  e o tipo de plano de fundo eu vou deixar rosa também a eu posso excluir esse menu que eu tinha  deixado salvo só para ficar olhando só terminar de ajustar vem aqui em conteúdo vem aqui em posição  dos itens deixo ele alinhado ao centro se você quiser você pode deixar esticado também eu prefiro  aqui alinhado ao centro se você quiser também é mudar o espaçamento entre os itens tem por aqui ó  tem várias configurações aí você pode ir testando cada uma delas e a ação de passar o você configura  por aqui ó a largura do conteúdo quando você clica para abrir você configura aqui drop Down efeito  né que é o efeito de descer esse Mega menu tem como você fazer com Hover que é só ação de passar  o mouse igual o da shein né que quando você passa o mouse ele já aparece ou então a função de clique  a pessoa precisa clicar para poder aparecer o mega menu e aqui a animação de quando ele aparece  Por enquanto só tem o f in e aqui é a duração da animação aqui é para alternar entre os itens né  entre os menus a gente não tem outros Mega menus aqui por isso que não não vou configurar e aqui  configurações adicionais né se você quer que tem rolagem horizontal rolagem vertical que serve para  quando igual lá lá no shein né quando tem muitos itens E aí você coloca uma rolagem horizontal  para a pessoa ir rolando aqui a tela e não rolar a tela rolar só o menu beleza aí depois de todas  as alterações feitas você clica aqui em publicar ó vamos recarregar a página e aí quando a gente  passa o mouse já aparece aqui o nosso menu então ele está na extensão da tela inteira tá vendo  se você não quiser que fique na extensão da tela inteira você pode configurar por exemplo vem  aqui no contêiner inteiro deixa transparente e aí só nesses contêineres internos você coloca uma  cor então Ó vou vir aqui deixar de branco só nos contêiner internos recarregamos ó passou o mouse  e aí Abriu somente nesse espaço Por enquanto ele ainda não tem uma configuração pra gente diminuir  o tamanho desse contêiner principal ele fica realmente na extensão da tela toda então se você  quiser que apareça só aqui no meio você tem que trabalhar com as configurações de espaçamento do  contêiner que tiver no meio Tá mas é isso ele dá muitas possibilidades aqui pra gente fazer tudo  quanto é tipo de layout que a gente quiser no Mega menu lembra Lembrando que esse menu aqui é o  menu para computador né se você for colocar ele no celular aí você precisa adaptar no nosso caso aqui  a gente criou um outro layout de menu pro celular que é esse né a gente criou um menu personalizado  tem vídeo aqui no canal ensinando a criar ele inclusive Então é isso Pessoal espero muito que  vocês tenham gostado, se você tiver curtido, deixa um like no vídeo, se inscreve no canal, me  segue nas redes, um abraço, até a próxima, tchau.