Interacciones para Divi 5 (ventanas emergentes, alternar, efectos del mouse y más)

Hoy, estamos entusiasmados de lanzar interacciones para Divi 5, un sistema robusto para crear elementos interactivos como ventanas emergentes y toggles, y efectos creativos basados ​​en desplazamiento y basados ​​en el movimiento del ratón.

No es un constructor emergente; Es un constructor de cualquier cosa . Cree un desencadenante, asigne un efecto, elija un objetivo y le haga realidad sus interacciones personalizadas. Puedes hacer tantas cosas increíbles con este sistema, y ​​no puedo esperar para mostrarte cómo funciona, así que vamos a entrar.

Mira el siguiente video para ver la nueva función en acción.

Construye tus propios elementos interactivos

Notará un nuevo grupo de interacciones en la pestaña avanzada de todos los elementos. Al hacer clic en el botón Agregar interacción, abrirá el editor de interacción, donde puede configurar el disparador, el efecto y el objetivo de cada interacción.

El desencadenante inicia la interacción, como al hacer clic o pasar el cierre. El efecto ocurre cuando se activa la interacción, como la visibilidad de alternar, el preajuste o el atributo, y el objetivo es el elemento afectado en la página.

Ejemplos de interacción

Antes de profundizar en estos entornos, permítame mostrarle algunos ejemplos de lo que las interacciones pueden lograr.

Ejemplo 1: Construir una ventana emergente

En el ejemplo de video a continuación, utilicé interacciones para crear una ventana emergente.

Agregué un disparador de ventanas gráfica Intro a una sección, que aplica el efecto de visibilidad de alternativa a mi ventana emergente. La sección ingresa a mi visión, desencadenando la visibilidad de la ventana emergente y se desliza en el uso de la configuración de animación de Divi.

Además, un módulo de icono dentro de la ventana emergente tiene una interacción basada en clic, que altera la visibilidad en la ventana emergente para cerrarla. ¡Puede crear cualquier tipo de pancarta emergente o flotante!

Ejemplo 2: Construir una palanca

En el ejemplo de video a continuación, utilicé interacciones para alternar tablas de precios mensuales y anuales.

Agregué dos interacciones a una fila para alternar la visibilidad de alternar secciones de precios anuales y mensuales. A continuación, agregué dos interacciones más para alternar la visibilidad de dos módulos de iconos, dando al usuario retroalimentación adicional al hacer clic.

Ejemplo 3: Transición entre preajustes

Uno de los efectos más poderosos es el efecto preestablecido. Dado que los preajustes le permiten modificar la configuración de un elemento, no hay límite para lo que puede hacer. Cuando un desencadenante cambia el preajuste en un elemento objetivo, puede transformarlo de muchas maneras.

En el ejemplo de video a continuación, configuré dos interacciones para agregar y eliminar un preajuste en una fila a medida que ingresa y sale de la ventana gráfica. El preajuste destacado cambia el color y la escala de fondo de la fila, y agrega una sombra de caja, captando la atención de los usuarios mientras se desplazan hacia abajo en la página.

Ejemplo F: efectos de movimiento del ratón

Los efectos basados ​​en el movimiento del ratón de los sistemas de interacción son muy divertidos.

En el ejemplo de video a continuación. Agregué varias interacciones a una sección de héroes, dirigiendo varios elementos con efectos basados ​​en el movimiento del ratón de sensibilidades variables.

Las interacciones se activan en el mouse ingresan, aplicando opacidad, movimiento e efectos de inclinación en los elementos que cambian a medida que mi mouse se mueve. También agregué una interacción al módulo de botón, que alterna un preajuste para cambiar el estilo del esquema cuadrado.

¡Las posibilidades son infinitas!

Podría seguir y seguir con diferentes ejemplos, y estoy emocionado de ver qué se te ocurre.

Mirando el editor de interacción más de cerca, puede ver algunos efectos adicionales para jugar con que aún no he mencionado, como alternar atributos, cookies y desplazarse a los elementos.

Por ejemplo, puede usar efectos de atributos para cambiar las clases de CSS de un elemento, ID o cualquier otra cosa.

La versión uno de las interacciones admite los siguientes efectos:

• Visibilidad de alternativa : cambia un elemento entre los estados visibles y ocultos automáticamente.
• Elemento de exhibición : hace que un elemento oculto sea visible.
• Ocultar elemento : hace un elemento visible oculto.
• Termine Preset : enciende un preajuste de un elemento preestablecido para un elemento, con un reemplazo opcional de los presets existentes.
• Agregar preajuste : aplica una clase de estilo preestablecido a un elemento, con un reemplazo opcional de los presets existentes.
• Eliminar el preajuste : elimina una clase de estilo preestablecido de un elemento.
• Atributo Toggle : agrega o elimina el valor de atributo HTML específico de un elemento, como una clase CSS e ID.
• Agregar atributo : agrega un valor de atributo HTML específico a un elemento si aún no existe.
• Eliminar atributo : elimina un valor de atributo HTML específico de un elemento.
• Alternar galleta : agregue o retire un valor de galleta de una galleta. Por ejemplo, establezca una cookie cuando una ventana emergente parece rastrear cuando un usuario ha visto una ventana emergente. Luego, use las opciones de condición de Divi para ocultar la ventana emergente en futuras visitas de página para ese usuario.
• Agregue Cookie : agrega un valor de cookie y cookies que defina al navegador del visitante.
  Retire la cookie : retire una galleta especificada.
• Desplácese al elemento : desplaza suavemente la página para ver el elemento de destino.
• Movimiento del ratón espejo : hace que el elemento objetivo siga el movimiento del mouse dentro del elemento de activación utilizando varios tipos de movimiento (traducir, escala, opacidad, inclinar o girar) con sensibilidad ajustable.

Prueba Divi 5 hoy

Las interacciones para Divi 5 están disponibles hoy, y es una de las muchas características que llegan a Divi este año.

Puede seguirlo a medida que avanzamos a través del lanzamiento final de Divi 5 y más allá, con actualizaciones cada dos semanas. Dependiendo de sus prioridades, puede usar Divi 5 ahora para crear nuevos sitios web o esperar hasta que agregemos más funciones, lo que sea que funcione mejor para usted.

Como se describe en el cronograma original de lanzamiento de múltiples fases de Divi 5, el Alfa Public Public Divi 5 es como "Divi 5 Lite". Falta algunas características y puede no ser adecuada para los sitios web existentes, pero está listo para usarse en nuevos sitios web si prefiere la experiencia a Divi 4.

Queremos que lo pruebes, y si te encanta, úsalo; Cuando a todos les encanta, lo haremos oficial.

¿Has probado los colores relativos?

En caso de que se lo haya perdido, recientemente lanzamos colores relativos para Divi 5, convirtiendo a Divi en el claro líder en gestión de color y sistema de color avanzado. Le permite crear sistemas de color matemáticamente hermosos basados ​​en variables con relaciones de color anidadas utilizando HSL. No quieres dormir en esta función.

Mira este video para ver todos los detalles.

Más actualizaciones de Divi 5 están en camino

2025 es el año de Divi 5 . El tedioso trabajo está detrás de nosotros. Construimos la base súper rápida, y ahora es el momento de que Divi regrese.

Si estás aquí para el regreso de Divi, haznos un gran favor y háganos saber que me gusta este video y dejando un comentario. Significa mucho para nosotros verte animando la división, y es esencial alimentar el algoritmo y correr la voz.

No olvide seguirnos en YouTube y suscribirse al boletín de Divi para que nunca se pierda una actualización. Te veré pronto para otro anuncio de la función Divi 5, que prometo estará a la vuelta de la esquina.