3 efectos de desplazamiento de transformación perfecta que puede aplicar a sus imágenes con Divi

¿Busca una forma genial de mostrar imágenes en su próximo sitio web Divi? Continúe leyendo, porque en esta publicación, manejaremos 3 efectos de desplazamiento de transformación de imagen que ayudarán a elevar el aspecto general de su página. Podrá seguir el proceso de recreación de la A a la Z de tres ejemplos diferentes e incluso descargarlos para su uso inmediato. El propósito principal de este tutorial es inspirarlo a combinar las nuevas opciones de transformación de Divi con las opciones ya existentes para crear un hermoso diseño web.

¡Hagámoslo!

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado de los tres ejemplos en diferentes tamaños de pantalla.

Escritorio

Ejemplo 1

Ejemplo # 2

Ejemplo # 3

Móvil

Ejemplo 1

Ejemplo # 2

Ejemplo # 3

Descargue los efectos de desplazamiento de transformación de imagen GRATIS

Suscríbete a nuestro canal de Youtube

Para poner sus manos sobre los efectos de desplazamiento de transformación de imagen gratuitos, primero deberá descargarlos 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.

Descarga los archivos

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.

DESCARGAR

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!

Pasos generales

Agregar nueva sección

Espaciado

Antes de recrear cada uno de los ejemplos individualmente, veremos algunos pasos generales. Agregue una nueva sección regular a su página utilizando los siguientes valores de margen y relleno:

• Margen superior: 200 px
• Margen inferior: 200 px
• Relleno superior: 0px
• Acolchado inferior: 0px

Agregar nueva fila

Estructura de la columna

Continúe agregando una nueva fila usando la siguiente estructura de columnas:

Color de fondo de la columna 2

Sin agregar ningún módulo todavía, abra la configuración de la fila y agregue un color de fondo a la segunda columna.

• Color de fondo de la columna 2: #efefef

Dimensionamiento

Vaya a la configuración de tamaño a continuación y permita que la fila ocupe todo el ancho de la pantalla.

• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1
• Ecualizar alturas de columna: Sí
• Ancho: 100%
• Ancho máximo: 100%

Espaciado

Agregue los siguientes valores de relleno personalizados a continuación:

• Relleno superior: 0px
• Acolchado inferior: 0px
• Acolchado superior de la columna 2: 10vw
• Acolchado inferior de la columna 2: 10vw
• Columna 2 Relleno izquierdo: 5vw
• Columna 2 Relleno derecho: 5vw

Agregue el módulo de texto n. ° 1 a la columna 2

Agregar contenido H2

Es hora de comenzar a agregar los distintos módulos a la columna 2, comenzando con un módulo de texto. Ingrese algún contenido H2 de su elección.

Configuración de texto H2

Vaya a la pestaña de diseño y modifique la configuración del texto H2.

• Fuente del título 2: Times New Roman
• Peso de fuente del encabezado 2: Negrita
• Color del texto del encabezado 2: # 0f47ff
• Tamaño del texto del encabezado 2: 3.5vw

Agregar módulo divisor a la columna 2

Visibilidad

El siguiente módulo que necesitamos en la segunda columna es un módulo divisor. Asegúrese de que la opción 'Mostrar divisor' esté habilitada.

• Mostrar divisor: Sí

Color

Luego, vaya a la pestaña de diseño y cambie el color del divisor.

• Color: # ff961e

Dimensionamiento

Modifique también los valores de tamaño.

• Peso del divisor: 1 px
• Ancho: 20%
• Alineación del módulo: izquierda
• Alto: 0px

Espaciado

Y cree algo de espacio para el módulo utilizando los siguientes valores de margen superior e inferior:

• Margen superior: 1vw
• Margen inferior: 1vw

Agregue el módulo de texto n. ° 2 a la columna 2

Agregar contenido

Pasemos al siguiente módulo, que es otro módulo de texto. Ingrese algún contenido de párrafo de su elección.

Configuración de texto

Vaya a la pestaña de diseño y cambie la configuración del texto.

• Fuente de texto: Open Sans
• Tamaño del texto: 0.7vw (escritorio), 1.7vw (tableta), 2.5vw (teléfono)
• Altura de la línea de texto: 1.5vw (escritorio), 2.5vw (tableta), 3.5vw (teléfono)
• Orientación del texto: justificar

Dimensionamiento

Modifique también la configuración de tamaño.

• Ancho: 61% (escritorio), 80% (tableta y teléfono)

Espaciado

Y agregue algunos márgenes superior e inferior personalizados.

• Margen superior: 2vw
• Margen inferior: 2vw

Agregue el módulo de texto n. ° 3 a la columna 3

Agregar contenido

Pasemos al siguiente y último módulo que necesitamos en la segunda columna, que es otro módulo de texto. Usaremos este módulo como un botón agregando contenido de párrafo.

Añadir enlace

Continúe agregando un enlace a la CTA.

Configuración de texto

Vaya a la pestaña de diseño y cambie la configuración del texto en consecuencia:

• Fuente de texto: Times New Roman
• Color del texto: # ff961e
• Tamaño del texto: 1.5vw (escritorio), 2.5vw (tableta), 3.5vw (teléfono)

Dimensionamiento

Cambie también el ancho del módulo en la configuración de tamaño.

• Ancho: 48%

Espaciado

Luego, vaya a la configuración de espaciado y agregue un relleno personalizado.

• Acolchado superior: 1vw
• Acolchado inferior: 1vw

Frontera

Termine el módulo de texto agregando un borde inferior con la siguiente configuración:

• Ancho del borde inferior: 1 px
• Color del borde inferior: # 0f47ff

Clonar sección dos veces

Una vez que haya terminado de personalizar la sección y todos los elementos que contiene, puede continuar y clonarla dos veces. Usaremos cada una de las secciones de nuestra página para recrear los tres ejemplos que se compartieron al comienzo de esta publicación.

Recrear el ejemplo n. ° 1

Agregar módulo de imagen a la columna 1

Dejar el cuadro de imagen vacío

¡Comencemos con el primer ejemplo! Agregue un nuevo módulo de imagen a la primera columna y asegúrese de dejar el cuadro de imagen vacío.

Color de fondo predeterminado

Cambie el color de fondo del módulo de imagen:

• Color de fondo: # 0f47ff

Colocar el cursor sobre el color de fondo

Modifica el color de fondo al pasar el mouse.

• Color de fondo: rgba (255,150,30,0.65)

Imagen de fondo

En lugar de cargar una imagen, agregaremos una al fondo, acompañada de la siguiente configuración:

• Tamaño de la imagen de fondo: Portada
• Posición de la imagen de fondo: Centro
• Repetición de imagen de fondo: sin repetición
• Mezcla de imagen de fondo: luz suave

Espaciado

Continúe con la configuración de espaciado del módulo y agregue algunos valores de relleno personalizados:

• Mostrar espacio debajo de la imagen: No
• Acolchado superior: 22vw
• Acolchado inferior: 22vw

Traducir por defecto Rotar

También giraremos la imagen al pasar el mouse. Asegúrese de que la imagen aparezca en su estado original antes de pasar el mouse agregando '0deg' a la opción correcta.

• Derecha: 0deg

Hover Traducir Rotar

Cambie este valor al pasar el mouse:

• Derecha: 180 grados

Transiciones

Para crear un efecto inmediato, eliminaremos la duración de la transición:

• Duración de la transición: 0 ms

Recrear el ejemplo n. ° 2

Agregar módulo de imagen a la columna 1

Dejar el cuadro de imagen vacío

¡Pasemos al segundo ejemplo! Nuevamente, asegúrese de dejar el cuadro de imagen vacío.

Color de fondo predeterminado

Vaya a la configuración de fondo y agregue el siguiente color de fondo (completamente transparente):

• Color de fondo: rgba (255,255,255,0)

Colocar el cursor sobre el color de fondo

Modifica este color al pasar el mouse:

• Color de fondo: rgba (0,0,0,0.65)

Imagen de fondo

De nuevo, estamos usando una imagen de fondo en lugar de cargar una al módulo en sí. Combine la imagen de fondo con las siguientes configuraciones:

• Tamaño de la imagen de fondo: Portada
• Posición de la imagen de fondo: Centro
• Repetición de imagen de fondo: sin repetición
• Mezcla de imagen de fondo: luz suave

Espaciado

Luego, vaya a la configuración de espaciado y modifique el relleno superior e inferior:

• Mostrar espacio debajo de la imagen: No
• Acolchado superior: 22vw
• Acolchado inferior: 22vw

Escala de transformación predeterminada

Asegúrese de que los valores de escala de transformación predeterminados sigan siendo '100%'.

• Derecha: 100%
• Inferior: 100%

Escala de transformación de desplazamiento

Y cambie estos valores al pasar el mouse para crear un efecto de escala.

• Derecha: 120%
• Inferior: 120%

Conversión de transformación predeterminada

De forma predeterminada, mantenemos '0px' para la opción inferior en la configuración de traducción de transformación.

• Abajo: 0px

Conversión de transformación de desplazamiento

Modifique este valor al pasar el mouse para reposicionar el elemento.

• Abajo: 9vw

Transiciones

También estamos creando una transición un poco más rápida cambiando la duración de la transición en la pestaña avanzada:

• Duración de la transición: 200 ms

Recrear el ejemplo n. ° 3

Cambiar la estructura de la columna

¡Pasemos al siguiente y último ejemplo! Empiece por modificar la estructura de columnas de la fila.

Agregar módulo de imagen a la columna 1

Subir imagen 1: 1

Luego, agregue un módulo de imagen a la primera columna. A diferencia de los dos primeros ejemplos, vamos a subir una imagen con una proporción de 1: 1 (el mismo ancho y alto).

Dimensionamiento

Pase a la pestaña de diseño y fuerce la imagen para que sea de ancho completo en la configuración de tamaño.

• Forzar ancho completo: Sí

Espaciado

Quite el espacio debajo de la imagen en la configuración de espaciado a continuación.

• Mostrar espacio debajo de la imagen: No

Borde predeterminado

Luego, vaya a la configuración del borde y agregue '500vw' a cada una de las esquinas. Nos aseguramos de que este valor sea lo suficientemente alto para cubrir todos los tamaños de pantalla.

Borde flotante

Elimina las esquinas redondeadas que has agregado al pasar el mouse.

Filtros predeterminados

Luego, vaya a la configuración de filtros y asegúrese de que se agreguen estos valores predeterminados:

• Saturación: 100%
• Brillo: 46%
• Opacidad: 3%

Filtros flotantes

Habilite la opción de desplazamiento en cada una de las configuraciones modificadas y use los siguientes valores:

• Saturación: 300%
• Brillo: 46%
• Opacidad: 100%

Escala de transformación predeterminada

Luego, vaya a las opciones de transformación y modifique las opciones de escala de transformación predeterminadas:

• Derecha: 68%
• Inferior: 68%

Escala de transformación de desplazamiento

Cambie estos valores al pasar el mouse.

• Derecha: 130%
• Inferior: 130%

Conversión de transformación predeterminada

Continúe con los valores de conversión de transformación y asegúrese de que los valores de conversión de transformación predeterminados sigan siendo los mismos:

• Derecha: 0px
• Abajo: 0px

Conversión de transformación de desplazamiento

Modifique los valores al pasar el mouse.

• Derecha: 1vw
• Abajo: 8vw

Transiciones

Por último, pero no menos importante, aumente la duración de la transición en la pestaña avanzada para crear una transición suave y ¡listo!

• Duración de la transición: 600 ms

Avance

Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.

Escritorio

Ejemplo 1

Ejemplo # 2

Ejemplo # 3

Móvil

Ejemplo 1

Ejemplo # 2

Ejemplo # 3

Pensamientos finales

En esta publicación, le mostramos cómo ser creativo con el Módulo de imagen y las opciones de desplazamiento y transformación de Divi. Los efectos que hemos recreado son solo algunas de las muchas posibilidades hermosas que existen. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!

Si está ansioso por aprender más sobre Divi y obtener más obsequios de Divi, asegúrese de suscribirse a nuestro boletín por correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.