No se han encontrado resultados. ¿Intentar de nuevo con otras palabras?

La búsqueda debe tener al menos 3 caracteres.

Atenuar el contenido al pasar el ratón por encima del menú

Astra Starter Sites

¿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.

¿Le ha resultado útil este artículo?
¿No ha encontrado una solución? Estamos aquí para ayudarle a conseguirlo.

Documentos relacionados

Astra es gratis. Ahora y siempre.

Creemos que crear sitios web atractivos no debería ser caro. Por eso Astra es gratis para todos. Empieza gratis y amplía con paquetes asequibles.

REWIND

RESUMEN DEL AÑO

La descarga está a un solo clic

Introduce tu dirección de correo electrónico y sé el primero en enterarte de las actualizaciones y novedades.

Descargar gratis Astra Theme - Modal Popup Form
Scroll al inicio
Ahora elija la opción que prefiera
page builder addon
Elija su complemento de creación de páginas preferido

La descarga está a un solo clic

Introduce tu dirección de correo electrónico y sé el primero en enterarte de las actualizaciones y novedades.

Descargar gratis Astra Theme - Modal Popup Form