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

Cómo crear un efecto copo de nieve en Elementor - Portada

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 pegare 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.

«Recuerda 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

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;}
}

Nota: Descarga las imágenes, sube 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 CSS Clases escribes: snow-bg

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 este en un widget, puedes pegar el código en la parte avanzado del widget, aunque funcionaria en la misma página o post.

Sobre el autor
Publicaciones Relacionadas
Scroll to Top