Como fazer o menu transparente que muda na rolagem do site (Wordpress + Elementor)
ฝัง
- เผยแพร่เมื่อ 2 พ.ย. 2024
- ✔️ TREINAMENTO ZPRO:
treinamentozpr...
✔️ ELEMENTOR PRO:
aescoladesites...
🔸 HOSPEDAGEM DE SITE
• Desconto Hostinger: aescoladesites....
👉 Entre no canal Exclusivo do Telegram para conteúdos exclusivos
aescoladesites...
🔸 VÍDEOS MAIS VISTOS
• Como Fazer um Site Completo: • Como Fazer Um Site Com...
• Como Criar uma Página de Vendas (Loja Online): • Como Criar Uma Loja Vi...
• Como Criar um Site F*DA!: • Como Fazer um Site F#D...
• Criando uma Landing Page: • Como Criar uma Landing...
• Criando um Site para Empresas: • Como Criar um Site Emp...
🔹PARA MAIS CONTEÚDO ACESSE
a Escola de Sites: www.aEscolades...
Neste aula a Beatriz vai te mostrar uma forma muito fácil de colocar o Menu Transparente que muda na rolagem do site no Wordpress. Você vai precisar apenas seguir nosso tutorial e aplicar o que e mostrado no Elementor.
#aescoladesites #wordpress #elementor #elementorpro
![Como Criar MENU FIXO e Transparente que Muda de Cor ao Rolar o Site [Elementor]](http://i.ytimg.com/vi/D8QE51vdSRI/mqdefault.jpg)
![Atualizado! Como Criar um MENU Fixo e Transparente que MUDA DE COR ao Rolar a Página [Elementor Pro]](http://i.ytimg.com/vi/HBkoregWuUk/mqdefault.jpg)
![Como Criar MENU e RODAPÉ com Elementor Free/Grátis [Cabeçalho e Rodapé com Royal Addons grátis]](/img/n.gif)
Sensacional! Parabéns! Como sempre, nos ajudando muito!
Muito obrigado pelo carinho! 😊 Ficamos felizes em saber que o conteúdo do vídeo está ajudando. É sempre um prazer poder apoiar vocês nos projetos. 💙💜
Simplesmente o melhor tutorial que já assisti, parabénsssssssss!!
Não me canso de assistir as aulas com a Bia. Simplesmente uma das mais feras prof do TH-cam. Deus te abençoe sempre!!!
Ficamos extremamente felizes em saber que está gostando das aulas da Bia! É muito gratificante receber esse carinho. Desejamos que continuem aprendendo e se desenvolvendo cada vez mais. 💙💜
Valeu Bia, já encontrei. Voltando o vídeo e olhando o menu à esquerda, consegui ver o nome dele e encontrei. CoDesigner, addon para Woocomerce, bastante interessante.
A Bea é a melhor,ela ensina facil!Direto do Japão um enorme beijo nesse coração lindo e muito,mais muito SUCESSO!
Esse canal é incrível, sempre com as melhores dicas
Ganhou meu like! Valeu pela dica! Programo há mais de 20 anos, agora estou tomando vergonha na cara e estou aprendendo desenvolver com Wordpress. rs Valeu pela ajuda!
cara, tanto vídeo de horas tentando explicar algo que ela resumiu em poucos minutos. SENSACIONAL!
Parabéns aula top, conteúdo ímpar!
Apliquei suas dicas de header, ficou demais, só encontrei estas altas dicas!! Show de bola!
Booooa! Espero que já tenha clicado em se inscrever por aqui ;)
Ótima didática.. Parabéns!
incrível, estava quebrando a cabeça de como fazer o scroll, +1 inscrito
Conteúdo TOP como sempre Bia. Parabéns pelo trabalho!!!
Ficamos felizes que tenha gostado do vídeo da Bia. Ela é fera! 💙💜
Deu certo sua dica para direcionar para parte de outra página.
Você é f... demais. Que didática fantástica.
Por favor entenda que você é PERFEITA! Inscrito no canal
🥰🥰🥰🥰🥰 Valeeeeeeu, Daniel! Bem vindo!
Gostei d+ do tutorial! Muito grato!
O tutorial é ótimo. Apenas um detalhe importante: ele mantém os efeitos quendo a versão do wordpress mudam, porém quando a versão do elementor é alterada ele deixa de funcionar e o tempo que leva para atualização do plugin pode fazer com que os efeitos desapareçam por dias ou semanas.
Olá. Muito obrigado. Show de aula.
Ficamos feliz que o tutorial tenha te ajudado Rubens 🤩
Parabéns pelo vídeo, muito útil 👏🏻👏🏻👏🏻👏🏻
Parabéns e obrigado.
Nós que agradecemos pelo seu feedback! ☺️
Aqui é Like garantido!
Uhuuu, fico muito feliz com isso! Brigadão pela força Sávio 😄🙏
Muitooooooo Obrigado, direto ao ponto sem delongas. Ganhou uns inscrito!
Sensacional! O único vídeo que me ajudou, obrigado.
Sensacional!! Parabéns pelo conhecimento adquirido e pelo dom de compartilhar de forma tão meiga e atenciosa!
excelente aula, muito obrigada
Show de vídeo!! DEUS te abençoe!!
🥰🥰🥰
Aula maravilhosa!!! Parabéns!!!
Obrigadaaaaa!!
muito obrigado Bia amei a aula
Vídeo maravilhoso!. Sensacional a explicação. Existe um plugin que faça o logo aparecer ao invés de trocar de cor? Meu cliente quer o logo fique no banner inicial e que o logo só apareça depois de rolar a tela. Se puder ajudar, agradeço muitíssimo.
Muito bom! Eu usava bastante CSS e JS pra fazer esse efeito no header. Agora só vou usar esse plugin! Valeu mesmo!
obrigado Bia
Top, direto no ponto….
Aula show ....👏👏👏
Olá boa tarde , parabéns pelo conteúdo.
Como eu faço para clicar em uma foto com link em minha home, e direcione para outra página mas no meio ou no final dela... ??
Valeu, grande Beatriz, excelente aula. Durante o vídeo, apareceu um plug-in ou add-on todo coloridinho como seu cabelo do lado esquerdo da tela, impossível de não se notar. O que é ele, qual é a dele?
Fala Rogério, tudo bom?? hahah Ixi Rogério, acho que não consegui identificar qual plugin/addon é esse que mencionou. Sabe dizer em qual minuto/segundo do vídeo ele aparece, pra eu ver se consigo te ajudar melhor? 😊
Maravilhosa Beaaa🥰💞🚀🚀🚀
gracias
Oi Bia bom dia, consegui resolver eu troquei o nome do id. Ao invés de home,eu troquei para início aí deu certo.
foi otimo gratidao muito sucesso
olá, boa tarde, como posso mudar a cor do menu ao rolar ?
Muito obrigada, foi o único video até agora que realmente me ajudou, estou muito grata mesmo. No entanto após aplicar o header a todo o site, a minha versão mobile sofreu umas alterações e isso é que está a deixar-me louca. No editor está tudo ok, mas no celular mesmo, o texto aparece todo colado e qualquer coisa que faça no editor não aparece no celular. Já desativei os breakpoints e regenerei o CSS, nada resulta... Consegue me ajudar?
poderia me ajudar? como eu crio conta no wordpress para comprar a licença do elementor e usar? não queria ter q usar aquelas empresas que tem o elementor free
Olá Sara, ficamos felizes em saber que o vídeo foi útil para você! 😊 Quanto ao problema com a versão mobile, entendemos o quanto isso pode ser frustrante. Aqui estão algumas orientações que podem ajudar:
01- Verifique o CSS Personalizado: Às vezes, o CSS personalizado pode interferir na exibição mobile. Verifique se há algum CSS específico que possa estar causando o problema.
02- Cache do Navegador Mobile: Tente limpar o cache do navegador no celular, pois ele pode estar carregando uma versão antiga do site.
03- Atualização de Plugins: Certifique-se de que o Elementor, o tema e os plugins estão todos atualizados para evitar problemas de compatibilidade.
04- Breakpoints Personalizados: Se você desativou os breakpoints personalizados, tente ativá-los novamente e ajuste-os para verificar se o problema persiste.
05- Verifique o Responsiveness no Editor: Volte ao editor do Elementor, selecione a visualização mobile e faça ajustes finos, como margens e padding, para ver se isso corrige a exibição no celular real.
06- Contate o Suporte: Se o problema continuar, pode ser necessário entrar em contato com o suporte do Elementor para uma análise mais aprofundada.
Esperamos que isso ajude! Qualquer outra dúvida, nós da Escola de Sites estamos à disposição! 💙💜
Olá Kelven ☺️ Claro! Para criar uma conta no WordPress e comprar a licença do Elementor, siga os passos abaixo:
Opção 01- Crie uma Conta no WordPress.com (Opcional):
Se você deseja usar o WordPress.com, vá para WordPress.com e clique em 'Comece Já'.
Siga as instruções para criar uma conta gratuita. Depois de criar o site, você pode adquirir um plano pago, se necessário. No entanto, para usar o Elementor Pro, é recomendado utilizar o WordPress.org com uma hospedagem própria.
Opção 02- Use o WordPress.org com Hospedagem Própria:
- Escolha um serviço de hospedagem que suporte WordPress (como HostGator, Bluehost, etc.) e registre um domínio, se ainda não tiver um.
- A maioria dos provedores de hospedagem oferece uma instalação com 1 clique para WordPress. Siga as instruções do seu provedor de hospedagem para instalar o WordPress em seu domínio.
2.2 Instale o WordPress e Crie uma Conta de Administrador:
- Após a instalação do WordPress, você criará uma conta de administrador durante o processo de configuração inicial.
- Utilize essa conta para acessar o painel do WordPress.
2.3 Comprar e Instalar o Elementor Pro:
- Vá para o site oficial do Elementor e selecione o plano que melhor se adequa às suas necessidades.
- Após a compra, faça o download do plugin Elementor Pro.
- No painel do WordPress, vá até 'Plugins' > 'Adicionar Novo' e faça o upload do arquivo zip do Elementor Pro.
- Ative o plugin e insira a chave de licença fornecida após a compra para começar a usar o Elementor Pro.
2.4 Elementor Free vs. Pro:
-Se você não deseja utilizar a versão gratuita oferecida por algumas empresas, este processo garante que você tenha acesso ao Elementor Pro diretamente, sem intermediários.
Kelven, se precisar de mais ajuda durante o processo, estamos aqui para ajudar! 💙💜 Vamos considerar trazer um vídeo aqui no canal focado na instalação para facilitar da próxima vez que você for instalar o Painel.
@@aEscoladeSites Muito obrigada, vocês são mesmo fantásticos! Vou seguir as recomendações e darei retorno. Grata!
Top demais!
Você conhece algum curso avançado de JetEngine?
show show
meus parabéns, tú és top
Maravilhosa!
top de mais obrigada
De nada :)
Bia bia bia...nunca vi tão meiga como tu....meu Deus como foi bom conhecer vc na escola de sites!!!
😊😊😊
Ótimo!! Como mudar a altura do container do menu? O meu está muito grande, mesmo seguindo as opções mostradas!
Olá Andrea ☺️ Ficamos felizes que tenham gostado! Para ajustar a altura do container do menu, sugerimos verificar se todas as margens e paddings estão devidamente configurados. Além disso, podem tentar ajustar a altura mínima (min-height) nas configurações do container. Caso o problema persista, vale revisar as configurações de responsividade em cada dispositivo. Esperamos que isso ajude!💙💜
Bia, ensina como ajustar a responsividade dos sites, vlw
Opa, obrigada pela sugestão Felipe! Pretendo gravar um vídeo sobre isso sim, pode deixar 😉👍
videooo topppp
Muito obrigado pelo excelente conteúdo! Me ajudou bastante.
Existe alguma função no plugin que mude a cor das letras do nav menu? Porque em um header com fundo branco as letras se misturam com o fundo e somem ao rolar a página.
Fala Vinícius ☺, tudo bem? Infelizmente, acredito que não tenha como Vinícius. Teria que adaptar os itens do seu nav menu para uma cor que se adapte bem tanto ao fundo inicial, como com a cor setada para o background da rolagem na tela mesmo.
Excelente aula, Bia! Já que o tema é um sticky header, vou compartilhar um problema que estou enfrentando e que talvez outros estejam também. Precisei fazer apenas o header fixo, sem os demais efeitos. Para isso, decidi usar apenas o elementor pro mesmo, habilitando o sticky on top. Só que não está funcionando de jeito nenhum na versão desktop pelo chrome. No celular funciona, mas no desktop não. To ficando maluco com isso kkkk O curioso é que baixando e usando o plugin que você mostrou, a funcão passa a funcionar. A questão é que eu não queria ter que adicionar (mais) um plugin para usar apenas a função de stick que já tem nativamente no elementor... Vocês estão com o mesmo problema? Sabem solucionar? Obrigado!!!
Opa, muito obrigada Rennan ☺🙏!!
E bem estranho que isso esteja acontecendo por aí Rennan, as vzs acontece do elementor fazer a gente ficar arrancando os cabelos com uns probleminhas desse tipo mesmo rs. Mas, bora lá, se você já colocou o seu container para ficar sticky --> top lá na sua aba de "Avançado", e setou a opção "Sticky On" em todos os dispositivos, inclusive o desktop, já era para estar funcionando normal mesmo. Inclusive, acabei de fazer um teste desse por aqui, e funcionou tranquilo. Então, pra definir exatamente o q pode ser, precisaria fazer alguns testes dentro do site e por isso não consigo definir por aqui exatamente o que está causando esse problema, no entanto, tenho algumas sugestões. Veja certinho se todos os plugins/tema e WP estão atualizados, e tente limpar o cache do site e do seu navegador para ver se volta a funcionar normal. Além disso, caso isso não resolva, é bom testar ir desativando cada um dos seus plugins, um a um, e ir testando a funcionalidade para ver se algum deles está causando essa incompatibilidade com o elementor.
Olá @@beatrizvargas1187! Muito legal seus vídeos.
Vamos lá. Uma forma prática de fazer o menu aparecer em toda a navegação sem precisar de nenhum plugin é usando os "efeitos de rolagem". É chatinho de configurar até a pessoa pegar a dinâmica de como funciona, mas é sempre muito melhor usar o mínimo de plugins possível. Mas nele é possível usar o efeito "scroll" para mostrar o menu após a rolagem vertical. Um outro detalhe é que na configuração do Header, também é possível criar uma versão de menu para cada dispositivo com ações peculiares e melhor personalização usando diferentes conteiners (pode ser um conteúdo legal de você fazer). Em alguns casos será mais útil do que usar apenas a responsividade direta de um só.
🧠Um dos erros mais comuns, principalmente de iniciantes com o Wordpress, é o hábito de não ler as documentações básicas tanto do WP quanto do Elementor para compreender as "hierarquias", das quais já vi você falar em algum outro vídeo teu.
👁🗨O ideal no Wordpress (sempre, sempre mesmo) é tê-lo o mais enxuto possível e se conseguir, não ultrapassar 10, 15 plugins indispensáveis (em casos extremos - 15 já exagero), pois quanto menor for o número de requisições externas de plugins, melhor será a performance e também o nível de segurança. Já peguei sites com mais de 40, 50 plugins, os 'famosos sites Frankenstein'. Neste tipo de sites não há hierarquia, é uma aventura muito louca a là Indiana Jones repleta de mistérios.
🛡Diquinha se segurança: Plugins gratuitos do Elementor têm sido os campeões de invasões em sites/servidores de hospedagem.
Todas as 'funções' (plugins) que a pessoa precisar executar no WP e puder ter "nativas", melhor. Se alguém tiver dúvidas do quanto ele não é de forma alguma "limitado", como já ouvi muita gente falar, basta perguntar pra Coca-Cola, Nasa, Facebook, USP, Sony Music, Warner e muitas outras grandes empresas, porque eles usam o wordpress em projetos gigantescos, de sites e blogs a apps híbridos, móveis e web (usando Wordpress Headless). Ah! Pra quem não sabe, todos os blogs do Meta são desenvolvidos com WP, o projeto Open Nasa, todos os sites de artistas da Sony/Warner e por aí vai.
Show Bia! Pra frente e pra cima!
Preciso fazer um curso novo de elementor com esta nova função
boa tarde Bia, eu segui os passos que vc orientou , mas estranhamente quando eu clico no home , ele não volta direto para o inicio do site, eu tenho que ficar clicando várias vezes para voltar , o que pode ter acontecido?
Boa tarde Victor! Estranho que esteja acontecendo isso por aí, fiz alguns testes por aqui e funcionou normal para mim. Sugiro que tente colocar manualmente a URL do seu site ao invés de colocar a tag dinâmica, como eu fiz, no campo do link para ver se ajuda. Por aqui é um pouco difícil de definir o que pode estar acontecendo, pois eu precisaria fazer alguns testes. Caso possa indicar ql é a URL do site, pode ser que eu consiga ajudar um pouco melhor 😊
O meu elementor não tem essas opções de container. é só para elementor pro?
Fala Bruno! A opção de container é disponível para o elementor pro e o gratuito também. Para funcionar, é preciso ativar essa função lá em Elementor --> Configurações --> Recursos --> deixar ativa a opção de "Flexbox Container" e salvar essas alterações. Caso ajude, também tem um vídeo recente que gravei aqui pro cana, com o nome "Como criar um site Institucional com Wordpress e Elementor (Passo a Passo Completo)", em que eu fiz só com o elementor gratuito utilizando containers, e fiz esse processo de ativação no início do tutorial. 😄👍
@@beatrizvargas1187 aaah, muito obrigado. Ajudou muito
Este curso TreinamentoZPro, após 1 ano eu não consigo mais acessar?
o meu n tem essa opção "Menus" dentro de aparencias
top d++++++++
Obrigadaaa!
👏👏👏👏👏👏👏👏👏👏👏👏
O meu menu não está aparecendo as "Sub-abas", nem no PC nem no mobile. Esta configurado o menu na aparência wordpress, tudo certinho, mas no PC e mobile as setinhas, as sub-abas não estão aparecendo. Me ajuda pf
Olá Athos ☺️ Entendemos a sua frustração. Se as sub-abas do menu não estão aparecendo no PC e no mobile, mesmo com a configuração correta na área de Aparência do WordPress, pode ser um problema relacionado ao tema, indicamos usar o "Hello", ele tem ótima compatibilidade com o Elementor. Depois conta pra gente se deu certo 💙💜
eu fiz isso tudo bonitinho, mas quando eu clico no menu, ele não faz o efeito scroll, ele pula direto pra seção! I need Help
não entendi essa parte de como o header ficará no site inteiro.
Tem como fazer esse menu sem pro?
Olá ☺️ Ficamos felizes com a pergunta! Sim, é possível criar um menu sem o Elementor Pro, utilizando o editor nativo do WordPress. Basta ir em "Aparência" > "Menus" e configurar o menu principal ali. Embora o Elementor Pro ofereça mais opções de personalização e design avançado, pode personalizar o menu básico com CSS ou usando plugins gratuitos que ajudam a melhorar o estilo e a funcionalidade do menu, como Max Mega Menu e WP Mobile Menu. Esperamos ter ajudado 💙💜
@@aEscoladeSites Tem como fazer essa movimentação do menu acompanhando a página sem pro?
👋👋👋👋👍👍👍🍰
🚀🚀