Códigos Úteis

Esta página contém códigos úteis e mais comuns de serem usados em sites criados no Elementor.

Para saber como implementar os códigos, basta assistir à aula "CÓDIGO ÚTEIS E MAIS UTILIZADOS", no módulo 04.

Este código te permite destacar uma palavra para que ela fique com uma cor diferente.

HTML

				
					<span class="c"> Palavra </span>
				
			

CSS

				
					.c { color: #C887DE;}
				
			

Destacar uma palavra diferente com degradê

c {
background: -webkit-linear-gradient(-35deg,#6F04D8, #D929E4);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

Destacar uma palavra diferente a partir da TAG H6

h6 {
background: -webkit-linear-gradient(-45deg, #DAA520, #000);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

Código para destacar uma palavra com um fundo colorido. E o código para destacar uma paalvra com fundo colorido + cor diferente

HTML

<span style=”background: #D970D5;”> TEXTO AQUI </span>

Código

 c {
color: #FFFFFF;
background: #505D38;
padding-left: 15px;
padding-right: 15px;
}

Definir largura do site em 100% (pode não funcionar corretamente)

Código 1

html,body{
width:100%;
overflow-x:hidden;
}

Código 2

html, body{
overflow-x: hidden !important;
}

Códigos para aumentar uma parte específica do texto

HTML

<span style=”fonte-size: 25px,”></span>

HTML 2

<h2> texto </h2>

Scripts para Fechar a primeira interação do Acordeon/sanfona

Código 1

<script>
jQuery(document).ready(function($) {
var delay = 100; setTimeout(function() {
$(‘.elementor-tab-title’).removeClass(‘elementor-active’);
$(‘.elementor-tab-content’).css(‘display’, ‘none’); }, delay);
});
</script>

Código 2

<script type=”rocketlazyloadscript” src=”data:text/javascript;base64,alF1ZXJ5KGRvY3VtZW50KS5yZWFkeShmdW5jdGlvbigkKXt2YXIgZGVsYXk9MTAwO3NldFRpbWVvdXQoZnVuY3Rpb24oKXskKCcuZWxlbWVudG9yLXRhYi10aXRsZScpLnJlbW92ZUNsYXNzKCdlbGVtZW50b3ItYWN0aXZlJyk7JCgnLmVsZW1lbnRvci10YWItY29udGVudCcpLmNzcygnZGlzcGxheScsJ25vbmUnKX0sZGVsYXkpfSk=” defer></script>

Código para Arredondar Acordeão

Código 1

.elementor-tab-title {
border-radius: 25px;
}

Código 2

Criar um redirect automático de X segundos

É preciso alterar o link que está entre parentese para ser enviado para o destino correto.

Para aumentar a quantidade de segundos, é preciso mudar a quantidade de milissegundos (alterando o 4500). O cálculo é simples. Basta multiplicar a quantidade de segundos por 1000.

Ex: 9 segundos seria 9X1000 = 9000 milissegundos

Código

<script>
window.onload = function funLoad() {
setTimeout(function () {window.location.replace(“https://devzapp.com.br/api-engennier/campanha/api/redirect/631b7cec1cb8760001a6e174“);}, 4500);
}
</script>

Código para estilizar o checkbox e LGPD dos formulários

Alterar o tamanho do texto LGPD

selector .elementor-field-subgroup label {
font-size: 11px !important;
line-height:120% !important;
padding-left:28px;
margin-top:-32px;
padding-top:10px;
display: block;
color:#fff!important;
}

Alterar a cor o tamanho do checkbox

selector #btn-inscricao{
box-shadow: 0px 4px 0px #0BBA75;
margin-top:8px;
margin-bottom:4px;
}

selector .elementor-field-subgroup label {
font-size: 13px !important;
line-height:120% !important;
padding-left:28px;
margin-top:-22px;
padding-top:-5px;
display: block;
}
@media only screen and (max-width:767px;){
selector .elementor-field-subgroup label {
font-size: 10px !important;
padding-left:28px;
margin-top:-22px;
padding-top:5px;
}
}

selector .elementor-field-option{
line-height:100% !important;

}

input[type=checkbox] {
position: relative;
cursor: pointer;
}
input[type=checkbox]:before {
content: “”;
display: block;
position: absolute;
width: 20px;
height: 20px;
top: 0px;
left: 0;
background-color:#fff;
border-radius:4px;
}
input[type=checkbox]:checked:before {
content: “”;
display: block;
position: absolute;
width: 20px;
height: 20px;
top: 0px;
left: 0;
background-color:#EB8E0B;
}
input[type=checkbox]:checked:after {
content: “”;
display: block;
width: 5px;
height: 10px;
border: solid white;
border-width: 0px 2px 2px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
top: 3px;
left: 8px;
}

Estilizar o botão do Formulário com degradê

selector .elementor-button{
animation: 3.4s cubic-bezier(0.2, 0.5, 0.9, 0.6) 2s infinite normal none running textura;
background-image: linear-gradient(45deg, #13DA27, #14A122, #13DA27, #14A122);
background-size: 400% 200%;
transition: background 1.6s cubic-bezier(0.55, 0.1, 0.47, 0.94) 0s;
}

Inverter botão com o LGPD

.elementor-field-type-acceptance {
order: 1;
}

Fazer o botão pulsar

Quanto mais próximo de 1.0, mais devagar ele pulsa.
OBS: Necessário incluir "bt_pulsar" em CLASSES CSS

Código

#bt_pulsar {-webkit-animation: pulse 1.0s infinite;}

#bt_pulsar:hover {-webkit-animation: none;}

@-webkit-keyframes pulse {0% {@include transform(scale(.9)); } 70% {@include transform(scale(1));
box-shadow: 0 0 0 50px rgba(#5a99d4, 0);} 100% {@include transform(scale(.9)); box-shadow: 0 0 0 0 rgba(#5a99d4, 0);}}

Barra lateral rolável (para aqueles textos muito longos)

Escrever 'SECTION' no Classes CSS

Código 1

selector {
height: 200px;
overflow-y: scroll;
overflow-x: hidden;
}

.section::-webkit-scrollbar {
width: 5px;
background-color: #9999 ;


}

.section::-webkit-scrollbar-thumb {
box-shadow: inset 0 0 50px #fff;
}

.section {
scrollbar-color: #6969dd #e0e0e0;
scrollbar-width: thin;
}

Script para ocultar sessão / esconder sessões do site

Necessário colocar "oculto" no Classes CSS

Para aumentar a quantidade de MINUTOS, é preciso mudar a quantidade de milissegundos (alterando o 1760000). O cálculo é simples. Basta multiplicar a quantidade de minutos por 60.000.

Ex: 15 minutos seria 15X60.000 = 900.000

Código

<head>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js“></script>
</head>


<script>
$(‘.oculto’).hide();
setTimeout(function() {
$(‘.oculto’).show();
}, 1760000);
</script>

Background animado com Gradiente/ Degradê

Necessário alterar os hexadecimais das cores

Código

.css-gradient {
background: linear-gradient(145deg, #00cfb9, #068ed3);
background-size: 200% 200%;

-webkit-animation: AnimationName 10s ease infinite;
-moz-animation: AnimationName 10s ease infinite;
animation: AnimationName 10s 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%}
}

Código Hifenizar Texto e formatar formato da coluna e adicionais

Código Hifenizar Texto

.hyphenate {
overflow-wrap: break-word;
word-wrap: break-word;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}

Código que deixar as quinas da sessão em diagonal

selector { clip-path: polygon(0 1%, 89% 0, 99% 14%, 100% 80%, 100% 100%, 13% 100%, 0 87%, 0% 20%);}

selector{
border-top: 2px solid;
border-image: linear-gradient(to left, transparent 15%, #fff 40%, transparent) 1;}

Texto piscando apaga e acende

@keyframes fa-blink {
0% { opacity: 1; }
50% { opacity: 0.5; }
100% { opacity: 0; }
}
.fa-blink {
-webkit-animation: fa-blink .75s linear infinite;
-moz-animation: fa-blink .50s linear infinite;
-ms-animation: fa-blink .50s linear infinite;
-o-animation: fa-blink .50s linear infinite;
animation: fa-blink .75s linear infinite;
}

Fazer objetos flutuarem

@keyframes float {
0%,100%{
transform:translatey(0)
}
50%{

transform:translatey(-20px)
}
}
.efeito-flutuante .elementor-button-wrapper a, .efeito-flutuante .elementor-image img {
animation: float 6s ease-in-out infinite;
}

Ícones com cores em degradê / gradiente

Necessário alterar os hexadecimais das cores

Código

.elementor-icon i:before, .elementor-icon svg:before {

background: -webkit-gradient(linear, left top, left bottom, from(#f00), to(#333));

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

}

Arredondar widget HTML com código /vídeo embedado

Necessário colocar "container" no Classes CSS. "Border-radius" determina a circunferência do arredondado.

Código

.container {
border-radius: 10px;
/* fix for safari rounded corners */
position: relative;
overflow: hidden;
mask-image: -webkit-radial-gradient(white, black);
}

Javascript - Copy to Clipboard