Essa dica vai como resposta para o Henrique C R da comunidade Elementor Brasil no facebook, que queria criar um efeito “flutuante” em um item do Elementor, como na imagem abaixo:
Para fazer isso você vai precisar colar o seguinte código na página que você quer o efeito em : Configurações (aquela engrenagem pequena no canto inferior esquerdo da tela) > Avançado > Custom CSS
@keyframes float{
0%,100%{
box-shadow:0 5px 15px 0 rgba(0,0,0,.6);
transform:translatey(0)
}
50%{
box-shadow:0 25px 15px 0 rgba(0,0,0,.2);
transform:translatey(-20px)
}
}
.efeito-flutuante .elementor-button-wrapper a, .efeito-flutuante .elementor-image img {
animation: float 6s ease-in-out infinite;
}
E logo após vai aplicar isso na widget desejada como uma imagem ou botão e escreva efeito-flutuante através da guia Avançado > Classe CSS.
Após isso a widget já estará com o efeito desejado.
IMPORTANTE: testado apenas em imagens e botões.
Comente o que achou do post, se teve dificuldade para fazer ou foi tranquilo.
Forte abraço e até a próxima!
Alan Rezende
