Cómo crear una transición de imagen de separación con los efectos de desplazamiento de Divi
Publicado: 2020-02-28Los 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 separatista con los efectos de desplazamiento de Divi. Este efecto apareció originalmente en la página de demostración. El efecto implica cortar imágenes de antemano usando un editor de fotos como Photoshop (es bastante fácil de hacer). Una vez cortadas 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.
Empecemos.
Vistazo
Aquí hay un vistazo al diseño de hoy.
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 por qué ser aburrido".
Descargue el diseño Divi de transición de imagen Breakaway GRATIS
Para poner sus manos en el diseño 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.
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.
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:
- Si aún no lo ha hecho, instale y active Divi Theme.
- Cree una nueva página en WordPress y use Divi Builder para editar la página en el front-end (constructor visual).
- Elija la opción "Construir desde cero".
Después de eso, tendrá un lienzo en blanco para comenzar a diseñar en Divi.
Aparte de la configuración de Divi anterior, necesitará:
- Dos imágenes (al menos 1080 px por 540 px)
- Un software de edición de fotografías 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, debemos cortar nuestras dos imágenes que se utilizarán para el efecto de desplazamiento de transición de ruptura. Ambas imágenes deberán recortarse para que tengan exactamente 1080 px por 540 px. Después de eso, deben cortarse en 8 partes iguales (4 a lo ancho, 2 hacia abajo). Una vez que estén listos, podemos guardarlos en nuestra computadora y subir los cortes de imagen a nuestro sitio. Comencemos con la primera imagen.
Imagen # 1
Recortando la imagen
Lo primero que debemos hacer es recortar la imagen para que tenga las dimensiones exactas de 1080px por 540px. Puede utilizar cualquier software de edición de imágenes para hacer esto. En Photoshop, puede utilizar la herramienta de recorte.
Cortar la imagen
A continuación, haga clic para usar la herramienta de corte y seleccione la imagen completa. Haga clic derecho en la rebanada / imagen y seleccione la opción Dividir rebanada.
En el cuadro de opción Dividir sector, actualice lo siguiente:
Dividir horizontalmente en:
- 2 rodajas hacia abajo, espaciadas uniformemente
- 270 píxeles por rebanada
Dividir verticalmente en:
- 4 rebanadas a lo ancho, espaciadas uniformemente
- 270 píxeles por rebanada
Luego haga clic en Aceptar.
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 la imagen, vaya a Archivo> Exportar> Guardar para Web.
Luego elija el formato de archivo y haga clic en Guardar.
En el cuadro emergente, asegúrese de actualizar lo siguiente:
- Guardar como: [ingrese el nombre de la (s) imagen (s)]
- Formato: solo imágenes
- Configuración: configuración predeterminada
- Rebanadas: todas las rebanadas
Luego haga clic en Guardar.
Ahora todos los cortes de imagen se guardarán en la computadora, listos para ser cargados en Divi.
Imagen # 2
Para crear la segunda imagen necesaria para este efecto de desplazamiento de transición de imagen separatista, debemos seguir el mismo proceso (recortar, cortar y guardar) que usamos para crear la primera imagen.
Rotar 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 componen la segunda imagen deberá girarse 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 de su sistema operativo (incluso puede usar la galería de medios de WordPress para editar y rotar las imágenes después de subirlas a su sitio).
Aquí hay una guía sobre cómo se deben rotar las imágenes dentro de su posición original al cortar la imagen.
Aquí está la imagen original.
Así es como se deben rotar las secciones de la imagen antes de subirlas a su sitio.
Esto es necesario para que finalmente podamos obtener el siguiente efecto de desplazamiento.
Ahora que ambas imágenes están recortadas, cortadas, guardadas y giradas, 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: Creación del efecto de desplazamiento de transición de imagen de separación en Divi
Una vez que los cortes de la imagen estén listos, podemos comenzar el proceso de diseño en Divi. He aquí cómo hacerlo.
Agregar fila n. ° 1
Para empezar, cree una fila de cuatro columnas.
Configuración de filas
Abra la configuración de la fila y actualice lo siguiente:
- Ancho de la canaleta: 1
- Ancho máximo: 1080px (escritorio), 540px (tableta y teléfono)
- Relleno: 0px arriba, 0px abajo
- Desbordamiento horizontal: visible
- Desbordamiento vertical: visible
Actualizar relleno de sección
Dado que vamos a colocar nuestra segunda fila absolutamente encima de la primera fila, necesitamos quitar el relleno superior (e inferior) de la sección para que no altere la posición de la segunda fila. Abra la configuración de la sección y actualice lo siguiente:
- Relleno: 0px arriba, 0px a la izquierda
Agregar las imágenes
En la primera fila, vamos a agregar cada una de las 8 imágenes / cortes que componen la primera imagen. Las imágenes deben colocarse dentro de las columnas exactamente como se cortaron en Photoshop (4 a lo ancho y 2 hacia abajo).
Aquí hay una ilustración de cada imagen etiquetada con un número. Así es como debería verse después de que se hayan agregado todas las imágenes a la fila.
Imagen # 1
Agregue el primer módulo de imagen a la columna 1.
Luego, cargue el primer segmento de imagen en el módulo.
Efectos de desplazamiento
En la pestaña avanzada, agregue los siguientes efectos de desplazamiento a la imagen.
- Habilitar Fading In y Out: SÍ
- Opacidad inicial: 100% (al 20% de la ventana gráfica)
- Opacidad media: 100% (al 20% de la ventana gráfica)
- Opacidad final: 0% (al 50% de la ventana gráfica)
Haga clic en la pestaña Escala y actualice lo siguiente:
- Habilitar escalado hacia arriba y hacia abajo: SÍ
- Escala inicial: 100% (al 20% de la ventana gráfica)
- Escala media: 70% (en la ventana gráfica del 32% - 48%)
- Escala final: 100% (al 60% de la ventana gráfica)
Haga clic en la pestaña Girar y actualice lo siguiente:
- Habilitar rotación: SÍ
- Rotación inicial: 0 grados (en la ventana gráfica del 0%)
- Rotación media: 0 grados (al 20% de la ventana gráfica)
- Rotación final: -90 grados (al 60% de la ventana gráfica)
El efecto de desplazamiento se verá así al desplazarse hacia abajo en la página.
Imagen # 2
Para crear la imagen n. ° 2, duplique la imagen n. ° 1 y coloque el duplicado en la columna 2.
Actualice el módulo de imagen duplicada con la imagen n. ° 2.
Actualizar efecto de desplazamiento
Vamos a mantener la mayoría de los mismos efectos de desplazamiento de la imagen n. ° 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
Imagen # 3
Para crear la imagen n. ° 3, copie y pegue la imagen n. ° 1 en la columna 3 y luego cambie la imagen a la imagen n. ° 3.
Imagen # 4
Para crear la imagen n. ° 4, copie y pegue la imagen n. ° 2 en la columna 4 y actualice la imagen a la imagen n. ° 4.
Imagen # 5
Para crear la imagen n. ° 5, duplique la imagen n. ° 1 para que el duplicado esté directamente debajo en la columna 1. 
Actualice la imagen a la imagen n. ° 5. A continuación, actualice el efecto de desplazamiento Fading In and Out de la siguiente manera:
- Opacidad inicial: 100% (al 0% de la ventana gráfica)
- Opacidad media: 100% (al 0% de la ventana gráfica)
- Opacidad final: 0% (al 40% de la ventana gráfica)
A continuación, 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% (al 12% - 28% de la ventana gráfica)
- Escala final: 100% (al 40% de la ventana gráfica)
Y finalmente, actualice el efecto de desplazamiento giratorio de la siguiente manera:
- Rotación inicial: 0 grados (en la ventana gráfica del 0%)
- Rotación media: 0 grados (al 0% de la ventana gráfica)
- Rotación final: 90 grados (al 40% de la ventana gráfica)
Imagen # 6
Para crear la imagen n. ° 6, duplique la imagen n. ° 5 y muévala a la columna 2 (debajo de la imagen n. ° 2).
Actualice el módulo de imagen con la imagen n. ° 5. Luego, ajuste el efecto de desplazamiento giratorio en la dirección opuesta (-90 grados) de la siguiente manera:
- Rotación final: -90 grados
Imagen # 7
Para crear la imagen n. ° 7, duplique la imagen n. ° 5 y muévala debajo de la imagen n. ° 3 en la columna 3. Luego actualice el módulo de imagen duplicada con la imagen n. ° 7.
Imagen # 8
Para crear la imagen n. ° 8, duplique la imagen n. ° 6 y muévala debajo de la imagen n. ° 4 en la columna 4. Luego actualice el módulo de imagen duplicada con la imagen n. ° 8.
Ahora todas las secciones de la imagen se han agregado a la fila # 1 con el efecto de desplazamiento separatista.
Así es como se ve el resultado hasta ahora.
Agregar fila n. ° 2
La segunda fila de imágenes no tomará mucho tiempo para diseñar. Todo lo que tenemos que hacer es duplicar la fila # 1, actualizar todas las imágenes con las correctas y luego darle una posición absoluta.
Continúe y duplique la fila # 1.
Actualizar las imágenes de la fila n. ° 2
Recuerde las imágenes rotadas que creamos para la imagen n. ° 2. Ahora, todo lo que tenemos que hacer es subir cada uno de ellos a la ubicación correcta del módulo de imagen dentro de la fila # 2.
Actualizar efectos de desplazamiento de imágenes
Una vez que las nuevas imágenes rotadas están en su lugar, debemos eliminar el efecto de desplazamiento de Desvanecimiento hacia adentro y hacia afuera 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 Fading In y Out: NO
Posición Fila # 2
Nuestro último paso es colocar la fila # 2 directamente detrás de la fila # 1. Una forma sencilla de hacer esto es dar la fila y la posición absoluta. Abra la configuración de la fila n. ° 2 y actualice lo siguiente:
- Posición: Absoluto
- Ubicación: Top Center
Resultado final
Para ver el resultado, es posible que deba darle a su sección una cantidad significativa de margen superior e inferior o crear otras secciones por encima y por debajo del diseño. Esto le dará el espacio que necesita para ver correctamente el efecto de desplazamiento.
Veamos el resultado final.
Y aquí está en el móvil.
Pensamientos finales
Esta transición de imagen separatista es un diseño impresionante en sí mismo, pero puede usarlo fácilmente para transmitir un mensaje de tipo transformación a los visitantes (como un antes y un después). Y tampoco tienes que conformarte con este diseño. Siéntase libre de experimentar con diferentes efectos de desplazamiento para crear transiciones de imagen aún más sorprendentes. ¿Tienes alguna idea?
Espero tener noticias tuyas en los comentarios.
¡Salud!