{}Código Utilizado:

CSS
selector .swiper-wrapper{
-webkit-transition-timing-function: linear !important;
transition-timing-function: linear !important;
}


/*Gradiente*/
selector::before {
content:"";
pointer-events: none;
width: 100%;
height: 100%;
position: absolute;
z-index:2;
background: linear-gradient(to right, #1B1B1B 0%, transparent 40%, transparent 60%, #1B1B1B 100%);


}
/*Configurações das Setas*/
selector .elementor-swiper-button-prev{
top: calc(50% - 0px);
left: 360px;
z-index: 2;
}

selector .elementor-swiper-button-next{
top: calc(50% - 0px);
right: 360px;
z-index: 2;
}


/*PARA O NOTEBOOK*/
@media (max-width: 1400px){


selector .elementor-swiper-button-prev{
top: calc(50% - 0px);
left: 20px;
z-index: 2;
}

selector .elementor-swiper-button-next{
top: calc(50% - 0px);
right: 20px;
z-index: 2;
}

}


/*PARA O MOBILE*/
@media (max-width: 767px){

selector .elementor-swiper-button-prev{
top: calc(50% - 0px);
left: 10px;
z-index: 2;
}

selector .elementor-swiper-button-next{
top: calc(50% - 0px);
right: 10px;
z-index: 2;
}

selector .swiper-slide{
overflow: visible !important;
}


.elementor-arrows-position-outside .swiper-container {
width: 100%;
}

}

▶️INCRÍVEL BOTÃO que pisca no Elementor | Dimas Ferreira

Assista a aula para saber como usar:
https://youtu.be/EPPqnGXx0Vc


{}Código Utilizado:

CSS
selector .elementor-button{
box-shadow: 0 0 0 0 #000;
animation: pulse-white 2s infinite;

}

@keyframes pulse-white {
0% {
transform: scale(1);
box-shadow: 0 0 0 0 #B28C57
}

70% {
transform: scale(1.01);
box-shadow: 0 0 0 10px transparent
}

100% {
transform: scale(1);
box-shadow: 0 0 0 0 transparent
}
}

Sua CONVERSÃO PODE AUMENTAR com esse elemento | Dimas Ferreira

Assista o vídeo:
https://youtu.be/QjukEqQhdcA

Projeto no Figma com a imagem utilizada: clique aqui para acessar

Sua Página em OUTRO NÍVEL com essa timeline | Dimas Ferreira

Assista o vídeo:
https://youtu.be/JnICxIcpHJE


{}Código Utilizado:

CSS
.container::after{
position: absolute;
content: "";
/*controlar a cor da barra*/
background: #B28C57;
/*controlar a largura da barra*/
width: 2px;
/*controlar o tamanho da barra*/
height: 85%;
top: 10px;
left: 2%;
transform: translate(-50%,) !important;
}

.bullet::before{
content: "";
position: absolute;
/*controlar a cor do bullet*/
background: #fff;
border-radius: 100%;

/*ajuste de posição do bullet*/
top: 15px;
left: -32px;
transform: translatey(-50%);
width: 15px;
height: 15px;
z-index: 1;
}


@media(max-width: 767px){
.container::after{
height: 85%;
left: 3%;
}

}

#EP01 - Fazendo uma PÁGINA DE CAPTURA COMPLETA DO ZERO no Wordpress + Elementor - PÁGINAS COMPLETAS - 1ª Temporada

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


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


{}Código Utilizado:

/*código formulário*/
selector .elementor-field-textual{
height: 60px;
}

selector .elementor-button{
height: 60px;
background: linear-gradient(90deg, #16D2ED -6.78%, #08F7E6 100%);
}

selector .elementor-button:hover{
height: 50px;
background: linear-gradient(90deg, #08F7E6 -6.78%, #EDEDED 100%);

}

```css
/*código cor texto*/
.cor{
color: #16D2ED;
}

`


📌Se inscreva no canal para acompanhar as atualizações!

#EP02 - Fazendo uma PÁGINA DE CAPTURA COMPLETA DO ZERO no Wordpress + Elementor - PÁGINAS COMPLETAS - 1ª Temporada


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


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


{}Código Utilizado:

/*código desfoque*/
selector {
 backdrop-filter: blur(20px);
 -webkit-backdrop-filter: blur(20px);
 }

Como fazer um FORMULÁRIO DIFERENCIADO no Elementor | Dimas Ferreira

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

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

{}Código Utilizado:

/*código formulário*/
selector .elementor-field-textual{
height: 60px;
}

selector .elementor-button{
height: 60px;
background: linear-gradient(90deg, #16D2ED -6.78%, #08F7E6 100%);
}

selector .elementor-button:hover{
height: 50px;
background: linear-gradient(90deg, #08F7E6 -6.78%, #EDEDED 100%);

}

EP. 03 - Terceira Seção da PÁGINA DE CAPTURA | Dimas Ferreira - Páginas Completas


▶️ Assista o Episódio:
https://youtu.be/Zb-BBFflZ0A


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

{}Código Utilizado:

/*código seta*/
selector{
    position: absolute;
    display: flex;
    justify-content: center;
    left: 0px;
    right: 0px;
    bottom: -18px
}

EP. 04 - Quarta Seção da PÁGINA DE CAPTURA | Dimas Ferreira - Páginas Completas

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

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

📌Se inscreva no canal para acompanhar as atualizações!

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>