Acesso rápido:

Ícones alinhado ao topo da lista:

				
					selector .elementor-icon-list-item {
    align-items: baseline;
    
}

selector .elementor-icon-list-item > .elementor-icon-list-text,  .elementor-icon-list-item > a {
    margin-top: -2px;
}

				
			

Não transbordar para as laterais:

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

body, [data-elementor-type="wp-page"]{
    overflow: hidden;
}

				
			

Trocar cor da seleção de textos:

				
					*::selection {
    background: #CODE; 
    color: #CODE;
}

				
			

Selecione esse texto aqui para visualizar.

Trocar o cursor do mouse:

				
					html {
    cursor: url(https://ciparoni.com/wp-content/uploads/2023/12/cursor.svg), auto;
}

a, a:hover {
    cursor: url(https://ciparoni.com/wp-content/uploads/2023/12/cursor-hover.svg), auto;
}
				
			

Passe o mouse por cima para visualizar o cursor

Ícone do botão justificado:

				
					selector .elementor-button-text{
    flex-grow: 0;
}
				
			

Texto em destaque:

1. Cole o seguinte código HTML no widget de Texto:

				
					Seja muito<destaque>bem-vindo</destaque> ao seu novo mundo.
				
			

2. Cole no CSS Personalizado da página:

				
					destaque {
    background: #CODE; 
    color: #CODE;
}
				
			

Seja muito bem-vindo ao seu novo mundo.

SVG sem margem:

				
					selector svg {
    height: unset !important;

}
				
			

Scroll da barra lateral:

				
					body::-webkit-scrollbar {
    width: 5px;
}

body::-webkit-scrollbar-track {
    background:#CODE;
}

body::-webkit-scrollbar-thumb{
    background-color: #CODE;
    border-radius: 2px;
    border: 0px solid #000;
}

				
			

Para Popups do Elementor.

				
					.dialog-message::-webkit-scrollbar {
    width: 5px !important;
}

.dialog-message::-webkit-scrollbar-thumb {
    background-color: gray !important;
    border-radius: 2px;
    border: 0px solid #000;
}

.dialog-message::-webkit-scrollbar-track {
    background: black !important;
}
				
			

Animação de entrada de elementos

				
					<script>
    const elementos = document.querySelectorAll('.scroll-left, .scroll-right, .scroll-bottom, .scroll-top, .blur');
    const posicaoScroll = window.innerHeight * 0.5;

    function fadeScroll(){
        elementos.forEach((elemento) => {
            const elementoTop = elemento.getBoundingClientRect().top - posicaoScroll;
        if(elementoTop < 120) {
            elemento.classList.add('ativo');
        }
        else {
            elemento.classList.remove('ativo');
        }
        })
    }

    window.addEventListener('scroll', fadeScroll);
</script>	

<style>
.scroll-left{
    opacity: 0;
    transition: 0.8s ease;
    filter: blur(2px);
    transform: translate(-35%, 0);
}

.scroll-right{
    opacity: 0;
    transition: 0.8s ease;
    filter: blur(2px);
    transform: translate(35%, 0);
}

.scroll-bottom{
    opacity: 0;
    transition: 0.8s ease;
    filter: blur(2px);
    transform: translate(0, -75%);
}

.scroll-top{
    opacity: 0;
    transition: 0.8s ease;
    filter: blur(2px);
    transform: translate(0, 75%);
}

.blur{
    opacity: 0;
    transition: 0.8s ease;
    filter: blur(12px);
}

.ativo {
    opacity: 1 !important;
    filter: blur(0px);
    transform: translate(0, 0) !important;
}
</style>
				
			

Scroll Left

Scroll Right

Scroll Top

Scroll Bottom

Blur

Título com Gradiente:

				
					selector .elementor-heading-title {
    background: radial-gradient(201.09% 689.45% at -25.44% 358.75%, #1FFF5A 0%, #F5F8FF 51.56%, #29FFFF 100%);
    -webkit-background-clip: text;
    webkit-text-fill-color: white;
}
				
			

Título com Gradiente

Título com Gradiente no meio do texto:

				
					selector .elementor-heading-title {
    background: linear-gradient(30deg, white, transparent);
    -webkit-background-clip: text;
    webkit-text-fill-color: white;
    color: transparent !important;
}
				
			

Esse texto é incrível.

Título com Gradiente em Movimento:

				
					selector .elementor-heading-title {
    background-image: linear-gradient(30deg,#3754CC,#EF379D,#F9AE35,#EF379D, #3754CC);
    background-size: 1000% 200% !important;
    transition: all .8s;
    -webkit-background-clip: text;
    webkit-text-fill-color: white;
    animation: 4s cubic-bezier(.2,.5,.9,.6) 4s infinite degrade;
    transition: all .8s;
}

@keyframes degrade {
    0% {
       background-position: -0% 0
    }

    100% {
      background-position: 100% 0
    }
}
				
			

Gradiente em Movimento

Efeito Neon no Título:

				
					selector  {
  color: #00ffff !important;
  text-shadow: 0 0 0px #00ffff, 0 0 00px #00ffff, 0 0 10px #00ffff, 0 0 10px #00ffff, 0 0 30px #00ffff, 0 0 40px #00ffff, 0 0 55px #00ffff, 0 0 75px #00ffff;
  animation: neon 3s ease-in-out infinite alternate;
}
@keyframes neon {
  to {
    text-shadow: 0 0 5px #00ffff, 0 0 20px #00ffff, 0 0 15px #00ffff, 0 0 20px #00ffff, 0 0 30px #00ffff, 0 0 40px #00ffff, 0 0 55px #00ffff, 0 0 75px #00ffff, 0 0 80px #00ffff;
  }
}
				
			

Neon

Botão Neon no Hover:

				
					selector .elementor-button:hover {
    box-shadow: 0 -3px 50px 0 #CODE50;
    transition: box-shadow 0.5s;
}

				
			

Botão Degradê em Movimento:

				
					selector .elementor-button {
    animation: 3.4s cubic-bezier(.2,.5,.9,.6) 2s infinite normal none running motion;
    background-image: 
linear-gradient(45deg,rgb(32,91,234),rgb(253,1,243),
rgb(32,91,234),rgb(253,1,243));
    background-size: 400% 200%;
    transition: background 1.6s cubic-bezier(.55,.1,.47,.94) 0s;
}

@keyframes motion {
   0% {
      background-position: -0% 0
       }

   100% {
      background-position: 100% 0
       }
}

				
			

Botão Degradê em Movimento + Neon:

				
					selector .elementor-button {
    animation: 3s cubic-bezier(.2,.5,.9,.6) 3s infinite motion;
    background-image: linear-gradient(30deg, #CODE, #CODE, #CODE);
    background-size: 1000% 200%;
    transition: all .8s;
}

@keyframes motion {
    0% {
       background-position: -0% 0
    }

    100% {
      background-position: 100% 0
    }
}

selector .elementor-button:hover {
    box-shadow: 0 0 35px 1px #CODEE9;
    transition: all .8s;
}

				
			

Botão - MarkoBox:

				
					selector .elementor-button .elementor-align-icon-right {
        font-size: 28px;
        display: flex;
        align-items: center;
        padding-left: 5px;
}

selector .elementor-button .elementor-align-icon-left {
        font-size: 28px;
        display: flex;
        align-items: center;
        padding-right: 5px;
}

selector .elementor-button-text{
    flex-grow: 0;
}

selector .elementor-button-text {
    color: #fff;
}

selector .elementor-button {
    background-image: linear-gradient(30deg,#3754CC,#EF379D,#F9AE35,#EF379D, #3754CC);
    background-size: 300% 200%;
    transition: all 1s;
}

selector .elementor-button:hover {
    background-image: linear-gradient(-30deg,#3754CC,#EF379D,#F9AE35,#EF379D, #3754CC);
    background-size: 300% 200%;
}

selector .elementor-button .a {
    fill: black;
}

selector .elementor-button:hover rect {
    fill: black;
}

selector .elementor-button:hover .a {
    fill: white;
}

				
			

Botão Pulsando:

				
					selector a {
    animation: pisca 2s infinite, pulse 2s infinite !important;
    box-shadow: 0px 0px 21px -6px #CODEa1;
     transition: all 0.5s ease;
}

selector a:hover {
    animation: pisca 2s infinite, pulse 2s infinite !important;  
    box-shadow: 0px 0px 21px -6px #CODEa1;
     transition: all 0.5s ease;
}

@keyframes pisca {
    70% {
        box-shadow: 0 0 0 25px #00000000
    }

    100% {
        box-shadow: 0 0 0 0 #00000000
    }
}
				
			

Botão com Reflexo Neon (FDI do Nelson Junior):

				
					selector a {
    box-shadow: 0 55px 69px 0 rgba(86, 73, 246, .32), 0 35.648px 40.41px 0 rgba(86, 73, 246, .24), 0 21.185px 21.978px 0 rgba(86, 73, 246, .19), 0 11px 11.212px 0 rgba(86, 73, 246, .16), 0 4.481px 5.622px 0 rgba(86, 73, 246, .13), 0 1.019px 2.715px 0 rgba(86, 73, 246, .08);

}

selector a:hover {
    box-shadow: 0 0px 48px rgba(86, 73, 246, .75);
}

				
			

Botão Light Sweep:

				
					selector .elementor-button .elementor-align-icon-right {
        z-index: 2;
}

selector .elementor-button .elementor-align-icon-left {
        z-index: 2;
}

selector .elementor-button-text {
        z-index: 2;
}

selector .elementor-button {
    position: relative;
    overflow:hidden;
    z-index: 1;
}

selector .elementor-button:before{
    content: "";
    background: linear-gradient(-145deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 39%, rgba(255,255,255,0.9346113445378151) 50%, rgba(0,0,0,0) 62%, rgba(0,0,0,0) 100%);
    width:calc(100% + 20px);
    height:calc(100% + 20px);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    position: absolute;
    top:-10px;
    left:-100px;
    transform: scale(2);
    opacity:.35;
    z-index: 0;
    animation: flashLuz 3000ms infinite ease;
}

@keyframes flashLuz{
  0%, 100%{
      left: -100%;
  }
  100%{
      left: 100%;
  }
}

				
			

Botão CyberPunk:

				
					selector .elementor-button {
    -webkit-clip-path: polygon(15px 0%,calc(100% - 0px) 0%,100% 0,100% calc(100% - 0px),calc(100% - 0px) 100%,0 100%,0% calc(100% - 10px),0% 15px);
    clip-path: polygon(15px 0%,calc(100% - 0px) 0%,100% 0,100% calc(100% - 0px),calc(100% - 0px) 100%,0 100%,0% calc(100% - 10px),0% 15px);
}


				
			
				
					selector .elementor-button {
    -webkit-clip-path: polygon(0px 0%,calc(100% - 10px) 0%,100% 10px,100% calc(100% - 0px),calc(100% - 0px) 100%,10px 100%,0% calc(100% - 10px),0% 0px);
    clip-path: polygon(0px 0%,calc(100% - 10px) 0%,100% 10px,100% calc(100% - 0px),calc(100% - 0px) 100%,10px 100%,0% calc(100% - 10px),0% 0px);

}


				
			
				
					selector{
    filter: saturate(200%);
}

selector .elementor-button {
    background-color: #09E3A6;
    border-radius: 7px 7px 7px 7px;
    background: linear-gradient(-45deg, #09E3A6, #B63BEB, #1AE0FA);
    animation: anime 5s linear infinite;
    background-size: 600%;
    --path: 0px 0px, calc(100% - 14px) 0, 115% 100% , calc(100% - 20px) 100%,14px 100%,0px calc(100% - 14px);
    clip-path: polygon(var(--path));
    -webkit-clip-path: polygon(var(--path));
}

@keyframes anime {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }


				
			
				
					selector  .elementor-button[type="submit"] {
    padding: 20px 24px;
    -webkit-clip-path: polygon(10px 0%,calc(100% - 00px) 0%,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,00px 100%,0% calc(100% - 10px),0% 10px);
    clip-path: polygon(10px 0%,calc(100% - 00px) 0%,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,00px 100%,0% calc(100% - 10px),0% 10px);
}
				
			

Botão com Borda com Gradiente:

				
					selector .elementor-button {
    background: linear-gradient(to right, #000, #18181B),
    linear-gradient(to top left, #60A5FA, #4ADE80);
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    border: 2px solid transparent;
    border-radius: 6px;
    transition: all 1s;
}

selector .elementor-button:hover {
    background: linear-gradient(to right, #18181B, #18181B), linear-gradient(to top left, #4ADE80, #60A5FA);
    box-shadow: 0 -3px 50px 0 green;
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    border: 2px solid transparent;
    border-radius: 6px;
}

				
			

Botão no Estilo da Brasil Paralelo:

Site padrão – Tabela de preços (vermelho sóbrio):

				
					selector .elementor-button {
    background-color: #D71F1F;
    background: linear-gradient(#D71F1F, #a00606);
    box-shadow: inset 0px 1px 0px #f06a6a, inset 0 -1px 2px #6d0404;
    transition: 0s;
}

selector .elementor-button:hover {
    background-color: #cc1818;
    background: linear-gradient(#980505, #cc1818);
    box-shadow: inset 0px 1px 0px #b13b3b, inset 0 -1px 2px #991212;
}

				
			

A Queda Argentina (dourado):

				
					selector .elementor-button {
    background-color: #CAA462;
    background: linear-gradient(#CAA462, #8c6028);
    box-shadow: inset 0px 1px 0px #e3d1b2, inset 0 -1px 2px #593d19;
    transition: 0s;
}

selector .elementor-button:hover {
    background-color: #c0904a;
    background: linear-gradient(#c0904a, #85531e);
    box-shadow: inset 0px 1px 0px #d9bd95, inset 0 -1px 2px #523312;
}

				
			

Tabela de preços – Investigação Paralela (vermelho vivo):

				
					selector .elementor-button {
    background-color: #D71F1F;
    background:linear-gradient(#F63939, #D71F1F);
    box-shadow:inset 0px 1px 0px #ff8787, inset 0 -1px 2px #a31717;
    transition: 0s;
}

selector .elementor-button:hover {
    background-color: #cc1818;
    background:linear-gradient(#cc1818, #ea2b2b);
    box-shadow:inset 0px 1px 0px #e55f5f, inset 0 -1px 2px #b62121;
}

				
			

Investigação Paralela (verde fluorescente):

				
					selector .elementor-button {
    background-color: #2c59ed;
    background: linear-gradient(#A5FF6E, #86dd51);
    box-shadow: inset 0px 1px 0px #d4ffba, inset 0 -1px 2px #67aa3e;
    color: #000 !important;
}

selector .elementor-button:hover {
    background-color: #2148e1;
    background: linear-gradient(#6fd23e, #89f254);
    box-shadow: inset 0px 1px 0px #abeb8c, inset 0 -1px 2px #6cbf42;
    color: #000 !important;
}

				
			

Black Friday (verde ciano):

				
					selector .elementor-button {
    background-color: #D71F1F;
    background:linear-gradient(#24FFB2, #25FF96);
    box-shadow:inset 0px 1px 0px #70ffcc, inset 0 -1px 2px #1dcc77;
    color: #212121 !important;
}

selector .elementor-button:hover {
    background-color: #cc1818;
    background: linear-gradient(#1cf281, #1bf29d);
    box-shadow: inset 0px 1px 0px #6affb0, inset 0 -1px 2px #15bf7b;
    color: #212121;
}

				
			

Site padrão – Tabela de preços (vermelho sóbrio):

A Queda Argentina (dourado):

Tabela de preços – Investigação Paralela (vermelho vivo):

Investigação Paralela (verde fluorescente):

Black Friday (verde ciano):

Botão Dourado:

				
					selector .elementor-button {
    border: 2px solid !important;
    border-image: linear-gradient(45deg, #CAAE7C, #987B4E, #CAAE7C, #987B4E, #CAAE7C) 1 !important;
    background: linear-gradient(270deg, #987B4E 0%, #CAAE7C 40%, #CAAE7C 60%, #987B4E 100%) !important;
    text-transform: uppercase;
}

selector .elementor-button:hover {
    border-image: linear-gradient(-45deg, #CAAE7C, #987B4E, #CAAE7C, #987B4E, #CAAE7C) 1 !important;
    background: linear-gradient(30deg, #987B4E 0%, #CAAE7C 40%, #CAAE7C 60%, #987B4E 100%) !important;
}
				
			

Botão estilo da Priscila Zillo:

				
					selector .elementor-button {
    border-radius: 4px;
    background: linear-gradient(0deg, #4A9972, #5FC391);
    box-shadow: inset 0 0 0 rgb(57 212 130);
    text-shadow: 0px 2px 2px #0000004d;
    border-top: 2px solid #9DDBBC;
    border-bottom: 3px solid #427C60;
    transition: all 0.3s ease;
    text-transform: uppercase;
}

selector .elementor-button:hover {
    box-shadow: inset 0 20px 40px rgb(57 212 130);
}

				
			

Botão estilo do Pedro Sobral:

				
					selector .elementor-button {
    background: #239CD7 !important;
    box-shadow: 0 9px 20px rgb(167 179 188 / 40%), inset 0 20px 20px #3cbfff;
    text-transform: uppercase;
}

selector .elementor-button:hover {
    box-shadow: 0 5px 20px rgb(35 156 215 / 50%);
    background: #1f7bcf;
}

				
			
				
					selector .elementor-button {
    width: 100%;
    margin: 10px auto 0;
    padding: 20px 30px !important;
    background: #6abd3b !important;
    text-transform: uppercase;
    text-align: center;
    font: 500 16px 'Rubik' !important;
    border-radius: 6px;
    box-shadow: 0 9px 20px rgb(167 179 188 / 40%), inset 0 20px 20px #68bf86;
    transition: all 0.5s ease;
}

selector .elementor-button:hover {
    box-shadow: 0 5px 20px rgb(35 156 215 / 50%);
    background: #1f7bcf !important;
}

				
			

Botão estilo da Ciça Rego Macedo:

				
					selector .elementor-button {
    background: linear-gradient(0deg, #78AD53, #9DC685);
    transition: all 0.5s ease;
    border-radius: 100px;
    text-transform: uppercase;
}

selector .elementor-button:hover {
    box-shadow: 0 0 15px rgb(155 208 84), inset 0 0 30px 50px rgb(150 206 77);
}

				
			

Botão estilo do Nitrox Inteligência:

				
					selector .elementor-button:hover {
    background-position: right center;
    box-shadow: 0 0 10px #7adaff;
}
selector .elementor-button:focus {
    color: #0e191e;
}

selector .elementor-button {
    background-image: linear-gradient(to right,#00ff8e 0%,#9bffef 51%,#7adaff 100%) !important;
    transition: .5s;
    background-size: 200% auto;
    box-shadow: 0px 5px 37px -5px rgb(87 255 197 / 74%);
 }

selector .elementor-animation-float:hover {
    transform: translateY(-8px);
}

				
			

Botão Bevel estilo do Fitness Secrets:

				
					selector .elementor-button {
    background: linear-gradient( 115deg,#572CBE -9%,#461EA6 40%,#361090 140% );
    box-shadow: 0 10px 30px #5E38BC82, 0 1px 0 rgb(145 105 240) inset, 0 -1px 0 rgb(94 56 188) inset;
    text-shadow: 0 -1px 0px rgb(0 0 0 / 50%);
    text-transform: uppercase;
}


selector .elementor-button:hover {
    background: linear-gradient(115deg,#572CBE -9%,#461EA6 40%,#361090 140% );
    box-shadow: 0 10px 30px #5E38BC82, 0 1px 0 rgb(145 105 240) inset, 0 -1px 0 rgb(94 56 188) inset;
    text-shadow: 0 -1px 0px rgb(0 0 0 / 50%);
    transition: transform .3s, box-shadow .3s;
}

selector .elementor-button:active, selector .elementor-button:focus, selector .elementor-button:hover {
    box-shadow: 0 10px 30px #5E38BC82, 0 1px 0 rgb(145 105 240) inset, 0 -1px 0 rgb(94 56 188) inset, 0 0 0 5px #18001E, 0 0 0 7px #5E38BC50;
    transform: scale(1.05, 1.05);
}

				
			

Borda animada neon colorida RGB 1:

				
					selector {
    border-radius: 6px;
    z-index: 1 !important;
}

selector:before,selector:after{
    content: '';
    top: -0px;
    left: -0px;
    position: absolute;
    margin: none !important;
    background: linear-gradient(45deg,#fb0094,#0000ff,#00ff00,#ffff00
    #ff0000,#fb0094,#0000ff,#00ff00,#ffff00,#ff0000);
    background-size: 400% 400%;
    width: calc(100% + 0px);
    height: calc(100% + 0px);
    z-index: -1 !important;
    border-radius: 6px;
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    animation: animate 3s ease alternate infinite;
   }

selector:after{
    filter: blur(20px);
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
   }

   @keyframes animate{
    0%{
      background-position: 0 50%;
    }
    50%{
      background-position: 100% 50%;
    }
    100%{
      background-position: 0% 50%;
    }
   }

				
			

Borda animada neon colorida RGB 2:

				
					selector {
    border-radius: 6px;
    z-index: 1 !important;
}

selector:before,selector:after{
    content: '';
    top: -0px;
    left: -0px;
    position: absolute;
    margin: none !important;
    background: linear-gradient(45deg,#fb0094,#0000ff,#00ff00,#ffff00
    #ff0000,#fb0094,#0000ff,#00ff00,#ffff00,#ff0000);
    background-size: 400% 400%;
    width: calc(100% + 0px);
    height: calc(100% + 0px);
    z-index: -1 !important;
    border-radius: 6px;
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    animation: animate 3s ease alternate infinite;
   }

selector:after{
    filter: blur(20px);
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
   }

   @keyframes animate{
    0%{
      background-position: 0 50%;
    }
    50%{
      background-position: 100% 50%;
    }
    100%{
      background-position: 0% 50%;
    }
   }

				
			

Fundo gradiente em movimento:

				
					selector {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: 400% 400%;
  background-image: linear-gradient(
        -45deg, 
        #0f0c29 0%, 
        #302b63 25%, 
        #24243e 51%, 
        #0f0c29 100%
  );
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: AnimateBG 10s ease alternate infinite;
}

@keyframes AnimateBG { 
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
				
			

Degradê transversal em torno da coluna:

				
					selector {
  z-index:0;
}

selector:before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left: -10px;
  right:0;
  bottom:0;
  margin-left: 10px;
  margin-right: 10px;
  padding: 2px;
  border-radius: 0px;
  background: linear-gradient(50deg, #fafafa, #BA355800,#BA355800, #fafafa);
  -webkit-mask: 
     linear-gradient(#fff 0 0) content-box, 
     linear-gradient(#fff 0 0);
          mask: 
     linear-gradient(#fff 0 0) content-box, 
     linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

				
			

Fitas animada transversal:

Fita A

				
					selector{
    width: 100%;
    overflow: hidden;
    transform: rotate(5deg) scale(1.05) !important;

}

selector .elementor-heading-title{
    white-space: nowrap;
    max-width: 100%;
    width: 100%;
   margin-left: -500px;
    
}

selector .elementor-heading-title{
    animation: fita-a 5s infinite linear;
}

@keyframes fita-a {
    0%{transform: translatex(100px);
        }
    100% {
    transform: translateX(calc(-152px * 7));
  }
}

				
			

Fita B

				
					selector{
    width: 100%;
    overflow: hidden;
    transform: rotate(-9deg) scale(1.05) !important;
    margin-top: -72px;
}

selector .elementor-heading-title{
    white-space: nowrap;
    max-width: 100%;
    width: 100%;
   margin-left: -1500px;
    
}

selector .elementor-heading-title{
    animation: fita-b 8s infinite linear;
    
}

@keyframes fita-b {
    0%{transform: translatex(-100px);
        }
    100% {
    transform: translateX(calc(152px * 7));
  }
}

				
			

INSCREVA-SE • INSCREVA-SE • INSCREVA-SE • INSCREVA-SE • INSCREVA-SE • INSCREVA-SE • INSCREVA-SE • INSCREVA-SE • INSCREVA-SE

INSCREVA-SE • INSCREVA-SE • INSCREVA-SE • INSCREVA-SE • INSCREVA-SE • INSCREVA-SE • INSCREVA-SE • INSCREVA-SE • INSCREVA-SE

Script de voltar para a página anterior no navegador:

HTML

				
					<button class="back-button" onclick="goBack()">Voltar para página anterior</button>

<style>
    
  .back-button {
    font-weight: 600;
    color: #fff;
    font-family: default, sans-serif;
    font-size: 14px;
    text-align: center;
    background-color: transparent;
    border: 2px solid #ff015b;
    padding: 1rem;
    padding-right: 2rem;
    padding-left: 2rem;
    border-radius: 1vw !important;
}

.back-button:hover {
    background-color: #ff015b;
}  
    
</style>

<script>
function goBack() {
  window.history.back();
}
</script>

				
			

Com o botão padrão do Elementor (Adicionar classe “back-button” no botão)

				
					<script>

const botaoVoltar = document.querySelectorAll('.back-button');

botaoVoltar.forEach(function(button) {
    button.addEventListener('click', function(event) {
        window.history.back();
    });
});

</script>
				
			

Script de contador de visualizações em "tempo real":

Título

				
					<div class="count" style="display: inline-block">25</div> pessoas estão assistindo esse vídeo agora.
				
			

HTML

				
					<script>
// Obtém o elemento HTML onde o número será exibido
const countElement = document.querySelector('.count');

// Define o intervalo de tempo em milissegundos (1000 milissegundos = 1 segundo)
const interval = 4000;

// Define o intervalo de variação do número (por exemplo, +- 10 unidades)
const range = 4;

// Armazena o número atual
let currentCount = 35;

// Inicia a animação de contagem
const countInterval = setInterval(() => {
  // Gera um número aleatório entre o intervalo de variação
  let randomCount = Math.floor(Math.random() * range * 2) - range;

  // Garante que o número gerado seja maior que 1
  if (currentCount + randomCount <= 25) {
    randomCount = 25 - currentCount;
  }

  // Atualiza o número atual
  currentCount += randomCount;

  // Atualiza o elemento HTML com o novo número
  countElement.textContent = currentCount;
}, interval);

  
  </script>
				
			

35
pessoas estão assistindo esse vídeo agora.

Adicionar localização do usuário

Título

				
					Você e algumas pessoas próximas de <span id="cidade"></span> foram selecionadas para participar deste programa.
				
			

CSS Personalizado

				
					#cidade{
color: black;
font-weight: 700;
}
				
			

HTML

				
					<script>
  function getLocation() {
    const xhr = new XMLHttpRequest();
    xhr.open("GET", "https://ipinfo.io/json", true);
    xhr.onload = function () {
      if (this.status === 200) {
        const resposta = JSON.parse(this.responseText);

        // Seleciona todos os elementos com o ID "cidade"
        var cidadeElements = document.querySelectorAll("#cidade");

        // Loop para preencher a cidade nos elementos HTML
        cidadeElements.forEach(function (element) {
          element.innerHTML = resposta.city;
        });
      }
    };
    xhr.send();
  }

  getLocation();
</script>

				
			

Você e algumas pessoas próximas de foram selecionadas para participar deste programa.

Countdown de número de vagas

Título

				
					Restam apenas <span class="vagas"></span> com valor promocional até os dias <span class="data"></span>
				
			

CSS Personalizado

				
					.vagas, .data {
color: black;
font-weight: 700;
}

				
			

HTML (Data por extenso)

				
					<script>
    
    let vagasRestantes = 10;
    
    
    const vagasElement = document.querySelectorAll('.vagas')[0];
    const dataElement = document.querySelectorAll('.data')[0];

    // Função para calcular um novo intervalo de tempo de forma aleatória
    function calcularIntervalo() {
        return Math.random() * (60000 - 5000) + 5000; // Gera intervalo aleatório entre 5 e 60 segundos
    }

    // Função para atualizar o número de vagas e o texto simultaneamente
    function atualizarTextoVagas() {
        if (vagasRestantes > 1) {
            vagasElement.textContent = vagasRestantes + " vagas"; // Atualiza para plural "vagas"
        } else if (vagasRestantes === 1) {
            vagasElement.textContent = vagasRestantes + " vaga"; // Atualiza para singular "vaga"
        }
    }

    // Função principal que controla a atualização das vagas
    function atualizarVagas() {
        if (vagasRestantes > 1) {
            vagasRestantes--; // Diminui as vagas
            atualizarTextoVagas(); // Atualiza o texto e o número simultaneamente
            const proximoIntervalo = calcularIntervalo(); // Calcula o próximo intervalo aleatório
            setTimeout(atualizarVagas, proximoIntervalo); // Chama novamente após o intervalo
        } else if (vagasRestantes === 1) {
            atualizarTextoVagas(); // Atualiza uma última vez quando chegar a 1 vaga
        }
    }

    // Função para adicionar as três últimas datas (hoje, ontem e anteontem)
    function adicionarDatas() {
        var today = new Date();
        var day = today.getDate();
        var day2 = today.getDate() - 1;
        var day3 = today.getDate() - 2;
        var month = today.getMonth();
        var year = today.getFullYear();
        var monthList = ["janeiro", "fevereiro", "março", "abril", "maio", "junho", "julho", "agosto", "setembro", "outubro", "novembro", "dezembro"];

        // Ajuste para quando o mês muda ou o dia está no começo do mês
        if (day === 1) {
            day2 = new Date(today.getFullYear(), today.getMonth(), 0).getDate(); // Último dia do mês anterior
            day3 = day2 - 1;
        } else if (day === 2) {
            day3 = new Date(today.getFullYear(), today.getMonth(), 0).getDate(); // Último dia do mês anterior
        }

        // Monta a string com os três dias e o mês
        dataElement.innerHTML = day3 + ', ' + day2 + ' e ' + day + ' de ' + monthList[month] + '!';
    }

    // Inicializa as vagas e a data
    function iniciarPagina() {
        // Exibe o número inicial de vagas (10) e o texto correspondente
        atualizarTextoVagas();

        // Adiciona as datas (hoje, ontem e anteontem)
        adicionarDatas();

        // Começa a diminuição das vagas após o primeiro intervalo aleatório
        setTimeout(atualizarVagas, calcularIntervalo());
    }

    // Chama a função para inicializar a página
    iniciarPagina();
</script>

				
			

HTML (Data atual)

				
					<script>
    let vagasRestantes = 10;
    const vagasElement = document.querySelectorAll('.vagas')[0];
    const dataElement = document.querySelectorAll('.data')[0];

    // Função para calcular um novo intervalo de tempo de forma aleatória
    function calcularIntervalo() {
        return Math.random() * (60000 - 5000) + 5000; // Gera intervalo aleatório entre 5 e 60 segundos
    }

    // Função para atualizar o número de vagas e o texto simultaneamente
    function atualizarTextoVagas() {
        if (vagasRestantes > 1) {
            vagasElement.textContent = vagasRestantes + " vagas"; // Atualiza para plural "vagas"
        } else if (vagasRestantes === 1) {
            vagasElement.textContent = vagasRestantes + " vaga"; // Atualiza para singular "vaga"
        }
    }

    // Função principal que controla a atualização das vagas
    function atualizarVagas() {
        if (vagasRestantes > 1) {
            vagasRestantes--; // Diminui as vagas
            atualizarTextoVagas(); // Atualiza o texto e o número simultaneamente
            const proximoIntervalo = calcularIntervalo(); // Calcula o próximo intervalo aleatório
            setTimeout(atualizarVagas, proximoIntervalo); // Chama novamente após o intervalo
        } else if (vagasRestantes === 1) {
            atualizarTextoVagas(); // Atualiza uma última vez quando chegar a 1 vaga
        }
    }

    // Função para obter o nome do dia da semana
    function getTodayDay() {
        const diasDaSemana = ['domingo', 'segunda-feira', 'terça-feira', 'quarta-feira', 'quinta-feira', 'sexta-feira', 'sábado'];
        const dataAtual = new Date();
        const diaDaSemana = diasDaSemana[dataAtual.getDay()];
        return diaDaSemana;
    }

    // Função para obter o nome do mês
    function getMesesDoAno(mes) {
        const meses = [
            "janeiro",
            "fevereiro",
            "março",
            "abril",
            "maio",
            "junho",
            "julho",
            "agosto",
            "setembro",
            "outubro",
            "novembro",
            "dezembro"
        ];
        return meses[mes];
    }

    // Função para formatar e exibir a data de hoje no formato "segunda-feira, 10 de setembro de 2023"
    function exibirDataFormatada() {
        const dataAtual = new Date();
        const todayDataFormatada = getTodayDay() + ", " + dataAtual.getDate() + " de " + getMesesDoAno(dataAtual.getMonth()) + " de " + dataAtual.getFullYear();
        
        // Insere a data formatada no elemento HTML
        dataElement.textContent = todayDataFormatada;
    }

    // Inicializa as vagas e a data formatada
    function iniciarPagina() {
        // Exibe o número inicial de vagas (10) e o texto correspondente
        atualizarTextoVagas();

        // Exibe a data formatada
        exibirDataFormatada();

        // Começa a diminuição das vagas após o primeiro intervalo aleatório
        setTimeout(atualizarVagas, calcularIntervalo());
    }

    // Chama a função para inicializar a página
    iniciarPagina();
</script>
				
			

Título (Hora atual)

				
					Restam apenas <span class="vagas"></span> com valor promocional até hoje às <span class="hora"></span>
				
			

HTML (Hora atual)

				
					<script>
    let vagasRestantes = 10;
    
    const vagasElement = document.querySelectorAll('.vagas')[0];
    const dataElement = document.querySelectorAll('.data')[0];
    const horaElement = document.querySelectorAll('.hora')[0];

    // Função para calcular um novo intervalo de tempo de forma aleatória
    function calcularIntervalo() {
        return Math.random() * (60000 - 5000) + 5000; // Gera intervalo aleatório entre 5 e 60 segundos
    }

    // Função para atualizar o número de vagas e o texto simultaneamente
    function atualizarTextoVagas() {
        if (vagasRestantes > 1) {
            vagasElement.textContent = vagasRestantes + " vagas"; // Atualiza para plural "vagas"
        } else if (vagasRestantes === 1) {
            vagasElement.textContent = vagasRestantes + " vaga"; // Atualiza para singular "vaga"
        }
    }

    // Função principal que controla a atualização das vagas
    function atualizarVagas() {
        if (vagasRestantes > 1) {
            vagasRestantes--; // Diminui as vagas
            atualizarTextoVagas(); // Atualiza o texto e o número simultaneamente
            const proximoIntervalo = calcularIntervalo(); // Calcula o próximo intervalo aleatório
            setTimeout(atualizarVagas, proximoIntervalo); // Chama novamente após o intervalo
        } else if (vagasRestantes === 1) {
            atualizarTextoVagas(); // Atualiza uma última vez quando chegar a 1 vaga
        }
    }

    // Função para adicionar a data de hoje
    function adicionarDataDeHoje() {
        const hoje = new Date();
        const dia = String(hoje.getDate()).padStart(2, '0');
        const mes = String(hoje.getMonth() + 1).padStart(2, '0'); // Meses vão de 0 a 11
        const ano = hoje.getFullYear();
        dataElement.textContent = `${dia}/${mes}/${ano}`; // Adiciona a data no formato DD/MM/AAAA
    }

    // Função para adicionar a hora no formato XX:59
    function adicionarHoraLimite() {
        const agora = new Date();
        let horaAtual = agora.getHours();
        const minutosAtuais = agora.getMinutes();

        if (minutosAtuais > 58) {
            horaAtual++;
        }

        // Formata para que horas abaixo de 10 apareçam com 2 dígitos
        const horaFormatada = horaAtual < 10 ? "0" + horaAtual + ":59" : horaAtual + ":59";
        horaElement.textContent = horaFormatada; // Adiciona o valor formatado ao elemento hora
    }

    // Inicializa as vagas, a data e a hora
    function iniciarPagina() {
        // Exibe o número inicial de vagas (10) e o texto correspondente
        atualizarTextoVagas();

        // Adiciona a data de hoje e a hora
        adicionarDataDeHoje();
        adicionarHoraLimite();

        // Começa a diminuição das vagas após o primeiro intervalo aleatório
        setTimeout(atualizarVagas, calcularIntervalo());
    }

    // Chama a função para inicializar a página
    iniciarPagina();
</script>

				
			

Restam apenas com valor promocional até os dias

Restam apenas com valor promocional até hoje,

Restam apenas com valor promocional até hoje às

Adicionar datas dinâmicas para bônus exclusivos (urgência)

Título

				
					3 super bônus surreais para quem comprar até os dias <span id="displayDate">.</span>
				
			

CSS Personalizado

				
					#displayDate{
color: red;
font-weight: 700;
}
				
			

HTML

				
					<script>
    var today = new Date();
var day = today.getDate();
var day2 = today.getDate()-1;
var day3 = today.getDate()-2;
var month = today.getMonth();
var monthList = ["janeiro","fevereiro","março","abril","maio","junho","julho","agosto","setembro","outubro","novembro","dezembro"];
if (month == 0 && day == 1) {
day2 = "31"
day3 = "30";
} else if (month == 0 && day == 2) {
day3 = "31"
}
if (month == 1 && day == 1) {
day2 = "31"
day3 = "30";
} else if (month == 1 && day == 2) {
day3 = "31"
}
if (month == 2 && day == 1) {
day2 = "28"
day3 = "27";
} else if (month == 2 && day == 2) {
day3 = "28"
}
if (month == 3 && day == 1) {
day2 = "31"
day3 = "30";
} else if (month == 3 && day == 2) {
day3 = "31"
}
if (month == 4 && day == 1) {
day2 = "30"
day3 = "29";
} else if (month == 4 && day == 2) {
day3 = "30"
}
if (month == 5 && day == 1) {
day2 = "31"
day3 = "30";
} else if (month == 5 && day == 2) {
day3 = "31"
}
if (month == 6 && day == 1) {
day2 = "30"
day3 = "29";
} else if (month == 6 && day == 2) {
day3 = "30"
}
if (month == 7 && day == 1) {
day2 = "31"
day3 = "30";
} else if (month == 7 && day == 2) {
day3 = "31"
}
if (month == 8 && day == 1) {
day2 = "31"
day3 = "30";
} else if (month == 8 && day == 2) {
day3 = "31"
}
if (month == 9 && day == 1) {
day2 = "30"
day3 = "29";
} else if (month == 9 && day == 2) {
day3 = "30"
}
if (month == 10 && day == 1) {
day2 = "31"
day3 = "30";
} else if (month == 10 && day == 2) {
day3 = "31"
}
if (month == 11 && day == 1) {
day2 = "30"
day3 = "29";
} else if (month == 11 && day == 2) {
day3 = "30"
}

var displayDateElements = document.querySelectorAll("#displayDate");

  displayDateElements.forEach(function (element) {
    element.innerHTML = '<b>' + day3 + ', ' + day2 + ' e ' + day + ' de ' + monthList[month] + '</b>.';
  });

</script>
				
			

3 super bônus surreais para quem comprar até os dias .

Criar urgência extrema no título para a hora seguinte (h59)

Título/Texto

				
					Por R$197,00 até <span id="data"></span> às <span id="hora"></span>, depois R$397,00.
				
			

CSS Personalizado

				
					#data, #hora {
    color: red;
}
				
			

HTML

				
					<script>
  (function () {
    var horarioLimite = new Date();
    horarioLimite.setHours(horarioLimite.getHours() + 1);
    horarioLimite.setMinutes(0);
    horarioLimite.setSeconds(0);
    horarioLimite.setMilliseconds(0);

    // Define a data atual e o horário atual
    var dataAtual = new Date();
    var horaAtual = dataAtual.getHours();

    // Arredonda o horário atual para a hora subseqüente
    if (dataAtual.getMinutes() > 58) {
      horaAtual++;
      horaAtual = horaAtual < 10 ? "0" + horaAtual : horaAtual;
      var horaFormatada = horaAtual + "h59";
    } else {
      horaAtual = horaAtual < 10 ? "0" + horaAtual : horaAtual;
      var horaFormatada = horaAtual + "h59";
    }

    // Define a data formatada
    var dataFormatada = dataAtual.getDate() + " de " + getMesFormatado(dataAtual.getMonth());

    // Seleciona todos os elementos com o ID "data" e "hora"
    var dataElements = document.querySelectorAll("#data");
    var horaElements = document.querySelectorAll("#hora");

    // Loop para preencher as variáveis de data e hora nos elementos HTML
    dataElements.forEach(function (element) {
      element.innerHTML = dataFormatada;
    });

    horaElements.forEach(function (element) {
      element.innerHTML = horaFormatada;
    });

    // Função auxiliar para formatar o mês
    function getMesFormatado(mes) {
      var meses = [
        "janeiro",
        "fevereiro",
        "março",
        "abril",
        "maio",
        "junho",
        "julho",
        "agosto",
        "setembro",
        "outubro",
        "novembro",
        "dezembro"
      ];
      return meses[mes];
    }
  })();
</script>

				
			

Por R$197,00 até às , depois R$397,00.

Criar urgência extrema no título para a hora seguinte arredondada (h00)

Título/Texto

				
					Por R$97,00 até <span id="data"></span> às <span id="hora"></span>, depois R$297,00.
				
			

CSS Personalizado

				
					#data, #hora {
    color: red;
}
				
			

HTML

				
					<script>
  (function () {
    var horarioLimite = new Date();
    horarioLimite.setHours(horarioLimite.getHours() + 1);
    horarioLimite.setMinutes(0);
    horarioLimite.setSeconds(0);
    horarioLimite.setMilliseconds(0);

    // Define a data atual e o horário atual
    var dataAtual = new Date();
    var horaAtual = dataAtual.getHours();

    // Verifica se o horário atual é 23 e faz a transição para o próximo dia e mês se for o caso
    if (horaAtual === 23 && dataAtual.getMinutes() >= 0) {
      var proximoDia = dataAtual.getDate() + 1;
      var proximoMes = dataAtual.getMonth();
      var proximoAno = dataAtual.getFullYear();

      // Verifica se houve uma transição para o próximo mês
      if (proximoDia === 1) {
        proximoMes++;
        if (proximoMes === 12) { // Transição de ano
          proximoMes = 0;
          proximoAno++;
        }
      }

      // Verifica se o próximo dia é válido para o próximo mês
      var ultimoDiaMes = new Date(proximoAno, proximoMes + 1, 0).getDate();
      if (proximoDia > ultimoDiaMes) {
        proximoDia = 1;
        proximoMes++;
        if (proximoMes === 12) { // Transição de ano
          proximoMes = 0;
          proximoAno++;
        }
      }

      dataAtual.setDate(proximoDia);
      dataAtual.setMonth(proximoMes);
      dataAtual.setFullYear(proximoAno);
      horaAtual = 0;
    } else {
      // Arredonda o horário atual para a hora subseqüente
      if (dataAtual.getMinutes() >= 0) {
        horaAtual++;
      }
    }
    horaAtual = horaAtual < 10 ? "0" + horaAtual : horaAtual;

    // Define a data formatada
    var dataFormatada = dataAtual.getDate() + " de " + getMesFormatado(dataAtual.getMonth());

    // Define o horário formatado
    var horaFormatada = horaAtual + "h00";

    // Seleciona todos os elementos com os IDs correspondentes
    var dataElements = document.querySelectorAll("#data");
    var horaElements = document.querySelectorAll("#hora");

    // Loop para preencher as variáveis de data e hora nos elementos HTML
    dataElements.forEach(function (element) {
      element.innerHTML = dataFormatada;
    });

    horaElements.forEach(function (element) {
      element.innerHTML = horaFormatada;
    });

    // Função auxiliar para formatar o mês
    function getMesFormatado(mes) {
      var meses = [
        "janeiro",
        "fevereiro",
        "março",
        "abril",
        "maio",
        "junho",
        "julho",
        "agosto",
        "setembro",
        "outubro",
        "novembro",
        "dezembro"
      ];
      return meses[mes];
    }
  })();
</script>

				
			

Por R$97,00 até às , depois R$297,00.

Dia seguinte à data de hoje

Título/Texto

				
					Este conteúdo será retirado do ar no dia <span id="nextDay">.</span>
				
			

CSS Personalizado

				
					#nextDay {
    color: red;
}
				
			

HTML

				
					<script>
  var today = new Date();
  var nextDay = new Date(today);
  nextDay.setDate(today.getDate() + 1);

  // Verifica se a data resultante ultrapassou o último dia do mês atual
  if (nextDay.getMonth() !== today.getMonth()) {
    nextDay = new Date(today.getFullYear(), today.getMonth() + 1, 1);
  }
  
  // Verifica se hoje é 31 de dezembro
  if (today.getMonth() === 11 && today.getDate() === 31) {
    // Define a próxima data como 1 de janeiro do próximo ano
    nextDay = new Date(today.getFullYear() + 1, 0, 1); // Mês 0 representa janeiro
  }

  var day = nextDay.getDate();
  var month = nextDay.getMonth();
  var year = nextDay.getFullYear(); // Adicionando a obtenção do ano
  var monthList = ["janeiro", "fevereiro", "março", "abril", "maio", "junho", "julho", "agosto", "setembro", "outubro", "novembro", "dezembro"];

  var displayDateElements = document.querySelectorAll("#nextDay");

  displayDateElements.forEach(function (element) {
    element.innerText = day + ' de ' + monthList[month] + ' de ' + year + '.';
  });
</script>

				
			

Este conteúdo será retirado do ar no dia .

Dia de hoje para gerar escassez

Título/Texto

				
					Oferta válida apenas até hoje, <span id="today"></span>
				
			

CSS Personalizado

				
					#today {
    color: red;
}
				
			

HTML

				
					<script>
    function getTodayDay() {
        const diasDaSemana = ['domingo', 'segunda-feira', 'terça-feira', 'quarta-feira', 'quinta-feira', 'sexta-feira', 'sábado'];
        const dataAtual = new Date();
        const diaDaSemana = diasDaSemana[dataAtual.getDay()];
        return diaDaSemana;
    }

    function getMesesDoAno(mes) {
        var meses = [
            "janeiro",
            "fevereiro",
            "março",
            "abril",
            "maio",
            "junho",
            "julho",
            "agosto",
            "setembro",
            "outubro",
            "novembro",
            "dezembro"
        ];
        return meses[mes];
    }

    // Define a data formatada
    var dataAtual = new Date();
    var todayDataFormatada = getTodayDay() + ", " + dataAtual.getDate() + " de " + getMesesDoAno(dataAtual.getMonth()) + " de " + dataAtual.getFullYear()+ ".";

    // Seleciona todos os elementos com o ID "today"
    var dataElements = document.querySelectorAll("#today");

    // Loop para preencher as variáveis de data nos elementos HTML
    dataElements.forEach(function (element) {
        element.innerHTML = todayDataFormatada;
    });
</script>
				
			

Oferta válida apenas até hoje, .

Timer Countdown vinculado às 00h00 do dia seguinte.

Sem pontos

				
					<div class="countdown">
  <div class="countdown-item">
    <span class="countdown-number" id="hours">12</span>
    <span class="countdown-label">Horas</span>
  </div>
  <div class="countdown-item">
    <span class="countdown-number" id="minutes">00</span>
    <span class="countdown-label">Minutos</span>
  </div>
  <div class="countdown-item">
    <span class="countdown-number" id="seconds">00</span>
    <span class="countdown-label">Segundos</span>
  </div>
</div>

<style>
.countdown {
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: center;
  align-content: center;
  align-items: center;
  font-family: var( --e-global-typography-accent-font-family ), Sans-serif;
}

.countdown-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: center;
  align-content: center;
  margin: 0 0.5vw; /*0 1vw;*/ /* Mude o espaçamento entre os blocos aqui */
  color: #000;
  padding: 2vw 5vw;
  background: #f1f1f1;  /* Mude a cor do fundo aqui */
  border-radius: 12px;
  width: 0px;
}

.countdown-number {
  font-size: 2.5vw;
}

.countdown-label {
  padding-top: 0px;
  text-transform: uppercase;
  font-size: 1vw;
  letter-spacing: 0.5px;
}
/*
.countdown-item:not(:last-child)::after {
  content: ":";
  position: absolute;
  top: 50%;
  transform: translateY(-50%) translateX(6vw);
  font-size: 2vw;
}
*/

</style>

<script>
  function updateCountdown() {
    const now = new Date();
    const target = new Date();
    target.setDate(target.getDate() + 1);
    target.setHours(0, 0, 0, 0);

    const timeLeft = target - now;

    const hours = Math.floor(timeLeft / (1000 * 60 * 60));
    const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);

    // Seleciona todos os elementos com os IDs correspondentes
    var hoursElements = document.querySelectorAll("#hours");
    var minutesElements = document.querySelectorAll("#minutes");
    var secondsElements = document.querySelectorAll("#seconds");

    // Loop para preencher as variáveis de horas, minutos e segundos nos elementos HTML
    hoursElements.forEach(function (element) {
      element.textContent = hours.toString().padStart(2, '0');
    });

    minutesElements.forEach(function (element) {
      element.textContent = minutes.toString().padStart(2, '0');
    });

    secondsElements.forEach(function (element) {
      element.textContent = seconds.toString().padStart(2, '0');
    });
  }

  updateCountdown();
  setInterval(updateCountdown, 1000);
</script>

				
			

Com pontos

				
					<div class="countdown">
  <div class="countdown-item">
    <span class="countdown-number" id="hours">12</span>
    <span class="countdown-label">Horas</span>
  </div>
  <div class="countdown-item">
    <span class="countdown-number" id="minutes">00</span>
    <span class="countdown-label">Minutos</span>
  </div>
  <div class="countdown-item">
    <span class="countdown-number" id="seconds">00</span>
    <span class="countdown-label">Segundos</span>
  </div>
</div>

<style>
.countdown {
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: center;
  align-content: center;
  align-items: center;
  font-family: var( --e-global-typography-accent-font-family ), Sans-serif;
}

.countdown-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: center;
  align-content: center;
  margin: 0 0.5vw; /*0 1vw;*/ /* Mude o espaçamento entre os blocos aqui */
  color: #000;
  padding: 2vw 5vw;
  background: #f1f1f1;  /* Mude a cor do fundo aqui */
  border-radius: 12px;
  width: 0px;
}

.countdown-number {
  font-size: 2.5vw;
}

.countdown-label {
  padding-top: 0px;
  text-transform: uppercase;
  font-size: 1vw;
  letter-spacing: 0.5px;
}
/*
.countdown-item:not(:last-child)::after {
  content: ":";
  position: absolute;
  top: 50%;
  transform: translateY(-50%) translateX(6vw);
  font-size: 2vw;
}
*/

</style>

<script>
  function updateCountdown() {
    const now = new Date();
    const target = new Date();
    target.setDate(target.getDate() + 1);
    target.setHours(0, 0, 0, 0);

    const timeLeft = target - now;

    const hours = Math.floor(timeLeft / (1000 * 60 * 60));
    const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);

    // Seleciona todos os elementos com os IDs correspondentes
    var hoursElements = document.querySelectorAll("#hours");
    var minutesElements = document.querySelectorAll("#minutes");
    var secondsElements = document.querySelectorAll("#seconds");

    // Loop para preencher as variáveis de horas, minutos e segundos nos elementos HTML
    hoursElements.forEach(function (element) {
      element.textContent = hours.toString().padStart(2, '0');
    });

    minutesElements.forEach(function (element) {
      element.textContent = minutes.toString().padStart(2, '0');
    });

    secondsElements.forEach(function (element) {
      element.textContent = seconds.toString().padStart(2, '0');
    });
  }

  updateCountdown();
  setInterval(updateCountdown, 1000);
</script>

				
			
12 Horas
00 Minutos
00 Segundos
12 Horas
00 Minutos
00 Segundos

Timer Countdown vinculado à vira de hora seguinte.

Sem pontos

				
					<div class="countdown">
  <div class="countdown-item">
    <span class="countdown-number" id="hours">12</span>
    <span class="countdown-label">Horas</span>
  </div>
  <div class="countdown-item">
    <span class="countdown-number" id="minutes">00</span>
    <span class="countdown-label">Minutos</span>
  </div>
  <div class="countdown-item">
    <span class="countdown-number" id="seconds">00</span>
    <span class="countdown-label">Segundos</span>
  </div>
</div>

<style>
.countdown {
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: center;
  align-content: center;
  align-items: center;
  font-family: var( --e-global-typography-accent-font-family ), Sans-serif;
}

.countdown-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: center;
  align-content: center;
  margin: 0 0.5vw; /*0 1vw;*/ /* Mude o espaçamento entre os blocos aqui */
  color: #000;
  padding: 2vw 5vw;
  background: #f1f1f1;  /* Mude a cor do fundo aqui */
  border-radius: 12px;
  width: 0px;
}

.countdown-number {
  font-size: 2.5vw;
}

.countdown-label {
  padding-top: 0px;
  text-transform: uppercase;
  font-size: 1vw;
  letter-spacing: 0.5px;
}
/*
.countdown-item:not(:last-child)::after {
  content: ":";
  position: absolute;
  top: 50%;
  transform: translateY(-50%) translateX(6vw);
  font-size: 2vw;
}
*/

</style>

<script>
  function getNextHour() {
    const now = new Date();
    const nextHour = new Date();

    if (now.getMinutes() >= 0) {
      nextHour.setHours(now.getHours() + 1);
    }

    nextHour.setMinutes(0, 0, 0);

    return nextHour;
  }

  function updateCountdown() {
    const now = new Date();
    const target = getNextHour();

    const timeLeft = target - now;

    const hours = Math.floor((timeLeft / (1000 * 60 * 60)) % 24);
    const minutes = Math.floor((timeLeft / (1000 * 60)) % 60);
    const seconds = Math.floor((timeLeft / 1000) % 60);

    // Seleciona todos os elementos com os IDs correspondentes
    var hoursElements = document.querySelectorAll("#hours");
    var minutesElements = document.querySelectorAll("#minutes");
    var secondsElements = document.querySelectorAll("#seconds");

    // Loop para preencher as variáveis de horas, minutos e segundos nos elementos HTML
    hoursElements.forEach(function (element) {
      element.textContent = hours.toString().padStart(2, '0');
    });

    minutesElements.forEach(function (element) {
      element.textContent = minutes.toString().padStart(2, '0');
    });

    secondsElements.forEach(function (element) {
      element.textContent = seconds.toString().padStart(2, '0');
    });
  }

  updateCountdown();
  setInterval(updateCountdown, 1000);
</script>


				
			

Sem horas

				
					<div class="countdown">
  <div class="countdown-item">
    <span class="countdown-number" id="minutes">00</span>
    <span class="countdown-label">Minutos</span>
  </div>
  <div class="countdown-item">
    <span class="countdown-number" id="seconds">00</span>
    <span class="countdown-label">Segundos</span>
  </div>
</div>

<style>
.countdown {
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: center;
  align-content: center;
  align-items: center;
  font-family: var( --e-global-typography-accent-font-family ), Sans-serif;
}

.countdown-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: center;
  align-content: center;
  margin: 0 0.5vw; /*0 1vw;*/ /* Mude o espaçamento entre os blocos aqui */
  color: #000;
  padding: 2vw 5vw;
  background: #f1f1f1;  /* Mude a cor do fundo aqui */
  border-radius: 12px;
  width: 0px;
}

.countdown-number {
  font-size: 2.5vw;
}

.countdown-label {
  padding-top: 0px;
  text-transform: uppercase;
  font-size: 1vw;
  letter-spacing: 0.5px;
}
/*
.countdown-item:not(:last-child)::after {
  content: ":";
  position: absolute;
  top: 50%;
  transform: translateY(-50%) translateX(6vw);
  font-size: 2vw;
}
*/

</style>

<script>
  function getNextHour() {
    const now = new Date();
    const nextHour = new Date();

    if (now.getMinutes() >= 0) {
      nextHour.setHours(now.getHours() + 1);
    }

    nextHour.setMinutes(0, 0, 0);

    return nextHour;
  }

  function updateCountdown() {
    const now = new Date();
    const target = getNextHour();

    const timeLeft = target - now;

    const hours = Math.floor((timeLeft / (1000 * 60 * 60)) % 24);
    const minutes = Math.floor((timeLeft / (1000 * 60)) % 60);
    const seconds = Math.floor((timeLeft / 1000) % 60);

    // Seleciona todos os elementos com os IDs correspondentes
    var hoursElements = document.querySelectorAll("#hours");
    var minutesElements = document.querySelectorAll("#minutes");
    var secondsElements = document.querySelectorAll("#seconds");

    // Loop para preencher as variáveis de horas, minutos e segundos nos elementos HTML
    hoursElements.forEach(function (element) {
      element.textContent = hours.toString().padStart(2, '0');
    });

    minutesElements.forEach(function (element) {
      element.textContent = minutes.toString().padStart(2, '0');
    });

    secondsElements.forEach(function (element) {
      element.textContent = seconds.toString().padStart(2, '0');
    });
  }

  updateCountdown();
  setInterval(updateCountdown, 1000);
</script>


				
			

Com pontos

				
					<div class="countdown">
  <div class="countdown-item">
    <span class="countdown-number" id="hours">12</span>
    <span class="countdown-label">Horas</span>
  </div>
  <div class="countdown-item">
    <span class="countdown-number" id="minutes">00</span>
    <span class="countdown-label">Minutos</span>
  </div>
  <div class="countdown-item">
    <span class="countdown-number" id="seconds">00</span>
    <span class="countdown-label">Segundos</span>
  </div>
</div>

<style>
.countdown {
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: center;
  align-content: center;
  align-items: center;
  font-family: var( --e-global-typography-accent-font-family ), Sans-serif;
}

.countdown-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: center;
  align-content: center;
  margin: 0 0.5vw; /*0 1vw;*/ /* Mude o espaçamento entre os blocos aqui */
  color: #000;
  padding: 2vw 5vw;
  background: #f1f1f1;  /* Mude a cor do fundo aqui */
  border-radius: 12px;
  width: 0px;
}

.countdown-number {
  font-size: 2.5vw;
}

.countdown-label {
  padding-top: 0px;
  text-transform: uppercase;
  font-size: 1vw;
  letter-spacing: 0.5px;
}
/*
.countdown-item:not(:last-child)::after {
  content: ":";
  position: absolute;
  top: 50%;
  transform: translateY(-50%) translateX(6vw);
  font-size: 2vw;
}
*/

</style>

<script>
  function getNextHour() {
    const now = new Date();
    const nextHour = new Date();

    if (now.getMinutes() >= 0) {
      nextHour.setHours(now.getHours() + 1);
    }

    nextHour.setMinutes(0, 0, 0);

    return nextHour;
  }

  function updateCountdown() {
    const now = new Date();
    const target = getNextHour();

    const timeLeft = target - now;

    const hours = Math.floor((timeLeft / (1000 * 60 * 60)) % 24);
    const minutes = Math.floor((timeLeft / (1000 * 60)) % 60);
    const seconds = Math.floor((timeLeft / 1000) % 60);

    // Seleciona todos os elementos com os IDs correspondentes
    var hoursElements = document.querySelectorAll("#hours");
    var minutesElements = document.querySelectorAll("#minutes");
    var secondsElements = document.querySelectorAll("#seconds");

    // Loop para preencher as variáveis de horas, minutos e segundos nos elementos HTML
    hoursElements.forEach(function (element) {
      element.textContent = hours.toString().padStart(2, '0');
    });

    minutesElements.forEach(function (element) {
      element.textContent = minutes.toString().padStart(2, '0');
    });

    secondsElements.forEach(function (element) {
      element.textContent = seconds.toString().padStart(2, '0');
    });
  }

  updateCountdown();
  setInterval(updateCountdown, 1000);
</script>


				
			
12 Horas
00 Minutos
00 Segundos
00 Minutos
00 Segundos
12 Horas
00 Minutos
00 Segundos

Corrigir bug do FAQ (recarregar a página ou toggle)

				
					<script>

jQuery('.elementor-toggle-title[href]').each(function() {
  jQuery(this).attr('href', '');
});

jQuery('.elementor-toggle-title[href]').each(function() {
  jQuery(this).removeAttr('href');
});

</script>
				
			

Não, os pagamentos podem ser realizados apenas via cartão de crédito, e não é possível parcelar no boleto ou no Pix.

Não há pré-requisitos específicos mencionados, mas é necessário ter um computador capaz de rodar os programas utilizados nas aulas e acesso à internet para assistir às aulas através de um computador ou de um celular.

O tempo de acesso ao conteúdo depende do plano de assinatura escolhido, com opções trimestral (3 meses), semestral (6 meses) e anual (12 meses).

O acesso é imediato uma vez que o pagamento é aprovado. Você receberá os dados de acesso por e-mail. Caso não encontre o e-mail, verifique na caixa de spam ou entre em contato com o suporte.

Mostrar e ocultar elemento de acordo com o evento do mouse (hover/click)

Evento de clique

[Avançado > Atributos] Atributo do texto/título/botão

				
					/* Botão 1 */
data-mostrar|section-1

/* Botão 2 */
data-mostrar|section-2

/* Botão 3 */
data-mostrar|section-3
				
			

Classe CSS do Elemento que quer mostrar/ocultar

				
					/* Elemento 1 */
e-show section-1

/* Elemento 2 */
e-show section-2

/* Elemento 3 */
e-show section-3
				
			

HTML

				
					<script>
var $ = jQuery
$(document).ready(function(){
    $('[data-mostrar]').click(function(){
        var mostrar = $(this).attr('data-mostrar')

        $('.e-show').hide()
        $('.' + mostrar).show()
    })
    $('.e-show').not('.section-1').hide();
})
</script>

				
			

Evento de hover

[Avançado > Atributos] Atributo do texto/título/botão

				
					/* Botão 1 */
data-hover|section-1

/* Botão 2 */
data-hover|section-2

/* Botão 3 */
data-hover|section-3
				
			

Classe CSS do Elemento que quer mostrar/ocultar

				
					/* Elemento 1 */
e-show section-1

/* Elemento 2 */
e-show section-2

/* Elemento 3 */
e-show section-3
				
			

HTML

				
					<script>
var $ = jQuery
$(document).ready(function(){
    $('.e-show:not(:first)').hide();
    $('[data-hover]').hover( function(){
        event.preventDefault();
        var mostrar = $(this).attr('data-hover')
        $('.e-show').hide()
        $('.' + mostrar).show()
    })
})

</script>

				
			

Moonver

SouthSquare

PlayHard

Moonver

SouthSquare

PlayHard

Mostrar e ocultar elemento de acordo com o evento do mouse (hover/click)

Evento de clique

[Avançado > Atributos] Atributo do texto/título/botão

				
					/* Botão 1 */
data-mostrar|section-1

/* Botão 2 */
data-mostrar|section-2

/* Botão 3 */
data-mostrar|section-3
				
			

Classe CSS do Elemento que quer mostrar/ocultar

				
					/* Elemento 1 */
e-show section-1

/* Elemento 2 */
e-show section-2

/* Elemento 3 */
e-show section-3
				
			

HTML

				
					<script>
var $ = jQuery
$(document).ready(function(){
    $('[data-mostrar]').click(function(){
        var mostrar = $(this).attr('data-mostrar')

        $('.e-show').hide()
        $('.' + mostrar).show()
    })
    $('.e-show').not('.section-1').hide();
})
</script>

				
			

Evento de hover

[Avançado > Atributos] Atributo do texto/título/botão

				
					/* Botão 1 */
data-hover|section-1

/* Botão 2 */
data-hover|section-2

/* Botão 3 */
data-hover|section-3
				
			

Classe CSS do Elemento que quer mostrar/ocultar

				
					/* Elemento 1 */
e-show section-1

/* Elemento 2 */
e-show section-2

/* Elemento 3 */
e-show section-3
				
			

HTML

				
					<script>
var $ = jQuery
$(document).ready(function(){
    $('.e-show:not(:first)').hide();
    $('[data-hover]').hover( function(){
        event.preventDefault();
        var mostrar = $(this).attr('data-hover')
        $('.e-show').hide()
        $('.' + mostrar).show()
    })
})

</script>

				
			

Moonver

SouthSquare

PlayHard

Moonver

SouthSquare

PlayHard

[PHP] UTMs e desabilitar o botão direito do mouse

Código JavaScript para redirecionar formulários após envio

				
					<script>
    const urlsDestino = {
        'nome-do-formulario1': 'URL-DE-DESTINO-1',
        'nome-do-formulario2': 'URL-DE-DESTINO-2',
    };
</script>
				
			

Código PHP (Botões e formulário)

				
					add_action('wp_footer', function () { ?>
    <script src="*https://code.jquery.com/jquery-3.6.0.min.js">// Remova o * antes do "https" da URL para não dar erro </script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
    const links = document.querySelectorAll('a');
    links.forEach(function (link) {
        link.addEventListener('click', function (event) {
            if (link.getAttribute('href').startsWith('#')) {
                return;
            }
            event.preventDefault();

            const clickedURL = link.getAttribute('href');
            const urlParams = new URLSearchParams(window.location.search);

            const separator = clickedURL.includes('?') ? '&' : '?';
            
            const redirectURL = clickedURL + separator + urlParams.toString();

            window.location.href = redirectURL;
        });
    });
});

        function obterParametrosUTM() {
            const parametrosURL = new URLSearchParams(window.location.search);
            const utmParams = {};

            for (const [key, value] of parametrosURL.entries()) {
                utmParams[key] = value;
            }

            return utmParams;
        }

        jQuery(document).ready(function ($) {
            $('form').on('submit_success', function () {
                const formName = $(this).attr('name');
                const currentUrl = new URL(urlsDestino[formName]);
                const utmParams = obterParametrosUTM();

                Object.entries(utmParams).forEach(([key, value]) => {
                    if (value) {
                        currentUrl.searchParams.set(key, value);
                    }
                });

                const redirecionar = currentUrl.toString();
                window.location.href = redirecionar;
            });
        });
    </script>

<script>
	   jQuery(document).on('elementor/popup/show', () => {
	        document.addEventListener('DOMContentLoaded', function () {
    const links = document.querySelectorAll('a');
    links.forEach(function (link) {
        link.addEventListener('click', function (event) {
            if (link.getAttribute('href').startsWith('#')) {
                return;
            }
            event.preventDefault();

            const clickedURL = link.getAttribute('href');
            const urlParams = new URLSearchParams(window.location.search);
            
            const separator = clickedURL.includes('?') ? '&' : '?';
            
            const redirectURL = clickedURL + separator + urlParams.toString();

            window.location.href = redirectURL;
        });
    });
});

        function obterParametrosUTM() {
            const parametrosURL = new URLSearchParams(window.location.search);
            const utmParams = {};

            for (const [key, value] of parametrosURL.entries()) {
                utmParams[key] = value;
            }

            return utmParams;
        }

        jQuery(document).ready(function ($) {
            $('form').on('submit_success', function () {
                const formName = $(this).attr('name');
                const currentUrl = new URL(urlsDestino[formName]);
                const utmParams = obterParametrosUTM();

                Object.entries(utmParams).forEach(([key, value]) => {
                    if (value) {
                        currentUrl.searchParams.set(key, value);
                    }
                });

                const redirecionar = currentUrl.toString();
                window.location.href = redirecionar;
            });
        });
});
</script>
<?php });

				
			

Código secundário

				
					add_action('wp_footer', function () { ?>
    <script>
(function () {
    const utmParamQueryString = new URLSearchParams(window.location.search);

    function updateUTMsInUrl(url, utmParams) {
        const params = new URLSearchParams(url.search);
        utmParams.forEach((value, key) => {
            params.set(key, value);
        });
        url.search = params.toString();
    }

    function transferUTMs(newUrl) {
        updateUTMsInUrl(newUrl, utmParamQueryString);
        sessionStorage.removeItem('utmParams');
        sessionStorage.removeItem('nextPageUrl');
        window.location.href = newUrl.toString();
    }

    function addClickListenerToLinks(links) {
        links.forEach(function (item) {
            item.addEventListener('click', function (event) {
                const href = item.getAttribute('href');
                if (href.indexOf('#') === -1) {
                    event.preventDefault();
                    if (item.target === '_blank') {
                        sessionStorage.setItem('utmParams', utmParamQueryString.toString());
                    } else {
                        sessionStorage.setItem('nextPageUrl', href);
                        sessionStorage.setItem('utmParams', utmParamQueryString.toString());
                    }
                    transferUTMs(new URL(href));
                }
            });
        });
    }

    function updateUTMsInLinks(links) {
        links.forEach(function (item) {
            if (item.href.indexOf('#') !== -1) {
                const parts = item.href.split('#');
                const newUrl = new URL(parts[0] + '#' + parts[1]);
                updateUTMsInUrl(newUrl, utmParamQueryString);
                item.href = newUrl.toString();
            } else {
                const newUrl = new URL(item.href);
                updateUTMsInUrl(newUrl, utmParamQueryString);
                item.href = newUrl.toString();
            }
        });
    }

    if (utmParamQueryString.toString()) {
        const navLinks = document.querySelectorAll('a');
        updateUTMsInLinks(navLinks);
        sessionStorage.setItem('utmParams', utmParamQueryString.toString());
    } else {
        const utmParams = sessionStorage.getItem('utmParams');
        if (utmParams) {
            const navLinks = document.querySelectorAll('a');
            updateUTMsInLinks(navLinks);
        }
    }

    const allLinks = document.querySelectorAll('a');
    addClickListenerToLinks(allLinks);
})();
</script>
<?php });

				
			

Código UTMify

				
					add_action('wp_footer', function () { ?>
<script
  src="https://cdn.utmify.com.br/scripts/utms/latest.js"
  data-utmify-prevent-subids
  data-utmify-fast-start
  async
  defer
></script>
<?php });

				
			

Código Atualizado (RenderMax)

				
					add_action('wp_footer', function () { ?>
    <!-- litespeed_no_optimize -->
    <!-- rocket_no_optimize -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const elements = document.querySelectorAll('.elementor-button'); // Seleciona links e botões

            elements.forEach(function (element) {
                let href = element.getAttribute('href');

                // Verifica se é um link com href válido
                if (!href || href.startsWith('#')) {
                    return;
                }
                
                // Obtém os parâmetros UTM da URL atual
                const urlParams = new URLSearchParams(window.location.search);

                if (urlParams.toString()) {
                    const separator = href.includes('?') ? '&' : '?';
                    const newHref = href + separator + urlParams.toString();

                    // Atualiza o href do botão com os parâmetros UTM
                    element.setAttribute('href', newHref);
                }
            });
        });

        // Aplica a mesma lógica quando um popup do Elementor é exibido
        jQuery(document).on('elementor/popup/show', function () {
            const elements = document.querySelectorAll('.elementor-button');

            elements.forEach(function (element) {
                let href = element.getAttribute('href');

                // Verifica se é um link com href válido
                if (!href || href.startsWith('#')) {
                    return;
                }
                
                // Obtém os parâmetros UTM da URL atual
                const urlParams = new URLSearchParams(window.location.search);

                if (urlParams.toString()) {
                    const separator = href.includes('?') ? '&' : '?';
                    const newHref = href + separator + urlParams.toString();

                    // Atualiza o href do botão com os parâmetros UTM
                    element.setAttribute('href', newHref);
                }
            });
        });
    </script>
    <!-- /rocket_no_optimize -->
    <!-- /litespeed_no_optimize -->
<?php });

				
			

Código PHP

				
					add_action('wp_head', function () { ?>
<script disable-devtool-auto="" src="https://cdn.jsdelivr.net/npm/disable-devtool">
try {
  
} catch (e) {
  console.warn(e); 
}
</script>
<script>
try {
  
        // Desativar o clique direito do mouse
        document.addEventListener('contextmenu', function (e) {
            e.preventDefault();
        });

        // Impedir o uso de atalhos de teclado para abrir o DevTools
        document.addEventListener('keydown', function (e) {
            if (e.key === 'F12' || (e.ctrlKey && e.shiftKey && e.key === 'I')) {
                e.preventDefault();
            }
        });

        // Impedir a seleção de texto na página
        document.addEventListener('selectstart', function (e) {
            e.preventDefault();
        });
    
} catch (e) {
  console.warn(e); 
}
</script>
<?php });
				
			

Código para desabilitar os eventos do botão direito do mouse

				
					<script>
    // Desabilitar o menu de contexto do botão direito do mouse
document.addEventListener("contextmenu", function(e) {
    e.preventDefault()
}, !1);

// Loop infinito que tenta causar um erro no console do navegador
!function t() {
    try {
        // Função anônima que divide um número por si mesmo e verifica se o resultado é 1
        // Se o resultado for diferente de 1, exibirá um erro no console do navegador
        1 === ("" + n / n).lenght && 0 !== n || function() {}
        .constructor("debugger")(),

        // Chama a função novamente com um número incrementado
        t(++n)
    } catch (n) {
        // Se ocorrer um erro, adia a chamada da função por 0 segundos e tenta novamente
        setTimeout(t, 0e3)
    }
}()
 
// Desabilitar o uso do botão direito do mouse em todos os elementos, exceto inputs e textareas
document.onkeydown = function(e) {
    if (!e.target.matches("input") && !e.target.matches("textarea"))
        return !1
};
</script>
				
			

[PHP] Validação de campos do formulário

Máscaras de dígitos no formulário

				
					add_action( 'wp_footer', function () { ?>
<script>
function mascara(o, f) {
    v_obj = o;
    v_fun = f;
    setTimeout("execmascara()", 1);
}

function execmascara() {
    v_obj.value = v_fun(v_obj.value);
}

function mascaraCpf(valor) {
    valor = valor.replace(/\D/g, "");
    valor = valor.replace(/(\d{3})(\d)/, "$1.$2");
    valor = valor.replace(/(\d{3})(\d)/, "$1.$2");
    valor = valor.replace(/(\d{3})(\d{1,2})$/, "$1-$2");
    return valor;
}

function mascaraCnpj(valor) {
    valor = valor.replace(/\D/g, "");
    valor = valor.replace(/^(\d{2})(\d)/, "$1.$2");
    valor = valor.replace(/^(\d{2})\.(\d{3})(\d)/, "$1.$2.$3");
    valor = valor.replace(/\.(\d{3})(\d)/, ".$1/$2");
    valor = valor.replace(/(\d{4})(\d)/, "$1-$2");
    return valor;
}

function mascaraTelefone(valor) {
    valor = valor.replace(/\D/g, "");
    valor = valor.replace(/^(\d{2})(\d)/, "($1) $2");
    valor = valor.replace(/(\d{5})(\d)/, "$1-$2");
    return valor;
}

function mascaraMoeda(valor) {
    valor = valor.replace(/\D/g, "");
    if (valor === "") {
        return "";
    }
    valor = parseInt(valor).toString();
    valor = (parseInt(valor) / 100).toFixed(2);
    valor = valor.replace(".", ",");
    valor = valor.replace(/(\d)(?=(\d{3})+\,)/g, "$1.");
    return "R$ " + valor;
}

function mascaraCep(valor) {
    valor = valor.replace(/\D/g, "");
    valor = valor.replace(/^(\d{5})(\d)/, "$1-$2");
    return valor;
}

function mascaraData(valor) {
    valor = valor.replace(/\D/g, "");
    valor = valor.replace(/(\d{2})(\d)/, "$1/$2");
    valor = valor.replace(/(\d{2})(\d)/, "$1/$2");
    return valor;
}

function mascaraHora(valor) {
    valor = valor.replace(/\D/g, "");
    valor = valor.replace(/(\d{2})(\d)/, "$1:$2");
    valor = valor.replace(/(\d{2})(\d)/, "$1:$2");
    return valor;
}

window.onload = function() {
    configurarMascara('cpf', '.elementor-form input[name="form_fields[cpf]"]', mascaraCpf, 14);
    configurarMascara('cnpj', '.elementor-form input[name="form_fields[cnpj]"]', mascaraCnpj, 18);
    configurarMascara('telefone', '.elementor-form input[name="form_fields[telefone]"]', mascaraTelefone, 15);
    configurarMascara('moeda', '.elementor-form input[name="form_fields[moeda]"]', mascaraMoeda, 20);
    configurarMascara('cep', '.elementor-form input[name="form_fields[cep]"]', mascaraCep, 9);
    configurarMascara('data', '.elementor-form input[name="form_fields[data]"]', mascaraData, 10);
    configurarMascara('hora', '.elementor-form input[name="form_fields[hora]"]', mascaraHora, 8);
};

function configurarMascara(tipo, seletor, funcaoMascara, tamanhoMax) {
    let campos = document.querySelectorAll(seletor);
    campos.forEach(function(campo) {
        campo.setAttribute('maxlength', tamanhoMax);
        campo.onkeydown = function(event) {
            // Verifica se a tecla pressionada não é numérica e não é uma tecla de controle padrão
            if (!/\d/.test(event.key) && !event.ctrlKey && !event.metaKey && !isTeclaPadrao(event)) {
                event.preventDefault(); // Impede a ação padrão
            }
        };
        campo.onkeyup = function() {
            mascara(this, funcaoMascara);
        };
    });
}

function isTeclaPadrao(event) {
    // Array de códigos de teclas padrão permitidas
    const teclasPadraoPermitidas = [
        "Backspace",
        "Tab",
        "Enter",
        "Escape",
        "ArrowLeft",
        "ArrowRight",
        "Delete",
        "Home",
        "End"
    ];

    return teclasPadraoPermitidas.includes(event.key);
}

window.addEventListener( 'elementor/popup/show', ( event )=>{ 
    configurarMascara('cpf', '.elementor-form input[name="form_fields[cpf]"]', mascaraCpf, 14);
    configurarMascara('cnpj', '.elementor-form input[name="form_fields[cnpj]"]', mascaraCnpj, 18);
    configurarMascara('telefone', '.elementor-form input[name="form_fields[telefone]"]', mascaraTelefone, 15);
    configurarMascara('moeda', '.elementor-form input[name="form_fields[moeda]"]', mascaraMoeda, 20);
    configurarMascara('cep', '.elementor-form input[name="form_fields[cep]"]', mascaraCep, 9);
    configurarMascara('data', '.elementor-form input[name="form_fields[data]"]', mascaraData, 10);
    configurarMascara('hora', '.elementor-form input[name="form_fields[hora]"]', mascaraHora, 8);
});
</script>
<?php } );
				
			

Preencher formulário com dados do usuário automaticamente

				
					add_action( 'wp_footer', function () { ?>
<script>
  // Criar os cookies
  function setCookie(name, value, days) {
    var expires = "";
    if (days) {
      var date = new Date();
      date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
      expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + (value || "") + expires + "; path=/";
  }

  // Adicionar os valores do formulário nos cookies
  const forms = document.querySelectorAll("form");
  forms.forEach(form => {
    form.addEventListener("submit", function(event) {
      event.preventDefault();
      setCookie("form-field-name", form.querySelector("input[name='form_fields[name]']").value, 365);
      setCookie("form-field-email", form.querySelector("input[name='form_fields[email]']").value, 365);
      setCookie("form-field-confirm", form.querySelector("input[name='form_fields[confirm]']").value, 365);
      setCookie("form-field-telefone", form.querySelector("input[name='form_fields[telefone]']").value, 365);
    });
  });

  // Obter valores dos cookies
  function getCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
      var c = ca[i];
      while (c.charAt(0) == ' ') c = c.substring(1, c.length);
      if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
    }
    return null;
  }

  // Carregar os valores dos cookies para o formulário
  document.addEventListener("DOMContentLoaded", function() {
    forms.forEach(form => {
      const nameInputs = form.querySelectorAll("input[name='form_fields[name]']");
      const emailInputs = form.querySelectorAll("input[name='form_fields[email]']");
      const confirmInputs = form.querySelectorAll("input[name='form_fields[confirm]']");
      const telefoneInputs = form.querySelectorAll("input[name='form_fields[telefone]']");

      nameInputs.forEach(input => {
        input.value = getCookie("form-field-name") || "";
      });

      emailInputs.forEach(input => {
        input.value = getCookie("form-field-email") || "";
      });
      
      confirmInputs.forEach(input => {
        input.value = getCookie("form-field-confirm") || "";
      });

      telefoneInputs.forEach(input => {
        input.value = getCookie("form-field-telefone") || "";
      });
    });
  });
</script>
<?php } );
				
			

Validar o nome e o nº de telefone no Formulário

				
					function rnz_elementor_get_field( $id, $record )
{
    $fields = $record->get_field( [
        'id' => $id,
    ] );

    if ( empty( $fields ) ) {
        return false;
    }

    return current( $fields );
}

function rnz_elementor_forms_validation( $record, $ajax_handler ) {

   
    if( $field = rnz_elementor_get_field( 'telefone', $record ) )
    {
        if( $field['required'] == 'yes' ){
            if( empty( trim($field['value']) ) ){ // Check if it is empty
                $ajax_handler->add_error( $field['id'], 'Digite o seu WhatsApp.' );
            } else if( 14 >= strlen(trim($field['value'])) ){
                $ajax_handler->add_error( $field['id'], 'Ocorreu um erro. Digite o seu WhatsaApp novamente.' );
            }
        }
    }

	if( $field = rnz_elementor_get_field( 'name', $record ) )
    {
        if( $field['required'] == 'yes' ){
            if( empty( trim($field['value']) ) ){ // Check if it is empty
                $ajax_handler->add_error( $field['id'], 'Escreva seu nome.' );
            } else if( 2 >= strlen(trim($field['value'])) ){
                $ajax_handler->add_error( $field['id'], 'Ocorreu um erro. Este não é um nome válido.' );
            }
        }
    }
	
}

add_action( 'elementor_pro/forms/validation', 'rnz_elementor_forms_validation', 10, 2 );

				
			

Validação de e-mail em duas etapas

				
					add_action( 'elementor_pro/forms/validation', function ( $record, $ajax_handler ) {

  $form_id = $record->get_form_settings( 'form_id' ); // Use 'form_id' para obter o ID do formulário

  if ( 'form' !== $form_id ) {
    return;
  }

  $first_email_field = $record->get_field( [
    'id' => 'email'
  ] );

  $second_email_field = $record->get_field( [
    'id' => 'confirm'
  ] );

  if ( $first_email_field['email']['value'] !== $second_email_field['confirm']['value'] ) {
    $ajax_handler->add_error( $second_email_field['confirm']['id'], 'Confirmação de email não corresponde ao e-mail digitado.' );
  }

}, 10, 2 );

				
			

[PHP] JavaScript Desativado + Anti-Clonagem

JavaScript Desativado

				
					function js_disabled() {
    echo '<noscript><style>.elementor {display: none !important;visibility: hidden !important;opacity: 0 !important;pointer-events: none !important;overflow: hidden !important;height: 0px !important}*, body {pointer-events: none !important;-webkit-user-select: none;user-select: none;overflow-x: hidden !important;overflow-y: hidden !important;}body > div.elementor {display: none !important;height: 0px !important;opacity: 0 !important;pointer-events: none !important;-webkit-user-select: none;user-select: none;}body.page-template-default, [data-elementor-type="wp-page"]{pointer-events: none !important;-webkit-user-select: none;user-select: none;display: none !important;visibility: hidden !important;opacity: 0 !important;pointer-events: none !important;overflow: hidden !important;height: 0px !important}</style></noscript>';
}

add_action('wp_head', 'js_disabled');
add_action('wp_body_open', 'js_disabled');
add_action('wp_footer', 'js_disabled');

function js_disabled_warning() {
    echo '<noscript><div class="wp-underground"><div class="warning"><p>O JavaScript está desabilitado no seu navegador. Por favor, habilite o JavaScript para que esta página funcione corretamente.</p></div></div><style>.wp-underground{position:relative;top:0;left:0;width:100%!important;height:100vh;background-color:black;z-index:998!important;pointer-events:none!important;overflow:hidden!important;margin-bottom:1000vw;}.wp-underground::before{position:fixed;content:"";top:0;left:0;width:100%!important;height:100vh;background-color:black;z-index:998!important;pointer-events:none!important;overflow:hidden!important;}.warning{text-align:center;background-color:#f44336;color:white;padding:10px;z-index:999!important;position:fixed;pointer-events:none!important;font-family:"Inter",sans-serif;letter-spacing:-0.5px!important;height:8vh;display:flex;flex-direction:column;flex-wrap:nowrap;align-content:center;justify-content:center;align-items:center;width:100%;}.warning p{margin:30px;pointer-events:none!important;font-size:12px;text-align:center;display:flex;flex-direction:column;flex-wrap:nowrap;align-content:center;justify-content:center;align-items:center;overflow:visible!important;}</style></noscript>';
}

add_action('wp_head', 'js_disabled_warning');
				
			

Anti-clonagem (ORIGINAL)

				
					function anti_clone_URL() {
    $currentDomain = "https://" . $_SERVER['HTTP_HOST'];
    $currentSlug = $_SERVER['REQUEST_URI'];
    $originalURL = $currentDomain . $currentSlug;
    echo "<script>var urlDomain = '$currentDomain'; var originalUrl = '$originalURL'</script>
	";
}
add_action('wp_head', 'anti_clone_URL');

function verificar_e_redirecionar() {
    echo "
<script>
document.addEventListener("DOMContentLoaded", function() {
    if (window.location.href.indexOf(urlDomain) === 0) {
        aviso.forEach(function(element) {
            element.style.display = 'none';
        });
    } else {
        // Adiciona o aviso ao HTML
        document.body.insertAdjacentHTML('afterbegin', `
         <div class="fixed">    
            <div class="aviso">
                <p><span class="bold-aviso">PARA NÃO CAIR EM GOLPES:</span> Certifique-se de que esse é o site oficial com o endereço <span id="domain-URL"></span></p>
            </div></div>
            <style>
            
                .fixed {z-index: 999 !important;
    position: sticky;
    width: 100%;
    height: fit-content;
    top: 0;
                }
                
                .aviso {
                    text-align: center;
                    background-color: #f44336;
                    color: white;
                    padding: 1vw;
                    z-index: 999 !important;
                    position: relative !important;
                    pointer-events: none !important;
                    font-family: 'Inter', sans-serif;
                    height: fit-content;
                    display: flex !important;
                    flex-direction: column;
                    flex-wrap: nowrap;
                    align-content: center;
                    justify-content: center;
                    align-items: center;
                    width: 100%;
                }
            
                .aviso p {
                    pointer-events: none !important;
                    user-select: none !important;
                    -webkit-user-select: none !important;
                    font-size: 0.75vw;
                    text-align: center;
                    display: flex;
                    flex-direction: row;
                    gap: 0.25vw;
                    flex-wrap: nowrap;
                    align-content: center;
                    justify-content: center;
                    align-items: center;
                    overflow: visible !important;
                    font-weight: 600;
                    font-family: "Inter", sans-serif;
                    margin: 0;
                }
            
                .bold-aviso {
                    font-weight: 800;
                    color: black;
                }
            
                #domain-URL {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    flex-direction: column;
                    padding: 0.5vw 1vw;
                    border-radius: 999px;
                    border: 0.2vw solid white;
                    font-weight: 700;
                    margin-left: 0.5vw;
                }
            
                
                @media(max-width:767px){

    .aviso {
    padding: 5vw;
}
                
    .aviso p {
    pointer-events: none !important;
    font-size: 3vw;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 2vw !important;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    margin: 0;
}

.bold-aviso {
font-size: 4vw;
}

#domain-URL {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 1.5vw 3vw;
    border-radius: 999px;
    border: 0.5vw solid white;
    font-weight: 700;
}

                }                
                
            </style>
        `);

        // Insere o valor da variável urlDomain no span
        document.getElementById("domain-URL").textContent = mainDomain;

        // Adiciona o estilo ao documento para garantir que o aviso seja exibido
        var style = document.createElement('style');
        style.innerHTML = ".aviso{display:block!important}";
        document.head.appendChild(style);

        setTimeout(function() {
            alert('Acesso não autorizado pois essa página foi clonada indevidamente. Aperte em "OK" para ser redirecionado para o site oficial.');

            document.body.innerHTML = `
                <h2 style="color:black; padding: 0 10vw; text-align: center; width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center;">
                    Aguarde enquanto estamos te redirecionando...
                </h2>
                <style>
                    html, body {
                        overflow: hidden !important;
                    }
                    @media(max-width: 767px) {
                        h2 {
                            font-size: 6vw;
                            font-weight: 700;
                            margin-top: -5vw;
                        }
                    }
                </style>`;

            // Adiciona os parâmetros da URL original à URL de redirecionamento
            var redirectUrl = new URL(originalUrl);
            var currentParams = new URLSearchParams(window.location.search);
            currentParams.forEach((value, key) => {
                redirectUrl.searchParams.set(key, value);
            });

            // Adiciona o parâmetro "src=clonado"
            redirectUrl.searchParams.set('src', 'clonado');

            window.location.href = redirectUrl.toString();
        }, 3000); // Delay de 3 segundos antes de redirecionar
    }
});
    ";
}
add_action('wp_head', 'verificar_e_redirecionar');

				
			

Anti-clonagem (arquivo Cpanel)

				
					function add_custom_js_to_head() {
    $currentDomain = "https://" . $_SERVER['HTTP_HOST'];
	$mainDomain=  $_SERVER['HTTP_HOST'];
    $currentSlug = $_SERVER['REQUEST_URI'];
    $originalURL = $currentDomain . $currentSlug;
    echo "
    <script>var urlDomain = \"$currentDomain\";/*.elementor {display: none !important;visibility: hidden !important;opacity: 0 !important;pointer-events: none !important;overflow: hidden !important;height: 0px !important}*/ var originalUrl = \"$originalURL\"; /*.elementor {display: none !important;visibility: hidden !important;opacity: 0 !important;pointer-events: none !important;overflow: hidden !important;height: 0px !important}*/var mainDomain=\"$mainDomain\"; var aviso = document.querySelectorAll(\".aviso\");/*.elementor {display: none !important;visibility: hidden !important;opacity: 0 !important;pointer-events: none !important;overflow: hidden !important;height: 0px !important}*/ </script><script src=\"/anti-clone-aviso-html.js\"></script>
    ";
}
add_action('wp_body_open','add_custom_js_to_head');
				
			

[PHP] Funções do WordPress

Redirecionar Página principal + “?s” + sitemap.xml

				
					//VOLTAR PARA PAGINA ANTERIOR

function redirecionar() {
    if (is_front_page() || is_search() || is_page('sitemap')) {
        echo '<script>
            setTimeout(function () {
                history.go(-1);
            }, 0);
        </script>';
    }
}
add_action('wp_head', 'redirecionar');

//REDIRECIONAR PARA URL

add_action( 'template_redirect', 'redirect_search_to_page' );
function redirect_search_to_page() {
  if( is_search() ) {
    wp_redirect( home_url( '/redirect-not-found/' ), 301 );
    exit();
  }
}

add_action( 'template_redirect', 'redirect_404_to_page' );
function redirect_404_to_page() {
  if( is_404() ) {
    wp_redirect( home_url( '/redirect-not-found/' ), 301 );
    exit();
  }
}

				
			

Desativar barra de administração

				
					add_action( 'wp', function () {
	if ( ! current_user_can( 'manage_options' ) ) {
		show_admin_bar( false );
	}
} );
				
			

Ativar shortcode do ACF (Advanced Custom Fields)

				
					add_action( 'acf/init', 'enable_acf_shortcode' );
function enable_acf_shortcode() {
    acf_update_setting( 'enable_shortcode', true );
}
				
			

Adicionar favicons em páginas diferentes

				
					add_filter('get_site_icon_url','atw_filter_favicon', 10, 3);
function atw_filter_favicon ($url, $size, $blog_id) { global $post; 
if (is_page('ID DA PÁGINA AQUI 01')) $url = 'URL DO FAVICON DA BIBLIOTECA DE MÍDIA AQUI 01'; 
if (is_page('ID DA PÁGINA AQUI 02')) $url = 'URL DO FAVICON DA BIBLIOTECA DE MÍDIA AQUI 02';
return $url;
}

				
			

Adicionar categorias e tags nas páginas

				
					function add_categories_to_pages() {
register_taxonomy_for_object_type( 'category', 'page' );
}
add_action( 'init', 'add_categories_to_pages' );

function add_tags_to_pages() {
register_taxonomy_for_object_type( 'post_tag', 'page' );
}
add_action( 'init', 'add_tags_to_pages');
				
			

Adicionar Scroll Suave (Lenis Smooth Scrolling)

				
					function smoothScrolling() {
        echo '<script src="https://lumarko.github.io/smoothscrolling-elementor-test/lenis.min.js"></script>
<script>
    if (window.innerWidth > 1024) {
  const lenis = new Lenis({
    duration: 2,
    easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
    orientation: \'vertical\',
    smoothWheel: true,
  });

  function raf(time) {
    lenis.raf(time);
    requestAnimationFrame(raf);
  }

  requestAnimationFrame(raf);
}
</script>';
    }

add_action('wp_head', 'smoothScrolling');
				
			

[PHP] Pré-carregar e desbloquear imagens no WordPress

Pré-carregar

				
					function preload() {
    echo '
    <!----- PRE-LOAD FACEBOOK PIXEL ----->
    <link rel="preload" href="https://connect.facebook.net/en_US/fbevents.js" as="script" importance="high">

    <!----- PRE-LOAD GOOGLE TAG MANAGER ----->
    <link rel="preload" href="https://www.googletagmanager.com/gtm.js?id=GTM-XXXXXX" as="script" importance="high">
    <link rel="preload" href="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXX-Y" as="script" importance="high">

    <!----- PRE-LOAD WEB FONT ----->
    <link rel="preload" href="https://buustcloud.com.br/wp-content/uploads/2024/06/Sora-Regular.woff2" as="font" type="font/woff2" crossorigin="anonymous">
    <link rel="preload" href="https://buustcloud.com.br/wp-content/uploads/2024/06/Sora-Bold.woff2" as="font" type="font/woff2" crossorigin="anonymous">

    <!----- PRE-LOAD BACKGROUND IMAGES ----->
    <link rel="preload" href="https://exemplo.com/imagens/bg-desktop.jpg" as="image" media="(min-width: 1025px)" fetchpriority="high">
    <link rel="preload" href="https://exemplo.com/imagens/bg-mobile.jpg" as="image" media="(max-width: 1024px)" fetchpriority="high">
    ';
}

add_action('wp_head', 'preload');
				
			

Desabilitar compressão das imagens e Tamanho da largura das imagens ilimitado > 2560px

				
					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’ );


function aumentar_limite_upload_imagens( $limite ) {
    return 0;
}
add_filter( 'big_image_size_threshold', 'aumentar_limite_upload_imagens' );