¡Tu licencia Divi con un -20% de DescuentoOferta aquí

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

Feb 5, 2020 | Tutoriales para Divi

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

pestañas de esquina expandibles

Para comenzar, deberá hacer lo siguiente:

  1. Si aún no lo ha hecho, instale y active el Divi Theme .
  2. Cree una nueva página en WordPress y use Divi Builder para editar la página en el front-end (visual builder).
  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 desplegables para una atractiva ilustración de aplicación en Divi

Añadir fila

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

efecto de desplazamiento de capas desplegables

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

efecto de desplazamiento de capas desplegables

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.

efecto de desplazamiento de capas desplegables

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.

efecto de desplazamiento de capas desplegables

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

efecto de desplazamiento de capas desplegables

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

efecto de desplazamiento de capas desplegables

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)

efecto de desplazamiento de capas desplegables

Crear imagen 2

Para crear la imagen 2, duplique la imagen 1.

efecto de desplazamiento de capas desplegables

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

efecto de desplazamiento de capas desplegables

Configuración de imagen 2

Luego, elimine el borde actualizando lo siguiente:

Frontera
  • Ancho del borde: 0px

efecto de desplazamiento de capas desplegables

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

efecto de desplazamiento de capas desplegables

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

efecto de desplazamiento de capas desplegables

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)

efecto de desplazamiento de capas desplegables

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)

efecto de desplazamiento de capas desplegables

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)

efecto de desplazamiento de capas desplegables

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.

efecto de desplazamiento de capas desplegables

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).

efecto de desplazamiento de capas desplegables

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)

efecto de desplazamiento de capas desplegables

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)

efecto de desplazamiento de capas desplegables

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)

efecto de desplazamiento de capas desplegables

Resultado

Mira el resultado hasta ahora.

efecto de desplazamiento de capas desplegables

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

efecto de desplazamiento de capas desplegables

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.

efecto de desplazamiento de capas desplegables

Por Prunaestudio

Por Prunaestudio

Prunaestudio es un estudio de diseño web ubicado en Valencia (España). Estamos especializados en el diseño web basado en WordPress con la plantilla premium de Elegantthemes, Divi.

* Todos el contenido pertenece y se ha traducido del blog de Elegantthemes (Divi Resources)

Nuestras últimas entradas

¡20% de Descuento en Divi!

Sitios web y usuarios ilimitados

Únete a más de 700.000 clientes y obten acceso a Divi, Extra, Bloom, Monarch y mucho más. Impulsa a todo tu equipo y crea sitios web ilimitados con una licencia.

¡Ir al descuento!



You have Successfully Subscribed!

Pin It on Pinterest

Share This