Como Criar MENU FIXO e TRANSPARENTE que MUDA DE COR ao Rolar [Elementor Pro]

Neste vídeo eu vou te ensinar como criar um  menu transparente que muda de cor na rolagem da tela. Olá pessoal, tudo bem? aqui é Micaela  do Descomplicando Sites e antes de começar a nossa aula eu quero te pedir para deixar um like  no vídeo que ajuda demais o canal a crescer e para você se inscrever no canal.

Eu estou aqui  em um site de portfólio este aqui essa versão foi feita com Elementor Pro eu ensinei vocês  a criar passo a passo esse site aqui no canal também temos ele disponível à venda na nossa  loja de templates temos essa versão aqui que foi feita com Elementor Pro e também temos uma  versão feita com Elementor Free todos os projetos que a gente ensina aqui no canal ficam à venda  aqui na nossa loja de templates OK basta você acessar templates. comandsites. com.

br ou clicar  no link da descrição pessoal eu já tenho um menu desta maneira feito aqui né ele fica transparente  aqui em cima do banner e aí na hora que a gente rola a tela ele muda de cor mas eu desativei  ele e aí sem o menu ele fica assim né com as configurações padrões do tema e vou te ensinar a  criar aqui eu vou ensinar a criar todo o menu tá se você quiser ver só a parte de como deixar  transparente aí você avança um pouco mais o vídeo mas eu vou ensinar a criar o menu todo  então a primeira coisa que você tem que fazer é criar os links que a gente realmente chama de  menu porque aqui no Brasil a gente se habituou a chamar tudo isso aqui de menu mas na verdade o  nome é cabeçalho menu são só esses links aqui que a gente clica mas o conjunto de tudo aqui a  arte a logo e esse espaço chama cabeçalho então o menu que são aqueles links você precisa criar  aqui dentro do WordPress na parte de aparências menus se você não tiver criado nenhum vai aparecer  aqui para você criar um novo menu e aí você dá um nome vou colocar menu principal dois aqui porque  eu já tinha criado outro e aí você clica aqui em criar menu aí aqui você vem em páginas clica aqui  em ver tudo e seleciona todas as páginas que você quer eu vou colocar só a página de início porque  os outros links eu vou criar com links âncoras então você seleciona aqui todas as páginas que  você quer clica aqui em adicionar o menu e aí aqui que você vai criando aqueles links como os meus  eu quero como links âncoras link âncora é assim quando você clica ele não carrega uma nova página  ele te leva para um lugar aqui da mesma página que você está vendo tá vendo ele faz uma âncora  para lá então quando a gente quer isso a gente vem aqui vem em links personalizados aqui a gente  coloca a URL né da página que a gente quer que no meu caso é essa daqui e aí depois da barrinha a  gente coloca hashtag e um ID que é um textinho que vai simbolizar aquela sessão esse aqui eu vou  fazer para a página de soluções então vou colocar aqui #soluções pra página não para sessão de  soluções né e aí você se atende porque não pode ter letras maiúsculas não pode ter pontuações  tá então vou escrever aqui sim você pode colocar escrito normal aqui no no texto soluções aí você  clica adiciona o menu o próximo eu vou fazer a mesma coisa vou colocar aqui hashtag sobre nós e  aqui embaixo vai escrever sobre nós adicionar o menu vou fazer também o de portfólio adicionar  o menu vou fazer também o de faq e vou fazer também o de contato vou clicar em adicionar o  menu e aqui ó se você quiser você pode mudar a organização colocar um depois um antes eu vou  deixar o meu assim início, soluções, sobre nós, portfóli,o faq eu vou clicar aqui em salvar  menu pronto se você marcar aqui cabeçalho ele já começa a aparecer aqui em cima tá vendo só  que sem nenhuma edição não precisa marcar tá tô só te explicando aqui que tanto faz porque  como a gente vai fazer com o elemento ele vai substituir aí agora sim a gente criou o nosso  menu que são esses links agora a gente vai criar o cabeçalho que é essa arte aqui que a gente faz  para poder colocar todas as informações para criar o cabeçalho lembrando que eu estou usando aqui  nesse tutorial Elementor Pro tá se você quiser fazer isso com Elementor Free o Elementor gratuito  tem outro vídeo aqui no canal te ensinando só isso esse aqui é só se você tiver o Elementor Pro se  você ainda não adquiriu o Elementor Pro nós temos um link aqui na descrição que é o nosso link de  afiliado e parceiro do Elementor se você comprar com nosso link você nos ajuda a trazer mais  conteúdo relevante para você aqui no canal é para criar esse modelo você vai vir aqui em modelos  adicionar novo vai selecionar a opção de cabeçalho ou então de header se o seu tiver escrito em  inglês vai dar um nome aqui pro seu menu eu vou colocar menu principal dois só porque eu já tenho  um outro aqui vou clicar em criar modelo aqui eles vão algumas opções se a gente quiser pegar eu não  vou pegar vou clicar no X vou criar um do zero vou clicar aqui nesse sinal de mais vou clicar aqui em  flexbox vou pegar um contêiner com a setinha pro lado vamos vir aqui em estilo vamos colocar aqui  a cor de fundo que a gente quer que o menu fique depois que a gente rola a tela a transparência a  gente vai fazer de outra maneira então a gente vai clicar aqui é você pode escolher uma cor aqui na  caixinha ou se você já tiver cores configuradas você clica aqui no símbolo do Globo e escolhe  eu vou pegar essa cor roxa que eu já tô usando aqui no projeto vou vir aqui na biblioteca vou  arrastar o widget de logo para cá eu já tenho a logo do meu site configurado aqui se não tiver vai  aparecer um botão aqui para você alterar ou para você adicionar você clica aqui e você consegue  clicar aqui e arrastar uma imagem para cá para simbolizar a sua logo tá e aí fazendo assim quando  você clicar ele já automaticamente pega o URL do site e você clica aqui vem aqui na biblioteca vou  pegar o widget de menu do WordPress arrastar para cá depois vou voltar na biblioteca vou pegar o  widget de redes sociais e vou arrastar para cá agora a gente vai configurar vou vir aqui no item  de menu vou vir em estilo vou vir na cor vou pegar a cor branca vou vir aqui na tipografia vou deixar  a fonte jost deixar a transformação maiúscula vou deixar tamanho 15 vou deixar peso 400 e aqui no  espaçamento horizontal a gente vai diminuir um pouco de modo que não quebre a linha vamos ajustar  aqui também nosso lou vou clicar aqui vou vir em estilo vou vir em largura vou diminuir um pouco  a largura dela vou vir aqui nos itens de redes sociais vou vir aqui em arredondamento vou deixar  em círculo vou vir aqui em estilo vou tirar de cor vou deixar em personalizado a cor primária é  a cor de fora a cor secundária é essa cor de dentro dos ícones mesmos eu vou deixar a cor  secundária de branco e a cor primária também vou deixar de branco só que eu vou vir aqui e  vou arrastar a transparência para que fique só uma corzinha assim e aqui em ícone ao passar o  mouse eu vou deixar a animação grow que é quando a gente passa o mouse ele cresce e aqui em cor  primária eu vou pegar essa cor rosa do projeto que aí quando passar o mouse vai mudar para essa  cor rosa para colocar os links das redes sociais você clica aqui e cola se você quiser mudar  também os ícones é só clicar aqui e escolher um outro ícone ou então enviar o próprio elemento  já tem vários ícones de redes sociais aqui inclusive ele tem até do TikTok e do WhatsApp  só você selecionar e aí aqui você cola o link agora eu vou vir aqui em estilo em tamanho do  ícone vou diminuir o tamanho preenchimento eu vou aumentar um pouco vou vir aqui no contêiner  principal vou vir em layout vou vir em alinhar itens e vou deixar o centro para não ficar um para  cima outro para baixo vou vir aqui em justificar conteúdo vou deixar espaço ent voltando aqui no  menu vou clicar vou vir aqui em conteúdo e aqui em ponteiro que é essa ação aqui essa linha  que aparece quando a gente passa o mouse eu vou mudar para linha dupla que aí aparece uma  linha em cima e embaixo quando a gente passa o mouse pronto agora eu vou clicar em publicar  vou clicar em adicionar condições vou deixar em todo o site e vou clicar em salvar e fechar outra  coisa que eu vou configurar aqui no menu antes de continuar é vir aqui vira em estilo aqui no espaço  vertical eu vou diminuir vou deixar quatro e aqui em ativo na cor do texto eu vou deixar rosa eu vou  clicar em publicar pronto agora eu coloquei aqui na minha página principal e o menu ele já está  funcionando só que ele não tá transparente em cima do banner pra gente deixar ele transparente  em cima do banner primeiro a gente vai vir aqui no contêiner principal vai vir em estilo vai vir  aqui em efeitos de rolagem vamos ativar vamos vir aqui em transparência vamos ativar e vamos ir aqui  em efeitos relativos vamos deixar página toda aqui você seleciona em quais tipos de dispositivo você  quer que aconteça ó eu já deixei em todos tablet celular e desktop aí depois disso você clica em  publicar se a gente recarregar ó ele vai estar transparente tá vendo tá mostrando branco porque  o fundo está branco aí pra gente poder trazer ele para cima do banner a gente tem que vir aqui vira  em avançado ó eu estou aqui no contente principal vem em avançado vem aqui em margem clica aqui  para desvincular os valores de margem e a gente vai colocar uma margem negativa inferior vou  colocar a 120 aqui pra gente ver vou clicar em publicar vou recarregar e olha só o menu ele  já está aqui tá vendo que sumiu a minha logo às vezes isso acontece sumiu a logo e os ícones  o que que a gente pode fazer pode clicar aqui no contêiner principal vira aqui em Z index e  deixar um vamos clicar em publicar e atualizar aí pronto é agora o menu ele está sobressaindo  por cima do banner aí se a gente quiser fazer mais alguns ajustes como por exemplo eu venho aqui  na minha logo deixo ela alinhada à esquerda para ficar alinhada aqui com o meu texto tá vendo vou  recarregar aqui pronto tá alinhado e dessa forma ele fica automaticamente já transparente é uma  configuração automática que a gente configurou no Elementor Pro e pra gente fazer com que ele  mude de cor na rolagem a gente precisa ativar né a rolagem do menu então para isso a gente vai  vir aqui no contêiner vai vir aqui em avançado vai vir aqui em efeito de movimento vai vir aqui em  fixo vai deixar superior e vai clicar em publicar aí pronto quando a gente rolar a tela ele vai  ficar fixo e aí ele vai mudar de cor na rolagem e aí tem dois erros aqui pra gente corrigir primeiro  que ele tá acrescentando a cor real do menu muito tarde né depois que já tá no meio da página aí  para isso a gente vai vir aqui no contêiner vai vir aqui em transparência e vai deixar aqui ó a  exibição de um né o 1% até 14 mais ou menos vamos clicar em publicar vamos recarregar a página  ó que aí ele já começa a voltar a cor já aqui quando termina o banner tá vendo outra coisa que  a gente vai fazer também é que não está dando para clicar vou mudar o Z in índex vou clicar aqui  vou vir em avançado e o Z index eu vou colocar três pode ser que eu tenha colocado Z index um  em outra parte que esteja dando conflito vou clicar em publicar ó agora está clicável pronto  está certinho em cima de todos os contêiners e aí para configurar esse menu pro mobile você  vai clicar aqui que aí ele já vai mostrar para você como que ele fica aqui no celular aí você  faz assim enrola a tela um pouquinho para baixo para ver a cor de fundo para ficar legal aqui  para você conseguir enxergar aí você vem aqui na imagem vem em avançado vem em largura deixa  personalizado deixa aqui em porcentagem diminui a largura da imagem aqui em estilo a largura total  dela a gente pode aumentar aí vamos trabalhar aqui com a largura personalizada vamos deixar 30  vamos vir aqui no menu clicar vir em avançado largura personalizada deixar aqui em porcentagem  e diminuir porcentagem do menu e vamos vir aqui nos itens de redes sociais fazer a mesma coisa  primeiro vamos ir em estilo diminuir um pouco o tamanho dos ícones diminuir aqui em preenchimento  vamos vir aqui em avançado largura vou deixar personalizado porcentagem e vou diminuir aqui a  largura vou vir aqui nesse menu vou vir em estilo em botão de alternar aqui na cor eu vou deixar  de branco aqui na cor de fundo eu vou deixar de branco só que vou deixar bem transparente vou  vir aqui no contêiner vou vir aqui em avançado vou vir aqui em imagem desvincular os valores e  diminuir esse espaçamento que tá aqui embaixo e ele vai ficar alinhadinho assim vamos colocar  aqui no tablet aí vou vir aqui no menu vou vir aqui em conteúdo aqui em break point eu vou deixar  dispositivos móveis que aí a gente vai deixar um menu normal aqui vou vir aqui na imagem vou vir  aqui em estilo aumentar a largura dela vou vir em avançado largura personalizado vou colocar em  porcentagem e diminuir vou vir aqui no menu estilo vou diminuir o tamanho dessa fonte e vou diminuir  o espaçamento horizontal para que não haja nenhuma quebra de linha também vou vir aqui nos ícones  vou vir em estilo preenchimento vou diminuir o tamanho deles e diminuir um pouco mais o tamanho  da logo pronto aí dessa forma o menu ficou aqui não não houve quebra de linha vou clicar em  publicar essas alterações que a gente fez ó como foi só de espaçamento e tamanho quando  a gente coloca aqui no menu do computador do celular ou do tablet elas não alteram o que eu  fiz no tablet não alterou no computador o que eu fiz no computador não alterou no celular tá  o elementor ele já configura tudo isoladamente e se a gente recarregar aqui a nossa página  ó tá funcionando tudo direitinho e se a gente colocar aqui no modo de visualização de telefone  a gente consegue ver tudo funcionando direitinho só faltou um ponto que é para deixar o nosso menu  na extensão da tela toda que tá vendo que ele tá abrindo assim vamos colocar aqui no modo celular  aí clica aqui no menu vem aqui conteúdo e aqui em largura total a gente vai deixar ativo aí quando  a pessoa clicar já abre o menu aí se você quiser mudar essas cores aqui você vem em estilo linha  suspensa e é por aqui que a gente muda ó vou mudar a cor de fundo para roxo por exemplo tá ah  outra coisa como eu fiz isso aí não precisou dessa configuração aqui posso tirar essa margem negativa  pronto aí agora vai funcionar tudo certinho ó aí o menu ele abre então é isso pessoal espero  muito que vocês tenham gostado, se você curtiu, deixe um like no vídeo, se inscreve no canal, me  segue nas redes, um abraço, até a próxima, tchau.