[Cursor] Pointer Hover
[Cursor] Pointer Hover Adicione um Widget de HTML no Elementor (pode ser em qualquer sessão, recomendo do rodapé) Coloque o seguinte código HTML: Código HTML Copiar Código Coloque o CSS dentro do Widget de HTML Código CSS Copiar Código selector { position: absolute; } #cursor { position: fixed; z-index: 9999; left: 0; top: 0; pointer-events: none; will-change: transform; } /* círculo principal do cursor */ .cursor__circle { width: 16px; height: 16px; background-color: #FFFFFF90; /* branco translúcido */ backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px); border: 0.5px solid #FAFAFA; /* branco sólido */ margin-top: -50%; margin-left: -50%; border-radius: 50%; transition: opacity 0.3s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.3s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.3s cubic-bezier(0.25, 1, 0.5, 1), width 0.3s cubic-bezier(0.25, 1, 0.5, 1), height 0.3s cubic-bezier(0.25, 1, 0.5, 1); color: transparent; } /* texto do cursor */ .cursor__circle::after { content: “CLICAR”; /* edite aqui */ font-family: “Sora”, sans-serif; font-weight: 700; /* bold */ font-size: 14px; color: inherit; position: absolute; white-space: nowrap; top: 50%; left: 50%; transform: translate(-50%, -50%); } /* remove em telas pequenas */ @media (max-width: 1024px) { #cursor { display: none; } } Nos botões ou Widgets que você quer criar a interação, coloque a seguinte classe: cursor-hover
[Cursor] Pointer Simple Delay v2
[Cursor] Pointer Delay v2 Adicione um Widget de HTML no Elementor (pode ser em qualquer sessão, recomendo do rodapé) Coloque o seguinte código HTML: Código HTML Copiar Código Cursor Background Coloque o CSS dentro do Widget de HTML Código CSS Copiar Código body { margin: 0; /* remove a margem padrão da página */ overflow: hidden; /* evita barras de rolagem caso algo ultrapasse a tela */ } #cursor-background { position: fixed; /* permanece preso à tela independentemente da rolagem */ width: 40px; /* tamanho do círculo que acompanha o cursor */ height: 40px; border-radius: 50%; /* deixa o fundo completamente redondo */ border: 1px solid #ffffff; /* borda do efeito — altere a cor aqui */ pointer-events: none; /* impede bloqueio de cliques ou interações */ z-index: 9999; /* mantém o círculo sempre acima dos outros elementos */ mix-blend-mode: difference; /* inverte as cores ao passar, criando contraste */ }
[Cursor] Alterar cursor
[Cursor] Alterar cursor Defina esse CSS diretamente no Costum CSS das configurações da Página. Código Copiar Código /* ============================ CURSOR PADRÃO DO SITE (cursor normal do mouse) ============================ */ html { cursor: url(‘LINK-DO-SEU-CURSOR.svg’), auto; /* coloque aqui o link da imagem */ } /* ============================ CURSOR AO PASSAR POR LINKS (cursor hover / clique) ============================ */ html.click, html.click a, html.click a:hover, a:hover { cursor: url(‘LINK-DO-SEU-CURSOR.svg’), auto; /* coloque aqui o link do cursor para hover */ } Envie o arquivo SVG/PNG do cursor para a galeria do WordPress e copie o link direto. Você não precisa criar nenhuma classe — o CSS abaixo já troca o cursor do site inteiro. Use cursores com no máximo 50px (minha recomendação). Exemplo do cursor que eu uso.
[Cursor] Pointer Double Delay v1
[Cursor] Pointer Delay v1 Adicione um Widget de HTML no Elementor (pode ser em qualquer sessão, recomendo do rodapé) Coloque o seguinte código HTML: Código HTML Copiar Código
[Cursor] Luzes Animadas Cursor
[Cursor] Luzes seguindo o cursor No container que você quer o efeito, em avançado defina o ID CSS: tubes-section Cole o seguinte código dentro desse mesmo container ID: tubes-section Código Copiar Código /* transforma a seção em um contêiner para o canvas animado */ #tubes-section { position: relative; overflow: hidden; /* evita que a animação ultrapasse a seção */ min-height: 100vh; /* ajuste conforme o tamanho desejado da seção */ } /* canvas da animação fica no fundo */ #tubesCanvasSection { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; /* impede interação com o mouse */ } /* garante que o conteúdo fique acima do canvas */ #tubes-section > .elementor-container, #tubes-section .elementor-widget-wrap { position: relative; z-index: 1; } Coloque um Widget HTML na sua página (pode ser no rodapé) E coloque esse código dentro: Código Copiar Código /* transforma a seção em um contêiner para o canvas animado */ #tubes-section { position: relative; overflow: hidden; /* evita que a animação ultrapasse a seção */ min-height: 100vh; /* ajuste conforme o tamanho desejado da seção */ } /* canvas da animação fica no fundo */ #tubesCanvasSection { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; /* impede interação com o mouse */ } /* garante que o conteúdo fique acima do canvas */ #tubes-section > .elementor-container, #tubes-section .elementor-widget-wrap { position: relative; z-index: 1; }