Comprender la diferencia entre desencadenantes, efectos y objetivos en Divi 5

Las nuevas interacciones de Divi 5 usan un modelo simple: disparador, efecto, objetivo. Separe lo que lo inicia, lo que sucede y lo que cambia, y puede crear un movimiento claro y coordinado a través de su diseño. En esta publicación, explicaremos cada parte, mostraremos cómo encajan y caminaremos a través de un ejemplo rápido que puede reutilizar. ¡Vamos a hacerlo!

¿Qué son los desencadenantes, los efectos y los objetivos?

Las interacciones en Divi 5 se construyen a partir de tres partes móviles que funcionan juntas. Un desencadenante pone las cosas en movimiento, un efecto decide cómo se ve la respuesta y un objetivo define qué elemento cambia.

Suscríbete a nuestro canal de YouTube

Cuando configura una interacción, Divi le pedirá que complete las tres partes:

Comprender cada papel por separado facilitará la forma en que se conectan en un sistema completo.

El activador es lo que comienza

Cada interacción comienza con una acción inicial llamada desencadenante. Es el primer paso que el usuario da, como un clic del mouse, se desplaza o carga de página, que inicia la acción. Por ejemplo, mover el mouse sobre una tarjeta de precios pone la cadena en movimiento.

Por sí solo, un gatillo no hace nada. Necesita una respuesta.

El efecto es lo que sucede

Una vez que el gatillo se dispara, el efecto sigue. Aquí es donde decide la reacción, como inclinación, desvanecimiento, escala, desenfoque o cualquier mezcla de movimientos. Imagine esa misma escalada de tarjeta de precios ligeramente y agregue una sombra más profunda a medida que su cursor se cierne sobre él, ese es el efecto.

Finalmente, debe decidir dónde aplicar el efecto.

El objetivo es lo que cambia

El objetivo es simplemente el elemento que cambia cuando el disparador se dispara. El rondado es una interacción comúnmente utilizada, pero solo afecta el elemento en sí. En otras palabras, el elemento que inició la interacción (el disparador) también es el elemento que cambia (el objetivo).

Por ejemplo, flotar sobre una columna puede hacer esa misma escala de columna, ya que también es el objetivo.

Esto mantuvo todo confinado a un solo elemento. Todavía puedes configurar las cosas de esa manera en Divi 5, pero ya no estás limitado a ello.

Ahora el disparador y el objetivo pueden ser diferentes, lo que le brinda mucho más control. Por ejemplo, cuando el cursor ingresa a una sección, el botón escala a pesar de que no se tocó. En este caso, el botón es el objetivo.

Cómo trabajan juntos

Ahora que hemos visto cada parte por sí sola, el poder real llega cuando los conectas a una cadena:

• Dispara de activación: el visitante hace algo como hacer clic, mover el mouse, entrar, dejar o cargar la página.
• El efecto define : usted decide qué tipo de respuesta visual o de movimiento mostrar.
• Se aplica el objetivo: que cambian las tierras en el elemento que eligió.

Piense en ello como cablear un circuito. El interruptor voltea, la corriente fluye, la bombilla se ilumina.

En Divi 5, puede cablear ese circuito de la forma que desee. Un desplazamiento en una columna puede inclinar su botón. Una carga de página puede desvanecerse en una imagen de héroe. Un solo clic puede animar varios módulos simultáneamente, haciendo que la sección se sienta coordinada.

Esto es cuando las interacciones dejan de sentirse como un pasajero más agradable y comienzan a trabajar como un lenguaje de diseño. Ya no estás atascado con un elemento reaccionando a sí mismo. Puede encadenar, escalonar y extender las respuestas para conectar todo el diseño.

Aprenda todo sobre las interacciones de Divi 5

La fórmula en Divi 5

La belleza de las interacciones de Divi 5 es que no son complementos aleatorios. Siguen una fórmula clara: activador → efecto → objetivo. La construcción incluso de interacciones complejas se vuelve simple y consistente una vez que lo ves como un patrón repetible.

Pongamos esta fórmula en práctica para mostrarle cómo trabajan juntos. Para este ejemplo, creemos un formulario de contacto que aparece en la pantalla cuando el usuario hace clic en el botón.

Para crear este efecto, establecerá una interacción en el botón que desea usar como disparador. Seleccione estas configuraciones:

• Evento de activación: haga clic (hemos decidido que el evento se activará cuando el usuario haga clic en el botón)
• Acción del efecto: Mostrar elemento (el formulario de contacto oculto)
• Módulo de destino: la sección (contacto) es la etiqueta asignada a la sección de contacto.

A continuación, configure el enlace de anclaje para abrir la sección de contacto. Primero, abra la configuración de la sección del formulario de contacto y vaya a la pestaña avanzada . En ID y clases de CSS , establezca CSS ID : contacto.

Luego, vaya a la configuración del botón e ingrese #contact en el campo URL de enlace del botón .

Finalmente, establezca el estado inicial del formulario en oculto para que aparezca solo cuando se active. Abra la configuración de la sección del formulario de contacto, vaya a la pestaña avanzada y, bajo visibilidad , seleccione los puntos de interrupción en los que desea ocultarlo.

Ahora pruebalo. Haga clic en el botón y aparece la sección de contacto oculto.

Ese flujo simple (haga clic → Show → Formulario de contacto) es el mismo patrón que reutilizará para ventanas emergentes, alternar, revelar suavemente en la carga o animaciones encadenadas en una sección. Una vez que piensas en términos de activación, efecto y objetivo, las posibilidades se abren rápidamente.

Pruebe las interacciones en Divi 5 hoy

Tienes el patrón. Ahora póngalo a trabajar en una página real. Abra un diseño de prueba y cree un pequeño efecto de interacción que pueda terminar en diez minutos. Elija algo que realmente usaría en un sitio de cliente.

Aquí hay algunas mini indicaciones para rodar:

• El mouse ingresa a una sección, haciendo que su botón se escala sutilmente
• Hacer clic en un botón de "contacto" revela un formulario escondido
• El mouse deja en una tarjeta restablece la inclinación
• La carga de la página se desvanece en una imagen de héroe, luego el titular un momento después

¡Háganos saber en los comentarios si ha usado la función de interacciones de Divi 5 y qué piensa de ella!