EP. 05 - Responsividade e Últimos Ajustes da PÁGINA DE CAPTURA | Dimas Ferreira - Páginas Completas


▶️ Assista o Episódio:
https://youtu.be/KpjofSkZKDw



🔗 Projeto Figma e arquivos: https://dimasferreira.gumroad.com/l/canvapro


{}Código Utilizado:

/*código borda form*/
@media(max-width: 1024px){
    
selector .elementor-field-textual{
    
    border-radius: 8px 8px 8px 8px !important;
}

selector .elementor-button{
    
    border-radius: 8px 8px 8px 8px !important;
    
}
        
}

▶️Olá Pessoal! Novidade na área!

https://dimasweb.com/pag-form-yt-2/

📅Você pode participar até o dia 07 de Junho.

EP. Bônus - Deixando a PÁGINA DE CAPTURA Voando | Dimas Ferreira - Páginas Completas

▶️ Assista o Episódio:
https://youtu.be/peuod6wIOJI

➡️Passos para deixar uma página rápida: [acesse aqui]

🔗 Projeto Figma e arquivos: https://dimasferreira.gumroad.com/l/canvapro

📁COPIE e COLE a Página de Captura feita na série: https://dimasferreira.gumroad.com/l/templatepgcaptura

Nova Técnica Incrível no Elementor - CARD BRILHANTE ao Passar o Mouse

▶️ Assista o Vídeo:
https://youtu.be/eFneQIWV8AE


📁COPIE e COLE esses cards brilhantes no seu site: https://dimasferreira.gumroad.com/l/cardsbrilhantes

💻Códigos Utilizados:


JavaScript

<script type="text/javascript">
    
      const cards = document.querySelectorAll(".card");

window.addEventListener("mousemove", (ev) => {
  
  cards.forEach((e) => {
    const brilho = e.querySelector(".brilho");
    const brilho2 = e.querySelector(".brilho2");
    const rec = brilho2.getBoundingClientRect();

  
    brilho.animate(
      [
        {
          transform: `translate(${
            (ev.clientX - rec.left) - (rec.width / 2)
          }px,${(ev.clientY - rec.top) - (rec.height / 2)}px)`
        }
      ],
      {
        duration: 300,
        fill: "forwards"
      }
    );
  
    brilho.style.opacity = "1";
      
  });
  
});

    
    
</script>

CSS

selector {
    --brilho-size:250px;
}

selector .inner{
    backdrop-filter: blur(80px);
    height: 100%;
}

selector .brilho{
    width: var(--brilho-size);
    height: 80%;
    left: calc(50% - calc(var(--brilho-size)/2));
    filter: blur(40px);
    z-index: -1;
    opacity: 0;    
    transition: opacity 300ms 300ms linear;

}

selector .brilho2 {
  visibility: hidden;
  z-index: -1;
  height: 100%;
}

Transforme seu site com esse Efeito de Texto no Elementor | Efeito de Hover | Dimas Ferreira

▶️ Assista o Episódio:
https://youtu.be/QLdQwQ_rqJ8

📁Ganhe Tempo COPIANDO e COLANDO o template pronto do vídeo no seu site:
https://dimasferreira.gumroad.com/l/efeitodetexto

{}Código Utilizado:

/*código hover*/
selector{
    opacity: 0;
    transition: 0.5s ease-in-out;
}
selector:hover{
    opacity: 1;
}    
}

/*código desfoque*/
selector:hover::before {
 backdrop-filter: blur(10px) !important;
 -webkit-backdrop-filter: blur(10px);
 }

Texto Circular Animado no Elementor

▶️ Assista o Vídeo:
https://youtu.be/6pnlYkijOSw


💻Códigos Utilizados:

CSS

/*Animação de Giro*/
selector{
    animation: giro 10s linear infinite;
    transform-origin: center;
    position: absolute;
}

@keyframes giro {
    0%{
      transform: rotate(Odeg);
    }
    100% {
      transform: rotate(360deg);
    }
}

/*Desfoque*/
selector {
 backdrop-filter: blur(20px);
 -webkit-backdrop-filter: blur(20px);
 }

/*Ajuste do Fundo*/
selector .e-text-path{
    height: 150px !important;
}

/*Código de Ajuste de Posição*/
selector{
    position: absolute;
    top: 40%;
    left: 40%;
    transform: translate(-50%, -50%);
}

Esconda o Título e Logo de Vídeos do YouTube na Sua Página [WordPress e Elementor]

▶️ Assista o Vídeo:
https://youtu.be/VVfmb1Pp0UM

Como fazer um CARD MÁGICO no Elementor

▶️ Assista o Vídeo:
https://youtu.be/Ak9LjAV87-4

{}Código Utilizado:

/*mude a cor do brilho aqui*/
selector{
--first-color: #eba434;
--second-color: #eb3477;
--third-color: #34b4eb;
}

/*se for usar no elementor FREE delete as linhas de códigos abaixo*/
@property --rotate {
syntax: "<angle>";
initial-value: 132deg;
inherits: false;
}
/*até aqui*/

selector::before, selector::after{
opacity: 0;
content: "";
transition: all 0.5s ease-in-out;
}

selector:hover::before, selector:hover::after{
position: absolute;
z-index: -1;
background-image: linear-gradient(
var(--rotate)
, var(--first-color), var(--second-color) 43%, var(--third-color));
animation: spin 2.5s linear infinite;
opacity: 1;
}

selector:hover::before {
width: 104%;
height: 104%;
top: -2%;
left: -2%;
}

selector:hover::after {
top: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
transform: scale(0.9);
filter: blur(70px);
}

@keyframes spin {
0% {
--rotate: 0deg;
}
100% {
--rotate: 360deg;
}
}

SEU SITE MAIS DINÂMICO com Animações de Entrada no Elementor

▶️Assista aqui o vídeo:
https://youtu.be/LXexwDh7jD4

{}Código Utilizado:



Biblioteca 01 - SAL.js

https://mciastek.github.io/sal/

<!-- Biblioteca Sal.js CSS -->
<link rel="stylesheet" href="<https://cdn.jsdelivr.net/npm/sal.js@0.8.1/dist/sal.css>">
<!-- Sal.js JS -->
<script src="<https://cdn.jsdelivr.net/npm/sal.js@0.8.1/dist/sal.js>"></script>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    sal();
  });
</script>

Biblioteca 02 - AOS
https://michalsnik.github.io/aos/

<!-- Biblioteca AOS CSS-->
<link href="<https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.css>" rel="stylesheet">
<!-- Biblioteca AOS JS -->
<script src="<https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.js>"></script>
<script>
  AOS.init();
</script>

Biblioteca 03 - Scroll Reveal

https://scrollrevealjs.org/

<script src="<https://unpkg.com/scrollreveal>"></script>
<script>
  ScrollReveal().reveal('.classe', {
    // Opções aqui
    duration: 3500,
    distance: '50px',
    origin: 'bottom'
  });
</script>

Como DESTACAR textos no Elementor

▶️Assista aqui o vídeo:
https://youtu.be/FWmR-z8SOOk

{}Código Utilizado:

.cor1{
    color: #fff;
   
}

.cor2{
    background: #fff;
    color: #000;
    padding: 0px 5px 0px 5px;
    border-radius: 5px;
   
}

Código para o Texto

<span class="cor2">SEU TEXTO AQUI</span>

Como fazer um efeito de GRADIENTE ANIMADO no Elementor

▶️Assista aqui o vídeo:
https://youtu.be/FvlOlT-dxzM

{}Código Utilizado:

.cor1{
    background: linear-gradient(to right, #fff 20%, #F8D04F 40%, #F8D04F 60%, #fff 80%);
    background-size: 200% auto;
    background-clip: text;
    text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient 5s linear infinite;
   
}

@keyframes gradient {
    
    to {
        background-position: 200% center;
    }
    
    
}

O que é Wordpress e Como ele Funciona em 10 minutos [TUTORIAL para iniciantes]

▶️Assista aqui o vídeo:
https://youtu.be/RI0Cs8eQLEA

Mapa Mental: https://miro.com/app/board/uXjVLVCQxaU=/?share_link_id=330927605046

Quem quiser editar o mapa mental, é só fazer uma cópia para sua conta.

[📌COMUNICADO AOS MEMBROS MAIS ANTIGOS]

Pessoal, provavelmente eu perdi o meu canal do telegram que tinha mais de 1300 pessoas inscritas.
Estou em contato com o telegram, mas foi bobeira minha. Esse é o meu novo canal no telegram, se inscreve aí se você quiser continuar recebendo tudo sobre construção de sites no wordpress + elementor.
Peguei as mensagens antigas com todos os recursos e já coloquei nesse novo canal. Eu gosto de colocar os recursos aqui, pois fica bem organizado, mas é só um detalhe. Vamo que vamo!🚀🎯

⭐[TUTORIAL] Como encontrar recursos no canal do Telegram

https://www.loom.com/share/067897e9bfbc4a03a120119682c6501d?sid=d8ac90c6-816a-4bbd-acec-c369c1e84fac