¿Te gusta el estilo del menú al pasar el ratón por encima en el GIF anterior? Puedes añadir un efecto de atenuación similar al contenido del menú hover con el CSS. De este modo, los visitantes se centrarán más en el menú de navegación, lo que mejorará la conversión.
¿Por qué utilizar un menú Hover Dim?
- Mayor concentración: Al atenuar momentáneamente el contenido, el menú se convierte en el centro de atención visual, dirigiendo la mirada de los visitantes hacia las opciones de navegación.
- Mayor claridad: Al reducir el desorden visual, la navegación resulta más fácil de escanear y comprender, sobre todo para los usuarios con deficiencias visuales.
- Experiencia de usuario mejorada: La transición suave crea una sensación más pulida e interactiva, lo que repercute positivamente en la calidad general de su sitio web.
Cómo implementar el menú Hover Dim
Astra, tienen un Personalizador integrado donde puedes modificar directamente varios ajustes.
- Desde el panel de control de WordPress, vaya a la sección "Apariencia" y busque la opción "Personalizar".
- Dentro del Personalizador, busca una pestaña o sección llamada "CSS adicional". Aquí es donde puedes añadir tu propio código CSS para personalizar los estilos de tu sitio web.
- Copie y pegue el siguiente fragmento de código en el editor de CSS:
/* Dim content on menu hover */
#encabezado:hover~#contenido {
opacidad: 0.1;
transición: all 0.5s linear 0.1s;
}
#content {
transition: all 0.5s linear 0.1s;
}
- Pulse el botón "Publicar" para aplicar los cambios.
- Vuelva a su sitio web y pase el ratón por encima del menú para ver el efecto en acción.
No olvide probar y ajustar el efecto para adaptarlo al diseño general de su sitio web y a las preferencias del público.
Esperamos que este documento le haya sido útil. No dude en dejarnos un comentario a continuación si tiene alguna duda.
