Usando las Opciones de Transición de Divi

Usando las Opciones de Transición de Divi


Las opciones de transición de Divi te permiten controlar la duración, el retraso y la curva de velocidad de cualquier animación al pasar el cursor.


Las opciones de transición de Divi te permiten controlar la duración, el retraso y la curva de velocidad de la animación al pasar el cursor que hayas aplicado a un elemento.

Esto te brinda más control sobre cómo se animan las animaciones al pasar el cursor en tu página. En esta guía, repasaremos cómo acceder a las opciones de transición, cómo usarlas y más recursos sobre el tema.

Cómo acceder a las opciones de transición

Las opciones de transición están disponibles en todas las secciones, filas y módulos de Divi.

Abre la ventana modal de configuración del elemento haciendo clic en el icono de engranaje

Ve a la pestaña Avanzado → Transiciones.

Accessing the Divi Transition Options


Todas las opciones de transición de Divi explicadas

Los tres componentes principales para ajustar transiciones son la duración de la transición, el retraso y la curva de velocidad.

Todos trabajan juntos para ajustar el aspecto y la sensación de tus transiciones. Sin embargo, la duración de la transición debe ser siempre mayor que 0 para que las demás configuraciones de transición también tengan efecto.

Duración de la transición
Controla la duración de la animación al pasar el cursor, medida en milisegundos. Arrastra el deslizador para aumentar o disminuir la duración de la animación.

Ejemplo: Un efecto de transformación en el diseño de abajo agranda la imagen al pasar el cursor. Ajustaremos la duración de la transición para mostrar cómo un número mayor alarga la animación y un número menor la hace más rápida.

Divi Transition Duration

Retraso de la transición

Controla el retraso de la animación al pasar el cursor, medido en milisegundos. Aumenta el retraso arrastrando el deslizador hacia la derecha.

Curva de velocidad de la transición

Controla la curva de velocidad de la animación al pasar el cursor.

Ease-In-Out es una transición más suave y sutil, mientras que Linear es una transición más rápida y directa. Veamos un ejemplo de cada una.

Divi Transition Speed Curve

Ease-In-Out

Una transición con inicio lento y final lento.

Divi Transition Speed Curve - Ease in out

Ease

Una transición que inicia lentamente, luego acelera y termina lentamente.

Divi Transition Speed Curve - Ease

Ease-In

Una transición que comienza lentamente.

Divi Transition Speed Curve - Ease in

Ease-Out

Una transición que termina lentamente.

Divi Transition Speed Curve - Ease out

Linear

Una transición que mantiene la misma velocidad desde el inicio hasta el fin.

Divi Transition Speed Curve - Linear

Más recursos sobre las opciones de transición de Divi

  1. Cómo crear hermosas transiciones de sección usando las nuevas características de diseño de Divi
  2. Cómo activar transiciones de imagen con las opciones sticky de Divi
  3. Cómo combinar solapamientos con las opciones sticky de Divi para crear transiciones sin esfuerzo
  4. Cómo diseñar una sección hero con transiciones y animaciones personalizadas en Divi
  5. Cómo combinar solapamientos con las opciones sticky de Divi para crear transiciones sin esfuerzo
    • Popular Articles

    • Guía de Negocio para Resellers y Partners

      En esta Guía de Negocio vamos a analizar los 8 puntos más importantes a tener en cuenta si te estás planteando lanzar tu Propio Negocio de Apps: ¿Cuánto puedes ganar con un Negocio de Apps? Demo de Scoreapps: Cómo crear Apps y Monetizarlas ¿Qué ...
    • Ver una Demo de Scoreapps para Resellers

      En este vídeo te explicamos el modelo de negocio, los tipos de Apps que puedes crear y las distintas herramientas que incluye Scoreapps en su Plan de Resellers: Y en este otro vídeo te enseñamos cómo funciona el software por dentro:
    • Proporciona acceso a tus Aplicaciones

      Con el Plan Reseller o Plan Partner puedes otorgar fácilmente a tus clientes o colaboradores acceso a tus aplicaciones. Accede a tu Panel de Apps, y después accede a cualquier Aplicación: Una vez dentro del constructor de Apps, ve a Mi Cuenta - ...
    • Cómo Crear una App de Tienda

      El comercio electrónico desde dispositivos móviles se disparó desde comienzos de 2020 debido a la Pandemia del Covid19 y sigue creciendo a tasas del 45% anual. Hoy en día, contar con una App de Tienda resulta imprescindible para cualquier negocio de ...
    • Cómo diseñar la pantalla de inicio o portada de una App

      En el video que te mostramos a continuación te explicamos cómo diseñar la pantalla de inicio de una App:
    • Related Articles

    • Usando las Opciones de Transformación de Divi

      Las opciones de transformación de Divi son un conjunto de herramientas poderosas que te permiten manipular el diseño web de formas sorprendentes, creando profundidad y efectos visuales atractivos. Las opciones de transformación de Divi te permiten ...
    • Uso de las Opciones de Sombra de Caja en Divi

      Las opciones de sombra de caja en Divi te permiten darle a cualquier elemento de la página la ilusión de profundidad. Las sombras proyectadas son una forma creativa de dar vida a los elementos de diseño de tu sitio web. Pueden resaltar elementos e ...
    • Opciones Sticky de Divi

      Presentamos el sistema sticky más completo en cualquier creador de páginas para WordPress Las Opciones Sticky de Divi son una nueva función que te permite fijar cualquier elemento en la parte superior y/o inferior de la ventana del navegador mientras ...
    • Uso de las Opciones de Tamaño en Divi

      Las Opciones de Tamaño de Divi facilitan el ajuste del tamaño de secciones, filas, columnas y módulos en Divi. Las Opciones de Tamaño de Divi hacen que ajustar el tamaño de secciones, filas, columnas y módulos sea sencillo. El tamaño es una parte ...
    • Uso de las Opciones de Espaciado en Divi

      Es fácil personalizar el espaciado en secciones, filas y módulos con las Opciones de Espaciado de Divi. El espaciado es un elemento importante en el diseño web. Ayuda a organizar tu contenido y mantener las cosas claras y equilibradas. Con Divi, es ...