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;}
}
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
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
Diseñador web WordPress