logooneasesoria4

¿Necesita una consulta gratuita?

Cómo cambiar de color automáticamente el menú o la cabecera @ Ayuda WordPress

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!

¿Te gustó este artículo?

Déjanos tus comentarios..!

10 de enero de 2024

RECIBE

GRATIS

Recursos para tu web GRATIS.

En agradecimiento por haber leido nuestro blog te ofrecemos algúnos plugins, temas y asesoría para el desarrollo de tu sitio web.
Envía correo y espera respuesta...Gracias..!
baneranunciopluginsbest
Publicaciones Relacionadas
Abrir chat
One Asesoría
Hola 👋
¿Necesita cotizar una página o tienda online, cómo podemos ayudarle..?