Cómo desencadenar efectos de desplazamiento para un módulo, columna y fila simultáneamente


Una de las mejores cosas de construir un sitio con Divi es que cada bloque de construcción está repleto de opciones de diseño. Cada módulo, columna, fila y sección contiene configuraciones de diseño tanto para el estado predeterminado como para el estado de desplazamiento. Esto abre la puerta para activar múltiples efectos de desplazamiento al combinar estos elementos.

En este tutorial, le mostraré cómo activar simultáneamente los efectos de desplazamiento para un módulo, columna y fila. El truco es asegurarse de que todos los elementos compartan el mismo tamaño y espacio de desplazamiento. Pero una vez que tenga los elementos en su lugar, puede ser extremadamente creativo con sus efectos de desplazamiento y diseños.

Empecemos.

Vistazo

Aquí hay un ejemplo rápido de cómo se ven simultáneamente los efectos de activación de los diferentes elementos Divi.

desencadenar efectos de desplazamiento

Descargue el ejemplo de diseño GRATIS

Para poner sus manos en el diseño de este tutorial, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante el siguiente formulario. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete de diseño Divi gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No se "volverá a suscribir" ni recibirá correos electrónicos adicionales.

Para importar el diseño a su página, simplemente extraiga el archivo zip y arrastre el archivo json al Divi Builder.

(incrustar) https://www.youtube.com/watch?v=q2QKF3Y3Nyg (/ incrustar)

Suscríbase a nuestro canal de Youtube

Vayamos al tutorial, ¿de acuerdo?

Comprender cómo desencadenar estados de desplazamiento en múltiples elementos Divi simultáneamente.

Cada elemento en Divi (sección, fila o módulo) tiene su propio espacio de desplazamiento, que es básicamente el tamaño del elemento en sí.

desencadenar efectos de desplazamiento

Cada uno de estos elementos tiene opciones de desplazamiento incorporadas que se activan al pasar el cursor sobre ese elemento o cualquiera de los elementos secundarios que contiene.

Entonces, por ejemplo, si ha agregado opciones de desplazamiento a una sección, esas opciones de desplazamiento se activarán cada vez que se desplace de la sección.

desencadenar efectos de desplazamiento

Luego, si pasa el cursor sobre el espacio de la fila dentro de la sección, activará las opciones de desplazamiento de la fila y la sección. Esto se debe a que la fila es un elemento hijo de la sección.

desencadenar efectos de desplazamiento

Cada vez que pasa el cursor sobre una columna, activa el estado de la columna, la fila y la sección.

desencadenar efectos de desplazamiento

Y, por último, cada vez que pasa el mouse sobre un módulo, activa los estados de desplazamiento del módulo y todos sus elementos principales (columna, fila y sección).

desencadenar efectos de desplazamiento

Por defecto, cada uno de estos elementos tendrá un espacio (relleno) que crea espacios en el espacio de desplazamiento que permite al usuario la capacidad de desplazar cada elemento de forma selectiva. Pero, si elimina el espacio entre cada elemento, podrá activar los estados de desplazamiento para todos los elementos simultáneamente.

desencadenar efectos de desplazamiento

Esto abre la puerta para muchas combinaciones de efectos de desplazamiento que pueden ocurrir simultáneamente mientras combina las opciones de desplazamiento para cada elemento y las activa en un espacio de desplazamiento compartido.

Un ejemplo de combinación de efectos de desplazamiento

Aquí hay un ejemplo de cómo funciona esto con Divi.

En el siguiente ejemplo, tenemos una fila con una imagen de fondo. Al pasar el mouse, tenemos una sombra de cuadro retrasada que aparece como una especie de elemento de diseño de borde.

Dentro de la fila, tenemos una columna que se ha rellenado con una sombra de cuadro negro. Al pasar el mouse, la sombra del cuadro de la columna disminuye gradualmente para revelar la imagen de fondo de la fila.

Dentro de la columna, tenemos un módulo de publicidad que tiene un fondo azul. Al pasar el mouse, el fondo azul se cambia a un color azul semitransparente para que pueda ver la imagen de fondo.

Como hay espacio entre cada elemento, podemos ver el efecto de desplazamiento específico de cada elemento a medida que pasamos sobre cada espacio de desplazamiento individual.

desencadenar efectos de desplazamiento

Pero, si eliminamos el espacio y le damos a la fila un ancho personalizado, todos los elementos compartirán el mismo espacio de desplazamiento. O para decirlo de otra manera, el módulo ocupa todo el espacio de la columna y la fila. Entonces, cuando pasamos el cursor sobre el módulo, los efectos de desplazamiento para el módulo, la columna y la fila se activan simultáneamente.

desencadenar efectos de desplazamiento

Los retrasos de transición funcionan muy bien con esta configuración

Tenga en cuenta que, en el ejemplo anterior, hay retrasos en la transición de los efectos de desplazamiento de fila y columna que realmente resaltan bien la funcionalidad de este concepto. Si intentamos agregar una combinación similar de efectos de desplazamiento al módulo solamente, no podríamos aprovechar la aplicación de diferentes retrasos y duraciones de transición a cada efecto de desplazamiento individualmente.

Recreando el ejemplo de diseño en Divi

Para darle algunas instrucciones sobre cómo se desarrolla esto en el mundo real de Divi, vamos a recrear el ejemplo descrito anteriormente.

Lo que necesitas para empezar

Para comenzar, deberá tener lo siguiente:

  1. El tema Divi instalado y activo
  2. Una nueva página creada para construir desde cero en el front-end (generador visual)
  3. Imágenes para ser utilizadas como contenido simulado

Después de eso, tendrá un lienzo en blanco para comenzar a diseñar en Divi.

Agregar la sección y la fila

Lo primero que debe hacer es crear una sección regular con una fila de una columna.

desencadenar efectos de desplazamiento

Actualizar configuración de fila y columna

A continuación, abra la configuración de la fila y dele a la fila una imagen de fondo.

desencadenar efectos de desplazamiento

Luego, necesitamos eliminar el relleno predeterminado para que no haya espacio en el espacio de desplazamiento entre la fila y la columna.

  • Acolchado: 0px arriba, 0px abajo

desencadenar efectos de desplazamiento

Luego agregue la siguiente sombra de cuadro a la fila al pasar el mouse.

  • Box Shadow: ver captura de pantalla
  • Fuerza de desenfoque de sombra de caja: 0px
  • Fuerza de propagación de sombra de cuadro: 0px (escritorio), 10px (pasar el mouse)
  • Color de sombra: # 063c68

desencadenar efectos de desplazamiento

A continuación, actualice las opciones de transición con una duración y un retraso de la siguiente manera:

  • Duración de transición: 500 ms
  • Retraso de transición: 700 ms

desencadenar efectos de desplazamiento

Ahora abra la configuración de la columna y actualice lo siguiente:

  • Box Shadow: ver captura de pantalla
  • Fuerza de desenfoque de sombra de caja: 0px
  • Caja sombra Spread Strength: 200px (escritorio), 0px (pasar el mouse)
  • Color de sombra: # 000000
  • Duración de transición: 500 ms
  • Retraso de transición: 200 ms

desencadenar efectos de desplazamiento

Agregue el módulo Blurb

Ahora agregue un módulo de propaganda a la fila.

desencadenar efectos de desplazamiento

Luego actualice la propaganda de la siguiente manera:

  • Imagen: (insertar imagen publicitaria)
  • Color de fondo: # 0c71c3
  • Color de fondo (desplazamiento): rgba (12,113,195,0.35)

desencadenar efectos de desplazamiento

  • Alineación de texto: centro
  • Color del texto: claro
  • Acolchado: 20 px arriba, 20 px abajo, 20 px izquierda, 20 px derecha

desencadenar efectos de desplazamiento

Resultado final

Mira el resultado final.

desencadenar efectos de desplazamiento

Reflexiones finales y consejos

Comprender cómo activar estados de desplazamiento para múltiples elementos Divi simultáneamente abre algunas posibilidades de diseño emocionantes. El ejemplo en esta publicación resalta solo algunas de las muchas combinaciones de efectos de desplazamiento que son posibles cuando se combinan los estados de desplazamiento de un módulo, columna y fila. Además, ni siquiera exploramos las posibilidades que vienen con la combinación de las opciones de desplazamiento de la sección que le darían aún más opciones de desplazamiento. A medida que explora estos efectos de desplazamiento por su cuenta, aquí hay algunos consejos e ideas para ayudarlo en el camino.

  • Use Box Shadow en lugar de Borders: los bordes en realidad agregan espacio adicional a un elemento, por lo que esto puede causar espacios de desplazamiento no deseados. Box Shadows agrega un elemento de diseño que no agrega espacio real.
  • Explore los efectos de desplazamiento de transición de fondo: cada elemento Divi tiene opciones de desplazamiento de fondo que se pueden combinar para capas de efectos de desplazamiento creativo.
  • Use las opciones de transformación de desplazamiento: las opciones de transformación de desplazamiento pueden agregar un elemento creativo, como elementos de escala y rotación en el desplazamiento. Sin embargo, puede ser desafiante rotar múltiples elementos al pasar el mouse, ya que provocará saltos.
  • Aproveche las opciones de transición: agregar diferentes duraciones de transición y retrasos en el estado de desplazamiento de cada elemento puede crear animaciones de desplazamiento únicas.

Espero que este tutorial te inspire a explorar algunas combinaciones increíbles de efectos de desplazamiento en Divi.

Espero tener noticias suyas en los comentarios.

¡Salud!