Accediendo a las opciones de hover avanzadas

Uso de las Opciones de Hover en Divi (Ejemplos)

---

Cómo Cambiar el Color del Texto del Cuerpo del Recuadro al Pasar el Cursor

• Haz clic en la pestaña Diseño

• Abre el grupo de opciones Texto del cuerpo

• Ve a Color del texto, pasa el cursor sobre él y haz clic en el ícono de hover

• Haz clic en la pestaña Hover

• Establece el color del texto en #ffffff

• Haz clic en el botón verde para guardar tus cambios

Uso de Opciones Hover en Secciones, Filas y Columnas

Las opciones hover también están disponibles dentro de secciones, filas y columnas.

Cambiar el Color de Fondo de una Columna

En el ejemplo a continuación, vamos a cambiar el color de fondo de una columna al pasar el cursor.

• Haz clic en el ícono de engranaje para abrir la ventana de configuración de la fila 
  

• Haz clic en el ícono de engranaje de cualquiera de las columnas

• Desde la pestaña Contenido, expande el grupo de opciones Fondo 
  

• Pasa el cursor sobre el fondo, haz clic en el ícono de hover y accede a la pestaña hover

• Cambia el color de fondo para el estado hover 
  

• Guarda los cambios

Y aquí está el resultado final:

Cambiar Estados Hover en Secciones y Filas

También puedes cambiar el contenido, diseño y opciones avanzadas al pasar el cursor en Secciones y Filas. Usa los mismos pasos mencionados arriba para acceder a esas opciones.

Cómo Controlar la Duración de la Transición de los Efectos Hover

Cuando se aplican efectos hover a un elemento, existe una velocidad y duración predeterminadas.

• Puedes ajustar la velocidad y duración del efecto hover navegando a la pestaña Avanzado → Transiciones y modificando los controles disponibles.

• Puedes ajustar la duración, el retraso y la curva de velocidad de la transición. Las opciones de transición están en la pestaña Avanzado de módulos, columnas, filas y secciones.
  

Además, puedes establecer un retraso para la transición si quieres que comience antes o después de otro efecto de transición.

Por último, hay una opción para establecer la curva de velocidad usando varias opciones.

Ejemplo: Un borde blanco de 50px se aplica a una imagen al pasar el cursor. La duración de la transición es de 300 ms sin retraso y la curva de velocidad es "Ease".

Tomando el mismo ejemplo anterior, ajustaremos la duración de la transición a 0 ms, sin retraso, y la curva de velocidad a "Linear".

¿Ves lo mucho más rápido y ágil que es? Ajustar estos parámetros te permite crear transiciones personalizadas que logran el efecto deseado.

Uso de Opciones de Transformación con Opciones Hover

Combinar las opciones de transformación con las opciones hover te da el poder de crear diseños aún más dinámicos.

Aquí tienes un ejemplo de algunos efectos que puedes lograr al combinar estas dos opciones.

Para aprender cómo recrear esta demostración, revisa este artículo de blog.

Consulta nuestra guía de Opciones de Transformación para aprender más.

Las Opciones Hover Son Específicas del Elemento

Las opciones hover se activan al pasar el cursor sobre el espacio de un elemento específico de Divi. El espacio hover se refiere a todo el elemento y el espacio dentro de él.

Jerarquía de Elementos Padre / Hijo

Al aplicar efectos hover en Divi, es importante recordar la jerarquía de Secciones, Filas, Columnas y Módulos:

• Las Secciones contienen Filas

• Las Filas contienen Columnas

• Las Columnas contienen Módulos

Estos se llaman elementos padre e hijo.

Los elementos hijos están anidados dentro de los padres y son afectados por cualquier estilo que apliques al elemento padre.

Las Opciones Hover se Configuran a Nivel de Elemento

Para entender cómo funcionan las opciones hover en Divi, es importante saber que se configuran a nivel de elemento. Cada elemento de Divi tiene su propio espacio hover, que corresponde al tamaño del elemento.

Aquí tienes una ilustración del espacio hover para cada elemento base.

Cada elemento tiene opciones hover integradas que se activan al pasar el cursor sobre ese elemento o cualquiera de los elementos hijos que contiene.

Ejemplo: Si has añadido opciones hover a una sección, solo esas opciones se activarán al pasar el cursor sobre la sección.

1. Al pasar el cursor sobre la fila dentro de la sección, se activarán las opciones hover de la fila. Pero, dado que la fila es hija de la sección, también se activarán las opciones hover de la sección.
   

1. Al pasar el cursor sobre la columna dentro de la fila, se activarán las opciones hover de la columna, así como las de su fila y sección padre.
   

1. Al pasar el cursor sobre el módulo dentro de la columna, se activarán las opciones hover del módulo y de sus elementos padres (columna, fila y sección).
   

1. Sin embargo, al pasar el cursor solo sobre una sección, no se activarán las opciones hover de los módulos.
   

Ejemplos de uso para las Opciones de Hover en Divi

Aplicar el efecto hover a botones de iconos y botones de redes sociales

Con Divi, puedes añadir efectos de hover simples y creativos a botones de iconos. Esto incluye también los botones para seguir en redes sociales.

Consulta este tutorial para crear efectos únicos de hover en botones de redes sociales con Divi.

Agregar efectos hover a imágenes y galerías de imágenes

Esto es ideal para imágenes y galerías que permiten mostrar una versión alternativa de la imagen (como en blanco y negro) al pasar el cursor.

Además, puedes combinar este efecto hover con la funcionalidad de lightbox clickeable.

Usar opciones de hover para mostrar u ocultar contenido

Esto es perfecto para llamadas a la acción o para mostrar productos destacados.

Para más detalles, mira cómo cambiar contenido con hover para crear llamadas a la acción únicas en Divi.

Aplicar opciones de hover a múltiples elementos activados simultáneamente
Las opciones de hover se aplican a cada elemento, pero pueden crear efectos hover simultáneos al pasar el cursor sobre elementos hijos.

Ejemplo: asegurando que todos los elementos ocupen todo el ancho del contenedor padre, compartirán el mismo espacio de hover.

Así, al pasar el cursor sobre cualquiera de esos elementos, se activarán los efectos hover de todos simultáneamente.

Aquí hay una fila, columna y módulo que comparten el mismo espacio de hover, por lo que el hover en esa área activa cada opción hover a la vez.

Para más información, consulta cómo activar efectos hover simultáneamente en Divi. También puedes combinar efectos hover en varios elementos para revelar contenido de forma ingeniosa.

Por ejemplo, puedes crear descripciones de servicios que aparezcan al pasar el cursor sobre una fila con múltiples columnas en Divi.

Usar desenfoque con hover para destacar contenido

Ejemplo: en un módulo de texto (blurb), puedes resaltar el módulo seleccionado desenfocando el resto del contenido en la página al pasar el cursor.

Preguntas frecuentes sobre las opciones de hover en Divi

• ¿Cómo convertir un elemento con efectos hover en un enlace clickeable?

• ¿Debería usar opciones de hover en móviles?

• ¿Cómo desactivo las opciones de hover en móviles?

• ¿Mostrar y ocultar contenido con hover afecta al SEO?

Consejos y mejores prácticas para opciones de hover

Sé intencional al usar opciones de hover

Por eso, generalmente se usan efectos hover en botones, porque la mayoría interpreta que un hover indica que es clickeable. Por suerte, Divi permite añadir enlaces a cualquier elemento para hacerlo clickeable, además del hover.

También puedes usar efectos hover para revelar contenido adicional e invitar a leer más, pero en la mayoría de los casos es mejor evitar usar hover solo por diseño.

Esto puede afectar negativamente la experiencia del usuario, dejando dudas sobre el propósito del efecto.

Las opciones de hover funcionan mejor en escritorio, no en móvil

Es bueno usar animaciones, pero siempre pensando en la experiencia del usuario.

Usa opciones de hover para destacar elementos

Considera usar hover para cambiar una línea importante de texto o un módulo de llamada a la acción. Los módulos de Botones, Llamadas a la acción y Texto son ideales para transmitir tu mensaje.

También puedes usar hover en columnas con información relevante, cambiando el color de fondo para resaltar contenido.

No abuses de las opciones de hover

Demasiados efectos pueden confundir a los visitantes y hacer que pierdan tu mensaje. Mantén los efectos mínimos y destaca solo las áreas más importantes.

Consejos para opciones de transformaciones en hover

Usa transform scale para aumentar el tamaño del elemento, junto con transform translate o rotate, para lograr el efecto sin distracciones.

Las transiciones funcionan muy bien en iconos o botones de icono para añadir microinteracciones (como escalar o girar).

La rotación es ideal para elementos circulares; para hacer un elemento circular, pon las esquinas redondeadas al 50% en las cuatro esquinas.

Continúa aprendiendo

• Cómo agregar iconos sociales con hover a imágenes de miembros del equipo con Divi

• Cómo revelar contenido con pestañas de esquina expansibles al pasar el cursor en Divi (descarga gratis)

• Cómo combinar efectos hover con fondos parallax CSS en Divi

• Cómo activar efectos hover simultáneamente en módulos, columnas y filas

• Cómo crear un llamado a la acción llamativo con simples efectos hover en Divi

• Cómo cambiar contenido con hover para crear llamadas a la acción únicas en Divi (3 maneras)