En ocasiones, si queremos atrapar la atención del visitante, nos podemos plantear utilizar efectos visuales que le atraigan sobre elementos de nuestra web.
Un efecto muy chulo que he visto en algunas webs es que 1, que es lo que vamos a aprender a hacer hoy.
Cómo cambiar automáticamente el color de la cabecera principal de Divi
Empezaremos aprendiendo a hacer este truco con Divi, en concreto con su cabecera principal. Solo tienes que añadir un poco de código CSS en la sección de CSS adicional del personalizador de WordPress, como el de este ejemplo:
/* Cambiar colores de cabecera principal de Divi */ #main-header { -webkit-animation: random 15s infinite; animation: random 15s infinite; } @keyframes random { 15% { background-color: #e3ff87; } 30% { background-color: #ff7c96; } 45% { background-color: #6ffffa; } 60% { background-color: #ef6b30; } 75% { background-color: #bf69b1; } }
Por supuesto, puedes cambiar los colores de fondo, el tiempo de la animación del cambio (15s
) a lo que quieras. El efecto es, como puedes ver en el siguiente vídeo, espectacular…
Cómo cambiar automáticamente el color de la cabecera principal de Hello Elementor
Seguimos con otro tema y maquetador, en este caso la popular combinación de Hello y Elementor.
El código es básicamente lo mismo, solo cambia la clase CSS a la que aplicarlo, en este caso site-header
.
/* Cambiar colores de cabecera principal de Hello Elementor */ #site-header { -webkit-animation: random 15s infinite; animation: random 15s infinite; } @keyframes random { 15% { background-color: #e3ff87; } 30% { background-color: #ff7c96; } 45% { background-color: #6ffffa; } 60% { background-color: #ef6b30; } 75% { background-color: #bf69b1; } }
El resultado, igual de llamativo y sorprendente…
Cómo cambiar automáticamente el color de la cabecera principal de otros temas
Como ya habrás imaginado, este truco es igual de fácil aplicarlo a cualquier otro tema (clásico), solo tienes que identificar cuál es la clase CSS de su cabecera o zona de menús y cambiarla en el código.
¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!