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:

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/2023/05/christmas-snow-effects1.png'), url('https://pleybast.com/wp-content/uploads/2023/05/christmas-snow-effects2.png'), url('https://pleybast.com/wp-content/uploads/2023/05/christmas-snow-effects3.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.

¿Qué opinas sobre el tema? Déjame un comentario en este momento

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Información de Privacidad:
Responsable: Anthony Malla (privacidad@pleybast.com)
Finalidad del tratamiento: Controlar el spam, gestionar los comentarios
Legitimación: Tu consentimiento
Comunicación de los datos: No se cederán datos a terceros, salvo obligación legal
Derechos: Acceso, rectificación, portabilidad, olvido

 

Scroll al inicio