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, vamos a explicar paso a paso cómo crear una transición de imagen separada con Divi y sus efectos de desplazamiento. Este efecto apareció originalmente en la página de demostración . El efecto implica cortar las imágenes de antemano usando 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.
Empecemos.
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 de 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 nuestro boletín utilizando 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 será «resuscrito» ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín informativo 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 muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro 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.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
Para importar el diseño a su página, simplemente extraiga el archivo zip y arrastre el archivo JSON a Divi Builder.
Vayamos al tutorial, ¿de acuerdo?
Lo que necesitas para empezar
Para comenzar, deberá hacer lo siguiente:
- Si aún no lo has hecho, instala y activa el tema Divi .
- Cree una nueva página en WordPress y use Divi Builder para editar la página en la parte delantera (constructor visual).
- Elija la opción «Construir desde cero».
Después de eso, tendrás un lienzo en blanco para comenzar a diseñar en Divi.
Además de la configuración de 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, debemos dividir nuestras dos imágenes que se utilizarán para el efecto de desplazamiento de transición de separación. 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 de ancho, 2 de abajo). Una vez listos, podemos guardarlos en nuestra computadora y subir los cortes de imagen a nuestro sitio. Comencemos con la primera imagen.
Imagen #1
Recortar la imagen
Lo primero que debemos hacer es recortar la imagen para que tenga las dimensiones exactas de 1080 px por 540 px. Puede usar 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 división y seleccione la imagen completa. Haga clic con el botón derecho en el sector/imagen y seleccione la opción Dividir sector.
En el cuadro de opción Dividir sector, actualice lo siguiente:
Dividir horizontalmente en:
- 2 rebanadas hacia abajo, espaciadas uniformemente
- 270 píxeles por rebanada
Dividir verticalmente en:
- 4 rebanadas de ancho, espaciadas uniformemente
- 270 píxeles por rebanada
Luego haga clic en Aceptar.
Guardar los sectores de imagen
Ahora tenemos una imagen dividida en 8 bloques iguales, cada uno de ellos de 270 px por 270 px.
Para guardar los sectores 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(es)]
- Formato: Solo imágenes
- Configuración: configuración predeterminada
- Rebanadas: Todas las Rebanadas
Luego haga clic en Guardar.
Ahora todos los segmentos de su imagen se guardarán en la computadora, listos para cargarse en Divi.
Imagen #2
Para crear la segunda imagen necesaria para este efecto de desplazamiento de transición de imagen separada, debemos seguir el mismo proceso (recortar, dividir y guardar) que usamos para crear la primera imagen.
Rotar sectores de imagen
Sin embargo, debido a la forma en que funciona el efecto de desplazamiento giratorio, cada uno de los segmentos 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 cargarlas en 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 los segmentos de imagen antes de cargarlos en su sitio.
Esto es necesario para que eventualmente podamos obtener el siguiente efecto de desplazamiento.
Ahora que ambas imágenes están recortadas, cortadas, guardadas y rotadas, está listo para agregarlas a su sitio Divi. Debería 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í está cómo hacerlo.
Añadir Fila #1
Para comenzar, cree una fila de cuatro columnas.
Configuración de fila
Abra la configuración de la fila y actualice lo siguiente:
- Ancho del canalón: 1
- Ancho máximo: 1080 px (escritorio), 540 px (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, debemos quitar el relleno superior (e inferior) de la sección para que no cambie 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 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 se hayan agregado todas las imágenes a la fila.
Imagen #1
Agregue el primer módulo de imagen a la columna 1.
A continuación, 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 fundido de entrada y salida: SÍ
- Opacidad inicial: 100 % (al 20 % de ventana gráfica)
- Opacidad media: 100 % (al 20 % de ventana gráfica)
- Opacidad final: 0 % (al 50 % de 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 ventana gráfica)
- Escala media: 70 % (al 32 % – 48 % de la ventana gráfica)
- Escala final: 100 % (al 60 % de la ventana gráfica)
Haga clic en la pestaña de rotación y actualice lo siguiente:
- Habilitar rotación: SÍ
- Rotación inicial: 0 grados (a 0% de ventana gráfica)
- 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 #2, duplique la imagen #1 y coloque el duplicado en la columna 2.
Actualice el módulo de imagen duplicada con la imagen #2.
Actualizar efecto de desplazamiento
Vamos a mantener la mayoría de los mismos efectos de desplazamiento 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
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.
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 quede directamente debajo de la columna 1.
Actualice la imagen a la imagen #5. Luego actualice el efecto de desplazamiento Fading In and Out de la siguiente manera:
- Opacidad inicial: 100 % (a 0 % de ventana gráfica)
- Opacidad media: 100 % (a 0 % de ventana gráfica)
- Opacidad final: 0% (a 40% de ventana gráfica)
Luego actualice el efecto de desplazamiento de escala 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 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 (a 0% de ventana gráfica)
- Rotación media: 0 grados (a 0% de ventana gráfica)
- Rotación final: 90 grados (al 40 % de la ventana gráfica)
Imagen #6
Para crear la imagen #6, duplique la imagen #5 y muévala a la columna 2 (debajo de la imagen #2).
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
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.
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.
Ahora todos los sectores de la imagen se han agregado a la fila n. ° 1 con el efecto de desplazamiento de separación.
Así es como se ve el resultado hasta ahora.
Añadir Fila #2
La segunda fila de imágenes no tomará mucho tiempo para diseñar. Todo lo que tenemos que hacer es duplicar la fila n. ° 1, actualizar todas las imágenes con las correctas y luego darle una posición absoluta.
Continúe y duplique la fila #1.
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.
Actualizar efectos de desplazamiento de imagen
Una vez que las nuevas imágenes rotadas estén en su lugar, debemos eliminar el efecto de desplazamiento de aparición y desaparición gradual de todas las imágenes en la fila n.º 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 aparición y desaparición gradual: NO
Fila de posición n.º 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 n.º 2 y actualice lo siguiente:
- Posición: Absoluta
- Ubicación: Centro superior
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 el efecto de desplazamiento correctamente.
Veamos el resultado final.
Y aquí está en el móvil.
Pensamientos finales
Esta transición de imagen separada 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 asombrosas. ¿Tienes alguna idea?
Espero escuchar de usted en los comentarios.
¡Salud!