[Bordas] Cima Degrade
[Bordas] Cima Degrade Você vai aplicar o código CSS dentro do Container Principal que está criando o seu Card (Simples, não precisa definir Classe CSS) Código CSS Copiar Código selector { background: #090909; /* Fundo escuro */ border-radius: 20px; border-top: 3px solid; /* Largura da borda superior */ border-image: linear-gradient(to right, transparent, #5DFAA4, transparent) 1; /* Gradiente verde claro */ }
[Bordas] Degrade + Arredondamento
[Bordas] Degrade + Arredondamento Você vai aplicar o código CSS dentro do Container Principal que está criando o seu Card (Simples, não precisa definir Classe CSS) Código CSS Copiar Código selector{ border-radius: 20px; /* Borda curva do elemento */ position: relative; z-index: 5; /* Z-index principal */ } selector::before{ content: “”; background: linear-gradient(to right, #00FF73, #5DFAA4); /* Gradiente de borda verde */ position: absolute; border-radius: inherit; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: -3; /* Camada mais baixa */ width: calc(100% + 4px); /* Largura aumentada */ height: calc(100% + 4px); /* Altura aumentada */ } selector::after{ content: “”; background: #090909; /* Fundo escuro */ border-radius: inherit; z-index: -2; /* Camada intermediária */ width: 100%; height: 100%; position: absolute; transform: translate(-50%,-50%); top: 50%; left: 50%; }
[Bordas] Baixo Subindo
[Bordas] Baixo Subindo Você vai aplicar o código CSS dentro do Container Principal que está criando o seu Card (Simples, não precisa definir Classe CSS) Código CSS Copiar Código selector::after { content: “”; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #090909; /* Cor principal escura */ z-index: 1; border-radius: 8px; /* Borda curva */ } selector::before{ content: “”; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: calc(100% + 2px); /* Largura externa */ height: calc(100% + 2px); /* Altura externa */ background: linear-gradient(to top, #5DFAA4 15%, transparent 100%); /* Gradiente verde claro */ z-index: 0; border-radius: 8px; /* Borda curva */ } selector *{ z-index: 9; /* Conteúdo acima */ }
[Bordas] Cima + Baixo Degrade
[Bordas] Cima + Baixo Degrade Você vai aplicar o código CSS dentro do Container Principal que está criando o seu Card (Simples, não precisa definir Classe CSS) Código CSS Copiar Código selector { border: 2px solid transparent; /* borda inicial transparente */ border-image: linear-gradient( to right, transparent, #5DFAA4 10%, /* verde claro */ #4FE28F 30%, /* verde médio */ #3DC777 50%, /* verde mais forte */ #28A95F 70%, /* verde escuro */ #5DFAA4 90%, /* volta ao verde claro */ transparent ) 1; /* gradiente aplicado na borda */ border-radius: 10px !important; /* cantos arredondados */ background: linear-gradient( 97deg, rgba(255, 255, 255, 0.12) -1.67%, rgba(255, 255, 255, 0.08) 113.81% ); /* fundo translúcido suave */ box-shadow: 0px 4px 24px -1px rgba(0, 0, 0, 0.20); /* sombra externa */ backdrop-filter: blur(20px); /* desfoque interno */ }
[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; }
[Soluções] Tamanho ícone em botões
[Soluções] Tamanho ícone em botões Adicione um Widget de botão no Elementor Não precisa definir classe Defina um ícone (como nesse exemplo usei uma arrow right) Cole esse código no botão (Avançado/Custom CSS) Código CSS Copiar Código selector .elementor-button-icon { font-size: 55px; /* aumente por aqui o tamanho do ícone */ color: inherit; } selector .elementor-button-text { margin: auto; } Como descrito no código, você poderá alterar o valor ali (55px) para o tamanho que quiser do Ícone.