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

Como Fazer uma LANDING PAGE PROFISSIONAL em 2024 com Wordpress + Elementor

▶️Assista o vídeo:
https://youtu.be/rGI-DeJyTFQ


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


🚀[ECONOMIZE TEMPO] COPIE e COLE essa Landing Page completa em segundos no seu Wordpress:
https://dimasweb.com/landingpagepro


{}Códigos utilizados

css 
<style> 
     
    .cor1{ 
        color: #BBAA9B; 
    } 
   
    .sub{ 
        text-decoration: line-through; 
        color: #BBAA9B; 
        font-weight: 700; 
    } 
     
    .blur{ 
        backdrop-filter: blur(20px); 
     -webkit-backdrop-filter: blur(20px); 
    } 
     
    .imgseta{ 
    position: absolute; 
    display: flex; 
    justify-content: center; 
    top: 0px; 
    left: 0px; 
    right: 0px; 
    } 
     
</style>

Como Fazer um Carrossel de CARDS 3D no Wordpress + Elementor [PASSO A PASSO]

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


👑[MUITO RÁPIDO]Construa esse Carrossel 3D em 10 SEGUNDOS no seu Elementor
https://dimasweb.com/carrossel3d

Projeto Figma e arquivos:
https://www.figma.com/design/1zfz0eNxpyPVj9sRWHwmvV/Carrossel-3D

Biblioteca Swiper.js
https://swiperjs.com

{}Códigos utilizados

html 
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script> 
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" /> 
 
 
<script> 
const mySwiper = document.querySelectorAll('.mySwiper .e-con-inner'); 
 
    for (i = 0; i < mySwiper.length; i++){ 
        var parent = mySwiper[i].parentNode; 
        while (mySwiper[i].firstChild) parent.insertBefore(mySwiper[i].firstChild, mySwiper[i]); 
        parent.removeChild(mySwiper[i]); 
    } 
    
</script>
 
<script> 
    var swiper = new Swiper(".mySwiper", { 
      effect: "coverflow", 
      grabCursor: true, 
      centeredSlides: true, 
      loop: true, 
      slidesPerView: "auto", 
      coverflowEffect: { 
        rotate: 0, 
        stretch: 0, 
        depth: 100, 
        modifier: 2.5, 
        slideShadows: false, 
      }, 
      navigation: { 
        nextEl: ".swiper-button-next", 
        prevEl: ".swiper-button-prev", 
      }, 
      pagination: { 
        el: ".swiper-pagination1", 
        clickable: true, 
      }, 
      autoplay: { 
        delay: 5000, 
    }, 
       
     breakpoints: { 
        320: { 
             
            slidesPerView: 1.5, 
             
        }, 
         
        768: { 
             
            slidesPerView: 3, 
             
        }, 
         
        1025: { 
             
            slidesPerView: 4, 
             
        }, 
         
        1400: { 
             
            slidesPerView: 4.2, 
             
        }, 
     } 
       
    }); 
  </script> 
   
  <style> 
       
       
     /* Gerais*/ 
    .swiper-wrapper{ 
        flex-direction: row !important; 
        flex-wrap: nowrap !important; 
        overflow: visible !important; 
    } 
     
    .swiper-wrapper .e-con.e-flex { 
        flex: none !important; 
    } 
     
    /* Bullets*/ 
    .swiper-pagination-bullet{ 
        background: #fff !important; 
        transition: 0.5s; 
    } 
     
    .swiper-pagination-bullet-active{ 
        background: #32AA6E !important; 
        width: 20px !important; 
        border-radius: 3px !important; 
    } 
     
     
    /* Paginação*/ 
    .swiper-pagination1{ 
        position: absolute; 
        display: flex; 
        justify-content: center; 
        top: 20px; 
        left: 0px; 
        right: 0px; 
    } 
     
     
     
    /* Navegação*/ 
    .swiper-button-prev{ 
        content: url("https://dimasweb.com/wp-content/uploads/2024/10/prev-1.svg"); 
        background-image: none; 
        position: absolute; 
        width: 30px !important; 
        height: 30px !important; 
        cursor: pointer; 
        top:30px; 
        left: 42%; 
        transform: translateX(-42%); 
    } 
     
    .swiper-button-next{ 
        content: url("https://dimasweb.com/wp-content/uploads/2024/10/next-1.svg"); 
        background-image: none; 
        width: 30px !important; 
        height: 30px !important; 
        top:30px; 
        cursor: pointer; 
        left: 58% !important; 
        transform: translateX(-58%) !important; 
    } 
     
    /*MOBILE*/ 
    @media (min-width: 330px) and (max-width: 1023px){ 
         
    .swiper-button-prev{ 
        top:20px; 
        left: 20% !important; 
         
    } 
     
    .swiper-button-next{ 
        top:20px; 
        left: 80% !important; 
     
    } 
     
     
    .swiper-pagination1{ 
        top: 10px; 
    } 
     
    } 
 
       
  </style>

Como criar uma LANDING PAGE em 12 minutos [SIMPLES E RÁPIDO]

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

[DESBLOQUEADO?] Mostrei um plugin que promete COPIAR os recursos do Elementor PRO

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

Como Fazer uma LANDING PAGE PROFISSIONAL em 2025 com Wordpress + Elementor

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


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


🚀[ECONOMIZE TEMPO] COPIE e COLE essa Landing Page completa em segundos no seu Wordpress:
https://dimasweb.com/lp25

CÓDIGOS UTILIZADOS

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

<!--Codigo Texto Giratorio-->

<style>
    #txt{
      animation: giro 15s linear infinite; 
      transform-origin: center;
      position: absolute; 
    }

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

    }
    
</style>

/*Codigo Complementar Texto Giratorio*/
selector{
    position: absolute;
    transform: translate(0%, -50%);
    top: 0%;
  
}