Cómo crear un efecto de desplazamiento de capas en expansión para ilustraciones de aplicaciones atractivas en Divi

Vistazo

Descarga el diseño GRATIS

Para poner sus manos en los diseños 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.

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

Vayamos al tutorial, ¿de acuerdo?

Lo que necesitas para empezar

Para comenzar, deberá hacer lo siguiente:

1. Si aún no lo has hecho, instala y activa el tema Divi .
2. Cree una nueva página en WordPress y use Divi Builder para editar la página en la parte delantera (constructor visual).
3. Elija la opción «Construir desde cero».

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

Creación del efecto de desplazamiento de capas en expansión para una ilustración de aplicación atractiva en Divi

Añadir fila

Comencemos agregando una fila de 2 columnas (la mitad de la mitad).

Agregar margen temporal a la sección

Para poder obtener una vista previa de los efectos de desplazamiento más tarde, agregue algunos márgenes superior e inferior a la sección de la siguiente manera:

• margen: 80vh arriba, 80vh abajo

Agregar 3 imágenes como capas

Vamos a crear tres imágenes que servirán como tres capas de la ilustración de la aplicación. La idea es usar tres imágenes (o capturas de pantalla) de las funciones de la aplicación que tengan el mismo tamaño/dimensiones para que las imágenes encajen perfectamente una encima de la otra. Luego moveremos las tres capas usando los efectos de desplazamiento de Divi .

Comencemos con la primera imagen.

Crear imagen 1

Agregue un módulo de imagen a la columna de la izquierda.

Luego sube la primera imagen al módulo. Recuerde asegurarse de que las tres imágenes tengan las mismas dimensiones. Este es de 500px por 1050px.

Configuración de la imagen 1

Abra la configuración del módulo de imagen y actualice lo siguiente:

Ancho y Margen

• Ancho: 300 px (escritorio y tableta), 150 px (teléfono)
• Alineación del módulo: izquierda
• Margen: 0px inferior

Borde

• Esquinas redondeadas: 40px
• Ancho del borde: 15px
• Color del borde: #ffffff

Sombra de la caja

• Sombra de cuadro: ver captura de pantalla
• Posición vertical de la sombra del cuadro: 0px
• Fuerza de desenfoque de sombra de cuadro: 48px
• Color de sombra: rgba(0,0,0,0.2)

Crear imagen 2

Para crear la imagen 2, duplique la imagen 1.

Luego actualice el módulo de imagen duplicada con una nueva imagen que tenga las mismas dimensiones (500 px por 1050 px).

Configuración de la imagen 2

Luego elimine el borde actualizando lo siguiente:

Borde

• Ancho del borde: 0px

No necesitamos un borde para esta imagen, pero necesitamos reemplazar el espaciado del borde con relleno para asegurarnos de que las imágenes se apilen sin problemas.

Relleno

• Relleno: 15 px arriba, 15 px abajo, 15 px izquierda, 15 px derecha

Posición

Luego actualice la posición de la imagen 2 a Absoluto. Esto hará que la imagen se superponga a la imagen 1 perfectamente.

• Posición: Absoluta

Para obtener más información, consulte nuestra publicación completa sobre cómo usar la posición absoluta en Divi .

Efectos de desplazamiento

Ahora es el momento de agregar el efecto de desplazamiento que mueve nuestra capa (imagen 2) al desplazarse hacia abajo en la página.

Actualice los efectos de desplazamiento de la siguiente manera:

En la pestaña Movimiento vertical …

• Habilitar movimiento vertical: SÍ
• Desplazamiento inicial: 0 (a 0 % de ventana gráfica)
• Desplazamiento medio: 0 (a 0 % de ventana gráfica)
• Desplazamiento final: -1 (al 100 % de la ventana gráfica)

En la pestaña Movimiento horizontal …

• Habilitar movimiento horizontal: SÍ
• Desplazamiento inicial: 0 (a 0 % de ventana gráfica)
• Desplazamiento medio: 1 (al 50 % de la ventana gráfica)
• Compensación final: -1.5 (al 100 % de la ventana gráfica)

En la pestaña Aparición y desaparición gradual …

• Habilitar fundido de entrada y salida: SÍ
• Opacidad inicial: 0 % (a 0 % de ventana gráfica)
• Opacidad media: 100% (a 10%-15% de ventana gráfica)
• Opacidad final: 70 % (al 30 % de ventana gráfica)

Crear imagen 3

Una vez que se hayan agregado todos los efectos de desplazamiento a la imagen 2, estamos listos para crear la imagen 3.

Abra el menú de configuración en la parte inferior del generador y seleccione el botón Capas para implementar la ventana emergente de capas. Luego, duplique el módulo de imagen 2 dentro de la columna 1 para crear la imagen 3. Usar la función de capas para esto es útil ya que es difícil seleccionar módulos superpuestos.

Ahora abra la configuración de la imagen duplicada (imagen 3) y cargue una nueva imagen. Asegúrate de mantener las mismas dimensiones (500 px por 1050 px).

Imagen 3 efectos de desplazamiento

En la pestaña Avanzado, actualice las opciones de efectos de desplazamiento para la imagen 3.

En la pestaña Movimiento vertical , actualice el desplazamiento de movimiento vertical de la siguiente manera:

• Compensación final: -2 (al 100 % de la ventana gráfica)

En la pestaña Movimiento horizontal , actualice el movimiento horizontal de la siguiente manera:

• Desplazamiento medio: 2 (al 50 % de la ventana gráfica)
• Desplazamiento final: 3 (al 100 % de la ventana gráfica)

En la pestaña Fading In and Out , actualice la configuración de Fading In and Out de la siguiente manera:

• Opacidad inicial: 5 % (a 0 % de ventana gráfica)
• Opacidad media: 100 % (al 30 %-40 % de la ventana gráfica)
• Opacidad final: 100 % (al 50 % de ventana gráfica)

Resultado

Mira el resultado hasta ahora.

Agregar transformación de sesgo a la columna 1

Este es un gran efecto visual tal como está, pero vamos a sesgar la columna para crear más un efecto 3D.

Abra la configuración para la columna 1 y agregue un sesgo de transformación de la siguiente manera:

Transformar sesgo (ejes X e Y): 8 grados

Esto creará un bonito efecto 3D en las capas en expansión.

¡Eso es todo!

Opcional: agregue CTA a la columna 2

Ahora podemos agregar cualquier título y botón (o cualquier CTA) a la columna de la derecha con algunos efectos de desplazamiento complementarios. Echa un vistazo a la descarga gratuita de este diseño de arriba para obtener el mismo CTA en esta ilustración.

Resultado final

Aquí esta el resultado final.

Y así es como funciona en tabletas y teléfonos.

Uso de imágenes de un paquete de diseño Divi

Las imágenes utilizadas en este tutorial son imágenes simuladas de Shutterstock y también aparecen en nuestra página de demostración de efectos de desplazamiento .

Para cambiar el diseño y adaptarlo a sus propias necesidades, puede usar imágenes de nuestros paquetes de diseño gratuitos o crear sus propias capturas de pantalla. Aquí hay un diseño de ejemplo que usa las imágenes del paquete de diseño de la aplicación móvil . También agregué un fondo degradado para complementar las imágenes claras utilizadas para las capas en expansión.

¡En unos minutos, tenemos un diseño completamente diferente!

Pensamientos finales

El efecto de desplazamiento de capas en expansión es una solución elegante para exhibir aplicaciones o productos sin tener que recurrir a técnicas CSS más complicadas o edición de fotos. Y puede usar esta misma técnica para ilustrar casi cualquier cosa. Me encanta lo fácil que es cambiar las imágenes por las tuyas y sesgar toda la colección de imágenes/capas con una simple opción en Divi. Con suerte, esto te dará algo de inspiración que te permitirá crear increíbles diseños de Divi.

Espero escuchar de usted en los comentarios.

¡Salud!