Hoy en Rinopixel le traemos este tutorial  gracias a Jason Champagne y nosotros se lo traemos totalmente en español. 

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.

Vamos 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í.

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.

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.

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

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).

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.

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 se reduce 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.

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.

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 estuviéramos tratando de agregar una combinación similar de efectos de desplazamiento al módulo solamente, no podríamos aprovechar la aplicación de diferentes demoras 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, recreemos 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.

Con los planes de hosting profesional y empresarial de Rinopixel, tendrás DIVI totalmente gratis, puedes adquirir tu plan en https://rinopixel.com/hosting-wordpress/

Agregar la sección y la fila

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

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.

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

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

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

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

Agregar el módulo de publicidad

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

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)
  • Alineación de texto: centro
  • Color del texto: claro
  • Acolchado: 20 px arriba, 20 px abajo, 20 px izquierda, 20 px derecha

Resultado final

Mira el resultado final.

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. Las sombras de caja agregan 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.
  • Usar 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 un desafío rotar varios elementos al pasar el mouse sobre él, 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.

Pin It on Pinterest