Todo lo que necesitas saber sobre las interacciones Divi 5

Si desea atraer a los visitantes con ventanas emergentes dinámicas, alternar y efectos de desplazamiento sin un complemento o CSS personalizado, le encantará uno de los últimos lanzamientos de funciones Alpha Divi 5. Las interacciones en Divi 5 permiten a los usuarios de Divi crear elementos interactivos e atractivos dentro del constructor visual. En esta publicación, nos sumergiremos en todo lo que necesita saber sobre las interacciones Divi 5, explorando sus características, algunos consejos y aplicaciones del mundo real para ayudarlo a familiarizarse con la función.

Nota importante: Divi 5 se encuentra actualmente en Alpha Public y optimiza para nuevos sitios web. No recomendamos migrar los sitios Divi 4 existentes debido al desarrollo continuo y posibles problemas de compatibilidad con los módulos heredados. ¡Estén atentos para las actualizaciones ya que Divi 5 se acerca a su lanzamiento completo!

Vamos a hacerlo.

¿Qué son las interacciones Divi 5?

Divi 5 Interactions es un constructor de cualquier cosa que le permita crear elementos interactivos para su sitio web directamente dentro del Visual Builder. Mucho más que un solo constructor emergente, esta característica le permite crear una gama de interacciones personalizadas, desde ventanas emergentes hasta animaciones activadas por desplazamiento, todo sin tocar una línea de código.

Suscríbete a nuestro canal de YouTube

Integrado sin problemas en la pestaña avanzada de cualquier módulo, columna, fila o sección, las interacciones ofrecen flexibilidad ilimitada para construir experiencias atractivas y centradas en el usuario.

Los componentes centrales de las interacciones Divi 5

En el corazón de las interacciones Divi 5 hay tres componentes clave que trabajan juntos para dar vida a sus diseños:

Eventos de activación

Los desencadenantes son los eventos que inician una interacción. Los ejemplos incluyen acciones del usuario como hacer clic en un botón o pasar el ronco sobre una imagen, eventos basados en desplazamiento como alcanzar un punto específico en una página o desencadenantes basados en el tiempo como un retraso después de una carga de página.

Los desencadenantes disponibles incluyen:

• Haga clic : Un usuario hace clic en un botón, imagen u otro elemento para iniciar una interacción.
• Ingrese/salida del mouse: un usuario se cierne o deja un elemento.
• Viewport Ingrese/Salida: un elemento entra o sale del área visible de la pantalla a medida que el usuario se desplaza.
• Carga: una interacción comienza cuando la página se carga, con un retraso de tiempo opcional.

Por ejemplo, puede activar una ventana emergente 5 segundos después de que una página se carga o animar un elemento cuando un usuario se desplaza.

Acciones de efecto

Una vez que se activa un desencadenante, los efectos determinan qué sucede. Las opciones incluyen mostrar o ocultar elementos, animar con fades, escalas, rotación o aplicar transiciones preestablecidas para un estilo consistente.

• Visibilidad de alternativa: cambia de un elemento entre visible y oculto.
• Show/Hide Element: hace que un elemento sea visible o oculto.
• Talgle Preset: enciende o apaga un preajuste para un elemento de diseño con la capacidad de reemplazar un preajuste existente.
• Agregar preajuste: se usa para agregar una clase de estilo preestablecido a un elemento. También puede reemplazar los presets existentes.
• Eliminar el preajuste: use para eliminar un estilo preestablecido de un elemento.
• Atributo de palanca: agrega o elimina el atributo HTML de un elemento, como una clase CSS o ID CSS.
• Agregar atributo: esto agrega un valor de atributo HTML específico donde actualmente no existe.
• Eliminar atributo: elimina cualquier atributo aplicado a un elemento.
• Cookie de al revés: agrega o elimina un valor de cookie. Por ejemplo, puede configurar una cookie cuando aparece una ventana emergente y establecerla solo aparece una vez que usa la configuración de condición de Divi 5.
• Agregar cookie: agrega un valor de cookie que puede definir al navegador del usuario.
• Retire la cookie: elimina una cookie previamente especificada.
• Desplácese al elemento: permite que la página se desplazara sin problemas, poniendo en cuenta el elemento de destino.
• Movimiento del mouse espejo: le permite establecer un movimiento que siga los movimientos del mouse del usuario. Las opciones incluyen traducir, escala, opacidad, inclinación o rotación. También puede ajustar la sensibilidad del movimiento.

Apuntar a un módulo

El objetivo es el elemento que afecta la interacción, como un módulo, fila, columna o sección completa. Puede dirigirse al elemento en sí u otro elemento en la página, ofreciendo flexibilidad para crear interacciones complejas.

Características clave de las interacciones Divi 5

Las interacciones Divi 5 se destacan para su conjunto de características fáciles y versátiles:

• Sin interfaz de código: configure los desencadenantes, los efectos y los objetivos a través de una interfaz intuitiva dentro de la pestaña avanzada de cualquier elemento sin usar CSS o JavaScript.
• Diversos tipos de interacción: cree ventanas emergentes para la captura de plomo, alternar para las preguntas frecuentes, desvanecimientos activados por desplazamiento para secciones de héroes o efectos de mouse similares a paralaje para carteras.
• Rendimiento liviano: construido directamente en Divi 5, las interacciones eliminan la necesidad de complementos de terceros, reducen la hinchazón del sitio y mejoran los tiempos de carga.
• Combinaciones de activación dinámica: combine múltiples desencadenantes, como un evento de desplazamiento con un retraso de tiempo, para interacciones sofisticadas como una ventana emergente que aparece después de que un usuario se desplaza por la página.
• Diseño receptivo: personalice las interacciones de escritorio, tabletas y móviles utilizando puntos de interrupción receptivos personalizables de Divi 5.

Cómo acceder y usar interacciones Divi 5

Crear una interacción en Divi 5 es sencillo, gracias a su integración dentro del constructor visual. Siga estos simples pasos para comenzar:

Comience abriendo una página en Divi 5. Elija un módulo, fila, columna o sección a la que desea agregar una interacción. Por ejemplo, seleccione un módulo de imagen en su página.

Navegue a la pestaña avanzada y haga clic en el menú desplegable de interacciones . Haga clic en el botón de interacción Agregar desde allí.

Queremos crear un efecto de inclinación/transformación del mouse para nuestra imagen. Para hacer esto, necesitaremos crear dos interacciones, una para la imagen y otra para la columna que contiene la imagen. Comience por darle un nombre a su interacción en la etiqueta de administración , luego ingrese la siguiente configuración:

• Evento de activación: Mouse Enter
• Acción del efecto: movimiento del ratón espejo
• Módulo de destino: imagen
• Retraso de tiempo: 0
• Tipo de movimiento: traducir
• Sensibilidad: 10

Una vez que todas las configuraciones estén en su lugar, haga clic en el botón Guardar interacción para continuar.

A continuación, crearemos la interacción de transformación en la columna. Haga clic en la interacción + Agregar una vez más. Ingrese la siguiente configuración para crear la interacción:

• Etiqueta de administración: columna de inclinación
• Evento de activación: Mouse Enter
• Acción del efecto: movimiento del ratón espejo
• Módulo de destino: columna
• Retraso de tiempo: 0
• Tipo de movimiento: inclinación
• Sensibilidad: 30

Una vez que se ingresan la configuración, su interacción debe verse así:

Use el botón Vista previa para ver su interacción.

Su página aparecerá en una nueva pestaña, lo que le permitirá obtener una vista previa y probar su interacción.

Tipos de interacciones que puede crear

Aquí hay algunos ejemplos prácticos para mostrar la versatilidad de las interacciones Divi 5, completa con desencadenantes, efectos y aplicaciones del mundo real.

Bienvenido ventana emergente para nuevos visitantes

Las ventanas emergentes son excelentes para instar a los visitantes a inscribirse en boletines, promociones o eventos. Con las interacciones Divi 5, puede crear una ventana emergente de bienvenida que aparece después de que se carga una página.

Para crear esta interacción, deberá crear una sección para su ventana emergente y asignar la siguiente configuración:

• Etiqueta de administración: ventana emergente
• Evento de activación: carga
• Acción del efecto: Mostrar elemento
• Módulo de destino: Sección (Pop-Up): asegúrese de nombrar su sección antes de crear la interacción
• Retraso de tiempo: 5 segundos

También tendremos que crear una interacción para cerrar la ventana emergente. La forma más fácil es agregar un módulo de icono a la esquina superior derecha de la sección emergente y asignar la siguiente configuración:

• Etiqueta de administración: botón de cierre
• Evento de activación: haga clic
• Acción del efecto: Elemento Ocultar
• Módulo de destino: sección (ventana emergente)
• Retraso de tiempo: 0

Para controlar la colocación de su ventana emergente, use la configuración de posición de Divi 5. En la pestaña Avanzada , ubique el menú desplegable de posición y configure la posición en fijación . Desde allí, elija la ubicación que desea que aparezca la ventana emergente en la página. En este ejemplo, lo tenemos configurado en el centro . También es una buena idea establecer el índice Z para que la ventana emergente aparezca por encima de todo en la página, como 99999 .

El último paso es establecer la visibilidad de la ventana emergente a ocultar en todos los dispositivos. Para hacer esto, navegue hasta la pestaña avanzada , desplácese al menú desplegable de visibilidad y altere todas las opciones para ocultar la sección emergente en todos los dispositivos.

Alternar la visibilidad de un elemento

Los toggles son perfectos para crear secciones de contenido plegables como preguntas frecuentes, menús de acordeón, tablas de precios o servicios. Permiten a los usuarios expandir o colapsar contenido con un clic, manteniendo su página limpia e interactiva. Por ejemplo, puede revelar una lista completa de servicios que solo es visible una vez que se hace clic en un botón.

Para crear este efecto, establecerá una interacción en el botón que desea establecer como disparador para su sección. Ingrese la siguiente configuración para la interacción:

• Etiqueta de administración: Show Services
• Evento de activación: haga clic
• Acción del efecto: Mostrar elemento
• Módulo de destino: Sección (Servicios de revelación)
• Retraso de tiempo: 0

A continuación, configure el enlace de anclaje para abrir la sección. Abra la configuración del botón e ingrese #Services en el campo URL de enlace del botón de la pestaña Contenido.

Haga clic en la sección Características debajo del botón y navegue hasta la pestaña avanzada. Establezca el ancla agregando servicios al campo de identificación CSS en el menú ID y clases CSS.

Mientras esté en la pestaña Avanzada, también necesitará establecer la visibilidad de la sección en Hidden, como lo hicimos con nuestra ventana emergente.

Efectos de movimiento de ratones

Las interacciones Divi 5 le permiten crear efectos dinámicos de movimiento del mouse cuando un usuario se cierne sobre un elemento de diseño. Por ejemplo, puede combinar interacciones para crear un efecto de inclinación en un encabezado y la columna principal.

Deberá crear una interacción para el encabezado primero para lograr esta interacción. Ingrese la siguiente configuración en la pestaña avanzada de la imagen:

• Etiqueta de administración: encabezado animado
• Evento de activación: Mouse Enter
• Acción del efecto: movimiento del ratón espejo
• Módulo de destino: texto
• Retraso de tiempo: 0
• Tipo de movimiento: inclinación
• Sensibilidad: 30

Cuando se ingresan la configuración, deben parecerse a la captura de pantalla a continuación.

A continuación, establezca una interacción en la columna que contenga el encabezado utilizando la siguiente configuración:

• Etiqueta de administración: columna inclinación
• Evento de activación: Mouse Enter
• Acción del efecto: movimiento del ratón espejo
• Módulo de destino: columna
• Retraso de tiempo: 0
• Tipo de movimiento: inclinación
• Sensibilidad: 50

Una vez completada, su configuración debe parecer similar a la captura de pantalla a continuación.

Interacciones basadas en preetos

Puede usar interacciones Divi 5 junto con preajustes para crear efectos con los desencadenantes de Mouseover o Viewport Ingrese/Salida. Por ejemplo, si desea mostrar una sección en su página cambiando el color de fondo o agregando un estilo de sombra de borde, puede usar interacciones para hacerlo. En el siguiente ejemplo, el color de fondo, el ancho y el borde cambian cuando un usuario se cierne sobre la sección.

Para crear este efecto, primero deberá crear un preajuste para mostrar la sección antes y después de MouseOver. En este ejemplo, hemos creado dos, uno con un fondo amarillo sólido y otro con varios efectos y un fondo verde.

Una vez que se crean sus preajustes, puede usar interacciones para alternar los cambios en el flotador. Comience creando la primera interacción con la siguiente configuración:

• Etiqueta de administración: fondo amarillo
• Evento de activación: Mouse Enter
• Acción del efecto: alternar preset
• Módulo de destino: sección (precio)
• Retraso de tiempo: 1 segundo
• Preset: fondo amarillo

A continuación, cree una segunda interacción para el mouse-over ingresando la siguiente configuración:

• Etiqueta de administración: fondo verde
• Evento de activación: salida del mouse
• Acción del efecto: alternar preset
• Módulo de destino: sección (precio)
• Retraso de tiempo: 0
• Preset: Preset verde

Beneficios del uso de interacciones Divi 5

Las interacciones Divi 5 ofrecen un enfoque potente y simplificado para crear sitios web, ofreciendo una gama de ventajas que lo convierten en una característica destacada para los usuarios de Divi. Aquí hay una mirada más profunda a por qué esta característica es una adición tan útil a Divi 5:

1. No se requieren complementos

Debido a que las interacciones Divi 5 están integradas en el núcleo de Divi, elimina la necesidad de complementos de terceros para crear ventanas emergentes y otras interacciones. Este enfoque nativo reduce la cantidad de scripts que se ejecutan en su sitio, lo que lleva a tiempos de carga más rápidos y métricas de rendimiento mejoradas.

Por ejemplo, en lugar de confiar en un complemento emergente, Divi 5 interacciones maneja todo dentro del constructor visual, asegurando una base de código más delgada y una experiencia de usuario más suave. Esto también significa menos actualizaciones para administrar y menores riesgos de conflictos de complementos, lo que hace que su sitio sea más confiable.

2. Es fácil de usar

Las interacciones Divi 5 se diseñan intuitivamente, lo que requiere solo unos pocos clics para crear interacciones. Los principiantes pueden comprender rápidamente los conceptos básicos, y los desarrolladores profesionales pueden sumergirse en combinaciones complejas sin escribir una sola línea de código.

La configuración de interacciones se organiza perfectamente dentro de la pestaña avanzada de cualquier elemento, con etiquetas claras y información sobre herramientas que lo guían a través de todo el proceso. Por ejemplo, configurar una ventana emergente requiere unos pocos clics para seleccionar un desencadenante y un efecto, lo que facilita que cualquiera use.

3. Libertad para personalizar

La flexibilidad de las interacciones Divi 5 y su vasta configuración (desencadenantes, efectos y objetivos, le permite crear experiencias únicas para los visitantes de su sitio. Puede mezclar múltiples desencadenantes, como combinar una ventana de grano basada en el desplazamiento con un retraso de tiempo, para crear interacciones sofisticadas, como un banner promocional que se desvanece después de que un usuario se desplaza a mitad de la página.

La capacidad de apuntar a cualquier módulo, fila, columna o sección significa que puede aplicar los efectos con precisión donde sea necesario, ya sea animar un solo botón o transformar una sección de héroe completa.

4. Compromiso mejorado del usuario

Los elementos interactivos aumentan la participación del usuario al hacer que los sitios web sean más inmersivos y receptivos. Las interacciones Divi 5 ayudan a mantener a los visitantes en su sitio alentando la interacción, como hacer clic en alternancias para revelar precios alternativos o activar ventajeras ventajeras para la captura de plomo. Por ejemplo, un sitio web de restaurantes podría usar una animación activada por desplazamiento para revelar una sección de menú.

Consejos prácticos para comenzar

Para aprovechar al máximo las interacciones Divi 5, abordarlo estratégicamente para garantizar resultados óptimos. Aquí hay algunos consejos para guiarlo a través del proceso:

• Comience simple: comience con interacciones sencillas como ventanas emergentes o alternar para familiarizarse con la función antes de abordar los efectos avanzados como el movimiento del mouse o las animaciones de múltiples actividades.
• Use el campo de etiqueta de administración: etiquetar sus interacciones y elementos es crucial, especialmente en páginas complejas con múltiples secciones. Agregar un nombre al campo de etiqueta de administración en la pestaña de contenido de cada módulo le permite mantener las cosas organizadas y reconocer fácilmente el elemento de destino correcto.
• Use preajustes: el sistema preestablecido de Divi 5 es excelente para ahorrar tiempo y mantener la consistencia entre las interacciones. Los preajustes le permiten definir estilos reutilizables, como una animación de desvanecimiento o una transición de color, y aplicarlos a múltiples elementos.
• Pruebe a fondo: Vista previa siempre sus interacciones utilizando la función de vista previa de Divi 5 para atrapar cualquier problema antes de publicar. También puede usar los puntos de interrupción sensibles a los personalizables de Divi 5 para probar cómo se comportan las interacciones en todos los dispositivos.

Eleve su sitio web con interacciones Divi 5

Las interacciones Divi 5 es la característica perfecta para crear elementos interactivos atractivos y sin código para impulsar la experiencia de usuario de su sitio web. Desde ventanas emergentes que la captura conducen a animaciones activadas por desplazamiento que dan vida a sus diseños, esta característica permite a cualquiera construir sitios web dinámicos y profesionales sin tocar una línea de código. Su integración ligera y sus diversas opciones de activación lo convierten en una herramienta esencial para el diseño web moderno.

¿Listo para comenzar? Descargue el último Alpha Divi 5 y sumérjase en interacciones para crear ventanas emergentes, contenido alternado, efectos de desplazamiento y más. Una nota rápida: Divi 5 está listo para nuevos sitios web, pero todavía no recomendamos usarlo en sitios existentes.

Comente a continuación o comuníquese con nuestros canales de redes sociales para compartir sus creaciones con nosotros. ¡Nos encantaría verlos!