Eduardo Fernandes

Este é um compilado gratuito de códigos úteis, projetados para facilitar o seu dia a dia ao utilizar o WordPress com Elementor.

Suporte

Codigos obrigatorios para se colocar no header "custom code" do elementor

#  css

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

/Corrigir escrollamento no Mobile/
@media (max-width: 786px){
body, html {
overflow-x: hidden!important;
}
}

#  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=1736741452" 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>

#  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;

}

#  css

				
					@media (max-width:560px){
.suaclasse{
       height:80vh;
       border:solid 1px;
   
}
}

Customização de textos

#  HTml

				
					Texto <span style=
"background-color:
#0080ff;">
seleção de texto com fundo
</span>.

#  HTml

				
					Texto <span style="color:
#3978EC;">01</span>

#  HTml

				
					<font size="7">
Tamanho desta fonte:7
</font>

O indice “size” vai de 1 a 7, quanto maior o numero maior o 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;
  }

#  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;
  }

#  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

#  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

#  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">

#  css

				
					.riscado {
      text-decoration-line: line-through;
      text-decoration-color: red;
      text-decoration-thickness: 2px;
    }

Customização de Imagens

#  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.

#  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);
  }
}

#  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

#  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.

#  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

#  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

#  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;
}

#  css

				
					.swiper-button-disabled{
        opacity: 0 !important;
        transition: opacity .6s ease;
    }

#  css

				
					selector {
    border-top: solid 1px;
    border-image: linear-gradient(101deg, #0941C0 49.74%, #0087BB 81.93%) 1;
}

#  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>

#  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;
}

#  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

#  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 */
}

#  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>

#  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

#  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á).

#  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.

Começar Projeto
Home
Portfólio
Quem somos
Política de Privacidade

Sedrux Digital © 2025 Todos os direitos reservados

CNPJ 42.505.646/0001-70