Cómo crear imágenes animadas de desplazamiento antes y después en Divi

Vistazo

Aquí hay un vistazo rápido al diseño que construiremos en este tutorial.

Descarga el diseño GRATIS

Para poner sus manos en los diseños 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.

Para importar el diseño de la sección a su Biblioteca Divi, navegue hasta la Biblioteca Divi.

Haga clic en el botón Importar.

En la ventana emergente de portabilidad, seleccione la pestaña de importación y elija el archivo de descarga desde su computadora.

Luego haga clic en el botón importar.

Una vez hecho esto, el diseño de la sección estará disponible en Divi Builder.

Vayamos al tutorial, ¿de acuerdo?

Lo que necesitas para empezar

Para comenzar, deberá hacer lo siguiente:

1. Si aún no lo has hecho, instala y activa el tema Divi .
2. Cree una nueva página en WordPress y use Divi Builder para editar la página en la parte delantera (constructor visual).
3. Elija la opción «Construir desde cero».

Después de eso, tendrás un lienzo en blanco para comenzar a diseñar en Divi.

Creación de imágenes animadas de desplazamiento antes y después en Divi

Ahora estamos listos para comenzar a crear nuestras imágenes animadas de desplazamiento antes y después en Divi. Para hacer esto, primero necesitaremos crear una fila de dos columnas que no se ajuste (o rompa) en dispositivos móviles. Cada una de las columnas también deberá tener el desbordamiento oculto para que las imágenes de antes y después se deslicen hacia afuera y hacia adentro para ver dentro de cada columna en el desplazamiento. Una vez que las columnas estén en su lugar, agregaremos nuestras imágenes a cada columna y agregaremos el estilo y la animación de desplazamiento horizontal a cada una. Una vez que esté en su lugar, agregaremos el texto del encabezado antes y después sobre las imágenes.

Parte 1: crear la fila de dos columnas

Para comenzar, agregue una fila de dos columnas a la sección regular predeterminada utilizando Divi Builder en la parte delantera.

Configuración de fila

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

• Ancho del canalón: 1
• Ancho: 100%
• Ancho máximo: 900 px (escritorio), 700 px (tableta), 300 px (teléfono)
• Relleno: 0px arriba, 0px abajo

NOTA: Establecer el ancho máximo de la fila usando unidades de longitud de píxel es crucial para que este diseño funcione. Tenga en cuenta estos valores porque el ancho de cada imagen y la animación de desplazamiento horizontal que agregaremos más adelante dependerán del ancho máximo de la fila.

Para asegurarse de que las columnas no se envuelvan o se dividan en un diseño de una sola columna en dispositivos móviles, abra la pestaña avanzada y agregue el siguiente CSS personalizado al elemento principal:

Configuración de columna

A continuación, abra la configuración de la columna 1 y actualice la configuración de diseño de la siguiente manera:

• Acolchado: 5vw arriba, 5vw abajo
• Ancho del borde derecho: 2px
• Color del borde derecho: #666666

En la pestaña Avanzado, actualice el desbordamiento de la siguiente manera:

• Desbordamiento horizontal: oculto
• Desbordamiento vertical: oculto

Recuerde, cada una de las columnas deberá tener el desbordamiento oculto para que las imágenes de antes y después se deslicen hacia afuera y hacia adentro para ver dentro de cada columna en el desplazamiento.

A continuación, abra la configuración de la columna 2 y actualice la configuración de diseño de la siguiente manera:

• Acolchado: 5vw arriba, 5vw abajo
• Ancho del borde izquierdo: 2px
• Color del borde izquierdo: #666666

NOTA: Los bordes derecho e izquierdo de cada columna crean la línea central que será el punto central de la transición de imagen antes y después.

Luego actualice el desbordamiento a oculto para esta columna también.

• Desbordamiento horizontal: oculto
• Desbordamiento vertical: oculto

Parte 2: Crear las imágenes de antes y después

Con nuestro diseño de dos columnas en su lugar, ahora podemos agregar las imágenes que usaremos para la animación de antes y después. De hecho, tendremos tres imágenes en total. En la columna 1, tendremos una versión de «sombra» de la imagen anterior que se queda atrás (no se anima) y tendremos la imagen anterior (en blanco y negro) que eventualmente se moverá hacia la derecha en el desplazamiento. En la columna 2 tendremos la imagen posterior que se desplazará a la vista desde la izquierda al desplazarse.

Agregar las tres imágenes

Para crear la primera imagen, agregue un nuevo módulo de imagen en la columna 1.

Luego cargue una imagen en el módulo.

En la pestaña de diseño, actualice las siguientes opciones de ancho:

• Ancho: 100%
• Ancho máximo: 448 px (escritorio), 348 px (tableta), 148 px (teléfono)

NOTA: Cada una de las dimensiones de ancho máximo está determinada por exactamente la mitad de la fila menos el borde de 2px. Entonces, para el escritorio, la fila tiene un ancho máximo de 900 px. La mitad de la fila es 450px. Luego quita los 2px agregados por el borde y obtienes 448px.

Para crear las siguientes dos imágenes, duplique el módulo de imagen tres veces.

Luego mueva una de las imágenes a la columna 2.

Parte 3: Agregar estilo personalizado y animación de desplazamiento a las imágenes

Estilo de “sombra” antes de la imagen

Para diseñar la «sombra» de la imagen anterior, abra la configuración de la primera (o superior) imagen en la columna 1 y actualice la opción de filtro de la siguiente manera:

• Saturación: 0%
• Opacidad: 10%

Para asegurarse de que la imagen de la sombra se coloque directamente detrás de la imagen anterior, actualice la posición de la imagen de la siguiente manera:

• Posición: Absoluta
• Desplazamiento vertical: 5vw

NOTA: El desplazamiento vertical debe ser igual al relleno superior de la columna para que las imágenes permanezcan alineadas verticalmente.

Antes del estilo de imagen y la configuración de desplazamiento

A continuación, abra la configuración de la segunda imagen en la columna 1 (ahora ubicada sobre la imagen de la sombra) y actualice el filtro de saturación para que sea una versión en blanco y negro de la imagen de la siguiente manera:

• Saturación: 0%

En la pestaña avanzada, seleccione la pestaña de movimiento horizontal en Efectos de transformación de desplazamiento y habilite el movimiento horizontal. Luego actualice lo siguiente:

Establecer movimiento horizontal para escritorio…

• Compensación inicial: 0 (al 30 %)
• Compensación media: 2,26 (al 45 %)
• Desplazamiento final: 4,52 (al 60 %)

Establecer movimiento horizontal para tableta…

• Compensación inicial: 0 (al 30 %)
• Compensación media: 1,76 (al 45 %)
• Desplazamiento final: 3,52 (al 60 %)

Establecer movimiento horizontal para el teléfono…

• Compensación inicial: 0 (al 30 %)
• Compensación media: 0,76 (al 45 %)
• Compensación final: 1,52 (al 60 %)

NOTA: Tenga en cuenta que los valores de compensación se establecen en píxeles. Un valor de 1 es igual a 100px. Entonces, un valor de 4.52 es en realidad 452px. Entonces, al final de la animación horizontal en el escritorio, la imagen se habrá movido 452px a la derecha. Los 452 px están determinados por la mitad de la fila (450 px) más el borde de 2 px.

Después de la configuración de desplazamiento de la imagen

Finalmente, actualice la imagen final en la columna 2 con los siguientes efectos de desplazamiento de movimiento horizontal :

Establecer movimiento horizontal para escritorio…

• Desplazamiento inicial: -4,52 (al 30 %)
• Compensación media: -2.26 (al 45%)
• Compensación final: 0 (al 60 %)

Establecer movimiento horizontal para tableta…

• Compensación inicial: -3.52 (al 30%)
• Compensación media: -1,76 (al 45 %)
• Compensación final: 0 (al 60 %)

Establecer movimiento horizontal para el teléfono…

• Desplazamiento inicial: -1,52 (al 30 %)
• Compensación media: -0,76 (al 45 %)
• Compensación final: 0 (al 60 %)

Adición de margen de sección para pruebas de desplazamiento

Antes de echar un vistazo a nuestra animación de desplazamiento hasta el momento, debemos agregar un margen superior e inferior temporal a la sección para que tengamos espacio para desplazarnos en la página en vivo.

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

• Margen: 80vh arriba, 80vh abajo

Ahora mira el resultado en una página en vivo.

Parte 4: Crear el texto del encabezado antes y después

Para terminar el diseño, necesitamos crear el texto de encabezado antes y después sobre cada imagen.

Fila nueva

Para hacer esto, cree una nueva fila de dos columnas.

Copie los estilos de fila de la fila anterior que contiene nuestras imágenes.

Luego pegue los estilos de fila en la nueva fila.

Agregar los módulos de texto

Una vez que la fila esté lista, arrastre sobre la fila que contiene las imágenes. Luego agregue un nuevo módulo de texto a la columna 1 de la nueva fila.

Luego reemplace el texto del cuerpo con lo siguiente:

En la pestaña de diseño, actualice los siguientes estilos de encabezado H2:

• Encabezado 2 Fuente: Roboto
• Título 2 Estilo de fuente: TT
• Encabezado 2 Alineación de texto: centro
• Encabezado 2 Espaciado entre letras: 2px

Para crear el encabezado de la imagen posterior, copie el módulo de texto y péguelo en la columna 2 de la misma fila.

Luego actualice el texto H2 a «después» en lugar de «antes».

¡Eso es todo!

Resultado final

Aquí esta el resultado final.

Y así es como se ve en la pantalla de la tableta y el teléfono:

Y aquí hay algunos ejemplos más de lo que puede hacer simplemente reemplazando las imágenes utilizadas.

Pensamientos finales

En este tutorial, le mostramos lo fácil que es crear sus propias imágenes animadas de antes y después con desplazamiento personalizado usando Divi. Lo bueno de este diseño es que es fácil de replicar para obtener más ejemplos de imágenes de antes y después. ¡Todo lo que necesita hacer es duplicar la sección y actualizar las imágenes! Tenga en cuenta que para obtener los mejores resultados, querrá mantener esas imágenes del mismo tamaño para que se mantengan alineadas durante la animación.

Con suerte, esto le dará un impulso de diseño adicional para su próximo proyecto que puede necesitar mostrar imágenes de antes y después.

Espero escuchar de usted en los comentarios.

¡Salud!