Eduardo Fernandes
Este é um compilado gratuito de códigos úteis, projetados para facilitar o seu dia a dia ao utilizar o WordPress com Elementor.
Codigos obrigatorios para se colocar no header "custom code" do elementor
Retirar scroll lateral
# css
body, html {
overflow-x: hidden !important;
}
/Corrigir escrollamento no Mobile/
@media (max-width: 786px){
body, html {
overflow-x: hidden!important;
}
}
Scroll suave
# Java Script
<script data-minify="1" src="https://sedrux.com.br/wp-content/cache/min/1/gh/studio-freight/lenis@1.0.22/bundled/lenis.min.js?ver=1744371181" data-rocket-defer defer></script>
<script>
const lenis = new Lenis({
duration: 1.2,
easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
orientation: 'vertical',
gestureOrientation: 'vertical',
smoothWheel: true,
wheelMultiplier: 1,
smoothTouch: false,
touchMultiplier: 2,
infinite: false,
})
//get scroll value
lenis.on('scroll', (e) => {
console.log(e)
})
function raf(time) {
lenis.raf(time)
requestAnimationFrame(raf)
}
requestAnimationFrame(raf)
</script>
Alterar cor da barra de rolagem
# css
body::-webkit-scrollbar {
width: 10px;
}
body::-webkit-scrollbar-track {
background: #202020;
}
body::-webkit-scrollbar-thumb {
background-color: #d7171e;
border-radius: 10px;
border: 2px solid #202020;
}
Aplicar configuração por tamanho de tela
# css
@media (max-width:560px){
.suaclasse{
height:80vh;
border:solid 1px;
}
}
Customização de textos
Mudar a cor de fundo do texto
# HTml
Texto <span style=
"background-color:
#0080ff;">
seleção de texto com fundo
</span>.
Mudar a cor de parte do texto
# HTml
Texto <span style="color:
#3978EC;">01</span>
Mudar tamanho de parte do texto
# HTml
<font size="7">
Tamanho desta fonte:7
</font>
O indice “size” vai de 1 a 7, quanto maior o numero maior o texto
Degrade em texto
# css
selector {
font-size: 3em;
background-image: linear-
gradient(90.99deg,
#4589E1 3.19%, #9932FC 104.23%);
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
color: transparent;
}
Imagem/GIF em texto
# css
selector {
font-size: 3em;
background-image: url(
caminho/para/imagem.png);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
-webkit-text-fill-color:
transparent;
}
Criar letreiro
# css
Colocar no container
selector{
white-space: nowrap
}
Colocar no texto
selector{
display: inline-block;
animation: carrossel
15s linear infinite;
}
@keyframes carrossel{
0%{
transform:
translatex(0);
}
100%{
transform:
translatex(-100%);
}
}
Duplique seu texto inicial quantas vezes quiser
Degrade animado em texto
# css
selector {
background: linear-gradient(90deg, #0d0d0d, #fff, #0d0d0d);
background-size: 80%;
background-repeat: no-repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: sombra 3s linear infinite alternate;
}
@keyframes sombra {
0% {
background-position: -500%;
}
100% {
background-position: 500%;
}
}
TEXTO
Tag "br" pular linha apenas no pc
# css
.desktop-only {
display: inline; /* Mostra por padrão */
}
@media (max-width: 768px) {
.desktop-only {
display: none; /* Esconde no mobile */
}
}
Tag
<br class="desktop-only">
Texto Riscado (promoção)
# css
.riscado {
text-decoration-line: line-through;
text-decoration-color: red;
text-decoration-thickness: 2px;
}
Texto Riscado (promoção) traço diagonal
# css
.riscado {
position: relative;
display: inline-block; /* Necessário para o pseudo-elemento funcionar corretamente */
color: black; /* Cor do texto */
}
.riscado::after {
content: '';
position: absolute;
top: 50%; /* Centraliza verticalmente */
left: -5%; /* Ajusta para cobrir o texto */
width: 110%; /* Largura do traço */
height: 2px; /* Espessura do traço */
background-color: red; /* Cor do traço */
transform: rotate(4deg); /* Define o ângulo diagonal */
transform-origin: center;
pointer-events: none; /* Para evitar interferência com cliques no texto */
}
Customização de Imagens
Retirar compreenção padrão de imagem
# PHP
<?php
function desabilitar_compressao(){
return 100;
}
add_filter(
'wp editor set quality','desabilitar_compressao');
add_filter( 'jpeg_quality', 'desabilitar_compressao');
add_filter('wp_editor_set_quality_for_type','desabilitar_compressao');
add_filter('wp_editor_set_quality_for_image','desabilitar_compressao');
Use o plugin “code Snippets”, para incluir o codigo.
Girar elementos (selos)
# css
.girar{
transform-origin: center center;
-webkit-animation: spin 10s linear infinite;
-moz-animation: spin 10s linear infinite;
animation: spin 10s linear infinite;
}
@-moz-keyframes spin {
100%{
-moz-transform: rotate(360deg);
}
}
@-webkit-keyframes spin {
100%{
-moz-transform: rotate(360deg);
}
}
@keyframes spin {
100%{
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
Diminuir logo no Scroll
# css
.logo img {
max-width: 140px;
height: auto;
transition: all 0.5s ease;
}
.elementor-sticky--effects .logo img {
max-width: 115px;
height: auto;
}
Customização de Botões
Degrade em botão
# css
:root{
--grad1: #03a9f4;
--grad2: #a066e5;
--grad3: #3fdcc4;
--grad4: #03a9f4;
}
selector .elementor-button {
background: linear-gradient(90deg, var(--grad1),
var(--grad2),
var(--grad3),
var(--grad4));
background-size: 400% 200%;
transition: background 1.5s cubic-bezier(0.5, 0.1, 0.4, 0.9);
animation: brilho 5s ease-in infinite;
}
@keyframes brilho{
0%{
background-position: 0%;
}
100%{
background-position: 400%
}
}
Troque a cor em “root” como desejar.
Alinhar e ajustar o tamanho do icone
# css
selector .elementor-button-icon {
font-size: 24px;
}
selector .elementor-button-content-wrapper {
display: flex; /* Certifique-se de que o elemento é um flex container */
align-items: center;
}
Em Breve
Customização de Conteudo
Efeito de Movimento com blur
# Javascript
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script>
<script>
gsap.registerPlugin(ScrollTrigger);
const scrolls = document.querySelectorAll(".scroll-left , .scroll-bottom");
scrolls.forEach(scroll=> {
gsap.from(scroll,{
opacity: 0,
filter: "blur(10px)",
y: 30,
scrollTrigger:{
trigger: scroll,
start: "top 80%",
end: "top 50%",
scrub: true,
}
})
} )
</script>
<style>
/* Estilo do cursor personalizado */
.cursor-personalizado {
cursor: url('https://visosul.com.br/wp-content/uploads/2023/10/Grupo-3.svg') 0 0, auto;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
var elementoSlide = document.querySelector('.slideinterativo');
elementoSlide.addEventListener("mouseover", function() {
document.body.classList.add("cursor-personalizado");
});
elementoSlide.addEventListener("mouseout", function() {
document.body.classList.remove("cursor-personalizado");
});
});
</script>
Coloque a classe .scroll-left ou .scroll-bottom, para controlar a direção que o elemento aparece
Efeito Suave Bullet slide
# css
selector .swiper-pagination-bullet-active{
margin: 0 var(--swiper-pagination-bullet-horizontal-gap,4px);
height: 5px;
width: 30px;
transition: 0.5s;
border-radius: 5px;
}
Desabilitar Navagação fim slide
# css
.swiper-button-disabled{
opacity: 0 !important;
transition: opacity .6s ease;
}
Gradiente em borda
# css
selector {
border-top: solid 1px;
border-image: linear-gradient(101deg, #0941C0 49.74%, #0087BB 81.93%) 1;
}
Puxar Produto para o link direto do whtaaapp link botão pg do produto
# JavaScript
Colocar no rodape da pagina do produto
add_action('woocommerce_single_product_summary', 'add_custom_cta_button', 35);
function add_custom_cta_button() {
echo '<a class="whatsapp button alt" href="#">Enviar mensagem pelo WhatsApp <i class="fab fa-whatsapp"></i></a>';
}
add_action('wp_footer', 'add_custom_whatsapp_script', 99);
function add_custom_whatsapp_script() {
if (is_product()) {
global $post;
$product_name = get_the_title($post->ID);
$product_url = get_permalink($post->ID);
?>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
var productName = <?php echo json_encode($product_name); ?>;
var productUrl = <?php echo json_encode($product_url); ?>;
var whatsappNumber = '5531982982752'; // Substitua pelo número de telefone desejado
var message = 'Olá, vi esse produto no site e gostaria de comprá-lo: ' + productName + ' ' + productUrl;
var encodedMessage = encodeURIComponent(message);
var whatsappUrl = 'https://wa.me/' + whatsappNumber + '?text=' + encodedMessage;
var whatsappButton = document.querySelector('.whatsapp');
if (whatsappButton) {
whatsappButton.href = whatsappUrl;
}
});
</script>
<?php
}
}
# PHP
Colocar no codeSnipet
<script>
document.addEventListener('DOMContentLoaded', function() {
var productName = <?php echo json_encode($product_name); ?>;
var productUrl = <?php echo json_encode($product_url); ?>;
var whatsappNumber = '5531982982752'; // Substitua pelo número de telefone desejado
var message = 'Olá, vi esse produto no site e gostaria de comprá-lo: ' + productName + ' ' + productUrl;
var encodedMessage = encodeURIComponent(message);
var whatsappUrl = 'https://wa.me/' + whatsappNumber + '?text=' + encodedMessage;
var whatsappButton = document.querySelector('.whatsapp');
if (whatsappButton) {
whatsappButton.href = whatsappUrl;
}
});
</script>
X pessoas vizualizando a pagina
# JavaScript
Colocar no Html no lugar exato
<div class="pcl-viewers">
<svg xmlns="http://www.w3.org/2000/svg" width="29" height="22" viewBox="0 0 29 22" fill="none">
<g clip-path="url(#clip0_2_403)">
<path class="olho" d="M25.7203 9.69622C26.3156 10.4749 26.3156 11.5262 25.7203 12.3036C23.8451 14.7516 19.3462 19.7919 14.0936 19.7919C8.84105 19.7919 4.3421 14.7516 2.46691 12.3036C2.17726 11.9308 2.02002 11.4721 2.02002 10.9999C2.02002 10.5278 2.17726 10.0691 2.46691 9.69622C4.3421 7.2483 8.84105 2.20801 14.0936 2.20801C19.3462 2.20801 23.8451 7.2483 25.7203 9.69622Z" stroke="#fff" stroke-width="2.15313" stroke-linecap="round" stroke-linejoin="round"></path>
<path class="pupila" d="M14.0937 14.7679C16.1746 14.7679 17.8616 13.0809 17.8616 10.9999C17.8616 8.91891 16.1746 7.23193 14.0937 7.23193C12.0127 7.23193 10.3257 8.91891 10.3257 10.9999C10.3257 13.0809 12.0127 14.7679 14.0937 14.7679Z" stroke="#fff" stroke-width="2.15313" stroke-linecap="round" stroke-linejoin="round"></path>
</g>
</svg>
<div class="usuarios">
<div id="numberViewer">264</div>
</div>
<div class="texto">assistindo agora</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
function random(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
function countViewer(min, max, elementID) {
var element = document.querySelector(elementID);
var count = random(min, max);
setInterval(function() {
var variation = random(-5, 5);
count += variation;
if (count < min) {
count = min;
} else if (count > max) {
count = max;
}
element.textContent = count;
}, 2000); // Ajuste o intervalo conforme necessário
}
// Definindo 194 como mínimo e 243 como máximo para a contagem de visualizadores
countViewer(94, 143, '#numberViewer');
});
</script>
# CSS
Colocar no css
selector{
border-radius: 5px;
padding: 5px 10px !important;
margin-left: 10px !important;
background: rgba(36, 10, 45, 0.50);
box-shadow: -4px -4px 25px 0px rgba(234, 194, 59, 0.25), 4px 4px 25px 0px rgba(234, 194, 59, 0.25);
backdrop-filter: blur(75px);
}
.pcl-viewers {
display: flex;
color: #ffffff; /*mude a cor do número aqui*/
font-size: 16px;
justify-content: center;
align-items: center
}
.olho{
stroke: #ffffff; /*mude a cor do ícone de olho aqui*/
}
.pupila{
stroke: white; /*mude a cor do ícone de olho aqui*/
}
.texto {
color: #ffffff; /*mude a cor do texto aqui*/
margin-left: 5px;
}
.usuarios {
padding-right: 10px;
margin-left: 10px;
}
selector svg{
height: unset;
}
Customização de selecionado no formulario (escolha uma marca)
# CSS
Colocar no css do formulario
selector .elementor-field-type-select option:first-child{
display: none;
}
Colocar no as opçoes da seguinte forma:
Selecione sua marca
Marca 1
Marca2
Remover opacidade do placeholder no formulário do elementor
# CSS
Colocar no css do formulario
selector ::placeholder { /* Selector para o placeholder */
opacity: 1 !important; /* Define a opacidade para 1, que é totalmente opaco */
color: #000 !important; /* Define a cor do texto do placeholder, se necessário */
}
Trocar o ícone do select do formulário
# JavaScript
Colocar no css do formulario
<script>
document.addEventListener("DOMContentLoaded", function() {
// Função para substituir o SVG
function replaceSVG(parentElement) {
var oldSvg = parentElement.querySelector(".e-font-icon-svg.e-eicon-caret-down");
if (oldSvg) {
var newSvg = document.createElement("img");
newSvg.src = "link do svg";
newSvg.classList.add("e-font-icon-svg", "e-eicon-caret-down");
oldSvg.parentNode.replaceChild(newSvg, oldSvg);
}
}
// Substituir SVG para o primeiro conjunto de classes
var oldSvg = document.querySelector(".e-font-icon-svg.e-eicon-caret-down");
replaceSVG(document);
// Substituir SVG para o segundo conjunto de classes
var elements = document.querySelectorAll(".elementor-field-type-select.elementor-field-group.elementor-column");
elements.forEach(function(element) {
replaceSVG(element);
});
});
</script>
Borda degrade com arredondamento
# Css
Colocar no container
selector::after,
selector::before{
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
transform: translate(-50%,-50%);
background: #000;
z-index: 1;
border-radius: 20px;
}
selector::before{
width: calc(100% + 2px);
height: calc(100% + 2px);
background:linear-gradient(317deg, #000 0%, rgba(59, 59, 59, 0.00) 100.86%);
z-index: 0;
}
Customização de Conteudo
Mascara de telefone formulario
# JavaScript
<script>
// Função genérica de máscara
function aplicarMascara(o, f) {
setTimeout(function() {
o.value = f(o.value);
}, 1);
}
// Máscara de telefone
function mascaraTelefone(v) {
v = v.replace(/\D/g, ""); // Remove tudo o que não é dígito
v = v.replace(/^(\d{2})(\d)/g, "($1) $2"); // Coloca parênteses em volta dos dois primeiros dígitos
if (v.length > 10) {
v = v.replace(/(\d{5})(\d{4})$/, "$1-$2"); // Coloca hífen entre o quinto e o sexto dígitos
} else {
v = v.replace(/(\d{4})(\d{4})$/, "$1-$2"); // Coloca hífen entre o quarto e o quinto dígitos
}
return v;
}
function aplicarMascaraTelefone(selector) {
var telefone = document.querySelectorAll(selector);
for (var i = 0; i < telefone.length; i++) {
telefone[i].setAttribute('pattern', '.{14,15}'); // Ajusta o padrão para 14-15 caracteres (incluindo parênteses e hífen)
telefone[i].setAttribute('maxlength', 15); // Ajusta o maxlength para 15 caracteres
telefone[i].addEventListener('input', function () {
aplicarMascara(this, mascaraTelefone);
});
}
}
window.onload = function () {
aplicarMascaraTelefone('.elementor-form input[name="form_fields[Telefone]"]');
};
window.addEventListener('elementor/popup/show', (event) => {
aplicarMascaraTelefone('.elementor-form input[name="form_fields[Telefone]"]');
});
</script>
O campo de telefone deve ser do tipo Texto, e não Telefone. Altere o ID do campo, na aba avançado, para telefone (mas não mude o tipo, precisa ser texto). Insira o código abaixo em um widget de HTML no rodapé da página. Se tiver mais de um formulário, coloque o ID telefone em todos eles, inclusive em (se não mudar o ID, não funcionará).
Mascara de cep formulario
# JavaScript
<script>
// Máscara de CEP
function mascaraCep(v) {
v = v.replace(/\D/g, ""); // Remove tudo o que não é dígito
v = v.replace(/(\d{5})(\d{3})$/, "$1-$2"); // Coloca hífen entre o quinto e o sexto dígitos
return v;
}
function aplicarMascaraCep(selector) {
var cep = document.querySelectorAll(selector);
for (var i = 0; i < cep.length; i++) {
cep[i].setAttribute('pattern', '\\d{5}-\\d{3}'); // Ajusta o padrão para o formato 35670-000
cep[i].setAttribute('maxlength', 9); // Ajusta o maxlength para 9 caracteres
cep[i].addEventListener('input', function () {
aplicarMascara(this, mascaraCep);
});
}
}
window.onload = function () {
aplicarMascaraCep('.elementor-form input[name="form_fields[cep]"]');
};
window.addEventListener('elementor/popup/show', (event) => {
aplicarMascaraCep('.elementor-form input[name="form_fields[cep]"]');
});
</script>
O campo de telefone deve ser do tipo Texto, e não Telefone. Altere o ID do campo, na aba avançado, para telefone (mas não mude o tipo, precisa ser texto). Insira o código abaixo em um widget de HTML no rodapé da página. Se tiver mais de um formulário, coloque o ID telefone em todos eles, inclusive em (se não mudar o ID, não funcionará).
Vamos tirar seu projeto do papel ?
Você conta seus sonhos, nós tornamos ele realidade de forma incrível.
Sedrux Digital © 2025 Todos os direitos reservados
CNPJ 42.505.646/0001-70