Media Queries

				
					/* Para Desktops Full HD */
@media screen and (min-width: 1920px) {
    /* Seu CSS para desktop aqui */
}

/* Para Laptops com resolução de 1366px a 1919px */
@media screen and (min-width: 1366px) and (max-width: 1919px) {
    /* Seu CSS para laptops aqui */
}

/* Para Tablets com resolução de 768px a 1365px */
@media screen and (min-width: 768px) and (max-width: 1365px) {
    /* Seu CSS para tablets aqui */
}

/* Para Dispositivos Móveis com largura máxima de 767px */
@media screen and (max-width: 767px) {
    /* Seu CSS para dispositivos móveis aqui */
}

/* Para dispositivos muito pequenos (ex: celulares em orientação vertical com largura de 480px ou menos) */
@media screen and (max-width: 480px) {
    /* Seu CSS para dispositivos muito pequenos aqui */
}

/* Para telas grandes, como monitores 4K */
@media screen and (min-width: 2560px) {
    /* Seu CSS para telas grandes aqui */
}

/* Para Tablets em orientação horizontal */
@media screen and (min-width: 1024px) and (max-width: 1365px) and (orientation: landscape) {
    /* Seu CSS para tablets em orientação horizontal aqui */
}

/* Para celulares em orientação horizontal */
@media screen and (max-width: 767px) and (orientation: landscape) {
    /* Seu CSS para celulares em orientação horizontal aqui */
}

Media queries ajustam o layout da página para diferentes tamanhos de tela

Elementos 100% mobile

				
					@‌media(max-width: 767px){
.e-con .elementor-widget:not(.fixo){
width: 100% !important;
}
}

Seus elementos com a largura 100% na versão mobile

Animação de entrada na primeira seção

				
					<script> 
    const elementosEB = document.querySelectorAll(".scroll-eb");

    setTimeout(function() {
        elementosEB.forEach(function(elemento) {
            elemento.classList.add("eb");
        });
    }, 500);
</script>

<style>
.eb {
    opacity: 1 !important;
    transition: 0.8s !important;
    filter: blur(0px) !important;
    transform: translateY(0px) !important;
}
</style>

				
			
				
					selector{
    opacity: 0;
    filter: blur(5px);
    transform: translatey(30px);
    transition-delay: 0.5s !important;
}

Adicione o código HTML em um widget HTML no rodapé da página

No elemento que quiser o efeito adicione a classe “scroll-eb” e cole o CSS em Avançado  > Custom CSS

Adicionar teclado númerico no form

				
					<script>
  // Função para verificar se o dispositivo é um dispositivo móvel
  function isMobileDevice() {
    return (typeof window.orientation !== "undefined") || (navigator.userAgent.indexOf('IEMobile') !== -1);
  }

  // Função que ajusta o tipo de entrada do campo de telefone para "tel" em dispositivos móveis
  function setupNumericKeypad() {
    if (isMobileDevice()) {
      var telefoneInput = document.getElementById('campo_whatsapp'); // Substitua 'campo_whatsapp' pelo ID do campo de telefone que você deseja
      if (telefoneInput) {
        telefoneInput.setAttribute('type', 'tel'); // Define o tipo de input como "tel" para exibir o teclado numérico
      }
    }
  }

  
  window.addEventListener('load', setupNumericKeypad);
</script>

Adicionar teclado numérico no formulário no celular

Transformar checkbox em toggle

				
					

.elementor-field-type-checkbox .elementor-field-option input[type=checkbox] + label {
    position: relative;
    padding-left: 60px;
    cursor: pointer;
}

.elementor-field-type-checkbox .elementor-field-option input[type=checkbox] + label::before, .elementor-field-option input[type=checkbox] + label::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}



.elementor-field-type-checkbox .elementor-field-option input[type=checkbox] + label::after {
    left: 4px;
    width: 16px;
    height: 16px;
    background-color: white;
    border-radius: 50%;
    transition: all 0.3s;
}

.elementor-field-type-checkbox .elementor-field-option input[type=checkbox]:checked + label::after {
    transform: translateY(-50%) translateX(26px);
}

.elementor-field-type-checkbox .elementor-field-option input[type=checkbox] + label::before {
    left: 0;
    width: 50px;
    height: 24px;
    background-color: #AAAAAA; /* Cor do fundo quando desabilitado */
    border-radius: 12px;
}

.elementor-field-option input[type=checkbox]:checked + label::before {
    background-color: #2C7FDA; /* Cor do fundo quando habilitado */
}

.elementor-field-type-checkbox > label {
    margin-bottom: 10px;
}

.elementor-field-type-checkbox .elementor-field-option {
    margin: 6px 0;
}

.elementor-field-type-checkbox .elementor-field-option input[type=checkbox] {
    display: none !important; /* Oculta o checkbox */
}

Transforma a opção checkbox do formulário em um toggle.

Smooth Scroll

				
					<script src="https://unpkg.com/lenis@1.1.18/dist/lenis.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/lenis@1.1.18/dist/lenis.css">

<script>
    const lenis = new Lenis({
      duration: 1.2,
    })
    
    function raf(time) {
      lenis.raf(time)
      requestAnimationFrame(raf)
    }
    
    requestAnimationFrame(raf)
</script>

Deixa a rolagem da sua página mais suave.

Cole em um widget HTML no rodapé da página.

Redirecionamento automático

				
					<script type="text/javascript">
  // Verifica se o usuário está no editor do Elementor
  if (!document.body.classList.contains('elementor-editor-active')) {
    // Tempo em segundos antes de realizar o redirecionamento
    var delayEmSegundos = 1; // Modifique para o valor desejado de tempo

    // Função para realizar o redirecionamento após o tempo configurado
    function executarRedirecionamento() {
      window.location.href = "https://www.google.com"; // Substitua pela URL completa (com HTTPS) de destino
    }

    // Inicia o redirecionamento após o tempo configurado
    setTimeout(executarRedirecionamento, delayEmSegundos * 1500);
  }
</script>

Redireciona automaticamente o usuário para a URL especificada após o tempo configurado..

Efeito de vidro

				
					selector {
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
}

Coloque um efeito de vidro em qualquer widget

Remover Scroll Bar horizontal

				
					html,body{
width:100%;
overflow-x:hidden;
}
[data-elementor-type="wp-page"] {
    overflow: hidden !important;
}

[data-elementor-type="wp-post"]{
    overflow: hidden;
}

Adicione no CSS Geral da página.

Degradê no divisor

				
					.elementor-divider-separator {
    border-image: linear-gradient(90deg, rgba(252,115,79,1) 0%, rgba(252,11,104,1) 35%, rgba(251,5,171,1) 100%) 1;
}

Título com Degradê Título com Degradê Título com Degradê 

				
					selector {
background: linear-gradient(to right, #caf123 0%, #73f1d1 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

Título com efeito Hover, passe o mouse abaixo

Título com Efeito Hover

				
					selector {
    opacity: 0;
    transition: 0.5s ease-in-out;
}

selector:hover {
    opacity: 1;
}

Tabs Flex Mobile

Para ajustar as abas (tabs) para que utilizem flexbox em dispositivos móveis no Elementor

Adicione esse código no Custom CSS do tabs

				
					selector .e-collapse {
    display: none !important;
}

selector .e-n-tabs-heading {
    display: flex !important;
}

Barra de Scroll Personalizada

Cole no código css personalizado do site

				
					body::-webkit-scrollbar {
    width: 12px; /* Largura da barra de rolagem */
}

body::-webkit-scrollbar-track {
    background: #000000; /* Cor de fundo do caminho da barra de rolagem */
}

body::-webkit-scrollbar-thumb {
    background-image: linear-gradient(0deg, #33D0F2, #1388FD); /* Cor de fundo do marcador de rolagem */
    border-radius: 20px; /* Arredondamento das bordas do controle deslizante */
    border: 3px solid #000000; /* Borda do controle deslizante */
}
*::selection{
    color: #ffffff; /*cor do texto selecionado*/
    background: #1388FD; /*cor do Bg selecionado*/
}

Colocar favicon diferente em cada página

Defina favicons diferentes para cada página no WordPress

Adicione esse código no Custom CSS do tabs

Vá em Aparência > Editor de arquivos de tema > functions.php e acrescente a função acima na última linha do arquivo.

Substitua ‘NUMERO DA PAGINA AQUI’ pelo ID da página específica e ‘URL DO FAVICON AQUI’

				
					add_filter( 'get_site_icon_url', 'atw_filter_favicon2', 10, 3 );

function atw_filter_favicon2($url, $size, $blog_id) {
    global $post;

    if ( is_page('NUMERO DA PAGINA AQUI') ) {
        $url = 'URL DO FAVICON AQUI';
    }

    return $url;
}

Remover Scroll Bar horizontal

Sua página está com Scroll Horizontal? Esse código resolve seu problema

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

Alinhar lista de icones

Adicione o código no Custom CSS da lista de ícones que deseja fazer o alinhamento

				
					selector .elementor-icon-list-item {
    align-items: baseline;
}
selector .elementor-icon-list-item {
    padding-top: 5px;
}

Cursor Personalizado

Cursor personalizado para sua página com a ID do seu cliente.

Cole no Custom CSS da página e altere os SVG’s para o do seu cliente

				
					html{

cursor:url('https://easybuilder.com.br/wp-content/uploads/2024/05/mouseeasy3.svg'), auto;

}

html.click, html.click a, html.click a:hover, a:hover

{

cursor:url('https://easybuilder.com.br/wp-content/uploads/2024/05/mouseeasyCLICK.svg'), auto;

}

.aqui{
    cursor:url('https://easybuilder.com.br/wp-content/uploads/2024/05/mouseeasyCLICK.svg'), auto;}

Elementos 100% mobile

Seus elementos com a largura 100% na versão mobile

Cole no Custom CSS da página

Adicione “fixo” na Classe CSS que deseja aplicar o efeito

				
					@‌media(max-width: 767px){
.e-con .elementor-widget:not(.fixo){
width: 100% !important;
}
}

Mudar a cor da Scroll Bar

Personalize a cor da barra de rolagem no corpo da página

Cole o código no custom CSS da página

Defina a largura, cor de fundo e barra alterando o código CSS.

				
					body::-webkit-scrollbar {

width: 10px;

}

body::-webkit-scrollbar-track {

background: #202020;

}

body::-webkit-scrollbar-thumb {

background-color: #ED0089;

border-radius: 2px;

border: 2px solid #202020;

}

Acordeão fechado

Adicione o código JavaScript abaixo ao rodapé de sua págima com um widget de HTML

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

Borda degrade arrendondada

Este é o título

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

				
					selector {
    z-index: 1;
    position: relative; /* Certifica-se de que o seletor tenha um contexto de posição */
}

selector:before {
    content: "";
    position: absolute;
    z-index: 1000;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1px;
    background: linear-gradient(93deg, #F00 10.38%, #BD0000 59.7%);
    -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;
    border-radius: 8px;
}

Borda degrade arrendondada

Este é o título

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

				
					selector {
    z-index: 1;
    position: relative; /* Certifica-se de que o seletor tenha um contexto de posição */
}

selector:before {
    content: "";
    position: absolute;
    z-index: 1000;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1px;
    background: linear-gradient(93deg, #F00 10.38%, #BD0000 59.7%);
    -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;
    border-radius: 8px;
}

Sessão com Delay

Para exibir uma seção com delay no Elementor

Adicione o código CSS na página

				
					.esconder {
    top: -100% !important;
    opacity: 0;
    position: absolute;
    height: 0;
    overflow: hidden;
    pointer-events: none;
    transition: all 0.5s ease;
}

Adicione o código HTML acima da página e cole o código JavaScript

Adicione a Classe “esconder” nas sessões que deseja esconder

				
					<script>var elementosEscondidos = document.querySelectorAll('.esconder');

setTimeout(function() {
    elementosEscondidos.forEach(function(elemento) {
        elemento.classList.remove("esconder");
        elemento.style.top = '0';
        elemento.style.opacity = '1';
        elemento.style.position = 'relative';
        elemento.style.height = 'auto';
        elemento.style.overflow = 'visible';
        elemento.style.pointerEvents = 'auto';
    });
}, 1000 * 4);
</script>

Alinhar imagem à esquerda na caixa de imagem

Alinhe a imagem à esquerda na caixa de imagem no Elementor

Adicione o código no Custom CSS da caixa de imagem que deseja fazer a alteração

				
					selector .elementor-image-box-img {
    float: left;
    margin-right: 20px;
}

Imagem abaixo da caixa de imagem

Para posicionar a imagem abaixo da caixa de imagem

Adicione o código no Custom CSS da caixa de imagem que deseja alinhar a imagem abaixo

				
					selector .elementor-image-box-img {
    order: 2;
    margin-top: 10px;
    align-self: center; /* Centraliza a imagem horizontalmente */
}

selector .elementor-image-box-content {
    order: 1;
}

selector .elementor-image-box-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centraliza todos os itens horizontalmente */
}

Brilho na lista de ícones

Adicione o código no Custom CSS da lista de ícones que deseja aplicar o efeito

				
					selector .elementor-icon-list-icon {
    filter: drop-shadow(0px 0px 5px rgba(170, 143, 72, 1));
}

Centralizar imagem na caixa de imagem (mobile)

Adicione o código no Custom CSS da lista de ícones que deseja aplicar o efeito

				
					@media only screen and (max-width: 767px) {
    selector .elementor-image-box-img {
        display: flex;
        justify-content: center;
        align-items: center;
        padding-bottom: 10px;
    }
}

Remover margem padrão do ícone SVG

Adicione o código no Custom CSS da lista de ícones que deseja aplicar o efeito

				
					selector svg {
    height: unset;
}

Ícones de checklist aparecendo conforme o scroll

Adicione o código no Custom CSS da lista de ícones que deseja aplicar o efeito

				
					selector .elementor-icon-list-text {
    align-self: center;
}

selector .elementor-icon-list-icon {
    opacity: 0;
    margin-top: -2px;
    transition: 0.5s;
}

selector .elementor-icon-list-items:last-child .elementor-icon-list-item {
    padding-bottom: 8px;
}

selector .elementor-icon-list-text:before {
    content: "";
    display: flex;
    position: absolute;
    left: 0;
    width: 24px;
    height: 24px;
}

selector .elementor-icon-list-icon.ativo {
    align-self: flex-start;
    opacity: 1 !important;
    z-index: 999;
}

Adicione o elemento HTML no rodapé e cole o código do botão abaixo

				
					<script>const elementos = document.querySelectorAll('.elementor-icon-list-icon');
const posicaoScroll = window.innerHeight * 0.7;

function fadeScroll() {
    elementos.forEach((elemento) => {
        const elementoTop = elemento.getBoundingClientRect().top - posicaoScroll;

        // Calcular a opacidade com base na posição do elemento em relação à janelaconst opacity = 1 - Math.max(0, Math.min(1, elementoTop / 120));

        // Aplicar a opacidade ao elemento
        elemento.style.opacity = opacity;
    });
}

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