Cómo crear un efecto de desplazamiento de capas expansivas para atraer ilustraciones de aplicaciones en Divi

Mostrar cualquier aplicación o producto en su sitio web no tiene por qué limitarse a imágenes o gráficos estáticos. Con los efectos de desplazamiento de Divi, puede dar vida a las ilustraciones de la aplicación agregando una animación sutil y efectiva que atraiga a los visitantes. En este tutorial, descubriremos una forma sencilla de crear un efecto de desplazamiento de capas expansivas en Divi. Todo lo que se necesita son tres imágenes (o capturas de pantalla) con las mismas dimensiones y toda la magia incorporada del constructor Divi.

Saltemos y comencemos.

Vistazo

Descarga el diseño GRATIS

Para poner sus manos sobre 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 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.

Vayamos al tutorial, ¿de acuerdo?

Lo que necesitas para empezar

Para comenzar, deberá hacer lo siguiente:

1. Si aún no lo ha hecho, instale y active Divi Theme.
2. Cree una nueva página en WordPress y use Divi Builder para editar la página en el front-end (constructor visual).
3. Elija la opción "Construir desde cero".

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

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

Añadir fila

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

Agregar margen temporal a la sección

Para poder obtener una vista previa de los efectos de desplazamiento más adelante, 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 sean del mismo tamaño / dimensiones para que las imágenes encajen perfectamente una encima de la otra. Luego moveremos las tres capas usando efectos de desplazamiento Divi.

Empecemos por la primera imagen.

Crear imagen 1

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

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

Configuración de la imagen 1

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

Ancho y margen

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

Frontera

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

Sombra de la caja

• Box Shadow: ver captura de pantalla
• Posición vertical de la sombra del cuadro: 0px
• Fuerza de desenfoque de sombra de caja: 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:

Frontera

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

Posición

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

• Posición: Absoluto

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 desplazarnos 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 (en la ventana gráfica del 0%)
• Desplazamiento medio: 0 (al 0% de la 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 (en la ventana gráfica del 0%)
• Desplazamiento medio: 1 (al 50% de la ventana gráfica)
• Desplazamiento final: -1,5 (al 100% de la ventana gráfica)

En la pestaña Fading In and Out ...

• Habilitar Fading In y Out: SÍ
• Opacidad inicial: 0% (en la ventana gráfica del 0%)
• Opacidad media: 100% (al 10% -15% de la ventana gráfica)
• Opacidad final: 70% (al 30% de la 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 mantenerlo en 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 del movimiento vertical de la siguiente manera:

• Desplazamiento 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 y Out de la siguiente manera:

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

Resultado

Mira el resultado hasta ahora.

Agregar Transform Skew a la columna 1

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

Abra la configuración de 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. Consulte la descarga gratuita de este diseño anterior para obtener la misma CTA en esta ilustración.

Resultado final

Aquí esta el resultado final.

Y así es como se acumula 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 utilizar imágenes de nuestros paquetes de diseño gratuitos o crear sus propias capturas de pantalla. A continuación, se muestra un diseño de ejemplo que utiliza 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 mostrar aplicaciones o productos sin tener que recurrir a técnicas CSS o edición de fotos más complicadas. 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 suyas 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 tener noticias tuyas en los comentarios.

¡Salud!