Mostrar cualquier aplicación o producto en su sitio web no tiene que limitarse a imágenes o gráficos estáticos. Con los efectos de desplazamiento de Divi, puede dar vida a las ilustraciones de las aplicaciones agregando animación sutil y efectiva que atraiga a los visitantes. En este tutorial, vamos a descubrir una forma simple 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.
Descargar el tutorial GRATIS
Para descargar el fichero JSON de este tutorial, será necesario descargarlo usando el botón de descarga, suscribiendose a nuestra lista de correo electrónico mediante el siguiente formulario. 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 «volverá a suscribir» ni recibirá correos electrónicos adicionales.
Vistazo
Lo que necesitas para empezar
Para comenzar, deberá hacer lo siguiente:
- Si aún no lo ha hecho, instale y active el Divi Theme .
- Cree una nueva página en WordPress y use Divi Builder para editar la página en el front-end (visual builder).
- 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 desplegables para una atractiva ilustración de aplicación en Divi
Añadir fila
Comencemos agregando una fila de 2 columnas (mitad mitad mitad).
Agregar margen temporal a la sección
Para poder obtener una vista previa de los efectos de desplazamiento más adelante, agregue un margen 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 características 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 efectos de desplazamiento Divi.
Comencemos con la primera imagen.
Crear imagen 1
Agregue un módulo de imagen a la columna 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 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
Frontera
- Esquinas redondeadas: 40 px
- Ancho del borde: 15px
- Color del borde: #ffffff
Sombra de la caja
- Box Shadow: Ver captura de pantalla
- Posición vertical de la sombra de la caja: 0px
- Caja Shadow Blur Fuerza: 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 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 espacio del borde con relleno para asegurarnos de que las imágenes se apilan sin problemas.
Relleno
- Acolchado: 15 px arriba, 15 px abajo, 15 px izquierda, 15 px derecha
Posición
Luego actualice la posición de la imagen 2 a Absoluta. Esto hará que la imagen se superponga perfectamente con la imagen 1.
- 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:
Debajo de la pestaña Movimiento vertical …
- Habilitar movimiento vertical: SÍ
- Compensación de inicio: 0 (con 0% de ventana gráfica)
- Desplazamiento medio: 0 (a 0% de ventana gráfica)
- Compensación de finalización: -1 (al 100% de la vista)
Debajo de la pestaña Movimiento horizontal …
- Habilitar movimiento horizontal: SÍ
- Compensación de inicio: 0 (con 0% de ventana gráfica)
- Desplazamiento medio: 1 (al 50% de la vista)
- Compensación final: -1.5 (al 100% de la vista)
En la pestaña Fading In and Out …
- Habilitar Fading In y Out: YES
- Opacidad de inicio: 0% (con 0% de ventana gráfica)
- Opacidad media: 100% (con una ventana gráfica del 10% -15%)
- Opacidad final: 70% (a 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 desplegar la ventana emergente de capas. Luego, duplique el módulo de imagen 2 dentro de la columna 1 para crear la imagen 3. Es útil usar la función de capas para esto, 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úrese 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:
- Compensación de finalización: -2 (al 100% de la vista)
En la pestaña Movimiento horizontal , actualice el Movimiento horizontal de la siguiente manera:
- Desplazamiento medio: 2 (al 50% de la vista)
- Compensación de finalización: 3 (al 100% de la vista)
En la pestaña Fading In and Out , actualice la configuración Fading In and Out de la siguiente manera:
- Opacidad de inicio: 5% (con 0% de ventana gráfica)
- Opacidad media: 100% (con una ventana gráfica del 30% -40%)
- Opacidad final: 100% (al 50% de la ventana gráfica)
Resultado
Mira el resultado hasta ahora.
Agregue Transform Skew a la Columna 1
Este es un efecto de gran aspecto tal como está, pero vamos a sesgar la columna para crear más un efecto 3D.
Abra la configuración de la columna 1 y agregue un sesgo de transformación de la siguiente manera:
Inclinación de transformación (eje X e Y): 8 grados
Esto creará un bonito efecto 3D en las capas desplegables.
¡Eso es!
Opcional: Agregue CTA a la Columna 2
Ahora podemos agregar cualquier título y botón (o cualquier CTA) a la columna 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.
