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 flotante. 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, una columna y una 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 diseños y efectos de desplazamiento.
Empecemos.
Aquí hay un ejemplo rápido de cómo se ve la activación simultánea de los efectos de desplazamiento de diferentes elementos Divi.
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 nuestro boletín utilizando 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 será «resuscrito» ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín informativo 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 muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro 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.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
Para importar el diseño a su página, simplemente extraiga el archivo zip y arrastre el archivo json a Divi Builder.
Suscríbete a nuestro canal de Youtube
Vayamos al tutorial, ¿de acuerdo?
Comprender 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 flotante que es básicamente del 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 por 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.
Cada vez 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 se desplaza 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á espaciado (relleno) que crea espacios en el espacio flotante que permite al usuario la capacidad de pasar el mouse sobre 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 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 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 publicitario 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 espacio entre cada elemento, podemos ver el efecto de desplazamiento específico de cada elemento cuando pasamos el cursor 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 dicho de otra forma, el módulo ocupa todo el espacio de la columna y la fila. Entonces, cuando pasamos el mouse sobre el módulo, los efectos de desplazamiento para el módulo, la columna y la fila se activan simultáneamente.
Los retrasos en la 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 fila y columna que realmente resaltan bien la funcionalidad de este concepto. Si tratáramos de agregar una combinación similar de efectos de desplazamiento solo al módulo, 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, necesitará tener lo siguiente:
- El tema Divi instalado y activo
- Una nueva página creada para construir desde cero en el front-end (constructor visual)
- Imágenes que se utilizarán para contenido simulado
Después de eso, tendrás 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 configuración de filas y columnas
A continuación, abra la configuración de la fila y dele 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.
- Sombra de caja: ver captura de pantalla
- Fuerza de desenfoque de sombra de cuadro: 0px
- Fuerza de propagación de la sombra del cuadro: 0px (escritorio), 10px (hover)
- 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: 500ms
- Retardo de transición: 700ms
Ahora abra la configuración de la columna y actualice lo siguiente:
- Sombra de caja: ver captura de pantalla
- Fuerza de desenfoque de sombra de cuadro: 0px
- Fuerza de propagación de la sombra del cuadro: 200 px (escritorio), 0 px (desplazamiento)
- Color de sombra: #000000
- Duración de la transición: 500ms
- Retraso de transición: 200ms
Agregue el módulo Blurb
Ahora agregue un módulo de publicidad a la fila.
Luego actualice la propaganda de la siguiente manera:
- Imagen: [insertar imagen publicitaria]
- Color de fondo: #0c71c3
- Color de fondo (pasar el mouse): rgba (12,113,195,0.35)
- Alineación de texto: centro
- Color del texto: Claro
- Relleno: 20 px arriba, 20 px abajo, 20 px a la izquierda, 20 px a la 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 combina los estados de desplazamiento de un módulo, una columna y una 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 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 obtener capas de efectos de desplazamiento creativos.
- Use las opciones de transformación de desplazamiento: las opciones de transformación de desplazamiento pueden agregar un elemento creativo, como escalar y rotar elementos al pasar el mouse. 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 increíbles combinaciones de efectos de desplazamiento en Divi.
Espero escuchar de usted en los comentarios.
¡Salud!