Codigos úteis

Retirar compreenção padrão de imagem

HTML

				
					<?php
function desabilitar_compressao(){
return 100;
}

add_filter(
'wp editor set quality','desabilitar_compressao');
add_filter( 'jpeg_quality', 'desabilitar_compressao');
add_filter('wp_editor_set_quality_for_type','desabilitar_compressao');
add_filter('wp_editor_set_quality_for_image','desabilitar_compressao');





				
			

ALTERAR COR DO FUNDO DO TEXTO

HTML

				
					<span class="gratuita"> gratuíta</span>

Aí chama a classe em cass personalizado
.gratuita{
Background-color: #000;
}
				
			

Mudar a imagens do cursor

CSS (colocar codigo em: elementor – codigo personalisado- criar novo)

				
					<style>

	html{
    cursor: url("Link imagem (para texto)"), auto
}
html.click, html.click a, html.click a:hover, a:hover
{
cursor: url("Link imagem (para Links)"), auto
}

</style>
				
			

ALTERAR TAMANHO DE PARTE DO TEXTO

HTML

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

Gradiente Botão

CSS

				
					:root{
    --grad1: #03a9f4;
    --grad2: #a066e5;
    --grad3: #3fdcc4;
    --grad4: #03a9f4;
}

selector a{
	background: linear-gradient
	    (90deg,
	    var(--grad1),
	    var(--grad2),
	    var(--grad3),
	    var(--grad4));
	background-size: 400%;
	z-index: 1;
	position: relative;
}
selector a{
	animation: animate 8s
	linear infinite;
}
@keyframes animate {
	0%{
		background-position: 0%;
	}
	100%{
		background-position: 400%;
	}
}
				
			

CSS

Retirar scroll lateral

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

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

GIRAR ELEMENTOS

CSS

				
					#girar{

  transform-origin: center center;
  -webkit-animation: spin 10s linear infinite;
  -moz-animation: spin 10s linear infinite;
  animation: spin 10s linear infinite;
}

@-moz-keyframes spin {
  100%{
    -moz-transform: rotate(360deg);
  }
}

@-webkit-keyframes spin {
  100%{
    -moz-transform: rotate(360deg);
  }
}

@keyframes spin {
  100%{
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
				
			

MUDAR COR DE PARTE DO TEXTO

CSS

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

ALTERAR COR DA BARRA DE ROLAGEM

CSS

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

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

body::-webkit-scrollbar-thumb {
background-color: #d7171e;

border-radius: 10px;

border: 2px solid #202020;

}
				
			

ALTERAR COR DA SELEÇÃO DOS ELEMENTOS

CSS

				
					*::selection {
  color: #ffffff;
  background: #d7171e;
}
				
			

REMOVER MARGIN PADRÃO DOS WIDGETS DE TEXTO

CSS

				
					p:last-child{
    margin-bottom:0px;
}
				
			

DIMINUIR MENU AO FAZER SCROLL

CSS

				
					selector.elementor-sticky--effects{
background-color: #141414 !important;
min-height: 50px;
transition: all 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940);
}

selector{
    transition: all 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940);
}
				
			

DIMINUIR LOGO AO FAZER SCROLL

CSS

				
					.logo img {
max-width: 140px;
height: auto;
transition: all 0.5s ease;
}

.elementor-sticky--effects .logo img {
max-width: 115px;
height: auto;
}
				
			

TOCAR TUDUM ALEATÓRIO (MENU)

JAVASCRIPT (USAR WIDGET HTML)

				
					<script type="rocketlazyloadscript">//tocar tudum menu
let audioButton = document.querySelector('.tudum');   // <-- Mude a classe aqui
       audioButton.addEventListener('click', function(){
        var audio =document.getElementById("audio");
         if (audio.paused) {
                setTimeout(function(){
var uniqid = Math.random().toString(16).slice(2);
function randomIntFromInterval(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min)
}
document.getElementById("audio").src='Url do arquivo aqui, sem o numero e formato'+randomIntFromInterval(1, 9)+'.ogg?'+uniqid;
document.getElementById("audio").load();
document.getElementById("audio").play();
},200);
        }else{
            audio.pause();
            audio.currentTime = 0
        }
      });
</script><audio id="audio" src = "url do arquivo aqui"></audio>
				
			

ABRIR POPUP DE NOTIFICAÇÃO

JAVASCRIPT (USAR WIDGET HTML)

				
					<script type="rocketlazyloadscript">//popup notificacao
    const botaoNotif = document.querySelector('.sino');
    const modalNotif = document.getElementById('popup-notif');

    botaoNotif.addEventListener('click', function() {
        modalNotif.classList.toggle('notificacao-ativo');
    });
</script><script type="rocketlazyloadscript">
window.addEventListener('mouseup', function(event){

const notif = document.getElementById('popup-notif');

if (event.target != notif && event.target.parentNode != notif){

notif.classList.remove('notificacao-ativo'); } });
</script>
				
			

ABRIR POPUP DE NOTIFICAÇÃO

CSS

				
					.notificacao{
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 0.4s ease-in-out 0s;
    -moz-transition: all 0.4s ease-in-out 0s;
    -ms-transition: all 04s ease-in-out 0s;
    transition: all 0.4s ease-in-out 0s;
}

.notificacao-ativo{
    visibility: visible;
    opacity: 1;
}
				
			

DEGRADÊ NA SEÇÃO COM VÍDEO

CSS

				
					selector:before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    background-image: linear-gradient(to bottom,rgba(20,20,20,0) 0,rgba(20,20,20,.15) 15%,rgba(20,20,20,.35) 29%,rgba(20,20,20,.58) 44%,rgb(20 20 20 / 92%) 78%,#141414 100%);
    background-size: 100% 100%;
    background-position: 0 top;
    background-repeat: repeat-x;
    background-color: transparent;
    width: 100%;
    height: 250px;
    top: auto;
    bottom: 0px;
    opacity: 1;
    z-index: 2;
}

selector:after {
    content: '';
    background: linear-gradient(77deg,hsl(0deg 0% 0% / 94%) 0,rgba(0,0,0,0) 85%);
    position: absolute;
    top: 0;
    left: 0;
    right: 26.09%;
    bottom: 0;
    opacity: 1;
    transition: opacity .5s;
    z-index: 1;
}
				
			

HABILITAR O SOM DO VÍDEO DE FUNDO

JAVASCRIPT (USAR WIDGET HTML)

				
					<script type="rocketlazyloadscript">//tocar musica de fundo
const audioButton = document.querySelector('.audio-button');
audioButton.addEventListener('click', function(){
    audioButton.classList.toggle('toggle-pause');
});
</script><script type="rocketlazyloadscript">
document.addEventListener('DOMContentLoaded', function() {
var toggleSoundButton = document.querySelector('.fa-volume-mute');
var heroBackgroundVideo = document.querySelector('.herosection video');
toggleSoundButton.addEventListener('click', function (event) {
if (heroBackgroundVideo.muted !== false){
heroBackgroundVideo.muted=false;
toggleSoundButton.classList.add('fa-volume-up');
} else {
heroBackgroundVideo.muted=true;
toggleSoundButton.classList.remove('fa-volume-up');
} }); });
</script>
				
			

ALTERAR O ÍCONE DO BOTÃO DE ÁUDIO AO CLICAR

CSS

				
					.toggle-pause .elementor-icon i::before{
    content: '\f028';
}

selector .elementor-icon:hover{
        background: rgb(255 255 255 / 40%);
        cursor: pointer;
}
				
			

SELO QUADRADO TOP 1

CSS

				
					selector{
    width: 34px;
    height: 34px;
    background: #d7171f;
    border-radius: 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
				
			

TEXTO DA AULA EM CIMA DA THUMB

CSS

				
					selector p{
  align-items: center;
  background-color: #d7171f;
  display: flex;
  height: 29px;
  justify-content: center;
}
				
			

BORDA INTERNA SELO R$ 500 DE DESCONTO

CSS

				
					selector:before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    border: 1px solid rgb(255 255 255 / 11%);
    z-index: 3;
    width: calc(100% - 14px);
    height: calc(100% - 14px);
    border-radius: 5px;
}
				
			

POPUP DAS AULAS (HOVER)

JAVASCRIPT (USAR WIDGET HTML)

				
					<script type="rocketlazyloadscript" data-minify="1" src="/wp-content/cache/min/1/ajax/libs/jquery/1.8.0/jquery.min.js?ver=1653008924" data-rocket-type="text/javascript" defer>window.addEventListener('DOMContentLoaded', function() {//importar jquery
});</script><script type="rocketlazyloadscript">window.addEventListener('DOMContentLoaded', function() {//popup aula 1
$(".aula-1").mouseenter(function() {
$('.popup-1').addClass('popup-1-ativo');
}).mouseleave(function() {
$('.popup-1').removeClass('popup-1-ativo');
});
});</script><script type="rocketlazyloadscript">window.addEventListener('DOMContentLoaded', function() {//popup aula 2
$(".aula-2").mouseenter(function() {
$('.popup-2').addClass('popup-2-ativo');
}).mouseleave(function() {
$('.popup-2').removeClass('popup-2-ativo');
});
});</script><script type="rocketlazyloadscript">window.addEventListener('DOMContentLoaded', function() {//popup aula 3
$(".aula-3").mouseenter(function() {
$('.popup-3').addClass('popup-3-ativo');
}).mouseleave(function() {
$('.popup-3').removeClass('popup-3-ativo');
});
});</script>
				
			

CSS

				
					.popup-1{
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 0.4s ease-in-out 0s;
    -moz-transition: all 0.4s ease-in-out 0s;
    -ms-transition: all 04s ease-in-out 0s;
    transition: all 0.4s ease-in-out 0s;
}

.popup-1-ativo{
    visibility: visible;
    opacity: 1;
}

.popup-2{
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 0.4s ease-in-out 0s;
    -moz-transition: all 0.4s ease-in-out 0s;
    -ms-transition: all 04s ease-in-out 0s;
    transition: all 0.4s ease-in-out 0s;
}

.popup-2-ativo{
    visibility: visible;
    opacity: 1;
}

.popup-3{
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 0.4s ease-in-out 0s;
    -moz-transition: all 0.4s ease-in-out 0s;
    -ms-transition: all 04s ease-in-out 0s;
    transition: all 0.4s ease-in-out 0s;
}

.popup-3-ativo{
    visibility: visible;
    opacity: 1;
}
				
			

POPUP TROCA DE PERFIL

JAVASCRIPT (USAR WIDGET HTML)

				
					<script type="rocketlazyloadscript">//popup troca de perfil
    const botao = document.querySelector('.trocar-perfil');
    const modal = document.getElementById('popup-perfil');

    botao.addEventListener('click', function() {
        modal.classList.add('popup-perfil-ativo');
    })
</script><script type="rocketlazyloadscript">
window.addEventListener('mouseup', function(event){
const modal = document.getElementById('popup-perfil');
if (event.target != modal && event.target.parentNode != modal){
modal.classList.remove('popup-perfil-ativo');
}
});
</script>
				
			

CSS

				
					.popup-perfil{
    visibility: hidden;
    opacity: 0;
    position: fixed;
    display: flex;
    top: 0;
    left: 0;
    pointer-events: none;
    -webkit-transition: all 1s ease-in-out 0s;
    -moz-transition: all 1s ease-in-out 0s;
    -ms-transition: all 1s ease-in-out 0s;
    transition: all 1s ease-in-out 0s;
}

.popup-perfil-ativo{
    visibility: visible;
    opacity: 1;
    pointer-events: all;
}
				
			

TOCAR TUDUM TROCA DE PERFIL

JAVASCRIPT (USAR WIDGET HTML)

				
					<script type="rocketlazyloadscript">//tocar tudum troca de perfil
var tudum1 = document.querySelector('.perfil-1');
var tudum2 = document.querySelector('.perfil-2');
var tudum3 = document.querySelector('.perfil-3');
var tudum4 = document.querySelector('.perfil-4');

       tudum1.addEventListener('click', function(){
        var audio =document.getElementById("audio");
         if (audio.paused) {
                setTimeout(function(){
var uniqid = Math.random().toString(16).slice(2);
function randomIntFromInterval(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min)
}
document.getElementById("audio").src='wp-content/uploads/2022/05/tudum8.ogg';
document.getElementById("audio").load();
document.getElementById("audio").play();
},200);
        }else{
            audio.pause();
            audio.currentTime = 0
        }
      });

       tudum2.addEventListener('click', function(){
        var audio =document.getElementById("audio");
         if (audio.paused) {
                setTimeout(function(){
var uniqid = Math.random().toString(16).slice(2);
function randomIntFromInterval(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min)
}
document.getElementById("audio").src='wp-content/uploads/2022/05/tudum8.ogg';
document.getElementById("audio").load();
document.getElementById("audio").play();
},200);
        }else{
            audio.pause();
            audio.currentTime = 0
        }
      });

       tudum3.addEventListener('click', function(){
        var audio =document.getElementById("audio");
         if (audio.paused) {
                setTimeout(function(){
var uniqid = Math.random().toString(16).slice(2);
function randomIntFromInterval(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min)
}
document.getElementById("audio").src='wp-content/uploads/2022/05/tudum8.ogg';
document.getElementById("audio").load();
document.getElementById("audio").play();
},200);
        }else{
            audio.pause();
            audio.currentTime = 0
        }
      });

       tudum4.addEventListener('click', function(){
        var audio =document.getElementById("audio");
         if (audio.paused) {
                setTimeout(function(){
var uniqid = Math.random().toString(16).slice(2);
function randomIntFromInterval(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min)
}
document.getElementById("audio").src='wp-content/uploads/2022/05/tudum8.ogg';
document.getElementById("audio").load();
document.getElementById("audio").play();
},200);
        }else{
            audio.pause();
            audio.currentTime = 0
        }
      });
    </script><audio id="audioTudum" src = "wp-content/uploads/2022/05/tudum8.ogg"></audio>
				
			

TOCAR MÚSICA DE FUNDO MOBILE

JAVASCRIPT (USAR WIDGET HTML)

				
					<script type="rocketlazyloadscript">//tocar musica de fundo mobile
const audioButton = document.querySelector('.audio-button-2');
audioButton.addEventListener('click', function(){
    audioButton.classList.toggle('toggle-pause-2');
});
</script><script type="rocketlazyloadscript">
document.addEventListener('DOMContentLoaded', function() {
var toggleSoundButton = document.querySelector('.fa-volume-off');
var heroBackgroundVideo = document.querySelector('.herosection-2 video');
toggleSoundButton.addEventListener('click', function (event) {
if (heroBackgroundVideo.muted !== false){
heroBackgroundVideo.muted=false;
toggleSoundButton.classList.add('fa-volume-up');
} else {
heroBackgroundVideo.muted=true;
toggleSoundButton.classList.remove('fa-volume-up');
} }); });
</script>
				
			

BOTÃO CURTIR DO POPUP DAS AULAS

JAVASCRIPT (USAR WIDGET HTML)

				
					<script type="rocketlazyloadscript">//botao curtir do popup das aulas
const curtir1 = document.querySelector('.thumbup1');
const curtir2 = document.querySelector('.thumbup2');
const curtir3 = document.querySelector('.thumbup3');

curtir1.addEventListener('click', function(){
    curtir1.classList.toggle('thumb-ativo');
});

curtir2.addEventListener('click', function(){
    curtir2.classList.toggle('thumb-ativo');
});

curtir3.addEventListener('click', function(){
    curtir3.classList.toggle('thumb-ativo');
});
</script>
				
			

CSS

				
					selector .elementor-icon:hover{
        background: rgb(255 255 255 / 40%);
        cursor: pointer;
}

.thumb-ativo .elementor-icon{
    background: #fff !important;
    color: red !important;
}
				
			

BORDA BRANCA NA FOTO E MUDANÇA DE COR DO TEXTO (POPUP PERFIL)

CSS

				
					selector{
    cursor: pointer;
    transition: all 1s;
}

selector:hover :where(.foto) {
    outline: 3px solid #ffffff;
    outline-offset: -3px;
    transition: all .3s;
}

selector:hover :where(.texto) {
    color: #ffffff;
    transition: all .3s;
}

selector :where(.foto) {
    transition: all 1s;
}

selector :where(.texto) {
    transition: all .5s;
}
				
			

TOCAR MÚSICA DE FUNDO MOBILE

JAVASCRIPT (USAR WIDGET HTML)

				
					<script type="rocketlazyloadscript">//tocar musica de fundo mobile
const audioButton = document.querySelector('.audio-button-2');
audioButton.addEventListener('click', function(){
    audioButton.classList.toggle('toggle-pause-2');
});
</script><script type="rocketlazyloadscript">
document.addEventListener('DOMContentLoaded', function() {
var toggleSoundButton = document.querySelector('.fa-volume-off');
var heroBackgroundVideo = document.querySelector('.herosection-2 video');
toggleSoundButton.addEventListener('click', function (event) {
if (heroBackgroundVideo.muted !== false){
heroBackgroundVideo.muted=false;
toggleSoundButton.classList.add('fa-volume-up');
} else {
heroBackgroundVideo.muted=true;
toggleSoundButton.classList.remove('fa-volume-up');
} }); });
</script>
				
			

TROCAR FOTO DO PERFIL NO MENU APÓS CLIQUE NO POPUP PERFIL

JAVASCRIPT (USAR WIDGET HTML)

				
					<script type="rocketlazyloadscript" data-rocket-type="text/javascript">
document.addEventListener("DOMContentLoaded",function(){
    if(!window.location.search.includes("elementor")){

    var e=document.querySelectorAll(".use-hide-system");

    void 0!==e[0]&&e.forEach(function(e){

    var t=e.getAttribute("hide-system-section-start-hide"),i=e.getAttribute("hide-system-opacity"),o=e.getAttribute("hide-system-scroll");
    (+i<0&&+i>1||null==i)&&(i=1),console.log("firstSectionHide: ",t);

    var s=e.querySelectorAll(".hide-system-action"),l=e.querySelectorAll(".hide-system-reaction");

    if(void 0!==s[0]&&void 0!==l[0]){l.forEach(function(e){e.style.display="none"}),null!==t&&""!==t&&null!=t||(s[0].classList.add("ativo"),l[0].style.display="block");

    var n=s[0],r=l[0];s.forEach(function(t,s){

        t.style.cursor="pointer",t.style.opacity=""+i,t.addEventListener("click",function(s){s.preventDefault(),s.stopPropagation();

    var l=t.getAttribute("hide-system-id");if(n.classList.remove("ativo"),n.style.opacity=""+i,r.style.display="none",(n=t).classList.add("ativo"),(r=e.querySelector('.hide-system-reaction[hide-system-id="'+l+'"]')).style.display="block",null!=o&&""!==o){window.scroll({top:function(e){var t=0;if(e.offsetParent)do{t+=e.offsetTop,e=e.offsetParent}while(e);return t<0?0:t}(r)-60,behavior:"smooth"})}})})}})}});
</script>