Cómo activar 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 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 efectos de desplazamiento para un módulo, columna y fila. El truco consiste en 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 diseños y efectos de desplazamiento.

Empecemos.

Vistazo

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

Descargue el ejemplo de diseño GRATIS

Para poner sus manos sobre 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 formulario a continuación. ¡Como nuevo suscriptor, recibirás aún más bondad Divi y un paquete Divi Layout 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 le “volverá a suscribir” ni recibirá correos electrónicos adicionales.

Descarga los archivos

Descárgalo gratis

Únase al boletín de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.

DESCARGAR

Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!

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

Suscríbete a nuestro canal de Youtube

Vayamos al tutorial, ¿de acuerdo?

Comprensión de cómo activar estados de desplazamiento en varios 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 integradas 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 desplazamiento de la fila dentro de la sección, activará las opciones de desplazamiento tanto de la fila como de la sección. Esto se debe a que la fila es un elemento secundario de la sección.

Siempre que se desplaza sobre una columna, activa el estado de desplazamiento de la columna, la fila y la sección.

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

De forma predeterminada, cada uno de estos elementos tendrá un espaciado (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 a muchas combinaciones de efectos de desplazamiento que pueden ocurrir simultáneamente al combinar las opciones de desplazamiento para cada elemento y activarlas 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 se muestra como una especie de elemento de diseño de borde.

Dentro de la fila, tenemos una columna que se ha llenado con una sombra de caja negra. 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 propaganda que tiene un fondo azul. Al pasar el mouse, el fondo azul cambia a un color azul semitransparente para que pueda ver la imagen de fondo.

Dado que hay un espacio entre cada elemento, podemos ver el efecto de desplazamiento específico de cada elemento al desplazarnos sobre cada espacio de desplazamiento individual.

Pero, si eliminamos el espaciado 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 de transición en los efectos de desplazamiento de filas y columnas que realmente resaltan bien la funcionalidad de este concepto. Si estuviéramos intentando agregar una combinación similar de efectos de desplazamiento al módulo únicamente, no podríamos aprovechar la aplicación de diferentes retardos 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, necesitará lo siguiente:

1. El tema Divi instalado y activo
2. Una nueva página creada para construir desde cero en el front-end (constructor visual)
3. Imágenes que se utilizarán para 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.

Actualizar la configuración de filas y columnas

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

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

• Relleno: 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 la sombra del cuadro: 0 px (escritorio), 10 px (desplazamiento)
• 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 la transición: 500 ms
• Retardo 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
• Fuerza de propagación de la sombra de la caja: 200 px (escritorio), 0 px (desplazamiento)
• Color de sombra: # 000000
• Duración de la transición: 500 ms
• Retardo de transición: 200 ms

Agregue el módulo Blurb

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
• Relleno: 20px arriba, 20px abajo, 20px izquierda, 20px derecha

Resultado final

Mira el resultado final.

Pensamientos y consejos finales

Comprender cómo activar estados de desplazamiento para múltiples elementos Divi simultáneamente abre algunas posibilidades de diseño interesantes. El ejemplo de esta publicación destaca 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 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 que lo ayudarán en el camino.

• Use Box Shadow en lugar de Borders: los bordes en realidad agregan espacio adicional a un elemento, por lo que esto podría 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 crear capas de efectos de desplazamiento creativos.
• Use las opciones de transformación de desplazamiento: las opciones de transformación pueden agregar un elemento creativo, como escalar y rotar elementos al desplazar el cursor. Sin embargo, puede ser un desafío rotar varios 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 asombrosas de efectos de desplazamiento en Divi.

Espero tener noticias tuyas en los comentarios.

¡Salud!