Los efectos de desplazamiento de Divi nos permiten crear animaciones de transición excepcionales que pueden sorprender a los visitantes con un diseño llamativo. Las imágenes, en particular, pueden mostrar el poder de estos efectos de desplazamiento de formas sorprendentes. En este tutorial, explicaremos paso a paso cómo crear una transición de imagen separable con los efectos de desplazamiento de Divi. Este efecto apareció originalmente en la página de demostración . El efecto consiste en cortar imágenes de antemano utilizando un editor de fotos como Photoshop (es bastante fácil de hacer). Después de cortar las imágenes, todo lo que tenemos que hacer es agregarlas a Divi y usar los efectos de desplazamiento incorporados para que la magia suceda.

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

Aquí hay un vistazo al diseño para hoy.

transición de imagen separatista

También puede ver la demostración en vivo original del diseño en la página de demostración bajo el título «El ejercicio no tiene que ser aburrido».

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.

Además de la configuración Divi anterior, necesitará:

  • Dos imágenes (al menos 1080px por 540px)
  • Un software de edición de fotos como Photoshop para cortar las imágenes antes de agregarlas a Divi.

Parte 1: cortar las imágenes en Photoshop

Antes de que podamos comenzar a crear nuestro diseño en Divi, necesitamos cortar nuestras dos imágenes que se usarán para el efecto de desplazamiento de transición separatista. Ambas imágenes deberán recortarse para que tengan exactamente 1080px por 540px. Después de eso, deben dividirse en 8 partes iguales (4 de ancho, 2 de abajo). Una vez listos, podemos guardarlos en nuestra computadora y cargar los cortes de imagen en nuestro sitio. Comencemos con la primera imagen.

Imagen n. ° 1

Recortando la imagen

Lo primero que debemos hacer es recortar la imagen para que tenga las dimensiones exactas de 1080px por 540px. Puede usar cualquier software de edición de imágenes para hacer esto. En Photoshop, puede usar la herramienta de recorte.

transición de imagen separatista

Cortando la imagen

Luego, haga clic para usar la herramienta de corte y seleccione la imagen completa. Haga clic derecho en el sector / imagen y seleccione la opción Dividir sector.

transición de imagen separatista

En el cuadro de opción Divide Slice, actualiza lo siguiente:

Dividir horizontalmente en:

  • 2 rebanadas hacia abajo, espaciadas uniformemente
  • 270 píxeles por corte

Dividir verticalmente en:

  • 4 rebanadas de ancho, uniformemente espaciadas
  • 270 píxeles por corte

Luego haga clic en Aceptar.

transición de imagen separatista

Guardar los cortes de imagen

Ahora tenemos una imagen dividida en 8 bloques iguales, cada uno de ellos de 270 px por 270 px.

Para guardar los cortes de imagen, navegue a Archivo> Exportar> Guardar para Web.

transición de imagen separatista

Luego elija el formato de archivo y haga clic en Guardar.

transición de imagen separatista

En el cuadro emergente, asegúrese de actualizar lo siguiente:

  • Guardar como: [ingrese el nombre de las imágenes]
  • Formato: solo imágenes
  • Configuración: configuración predeterminada
  • Rebanadas: todas las rebanadas

Luego haga clic en Guardar.

transición de imagen separatista

Ahora todas las secciones de su imagen se guardarán en la computadora, listas para cargarse en Divi.

Imagen # 2

Para crear la segunda imagen necesaria para este efecto de desplazamiento de transición de imagen separable, debemos seguir el mismo proceso (recorte, corte y guardado) que utilizamos para crear la primera imagen.

transición de imagen separatista

Girar cortes de imagen

Sin embargo, debido a la forma en que funciona el efecto de desplazamiento giratorio, cada uno de los cortes de imagen que conforman la segunda imagen deberá rotarse 90 grados hacia la izquierda o hacia la derecha.

Para rotar una imagen, puede usar Photoshop o el software de edición de imágenes incorporado desde su sistema operativo (incluso puede usar la galería de medios de WordPress para editar y rotar las imágenes después de cargarlas en su sitio).

transición de imagen separatista

Aquí hay una guía sobre cómo deben rotarse las imágenes dentro de su posición original al cortar la imagen.

Aquí está la imagen original.

transición de imagen separatista

Así es como deben rotarse los cortes de imagen antes de subirlos a su sitio.

transición de imagen separatista

Esto es necesario para que eventualmente podamos obtener el siguiente efecto de desplazamiento.

transición de imagen separatista

Ahora que ambas imágenes están recortadas, cortadas, guardadas y rotadas, está listo para agregarlas a su sitio Divi. Debe tener un total de 16 imágenes (8 de la imagen uno y 8 de la imagen 2).

Parte 2: Crear el efecto de desplazamiento de transición de imagen separable en Divi

Una vez que los cortes de imagen estén listos, podemos comenzar el proceso de diseño en Divi. Aquí te explicamos cómo hacerlo.

Agregar fila # 1

Para comenzar, cree una fila de cuatro columnas.

transición de imagen separatista

Configuración de fila

Abra la configuración de la fila y actualice lo siguiente:

  • Ancho de canal: 1
  • Ancho máximo: 1080px (escritorio), 540px (tableta y teléfono)
  • Relleno: 0px arriba, 0px abajo
  • Desbordamiento horizontal: visible
  • Desbordamiento vertical: visible

transición de imagen separatista

Actualizar el relleno de la sección

Como vamos a colocar nuestra segunda fila absolutamente en la parte superior de la primera fila, necesitamos sacar el relleno superior (e inferior) de la sección para que no se salga de la posición de la segunda fila. Abra la configuración de la sección y actualice lo siguiente:

  • Relleno: 0px arriba, 0px izquierda

transición de imagen separatista

Agregar las imágenes

En la primera fila, vamos a agregar cada una de las 8 imágenes / cortes que conforman la primera imagen. Las imágenes deben colocarse dentro de las columnas exactamente como se cortaron en Photoshop (4 de ancho y 2 de abajo).

Aquí hay una ilustración de cada imagen etiquetada con un número. Así es como debería verse después de que todas las imágenes se hayan agregado a la fila.

Imagen n. ° 1

Agregue el primer módulo de imagen a la columna 1.

transición de imagen separatista

Luego cargue la primera porción de imagen en el módulo.

transición de imagen separatista

Efectos de desplazamiento

En la pestaña avanzada, agregue los siguientes efectos de desplazamiento a la imagen.

  • Habilitar el desvanecimiento de entrada y salida: SÍ
  • Opacidad de inicio: 100% (con una ventana gráfica del 20%)
  • Opacidad media: 100% (con 20% de ventana gráfica)
  • Opacidad final: 0% (al 50% de la ventana gráfica)

transición de imagen separatista

Haga clic en la pestaña Escala y actualice lo siguiente:

  • Habilitar escalar hacia arriba y hacia abajo: SÍ
  • Escala inicial: 100% (con un 20% de ventana gráfica)
  • Escala media: 70% (en 32% – 48% de ventana gráfica)
  • Escala final: 100% (al 60% de la ventana gráfica)

transición de imagen separatista

Haga clic en la pestaña rotar y actualice lo siguiente:

  • Habilitar rotación: SÍ
  • Rotación inicial: 0 grados (al 0% de la ventana gráfica)
  • Rotación media: 0 grados (con una ventana gráfica del 20%)
  • Rotación final: -90 grados (al 60% de la vista)

transición de imagen separatista

El efecto de desplazamiento se verá así al desplazarse hacia abajo en la página.

transición de imagen separatista

Imagen # 2

Para crear la imagen # 2, duplique la imagen # 1 y coloque el duplicado en la columna 2.

transición de imagen separatista

Actualice el módulo de imagen duplicada con la imagen # 2.

transición de imagen separatista

Actualizar efecto de desplazamiento

Vamos a mantener la mayoría de los mismos efectos de desplazamiento transferidos de la imagen # 1. Lo único que necesitamos cambiar es la rotación. Vaya a la pestaña avanzada y cambie la rotación final a 90 grados (en lugar de -90 grados) para que gire en la dirección opuesta.

  • Rotación final: 90 grados

transición de imagen separatista

Imagen # 3

Para crear la imagen # 3, copie y pegue la imagen # 1 en la columna 3 y luego cambie la imagen a la imagen # 3.

transición de imagen separatista

Imagen # 4

Para crear la imagen # 4, copie y pegue la imagen # 2 en la columna 4 y actualice la imagen a la imagen # 4.

transición de imagen separatista

Imagen 5

Para crear la imagen n. ° 5, duplique la imagen n. ° 1 de modo que el duplicado esté directamente debajo de la columna 1.transición de imagen separatista

Actualice la imagen a la imagen # 5. Luego actualice el efecto de desplazamiento Fading In and Out de la siguiente manera:

  • Opacidad de inicio: 100% (con 0% de ventana gráfica)
  • Opacidad media: 100% (a 0% de ventana gráfica)
  • Opacidad final: 0% (al 40% de la vista)

transición de imagen separatista

Luego actualice el efecto de desplazamiento Escalar hacia arriba y hacia abajo de la siguiente manera:

  • Escala inicial: 100% (a 0% de ventana gráfica)
  • Escala media: 70% (en 12% – 28% de ventana gráfica)
  • Escala final: 100% (al 40% de la vista)

transición de imagen separatista

Y finalmente, actualice el efecto de desplazamiento giratorio de la siguiente manera:

  • Rotación inicial: 0 grados (al 0% de la ventana gráfica)
  • Rotación media: 0 grados (a 0% de vista)
  • Rotatiion final: 90 grados (al 40% de la vista)

transición de imagen separatista

Imagen # 6

Para crear la imagen # 6, duplique la imagen # 5 y muévala a la columna 2 (debajo de la imagen # 2).

transición de imagen separatista

Actualice el módulo de imagen con la imagen # 5. Luego ajuste el efecto de desplazamiento giratorio en la dirección opuesta (-90 grados) de la siguiente manera:

  • Rotación final: -90 grados

transición de imagen separatista

Imagen # 7

Para crear la imagen # 7, duplique la imagen # 5 y muévala debajo de la imagen # 3 en la columna 3. Luego actualice el módulo de imagen duplicada con la imagen # 7.

transición de imagen separatista

Imagen # 8

Para crear la imagen # 8, duplique la imagen # 6 y muévala debajo de la imagen # 4 en la columna 4. Luego actualice el módulo de imagen duplicada con la imagen # 8.

transición de imagen separatista

Ahora todos los cortes de imagen se han agregado a la fila 1 con el efecto de desplazamiento separatista.

Así es como se ve el resultado hasta ahora.

transición de imagen separatista

Agregar fila # 2

La segunda fila de imágenes no tomará mucho tiempo para diseñar. Todo lo que necesitamos hacer es duplicar la fila # 1, actualizar todas las imágenes con las correctas y luego asignarle una posición absoluta.

Continúe y duplique la fila # 1.

transición de imagen separatista

Actualizar imágenes de la fila n. ° 2

Recuerde las imágenes rotadas que creamos para la imagen # 2. Ahora, todo lo que tenemos que hacer es cargar cada uno de ellos en la ubicación correcta del módulo de imagen dentro de la fila # 2.

transición de imagen separatista

Actualizar efectos de desplazamiento de imagen

Una vez que las nuevas imágenes giradas estén en su lugar, necesitamos eliminar el efecto de desplazamiento Fading In and Out de todas las imágenes en la Fila # 2.

Haga esto, implemente el modo de vista de estructura alámbrica y use la selección múltiple para seleccionar las 8 imágenes en la fila # 2. Luego, abra la configuración de una de las imágenes seleccionadas para implementar la configuración del Elemento. En la opción de efecto de desplazamiento Fading In and Out, actualice lo siguiente:

  • Habilitar el desvanecimiento de entrada y salida: NO

transición de imagen separatista

Posición Fila # 2

Nuestro último paso es colocar la fila # 2 directamente detrás de la fila # 1. Una manera fácil de hacer esto es dar la fila y la posición absoluta. Abra la configuración de la fila 2 y actualice lo siguiente:

  • Posición: absoluta
  • Ubicación: Centro superior

transición de imagen separatista

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

You have Successfully Subscribed!