Aplicar efeitos visuais com CSS

Efeitos visuais por código no Easy Builder são aplicados via widget HTML com o CSS e uma classe no elemento; cuide para fechar o código e evitar conflito de classes.

Quando acontece

O efeito de cursor/luzes na página, o brilho (glow) em volta de um botão ou a animação de entrada não funcionam, ou o botão aparece com a cor errada.

Causa

O efeito depende de um código CSS aplicado a uma classe. Falhas comuns: o código não foi fechado corretamente (bugando o resto), ou há conflito de classes/cores (um CSS sobrepondo o outro, ex.: verde por cima do vermelho desejado).

Solução

1. Para efeitos que valem para a página toda (cursor, luzes): adicione um widget HTML e cole o código CSS no widget, ou cole na área de 'CSS Avancado'/CSS Personalizado da página.

2. Garanta que o código esteja completamente fechado (todas as chaves } e tags fechadas) para não bugar o restante.

3. Para efeitos em um elemento específico (glow no botão, animação de entrada): adicione a classe CSS ao elemento em 'Avancado' > campo de classe (ex.: efeito-entrada, animacao icone).

Exemplo — brilho (glow) num botão:

.glow {
  box-shadow: 0 0 20px rgba(166, 207, 0, 0.7);
  transition: box-shadow 0.3s ease;
}
.glow:hover {
  box-shadow: 0 0 35px rgba(166, 207, 0, 1);
}

O que faz: cria um brilho em volta do elemento que tem a classe glow, e o brilho aumenta ao passar o mouse. Troque a cor rgba(166, 207, 0, …) pela que quiser.

Como usar: cole no widget HTML (ou no CSS Personalizado da página) e ponha a classe glow no botão, em Avançado > campo de classe.

4. Se a cor/efeito não aplicar, verifique conflito de classes: um código anterior pode estar sobrepondo. Ajuste a hierarquia/ordem ou torne a classe mais específica.

5. A animação de entrada da extensão é vinculada ao scroll (entra e sai conforme a navegação) e é diferente das animações padrão do Elementor.

6. Se não souber escrever o código, gere com o Easy Coder.