Scripts para Elementor
Códigos para otimizar e aperfeiçoar sua página no Elementor.
Categorias
selector .elementor-button {
background: linear-gradient(304deg, #e87722, #e87722,);
/*background: linear-gradient(304deg, #dacf94, #e2a02b, #816637);*/
background-size: 600% 600%;
-webkit-animation: gradiente-bc 3s ease infinite;
-moz-animation: gradiente-bc 3s ease infinite;
animation: gradiente-bc 3s ease infinite;
/*animation: efeito-pulsar 1.2s ease-out infinite;*/
}
/*EFEITO GRADIENTE-SCROOL */
@-webkit-keyframes gradiente-bc {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@-moz-keyframes gradiente-bc {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@keyframes gradiente-bc {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
selector .elementor-button {
box-shadow: 0 0 50px #e87722;
animation: efeito-pulsar 1.2s ease-out infinite;
}
selector .elementor-button:hover {
box-shadow: 0 0 5px #e87722,
0 0 25px #e87722,
0 0 50px #e87722,
0 0 100px #e87722,
0 0 500px #e87722;
}
/*EFEITO PULSAR */
@-webkit-keyframes efeito-pulsar {
0% { box-shadow: 0 0 0 #e87722; }
50% { box-shadow: 0 0 5px #e7a61a,
0 0 25px #e87722,
0 0 50px #e87722,
0 0 100px #e87722,
0 0 500px #e87722;}
100% { box-shadow: 0 0 0 #e87722; }
}
selector .elementor-button {
background: linear-gradient(131deg, #f65897, #93db25);
background-size: 400% 400%;
-webkit-animation: AnimationName 20s ease infinite;
-moz-animation: AnimationName 20s ease infinite;
animation: AnimationName 3s ease infinite;
}
@-webkit-keyframes AnimationName {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@keyframes AnimationName {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
selector .elementor-button {
background: linear-gradient(131deg, #f65897, #93db25);
background-size: 400% 400%;
-webkit-animation: AnimationName 20s ease infinite;
-moz-animation: AnimationName 20s ease infinite;
animation: AnimationName 3s ease infinite;
}
@-webkit-keyframes AnimationName {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@keyframes AnimationName {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
selector .elementor-button{
box-shadow: 0 0 0 0 #000;
animation: pulse-white-bc 2s infinite;
}
@keyframes pulse-white-bc {
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
}
}
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);
}
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);
}
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);
}
selector div div a {
animation: pulse 1.50s infinite;
}
selector div div a:hover {
animation: none;
}
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
selector div div a {
animation-name: heartFadeInOut;
animation-iteration-count: infinite;
animation-duration: 3s;
}
@keyframes heartFadeInOut {
0% {transform: scale(1);}
25% {transform: scale(.97);}
35% {transform: scale(.9);}
45% {transform: scale(1.1);}
55% {transform: scale(.9);}
65% {transform: scale(1.1);}
75% {transform: scale(1.03);}
100% {transform: scale(1);}
}
selector .elementor-button {
background: linear-gradient(-45deg, transparent 4%, transparent 4.1%, #9300fa 4.2%, #FD4F55 95%, transparent 95.1%);
transition: all .5s ease;
}
selector div div a {
animation-name: heartFadeInOut;
animation-iteration-count: infinite;
animation-duration: 3s;
}
@keyframes heartFadeInOut {
0% {transform: scale(1);}
25% {transform: scale(.97);}
35% {transform: scale(.9);}
45% {transform: scale(1.1);}
55% {transform: scale(.9);}
65% {transform: scale(1.1);}
75% {transform: scale(1.03);}
100% {transform: scale(1);}
}
selector .elementor-button {
background: linear-gradient(-45deg, transparent 4%, transparent 4.1%, #9300fa 4.2%, #FD4F55 95%, transparent 95.1%);
transition: all .5s ease;
}
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;
box-shadow: inset 0px 0px 5px 5px #ffffff25, 0px 5px 0px 0px #57EE6C !important;
background: linear-gradient(45deg, #0E9921, #0E9921, #0E9921, #57EE6C, #0E9921, #0E9921);
background-size: 200% 200%;
animation: shine 5s ease-in-out infinite;
transform-origin: center;
selector .elementor-button {
background: linear-gradient(-45deg, transparent 4%, transparent 4.1%, #9300fa 4.2%, #FD4F55 95%, transparent 95.1%);
transition: all .5s ease;
}
Máscara de Telefone formulário do elementor
Copie o código abaixo e insira com elemento de HTML antes do formulário.
<script type="text/javascript">
// desenvolvido por borgescley.com.br
function mask(o,f){
v_obj=o
v_fun=f
setTimeout("execmask()",1)
}
function execmask(){
v_obj.value=v_fun(v_obj.value)
}
function masktel(v){
v=v.replace(/\D/g,"");
v=v.replace(/^(\d{2})(\d)/g,"($1) $2");
v=v.replace(/(\d)(\d{4})$/,"$1-$2");
return v;
}
function idcss( el ){
return document.getElementById( el );
}
window.onload = function(){
// idcss('tel_fixo').setAttribute('maxlength', 14);
// idcss('tel_fixo').onkeypress = function(){
// mask( this, masktel );
// }
idcss('form-field-whatsapp').setAttribute('maxlength', 15);
idcss('form-field-whatsapp').onkeypress = function(){
mask( this, masktel );
}
}
</script>
Máscara de Telefone DDI
Copie o código abaixo e insira com elemento de HTML antes do formulário.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
const phoneInputField = document.querySelectorAll('input[type="tel"]');
const btForm = document.querySelectorAll('.elementor-button[type="submit"]');
let telefones = [];
for (i = 0; i < phoneInputField.length; i++){
var phone_number = window.intlTelInput(phoneInputField[i], {
separateDialCode: true,
preferredCountries:["br"],
hiddenInput: "full",
utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js"
});
telefones[i] = phone_number;
}
$(phoneInputField).each(function(i) {
$("form").submit(function() {
var full_number = telefones[i].getNumber(intlTelInputUtils.numberFormat.E164);
$(phoneInputField[i]).val(full_number);
console.log(phoneInputField[i]);
console.log(phone_number);
});
});
for (i = 0; i < phoneInputField.length; i++){
var larguraInput = phoneInputField[i].getBoundingClientRect().width;
$(".iti__country-list").css({width: larguraInput});
}
</script>
.iti, .iti--allow-dropdown{
width: 100% !important;
z-index: 9999 !important;
}
.iti__selected-dial-code{
color: #ffffff;
font-size: 16px;
}
.iti__country-list{
color: #f9f9f9 !important;
background-color: #1a1a1a !important;
border-color: #1a1a1a !important;
}
.iti__arrow{
border-top-color: #ffffff !important;
}
.iti__selected-flag{
background-color: #707070 !important;
}
.iti__divider{
border-bottom-color: #505050 !important;
}
.iti__country-name{
font-size: 16px;
}
.iti__flag {
background-image: url("URL FLAG ARQUIVO 1");
}
@media (min-resolution: 2x) {
.iti__flag {
background-image: url("URL FLAG ARQUIVO 2");
}
}
Scrollbar personalizada
Copie o código abaixo e insira com elemento de HTML antes do formulário.
html, body {
max-width: 100%;
overflow-x: hidden;
}
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #000000;
}
::-webkit-scrollbar-thumb {
-webkit-border-radius: 3px;
border-radius: 3px;
background: linear-gradient(180deg, #e9ebc3, #e4cd5b);
}
::-webkit-scrollbar-thumb:hover {
-webkit-border-radius: 3px;
border-radius: 3px;
background: linear-gradient(0deg, #e9ebc3, #e4cd5b);
}
Efeito de texto 1
Copie o código abaixo e insira no CSS personalizado do elemento e chame a classe “gradient”
.gradient h2 {
background: -webkit-linear-gradient(0deg, #ff0000, #ffff00) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
text-shadow: 0px 0px #00000000 !important;
padding: 10px 0px;
}
Código Carrossel Vertical Contínuo
Copie o código abaixo e insira no CSS personalizado
SEM CÓDIGO