Fala mestre, demais esse formato, só quero adicionar aqui um detalhe que pode salvar a vida da galera, algumas vezes quando você força o Elementor a não quebrar a linha ele não respeita o tamanho da tela, então a tua barra de rolagem fica enorme e se a pessoa arrastar pro lado vai ver uma tela preta, o que é muito feio, você pode usar esse código pra corrigir: selector{ white-space: nowrap; width: 100%; max-width: 100vw; overflow: hidden; text-overflow: clip; } Começa igual o do Othon mas aqui eu estou dizendo para usar 100% da view port, esconder o texto não visível e cortar ele da tela, se você estiver passando por esse desafio, use isso que vai resolver. Abraço e obrigado Othon!
Nossa! Peguei um template pronto só porque tinha um carrossel de texto que eu não sabia fazer... e neste template, o carrossel é construido com o widget lista de icones, totalmente diferente. Mas agora não vou mais precisar copiar do template rsrs, obrigada.
Fiquei quebrando a cabeça um tempão por causa dessa quebra de linha. Tinha feito todo o motion, mas não sabia como quebrar. Obrigada pelo conteúdo! Edit no dia seguinte: Pra quem ficou com o problema da faixa vazando na hora que desce ou sobe a página e não resolveu com a margem, eu também tive e resolvi ajustando o Viewport. Na faixa de trás, eu coloquei 40% de bottom e 83% de top; na da frente, eu coloquei 36% de bottom e o top ficou em 100 mesmo. No meu caso, essas configs resolveram, mas você deve testar e ajustar conforme seu design. Espero ter ajudado. 🧡
TOP Direto ao ponto sem enrolação, valeu o like! Obrigado por ensinar! Tem como fazer um slide só com texto surgindo de baixo para cima e ficar passando várias frases?
Estou fazendo na data de 01/06/2024 e quando coloco na cor de fundo o e coloco o efeito de movimento, a cor não ocupa 100% e quando movimento ao lado do texto fica uma cor branca, não sei o que fazer
@@othonciparoni ele quis dizer que os textos que vazaram, aumentaram demais a tela, extrapolando a resolução do site. Isso criou uma barra de rolagem gigante para a lateral.
@@renanart5536 ah, pode crer. Esqueci de mostrar isso no vídeo. Pra resolver, basta adicionar esse CSS para esconder a barra de rolagem: html, body{ width: 100%; overflow-x: hidden; }
Irmão, eu fiz aqui, mas quando coloco o scale então o efeito de rotate não funciona e nem o scale, fiz várias vezes, olhei letra por letra e nada... o que pode ser?
![Como fazer um CARROSSEL CONTÍNUO no Elementor com CSS [sem plugins adicionais]](http://i.ytimg.com/vi/T6ROfAnMKzU/mqdefault.jpg)
Fala mestre, demais esse formato, só quero adicionar aqui um detalhe que pode salvar a vida da galera, algumas vezes quando você força o Elementor a não quebrar a linha ele não respeita o tamanho da tela, então a tua barra de rolagem fica enorme e se a pessoa arrastar pro lado vai ver uma tela preta, o que é muito feio, você pode usar esse código pra corrigir:
selector{
white-space: nowrap;
width: 100%;
max-width: 100vw;
overflow: hidden;
text-overflow: clip;
}
Começa igual o do Othon mas aqui eu estou dizendo para usar 100% da view port, esconder o texto não visível e cortar ele da tela, se você estiver passando por esse desafio, use isso que vai resolver.
Abraço e obrigado Othon!
Salvou demais Bruno! Muito obrigada.
Seu comentário salvou irmão 🔥
Vlw Brunão, tu é fera!
Savlou demais irmão!
Mano esse formato de vídeo rápido e objetivo ta muito bom, continue assim parabens
Você acertou em cheio no formato e nos conteúdos. Parabéns pelo trabalho! Tá me ajudando muito.
Era EXATAMENTE o que eu tava procurando, valeu mano! Deu muito certo aqui.
A dublagem no inicio me pegou de surpresa e já ganhou meu like kkkkkkk adorei, ótimo conteúdo!
Nossa! Peguei um template pronto só porque tinha um carrossel de texto que eu não sabia fazer... e neste template, o carrossel é construido com o widget lista de icones, totalmente diferente. Mas agora não vou mais precisar copiar do template rsrs, obrigada.
Cara, eu to procurando por esse conteudo a dias kkk gratidão!
Fiquei quebrando a cabeça um tempão por causa dessa quebra de linha. Tinha feito todo o motion, mas não sabia como quebrar. Obrigada pelo conteúdo!
Edit no dia seguinte:
Pra quem ficou com o problema da faixa vazando na hora que desce ou sobe a página e não resolveu com a margem, eu também tive e resolvi ajustando o Viewport. Na faixa de trás, eu coloquei 40% de bottom e 83% de top; na da frente, eu coloquei 36% de bottom e o top ficou em 100 mesmo. No meu caso, essas configs resolveram, mas você deve testar e ajustar conforme seu design. Espero ter ajudado. 🧡
BRABO DEMAIS Ficou top o efeito!
Ótimo video mestre!! curto e objetivo, mas que ensina muito!!
Sempre elevando o nível, cipa! Parabéns bro!
esses videos ajuda mto slc. continua pfv
TOP Direto ao ponto sem enrolação, valeu o like! Obrigado por ensinar! Tem como fazer um slide só com texto surgindo de baixo para cima e ficar passando várias frases?
Bem da hora, parabéns pelo conteúdo.
Likes garantidos sempre!
Simplesmente o melhor!
Mais uma aula foda! 👏🏻
uowww muito bom .. obrigado !!!
O melhor que nos temos
Você é foda!!! Cipa, ensina a fazer aquele efeito de slider das colunas, igual na LP de otimização de Landing Pages, por favor
Show 🙏
Esse foi inspirado na sua dúvida lá no Discord. Obrigado! :)
@@othonciparoni Me ajudou demais 🙏
Fala pessoal. Esse css faz um acabamento nas extremidades da barra. Faz um gradient na cor desejada.
selector::before,
selector::after {
content: '';
position: absolute;
top: 0;
width: 50px; /* Largura do degradê ajustável */
height: 100%; /* Altura total da faixa */
z-index: 1;
pointer-events: none; /* Impede que interfira com cliques */
}
selector::before {
left: 0;
background: linear-gradient(to right, #01001F, transparent);
}
selector::after {
right: 0;
background: linear-gradient(to left, #01001F, transparent);
}
show de bola!
bom demais!! 🤌🔥
No caso o Css personalizado só tem como fazer com o Elementor Pro, certo?
Show!
Sensacional
meu amigo que video bom
incrível 👏👏
O mais BRABO
Mais uma 🎉❤
Cipa da para fazer com Sessão ao invés de container?
Othon, esse tipo de movimento funcionaria para ícones? como se fizesse um movimento de um carro andando?
esse codigo nowrap nao ta funcinando aqui no meu. o texto nao faz a quebra.
brabo
Fala Cipa, blz? Eu consigo fazer um marquee, mais em carrossel sem que o texto quebre e fique com espaço vazio entre o final e o inicio do texto?
Estou fazendo na data de 01/06/2024 e quando coloco na cor de fundo o e coloco o efeito de movimento, a cor não ocupa 100% e quando movimento ao lado do texto fica uma cor branca, não sei o que fazer
Cipa, unico problema que eu reparei, o texto está vazando pra direita, como resolver? Abraço!
Não entendi. Para o carrossel funcionar, o texto precisa "vazar" para os lados.
@@othonciparoni ele quis dizer que os textos que vazaram, aumentaram demais a tela, extrapolando a resolução do site. Isso criou uma barra de rolagem gigante para a lateral.
@@renanart5536 ah, pode crer. Esqueci de mostrar isso no vídeo. Pra resolver, basta adicionar esse CSS para esconder a barra de rolagem:
html, body{
width: 100%;
overflow-x: hidden;
}
Estava com essa mesma dúvida. Ainda bem que dei uma olhada nos comentários hahahaha
@@othonciparoni Meses depois tive esse problema e olha o cipa me ajudando novamente valeu demais cipa
Cipa e o mobile? como rotaciona???
Irmão, eu fiz aqui, mas quando coloco o scale então o efeito de rotate não funciona e nem o scale, fiz várias vezes, olhei letra por letra e nada... o que pode ser?
Isso também funciona no mobile?
Sim, em qualquer dispositivo.
EU QUERO CRIAR UMA BARRA DE AVISOS EM QUE O TEXTO FIQUE ANDANDO DA DIRETA PARA ESQUERDA
Opa, mestre. O problema é o scroll que ficou na horizontal
Precisa escondê-lo com CSS, assim:
html, body{
overflow-x: hidden;
}
@@othonciparoni shooooow. Valeu, mestre.
Boaa mestre ! obg
@@cownyt
Fiz isso e bugou! Pelo mobile ficou tela infinita.
Simplesmente o melhor!