Faça esses botões chamativos e estilosos no ELEMENTOR PRO + código CSS pronto | Dimas Ferreira

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

{}Código Utilizado:

Botão 01:

selector .elementor-button {
border-top-left-radius: 20px 100% !important;
border-bottom-left-radius: 20px 100% !important;
border-top-right-radius: 20px 100% !important;
border-bottom-right-radius: 20px 100% !important;
/*Mude a cor da sombra aqui!*/
box-shadow: inset 0px 0px 5px 5px #ffffff25, 0px 5px 5px 0px #ffffff25 !important;
width: 100%;
position: relative;
/*Mude a cor do botão aqui!*/
background: rgb(61, 106, 255) !important;
border-radius: 5px;
border: 1px solid rgb(61, 106, 255) !important;
overflow: hidden;
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}

selector .elementor-button:hover {
/*Mude a cor do botão ao passar o mouse aqui!*/
background: rgb(61, 106, 255) !important;
border: none;
/*Mude a cor do brilho ao passar o mouse!*/
box-shadow: inset 0px 0px 5px 5px #ffffff25, 0 0 30px 5px rgba(0, 142, 236, 0.815) !important;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
transform: scale(1.03);
transition: all 0.2s ease-out;
}

selector .elementor-button:hover::before {
-webkit-animation: sh02 0.5s 0s linear;
-moz-animation: sh02 0.5s 0s linear;
animation: sh02 0.7s 0s linear;
}

selector .elementor-button::before {
content: '';
display: block;
width: 0px;
height: 86%;
position: absolute;
top: 7%;
left: 0%;
opacity: 0;
background: #fff;
/*Mude a cor do efeito de luz aqui!*/
box-shadow: 0 0 50px 30px #fff;
-webkit-transform: skewX(-20deg);
-moz-transform: skewX(-20deg);
-ms-transform: skewX(-20deg);
-o-transform: skewX(-20deg);
transform: skewX(-20deg);
}

@keyframes sh02 {
from {
opacity: 0;
left: 0%;
}

50% {
opacity: 1;
}

to {
opacity: 0;
left: 100%;
}
}

selector .elementor-button:active {
box-shadow: inset 0px 0px 5px 5px #ffffff25, 0 0 0 0 transparent !important;
-webkit-transition: box-shadow 0.2s ease-in;
-moz-transition: box-shadow 0.2s ease-in;
transition: box-shadow 0.2s ease-in;
transform: translate(0, 0.2em);
}

Botão 02:

selector .elementor-button {
border-top-left-radius: 20px 100% !important;
border-bottom-left-radius: 20px 100% !important;
border-top-right-radius: 20px 100% !important;
border-bottom-right-radius: 20px 100% !important;
/*Mude a cor da sombra aqui!*/
box-shadow: inset 0px 0px 5px 5px #ffffff25, 0px 5px 0px 0px #2B55A1, 0px 15px 10px 0px #00000050 !important;
width: 100%;
position: relative;
/*Mude a cor do botão aqui!*/
background: rgb(61, 106, 255) !important;
border-radius: 5px;
border: 1px solid rgb(61, 106, 255) !important;
overflow: hidden;
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}

selector .elementor-button:hover {
/*Mude a cor do botão ao passar o mouse aqui!*/
background: rgb(61, 106, 255) !important;
border: none;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
transition: all 0.3s ease-out;
transform: scale(1.05);
}

selector .elementor-button:hover::before {
-webkit-animation: sh02 0.5s 0s linear;
-moz-animation: sh02 0.5s 0s linear;
animation: sh02 0.7s 0s linear;
}

selector .elementor-button::before {
content: '';
display: block;
width: 0px;
height: 86%;
position: absolute;
top: 7%;
left: 0%;
opacity: 0;
background: #fff;
/*Mude a cor do efeito de luz aqui!*/
box-shadow: 0 0 50px 30px #fff;
-webkit-transform: skewX(-20deg);
-moz-transform: skewX(-20deg);
-ms-transform: skewX(-20deg);
-o-transform: skewX(-20deg);
transform: skewX(-20deg);
}

@keyframes sh02 {
from {
opacity: 0;
left: 0%;
}

50% {
opacity: 1;
}

to {
opacity: 0;
left: 100%;
}
}

selector .elementor-button:active {
box-shadow: inset 0px 0px 5px 5px #ffffff25, 0px 5px 0px 0px #2B55A1, 0px 10px 5px 0px #00000085 !important;
-webkit-transition: box-shadow 0.2s ease-in;
-moz-transition: box-shadow 0.2s ease-in;
transition: all 0.1s ease-in;
transform: scale(1);
}

Botão 03:

selector .elementor-button {
border-top-left-radius: 20px 100% !important;
border-bottom-left-radius: 20px 100% !important;
border-top-right-radius: 20px 100% !important;
border-bottom-right-radius: 20px 100% !important;
/*Mude a cor da sombra aqui!*/
box-shadow: inset 0px 0px 5px 5px #ffffff25, 0px 5px 0px 0px #2B55A1 !important;
/*Mude a cor do botão aqui!*/
background: linear-gradient(45deg, #4166e0, #4166e0, #4166e0, #8ebfff, #4166e0, #4166e0);
background-size: 200% 200%;
animation: shine 5s ease-in-out infinite;
transform-origin: center;
}
selector .elementor-button:hover {
transform: scale(1.05);
}
@keyframes shine {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}

selector .elementor-button:active {
box-shadow: inset 0px 0px 5px 5px #ffffff25, 0px 5px 0px 0px #2B55A1 !important;
-webkit-transition: box-shadow 0.2s ease-in;
-moz-transition: box-shadow 0.2s ease-in;
transition: all 0.1s ease-in;
transform: scale(1);
}

Como eu faço um carrossel de texto no ELEMENTOR PRO + código CSS pronto | Dimas Ferreira

Assista a aula para saber como usar:
https://youtu.be/g0Idd-43B9g

{}Código Utilizado:

JAVASCRIPT( colocar no html personalizado)
<script>
const getMarqueeNode = content => {
const el = document.createElement('div');
el.setAttribute('data-marquee-style', true);
el.textContent = content
return el;
}

class Marquee {
constructor(el){
this.el = el;
this.content = el.getAttribute('data-marquee')
this.render();
}

render(){
// create the shadow element to measure and calculate
// the amount of animated items required for marquee

// create
const shadow = getMarqueeNode(this.content);
shadow.setAttribute('data-marquee-shadow', true);
// add shadow element to sanitized DOM
this.el.innerHTML = "";
this.el.appendChild(shadow);
// calculate how many visible items are needed
const inView = this.calculateItemsInView(shadow);
// create container to house animated visible items
const overflow = document.createElement('div');
overflow.setAttribute('data-marquee-overflow', true);
const content = document.createElement('div');
content.setAttribute('data-marquee-container', true);
// put the content container into an overflow: hidden wrapper
overflow.appendChild(content);
// double the amount to fill the screen to animate loop
const count = inView * 3;
// populate with children
for( var i = 0; i < count; i++) {
content.appendChild(getMarqueeNode(this.content))
}
// add to DOM
this.el.appendChild(overflow);

// debug
// console.log("visible items required", inView);
// console.log("total items required", count);
}

calculateItemsInView(ref){
const [single, total] = [ref.clientWidth, ref.parentNode.clientWidth];
// ceil in order to ensure there's never a shortage
return Math.floor(total / single) + 1;
}
}

// find elements and create Marquee instances
const nodes = document.querySelectorAll('[data-marquee]')
const arr = Array.from(nodes);
const refs = (arr || []).map( node => new Marquee(node) );
// recalculate on resize
window.addEventListener( 'resize', () => refs.map( r => r.render() ) );
</script>

CSS:

@-webkit-keyframes marquee {
100% {
transform: translateX(-100%);
}
}

@keyframes marquee {
100% {
transform: translateX(-100%);
}
}

/* Controlar a velocidade do carrossel */
[data-marquee] {
--loop-duration: 60s;
display: block;
}

[data-marquee] [data-marquee-shadow] {
position: absolute;
visibility: hidden;
height: auto;
width: auto;
white-space: nowrap;
}

[data-marquee] [data-marquee-overflow] {
overflow: hidden;
transform: translate3d(0, 0, 0);
}

[data-marquee] [data-marquee-container] {
display: flex;
-webkit-animation: marquee var(--loop-duration) linear infinite;
animation: marquee var(--loop-duration) linear infinite;
}

[data-marquee] [data-marquee-style] {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
}

/* Controlar o estilo do texto */
[data-marquee-style] {
padding: 0.3em 0.3em;
display: flex;
color: #000000;
font-size: 11px;
font-weight: 500;
letter-spacing: 5px;
}


/* Controlar o carrossel no celular */
@media (min-width: 350px) and (max-width: 550px){

[data-marquee-style] {
padding: 0.3em 0.3em;
display: flex;
color: #000000;
font-size: 10px;
font-weight: 500;
letter-spacing: 5px;
}

[data-marquee] {
--loop-duration: 10s;
display: block;
}

}

Card Mágico no Elementor | Efeito Hover | Dimas Ferreira

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

{}CÓDIGO UTILIZADO:
selector{
--first-color: #eba434;
--second-color: #eb3477;
--third-color: #34b4eb;
}
@property --rotate {
syntax: "<angle>";
initial-value: 132deg;
inherits: false;
}
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%;
border-radius: 8px;
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;
}
}

BARRA INFERIOR moderna para AUMENTAR a sua conversão | Dimas Ferreira

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

{}Código Utilizado:

JAVASCRIPT
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>$(window).scroll(function() {
$(".top").css("opacity", 0 + $(window).scrollTop() /250);
});

</script>


CSS
selector {

backdrop-filter: blur( 20px );
-webkit-backdrop-filter: blur( 20px );
border: 1px solid;
border-image: linear-gradient(90deg,#F2298200, #B28C57, #F2298200) 1;
border-left:0px;
border-bottom:0px;
border-right:0px;
}

.top{
opacity: 0;
}

▶️CARROSSEL DE TEXTO vinculado ao scrool do mouse no ELEMENTOR PRO | Dimas Ferreira

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

{}Código Utilizado:

CSS:
selector{
white-space: nowrap;

}

Como criar um FORMULÁRIO COM ÍCONES no Elementor | Dimas Ferreira

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


Projeto no Figma com os ícones utilizados: clique aqui para acessar

{}Código Utilizado:

CSS
.elementor-field-textual {
min-height: 55px;
padding: 7px 20px;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}

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

background-image: linear-gradient(90deg,#19C3E4,#A1F9B4);

}


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

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

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


selector input{
padding-left: 45px;
}

selector .elementor-field-group:before{
position: absolute;
left: 15px;
top: 15px;
z-index: 2;
content: "";

}

selector .elementor-field-group-nome:before{
background-image: url("http://localhost/newsite/wp-content/uploads/2023/10/Nome.svg");
width: 24px;
height: 24px;
}

Carrossel de Imagens SENSACIONAL no Elementor | Dimas Ferreira

Assista a aula para saber como usar:
https://youtu.be/lKGPa-0bQpE

{}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%);

}