Gustavo Campelo - Webdesign
Gustavo Campelo - Webdesign
  • 170
  • 174 319
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
มุมมอง: 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

ความคิดเห็น

  • @fernandamarques5020
    @fernandamarques5020 7 ชั่วโมงที่ผ่านมา

    Super funcionou! Muito obrigado. 😃

  • @paulobittencourt4612
    @paulobittencourt4612 12 ชั่วโมงที่ผ่านมา

    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!

  • @gucampelo
    @gucampelo 13 ชั่วโมงที่ผ่านมา

    Fala rapaziada! O código utilizado na aula é: selector{ backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); }

  • @ThiagoSilva-qg9ku
    @ThiagoSilva-qg9ku 13 ชั่วโมงที่ผ่านมา

    Aeee, vídeo novo hehe

  • @j_obarroso
    @j_obarroso 13 ชั่วโมงที่ผ่านมา

    @gucampelo quando as palavras são diferentes, da um erro no layout, testa ai.

  • @pixelearte-br
    @pixelearte-br วันที่ผ่านมา

    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!

  • @paulosimao78
    @paulosimao78 วันที่ผ่านมา

    No popup não funciona, como resolver?

  • @marciomaquinas3259
    @marciomaquinas3259 3 วันที่ผ่านมา

    parabéns Irmão vc fera vc foi único com conteúdo muito top👋👏👏👏

  • @tragico9110
    @tragico9110 4 วันที่ผ่านมา

    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?

  • @williamantonio1699
    @williamantonio1699 4 วันที่ผ่านมา

    Conteúdo de primeira. Zerando dúvidas do dia a dia.

  • @renansocio5920
    @renansocio5920 4 วันที่ผ่านมา

    Nao compensa usar o Elementor Pro Nulled... Tem muita brecha de segurança. VAI DAR MUITA MERDA

  • @wkpmidia2634
    @wkpmidia2634 6 วันที่ผ่านมา

    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

  • @gucampelo
    @gucampelo 6 วันที่ผ่านมา

    Fala rapaziada! Espero que gostem!!

  • @igustavomoreira
    @igustavomoreira 7 วันที่ผ่านมา

    O meu buga o stay column, ele fixa no topo do site e fica durante todo site! 😶

  • @lonnyxs3228
    @lonnyxs3228 7 วันที่ผ่านมา

    brabo!!!

  • @denisegbitencourt235
    @denisegbitencourt235 7 วันที่ผ่านมา

    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.

  • @jamilfrancisco2224
    @jamilfrancisco2224 7 วันที่ผ่านมา

    Leegal eu abaixo todos os seus codigos e renomeio mas eu tambem gosto de fazer junto

  • @maiconm.4047
    @maiconm.4047 8 วันที่ผ่านมา

    Obrigado mano, você é 10!!

  • @Victor-do8xt
    @Victor-do8xt 8 วันที่ผ่านมา

    Pena que o carrossel de testemunho só está disponível no Elementor Pro...

  • @bsgt812
    @bsgt812 9 วันที่ผ่านมา

    Boa men, tem como fazer com imagens

  • @DayvidFerreira-x2e
    @DayvidFerreira-x2e 9 วันที่ผ่านมา

    Poderia disponibilizar links

  • @SilvaeDantas
    @SilvaeDantas 9 วันที่ผ่านมา

    Algo simples que muda totalmente a ideia de um projeto. Parabéns!!! Consigo fazer isso usando JetEngine? Para servir como um card dinâmico?

  • @zNaaraku
    @zNaaraku 10 วันที่ผ่านมา

    No seu curso também ensina spline?

  • @markdev6557
    @markdev6557 10 วันที่ผ่านมา

    Fala Gustavo! Beleza? Qual é o nome da extensão que você usa para ver em formato de celular?

  • @GOLDBOYRJ
    @GOLDBOYRJ 10 วันที่ผ่านมา

    Olha ele ai novinho kkkkkkkkkk

  • @Victor-do8xt
    @Victor-do8xt 10 วันที่ผ่านมา

    Amigo, e a versão mobile?

  • @teuccio73
    @teuccio73 10 วันที่ผ่านมา

    é possível substituir a rolagem pelas teclas avançar e retroceder •Obrigado

  • @Ronnanz
    @Ronnanz 11 วันที่ผ่านมา

    Pena que não tenho condições de comprar seu curso, sou iniciante e queria muito!

    • @gleideclausen6739
      @gleideclausen6739 7 วันที่ผ่านมา

      O Curso e Maravilhoso e Unico.

    • @gleideclausen6739
      @gleideclausen6739 7 วันที่ผ่านมา

      Campelo, Faltou a IMG inferior 😂😁.

    • @Ronnanz
      @Ronnanz 6 วันที่ผ่านมา

      @@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!

  • @bernardnogueira7003
    @bernardnogueira7003 11 วันที่ผ่านมา

    Top o vídeo. Isso não pesa muito o site?

  • @Sam-ef6gz
    @Sam-ef6gz 11 วันที่ผ่านมา

    Muito bom, cada vídeo eu aprendo algo novo. Pq ficou cortado no final? kkk

  • @fernand0_0
    @fernand0_0 11 วันที่ผ่านมา

    Obrigado por mais um vídeo!

  • @gucampelo
    @gucampelo 11 วันที่ผ่านมา

    Fala rapaziada! Os códigos estão na descrição, obrigado!!

  • @renanfernanddes
    @renanfernanddes 11 วันที่ผ่านมา

    boa tarde jovem, muito bom seus videos, esse menu teria como ser ao invés de abrir seções abrir paginas?

  • @williamantonio1699
    @williamantonio1699 11 วันที่ผ่านมา

    Brabissímo!

  • @igorpmf
    @igorpmf 12 วันที่ผ่านมา

    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?

  • @lourrangeorginadecastrosil569
    @lourrangeorginadecastrosil569 12 วันที่ผ่านมา

    PARA QUEM AS PARTICULAS ESTÃO BUGADAS no Elementor, troque absolute por fixed e o valor Z-index por -1 por 70

  • @jamilfrancisco2224
    @jamilfrancisco2224 13 วันที่ผ่านมา

    Acabei de compra para meu cliente plano P eu fiz um site de taxi para ela comprei com seu link

  • @gustavogalvao395
    @gustavogalvao395 14 วันที่ผ่านมา

    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

  • @FelipeLarré
    @FelipeLarré 14 วันที่ผ่านมา

    Top mano , comecei a seguir vc no tiktok depois vim pra cá

    • @gucampelo
      @gucampelo 14 วันที่ผ่านมา

      @@FelipeLarré Eai Felipe! Fico feliz que esteja gostando amigo, obrigado por comentar! 🙏🏼

  • @jamilfrancisco2224
    @jamilfrancisco2224 14 วันที่ผ่านมา

    Eu coloco no tamanho no ps depois eu comprimo no site ilove depois eu coloco plugin smuff

    • @gucampelo
      @gucampelo 14 วันที่ผ่านมา

      @@jamilfrancisco2224 boa!! Uso muito o Ilove Img para as compressões também, muito bom

  • @ptkandroid
    @ptkandroid 15 วันที่ผ่านมา

    Parabéns pelo vídeo. Muito bom mesmo. Considere fazer um vídeo sobre SEO. Sua didática é muito boa. Deus abençoe.

    • @bernardnogueira7003
      @bernardnogueira7003 15 วันที่ผ่านมา

      Up! Up!

    • @gucampelo
      @gucampelo 14 วันที่ผ่านมา

      @@ptkandroid fala meu amigo! Fico feliz que tenha gosto. Pode deixar que farei um sobre SEO! Deus te abençoe também 🙏🏼🙌🏼

  • @zapseguro
    @zapseguro 15 วันที่ผ่านมา

    Perfeito!, Quando comecei só usava servidor ruim, meus site não era veloz nem com milagre.

  • @Higorsilva-e5b
    @Higorsilva-e5b 15 วันที่ผ่านมา

    Lindo 😻

  • @paulobittencourt4612
    @paulobittencourt4612 15 วันที่ผ่านมา

    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

    • @gucampelo
      @gucampelo 14 วันที่ผ่านมา

      @@paulobittencourt4612 fala Paulo! Exclui sim, o WordPress está armazenado no servidor, todas as suas mídias, plugins, temas também.

    • @paulobittencourt4612
      @paulobittencourt4612 13 วันที่ผ่านมา

      @@gucampelo Muito obrigado pelo esclarecimento. Sucesso!

  • @josielmpe
    @josielmpe 16 วันที่ผ่านมา

    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 😕

    • @gucampelo
      @gucampelo 14 วันที่ผ่านมา

      @@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

    • @josielmpe
      @josielmpe 14 วันที่ผ่านมา

      @@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

  • @Sam-ef6gz
    @Sam-ef6gz 16 วันที่ผ่านมา

    Esse video já não tinha saído? kk

    • @gucampelo
      @gucampelo 14 วันที่ผ่านมา

      @@Sam-ef6gz fala meu amigo! Tinha saído o desenvolvimento, esse é apenas a parte do design 🙂

  • @marcelosaldanha
    @marcelosaldanha 17 วันที่ผ่านมา

    Excelente aula. Me ajudou demais!

    • @gucampelo
      @gucampelo 14 วันที่ผ่านมา

      @@marcelosaldanha muito obrigado Marcelo!! 🙏🏼🙌🏼

  • @MarcioSouzaBIO6
    @MarcioSouzaBIO6 17 วันที่ผ่านมา

    Ótima aula Gustavo. Teria como desativar o botão ou ícone qdo ele estiver com opacidade zero?

    • @gucampelo
      @gucampelo 14 วันที่ผ่านมา

      @@MarcioSouzaBIO6 claro, pode colocar display:none para que ele suma

    • @MarcioSouzaBIO6
      @MarcioSouzaBIO6 14 วันที่ผ่านมา

      @@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 :(

  • @peryclespei2843
    @peryclespei2843 17 วันที่ผ่านมา

    Ok 👍

  • @Higorsilva-e5b
    @Higorsilva-e5b 17 วันที่ผ่านมา

    Show