Cómo crear un efecto de copo nieve navideña en Elementor

Cómo crear un efecto copo de nieve en Elementor

Realizar un efecto navideño es una manera atractiva para recibir al usuario que visita nuestro sitio. Para realizarlo debemos copiar y pegar un código CSS en Elementor.

En este ejemplo pegaré el código CSS en el widget encabezado:

Puedes escoger cualquier widget como los post, imágenes, etc. y has que tu imaginación vuele.

«Si deseas agregar código CSS debes tener Elementor Pro»

Paso 1: Ir al CSS de Elementor


Nos dirigimos a Ajustes del sitio / CSS personalizado:

Ajustes del sitio CSS personalizado

Paso 2: Copia y pega el código CSS


El siguiente código CSS pegas en el CSS personalizado:

.snow-bg {
position: relative;
}

.snow-bg:after {
content: '';
display: block;
position: absolute;
z-index: 2;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
background-image: url('https://pleybast.com/wp-content/uploads/2021/11/christmas-snow-effect.png'), url('https://pleybast.com/wp-content/uploads/2021/11/christmas-snow-effect2.png'), url('https://pleybast.com/wp-content/uploads/2021/11/christmas-snow-effect3.png');
animation: snow 10s linear infinite;
}

@keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
Cambio de URL navidad

Nota: Descarga las imágenes, súbelas a tu sitio y reemplaza las URL con las del código.

Paso 3: agrega la clase CSS


Escoge el elemento que le deseas dar el efecto, te diriges a la pestaña «Avanzado» y en el campo «Clases CSS» escribes: snow-bg

clases CSS

Importante: Si pegas desde ajustes del sitio el cambio es global, es decir, en cada widget solo escribes snow-bg, pero si deseas que solo esté en un widget, puedes pegar el código en la parte avanzado del widget, aunque funcionaria en la misma página o post.

Scroll to Top