- 170
- 174 319
Gustavo Campelo - Webdesign
Brazil
เข้าร่วมเมื่อ 25 ต.ค. 2014
Entre para a Comunidade WebHub e torne-se um Webdeisgner de suceso!
Efeito Vidro no Elementor | Card com Fundo Desfocado no WordPress
↓ Torne-se um Desenvolvedor Web de sucesso! ↓
gustavocampelo.com.br/comunidade-webhub/
Aulas Gratuitas:
gustavocampelo.com.br/aulas-gratuitas/
Hospedagem Hostgator:
www.hostgator.com.br/50187.html
Neste vídeo, vamos ver como podemos criar um efeito vidro no nosso site WordPress Elementor, para isso vamos criar um efeito de fundo desfocado com uma propriedade CSS chamada backdrop-filter.
---------------------------------------------------------------------------------
Me siga no Instagram ( Conteúdo semanal! )
_gustavocampelo
gustavocampelo.com.br/comunidade-webhub/
Aulas Gratuitas:
gustavocampelo.com.br/aulas-gratuitas/
Hospedagem Hostgator:
www.hostgator.com.br/50187.html
Neste vídeo, vamos ver como podemos criar um efeito vidro no nosso site WordPress Elementor, para isso vamos criar um efeito de fundo desfocado com uma propriedade CSS chamada backdrop-filter.
---------------------------------------------------------------------------------
Me siga no Instagram ( Conteúdo semanal! )
_gustavocampelo
มุมมอง: 126
วีดีโอ
Projeto Lista de Tarefas para treinar HTML CSS e JavaScript para Iniciantes
มุมมอง 11117 ชั่วโมงที่ผ่านมา
↓ Torne-se um Desenvolvedor Web de sucesso! ↓ gustavocampelo.com.br/comunidade-webhub/ Aulas Gratuitas: gustavocampelo.com.br/aulas-gratuitas/ Hospedagem Hostgator: www.hostgator.com.br/50187.html Neste vídeo, vamos criar um projeto do zero para iniciantes de lista de Tarefas para treinarmos HTML CSS e JavaScript! Me siga no Instagram ( Conteúdo semanal! ) _gustavocampelo
Carrossel que interage com a Rolagem da Página no WordPress Elementor! Site com Slider Scroll GSAP
มุมมอง 385วันที่ผ่านมา
Torne-se um Webdesigner de sucesso! 🚀 Comunidade WebHub: gustavocampelo.com.br/comunidade-webhub/ Hospedagem Hostgator: www.hostgator.com.br/50187.html Aulas Gratuitas: gustavocampelo.com.br/aulas-gratuitas/ Códigos Utilizados: gustavocampelo.com.br/carrossel-passa-com-o-scroll/ Neste vídeo, vamos criar um Slider ou Carrossel de elementos que passam conforme o usuario scrolla a página! Isso ser...
Como criar um Site no Wordpress | Tutorial Completo para Iniciantes
มุมมอง 163วันที่ผ่านมา
Torne-se um Webdesigner de sucesso! 🚀 Comunidade WebHub: gustavocampelo.com.br/comunidade-webhub/ Hospedagem Hostgator: www.hostgator.com.br/50187.html Aulas Gratuitas: gustavocampelo.com.br/aulas-gratuitas/ Neste vídeo, vamos aprender a criar um site no WordPress, começando do zero! Vamos contratar um domínio e uma hospedagem, instalar o WordPress, explorar seu funcionamento, configurar o Elem...
Como Deixar o WordPress mais Rápido! Otimização de Site
มุมมอง 23614 วันที่ผ่านมา
Hospedagem Hostgator: www.hostgator.com.br/50187.html Torne-se um Webdesigner de sucesso! Comunidade WebHub: gustavocampelo.com.br/comunidade-webhub/ Aulas Gratuitas: gustavocampelo.com.br/aulas-gratuitas/ Neste vídeo, vamos aprender a otimizar sites criados no WordPress com Elementor, abordando aspectos essenciais como cache, otimização de mídias, extensão de imagens, e a escolha do servidor, ...
Como deixar algo Responsivo no Spline
มุมมอง 7314 วันที่ผ่านมา
Torne-se um Webdesigner de sucesso! Comunidade WebHub: gustavocampelo.com.br/webhub/ Aulas Gratuitas: gustavocampelo.com.br/aulas-gratuitas/ Neste vídeo, vou te mostrar como tornar um elemento responsivo no Spline, ajustando o estado do objeto 3D para diferentes tamanhos de tela. Este é um corte do vídeo completo: th-cam.com/video/2mPmDNRrz9w/w-d-xo.html Me siga no Instagram ( Conteúdo semanal!...
Criando o Design de uma Landing Page do Zero no Figma e Photoshop | Layout Site
มุมมอง 22514 วันที่ผ่านมา
Torne-se um Webdesigner de sucesso! Comunidade WebHub: gustavocampelo.com.br/comunidade-webhub/ Aulas Gratuitas: gustavocampelo.com.br/aulas-gratuitas/ Neste vídeo, vamos criar um Layout para uma Landing Page do zero utilizando o Figma e Photoshop para criar as Artes. Esse vídoe é um corte de uma série de aulas gratuitas, para ter acesso basta acessar o link: Aulas Gratuitas: gustavocampelo.com...
Scroll Horizontal no WordPress Elementor sem Plugin | Rolagem Horizontal GSAP
มุมมอง 34214 วันที่ผ่านมา
Scroll Horizontal no WordPress Elementor sem Plugin | Rolagem Horizontal GSAP
Borda Arredondada Invertida no seu Site com CSS! Bordas Internas no WordPress Elementor
มุมมอง 33821 วันที่ผ่านมา
Borda Arredondada Invertida no seu Site com CSS! Bordas Internas no WordPress Elementor
Criando um Site com Layout 3D Interativo e Responsivo do Zero! Tutorial Spline para Iniciantes
มุมมอง 53421 วันที่ผ่านมา
Criando um Site com Layout 3D Interativo e Responsivo do Zero! Tutorial Spline para Iniciantes
Fundamentos do UX Design | 10 Heurísticas de Nielsen
มุมมอง 25328 วันที่ผ่านมา
Fundamentos do UX Design | 10 Heurísticas de Nielsen
Slider Latas Colorado no Wordpress com CSS e JS | Carrossel Interativo
มุมมอง 560หลายเดือนก่อน
Slider Latas Colorado no Wordpress com CSS e JS | Carrossel Interativo
Efeitos Interativos com o Mouse em Cards no WordPress Elementor | CSS Hover Effects
มุมมอง 259หลายเดือนก่อน
Efeitos Interativos com o Mouse em Cards no WordPress Elementor | CSS Hover Effects
Inteligência Artificial para Criação de Sites
มุมมอง 227หลายเดือนก่อน
Inteligência Artificial para Criação de Sites
Corrigindo Espaço Vazio na Lateral do Site WordPress Elementor | Erro Barra Branca
มุมมอง 273หลายเดือนก่อน
Corrigindo Espaço Vazio na Lateral do Site WordPress Elementor | Erro Barra Branca
Slider Interativo no WordPress Elementor sem Plugin! Carrossel de Cards Animado com CSS e JavaScript
มุมมอง 1.6Kหลายเดือนก่อน
Slider Interativo no WordPress Elementor sem Plugin! Carrossel de Cards Animado com CSS e JavaScript
Como criar uma Landing Page do Zero no WordPress Elementor
มุมมอง 1Kหลายเดือนก่อน
Como criar uma Landing Page do Zero no WordPress Elementor
Menu Lateral Interativo no WordPress Elementor com CSS e JavaScript
มุมมอง 705หลายเดือนก่อน
Menu Lateral Interativo no WordPress Elementor com CSS e JavaScript
Site com Design Interativo 3D | Spline no WordPress Elementor e Código Puro
มุมมอง 7562 หลายเดือนก่อน
Site com Design Interativo 3D | Spline no WordPress Elementor e Código Puro
WordPress Localhost | Instale Wordpress Gratuito no seu Computador e sem precisar de Hospedagem!
มุมมอง 1782 หลายเดือนก่อน
WordPress Localhost | Instale Wordpress Gratuito no seu Computador e sem precisar de Hospedagem!
Botão Efeito Líquido com HTML CSS e JavaScript no WordPress Elementor | Botão Animado
มุมมอง 2562 หลายเดือนก่อน
Botão Efeito Líquido com HTML CSS e JavaScript no WordPress Elementor | Botão Animado
Desenvolvendo Landing Page Responsiva com HTML e CSS
มุมมอง 3882 หลายเดือนก่อน
Desenvolvendo Landing Page Responsiva com HTML e CSS
Avaliando site de Alunos #3 - Landing Page WordPress Elementor com Efeitos!
มุมมอง 3192 หลายเดือนก่อน
Avaliando site de Alunos #3 - Landing Page WordPress Elementor com Efeitos!
Como criar Faixa Animada no Wordpress Elementor - Com HTML e CSS, sem Plugins
มุมมอง 1.3K2 หลายเดือนก่อน
Como criar Faixa Animada no Wordpress Elementor - Com HTML e CSS, sem Plugins
Como Alterar o Cursor da sua Página Wordpress Elementor com CSS
มุมมอง 2542 หลายเดือนก่อน
Como Alterar o Cursor da sua Página Wordpress Elementor com CSS
Botão Animado com HTML e CSS no Wordpress Elementor | Ícone e Degradê Animado
มุมมอง 4492 หลายเดือนก่อน
Botão Animado com HTML e CSS no Wordpress Elementor | Ícone e Degradê Animado
Mascara no Número de Telefone em Formulários Wordpress Elementor - JavaScript | Sem Plugin
มุมมอง 3862 หลายเดือนก่อน
Mascara no Número de Telefone em Formulários Wordpress Elementor - JavaScript | Sem Plugin
Menu Inferior estilo de Aplicativo com Ícones no Wordpress Elementor HTML CSS e JS
มุมมอง 7312 หลายเดือนก่อน
Menu Inferior estilo de Aplicativo com Ícones no Wordpress Elementor HTML CSS e JS
Efeitos de Scroll no seu Site com CSS Puro! HTML e CSS sem JavaScript
มุมมอง 3823 หลายเดือนก่อน
Efeitos de Scroll no seu Site com CSS Puro! HTML e CSS sem JavaScript
Efeito de Reflexo no Botão do seu Site Wordpress Elementor com HTML e CSS | Efeitos em Botões pt3
มุมมอง 1323 หลายเดือนก่อน
Efeito de Reflexo no Botão do seu Site Wordpress Elementor com HTML e CSS | Efeitos em Botões pt3
Super funcionou! Muito obrigado. 😃
Muito bom Campelo. Esse é um dos efeitos que mais gosto de ver quando utilizado de forma e local correto em uma página. Destaca de forma elegante um determinado conteúdo. Obrigado, o senhor sempre explica muito bem em detalhes o conteúdo e está ajudando muito a esse veterano de 59 anos que está aprendendo uma nova profissão mesmo com minha idade. Abraço e sucesso!
Fala rapaziada! O código utilizado na aula é: selector{ backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); }
Aeee, vídeo novo hehe
@gucampelo quando as palavras são diferentes, da um erro no layout, testa ai.
Mais um vídeo top Gustavo.. . Parabens fui fazer agora não sei porque não funcionou, mas ajustei o código...não funcionou corretamente deve ser por conta da atualizaçao do wordpress ... ele carregava o pré loader (mostrava) mas nao saia da tela ou seja, nao carregava a pagina ficava só nele.. mas fiz umas mudanças: agora realmente funciona e o meu eu arrumei pra ficar a quantidade de segundos na tela pois tb nao tava funcionando usei 'setTimeout' e configurei pra mostrar na tela pra ficar exatamente 2 segundos.... Fiz pra que tudo ficasse num código só.. as funções php junto com o Js, tudo num só.. e css no css do tema!
No popup não funciona, como resolver?
parabéns Irmão vc fera vc foi único com conteúdo muito top👋👏👏👏
Infelizmente o código só funciona on page load, se fazer um pop-up formulário o código já não ativa, sabe como resolver?
Conteúdo de primeira. Zerando dúvidas do dia a dia.
Nao compensa usar o Elementor Pro Nulled... Tem muita brecha de segurança. VAI DAR MUITA MERDA
bom dia uma duvida no codigo .containerEsquerda{ transition: all .6s; opacity: 0; z-index: -1; } .containerEsquerda.ativo{ position: static; transform: translateX(0%); transition: all .6s; opacity: 1; } nao preciso colocar ai no código css as classes que criei? fiz umas 10 classes de cores exemplo: containerEsquerdaVerdeLimao containerEsquerdaVerde containerEsquerdaPreto... adicionei elas no css .containerEsquerdaPreto{ position: static; transform: translateX(0%); transition: all .6s; opacity: 1; } .containerEsquerdaVerdeLimao{ position: static; transform: translateX(0%); transition: all .6s; opacity: 1; fiz isso nas 10 cores, porem todas as 10 sessoes desses contaires de cores ficam lado a lado, nao ficam ocultos, passando conforme a lata passa.. e se nao declaro essas classes no css, o container da esquerda nao muda, fica parado na primeira
Fala rapaziada! Espero que gostem!!
O meu buga o stay column, ele fixa no topo do site e fica durante todo site! 😶
brabo!!!
Olá Gustavo, em primeiro lugar obrigada por compartilhar a aula e o código. 🙌 Eu não sei se fiz algo errado, mas no celular e tablet não aparece o efeito, no desktop e notebook ficou muito bom.
Leegal eu abaixo todos os seus codigos e renomeio mas eu tambem gosto de fazer junto
Obrigado mano, você é 10!!
Pena que o carrossel de testemunho só está disponível no Elementor Pro...
Boa men, tem como fazer com imagens
Poderia disponibilizar links
Algo simples que muda totalmente a ideia de um projeto. Parabéns!!! Consigo fazer isso usando JetEngine? Para servir como um card dinâmico?
No seu curso também ensina spline?
Fala Gustavo! Beleza? Qual é o nome da extensão que você usa para ver em formato de celular?
Olha ele ai novinho kkkkkkkkkk
Amigo, e a versão mobile?
é possível substituir a rolagem pelas teclas avançar e retroceder •Obrigado
Pena que não tenho condições de comprar seu curso, sou iniciante e queria muito!
O Curso e Maravilhoso e Unico.
Campelo, Faltou a IMG inferior 😂😁.
@@gleideclausen6739 Só pelo conteúdo que ele posta aq no YT tenho ctz kkk, foda é que atualmente estou desempregado e as coisas estão difíceis dmais!
Top o vídeo. Isso não pesa muito o site?
Muito bom, cada vídeo eu aprendo algo novo. Pq ficou cortado no final? kkk
Obrigado por mais um vídeo!
Fala rapaziada! Os códigos estão na descrição, obrigado!!
boa tarde jovem, muito bom seus videos, esse menu teria como ser ao invés de abrir seções abrir paginas?
Brabissímo!
Parabéns pelo trabalho, irmão! Mas tenho uma dúvida: Quando está criando site pro cliente, você compra a licença oficial do elementor, compra de alguma empresa que repassa as licenças ou usa essa GPL free?
PARA QUEM AS PARTICULAS ESTÃO BUGADAS no Elementor, troque absolute por fixed e o valor Z-index por -1 por 70
Acabei de compra para meu cliente plano P eu fiz um site de taxi para ela comprei com seu link
Fala Gustavo, tudo certo? To com um erro que fiz igualzinho vc ensina no video do menu latereal mas quando clico na flecha e o menu fecha o texto nao some
Top mano , comecei a seguir vc no tiktok depois vim pra cá
@@FelipeLarré Eai Felipe! Fico feliz que esteja gostando amigo, obrigado por comentar! 🙏🏼
Eu coloco no tamanho no ps depois eu comprimo no site ilove depois eu coloco plugin smuff
@@jamilfrancisco2224 boa!! Uso muito o Ilove Img para as compressões também, muito bom
Parabéns pelo vídeo. Muito bom mesmo. Considere fazer um vídeo sobre SEO. Sua didática é muito boa. Deus abençoe.
Up! Up!
@@ptkandroid fala meu amigo! Fico feliz que tenha gosto. Pode deixar que farei um sobre SEO! Deus te abençoe também 🙏🏼🙌🏼
Perfeito!, Quando comecei só usava servidor ruim, meus site não era veloz nem com milagre.
Lindo 😻
Muito bom as dicas Campelo. Talvez o senhor possa me ajudar em uma dúvida: Quando eu excluo uma imagem no WordPress ela também é excluída no servidor? Diminui o inode lá na hospedagem? Obrigado
@@paulobittencourt4612 fala Paulo! Exclui sim, o WordPress está armazenado no servidor, todas as suas mídias, plugins, temas também.
@@gucampelo Muito obrigado pelo esclarecimento. Sucesso!
Não tem cristo que faça funcionar no meu aqui, já fiz e refiz todo o procedimento várias vezes! Não sei mais o que pode tá errado 🤦🏼 Detalhe: o meu container está com o fundo branco (não sei se é por causa disso), mas gostaria que quando scrollasse ele ficasse com o efeito Blur e não tá ficando 😕
@@josielmpe ala meu amigo! Quando scrolla você alterou a cor branca dele? Tirou um pouco a opacidade do branco? Se não o blur pode estar sendo aplicado mas o fundo branco não deixa o efeito ser visualizado
@@gucampelo era isso mesmo, tirei o branco do fundo e funcionou! É que a princípio a ideia era que ficasse branco no topo e entrasse o blur só depois da rolagem, mas aí resolvi deixar só com o Blur mesmo e tá tudo certo kkkk
Esse video já não tinha saído? kk
@@Sam-ef6gz fala meu amigo! Tinha saído o desenvolvimento, esse é apenas a parte do design 🙂
Excelente aula. Me ajudou demais!
@@marcelosaldanha muito obrigado Marcelo!! 🙏🏼🙌🏼
Ótima aula Gustavo. Teria como desativar o botão ou ícone qdo ele estiver com opacidade zero?
@@MarcioSouzaBIO6 claro, pode colocar display:none para que ele suma
@@gucampelo Opa obrigado por responder. Eu estou usando ícone ao invés de botão como na sua aula, e funcionou normal a rolagem tbm com o ícone. Porém, o display:none; no CSS não funciona. Tentei colocar ele no opacity 0 e tbm no opacity 1 e não funciona :(
Ok 👍
Show