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

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 en 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 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.

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 usando los siguientes valores de margen y relleno:

• Margen superior: 200px
• Margen inferior: 200px
• Relleno superior: 0px
• Relleno 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.

• Columna 2 Color de fondo: #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 del canalón: 1
• Igualar alturas de columna: Sí
• Ancho: 100%
• Ancho máximo: 100%

Espaciado

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

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

Agregue el Módulo de Texto #1 a la Columna 2

Agregar contenido H2

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

Configuración de texto H2

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

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

Agregue el 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, ve a la pestaña de diseño y cambia el color del divisor.

• Color: #ff961e

Dimensionamiento

Modifique también los valores de tamaño.

• Peso del divisor: 1px
• Ancho: 20%
• Alineación del módulo: Izquierda
• Altura: 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 #2 a la Columna 2

Agregar contenido

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

Configuración de texto

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

• Fuente de texto: Open Sans
• Tamaño del texto: 0,7 vw (escritorio), 1,7 vw (tableta), 2,5 vw (teléfono)
• Altura de 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 un margen superior e inferior personalizado.

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

Agregue el Módulo de Texto #3 a la Columna 3

Agregar contenido

En el próximo 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 algo de contenido de párrafo.

Añadir enlace

Continúe agregando un enlace a la CTA.

Configuración de texto

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

• Fuente del texto: Times New Roman
• Color del texto: #ff961e
• Tamaño del texto: 1,5 vw (escritorio), 2,5 vw (tableta), 3,5 vw (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

Borde

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

• Ancho del borde inferior: 1px
• 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 clonarlo 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 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

Color de fondo flotante

Modifique 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 la imagen de fondo: sin repetición
• Mezcla de imagen de fondo: luz tenue

Espaciado

Pase a 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 rotar por defecto

También rotaremos la imagen al pasar el mouse. Asegúrese de que la imagen aparezca en su estado original antes de pasar el mouse agregando ‘0 grados’ a la opción correcta.

• Derecha: 0 grados

Pasar el cursor 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: 0ms

Recrear el Ejemplo #2

Agregar módulo de imagen a la columna 1

Dejar cuadro de imagen vacío

¡Vamos 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)

Color de fondo flotante

Modifique este color al pasar el mouse:

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

Imagen de fondo

Estamos, nuevamente, usando una imagen de fondo en lugar de cargar una en el propio módulo. Combine la imagen de fondo con los siguientes ajustes:

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

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 permanezcan en ‘100%’.

• Derecha: 100%
• Abajo: 100%

Escala de transformación de desplazamiento

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

• Derecha: 120%
• Fondo: 120%

Traducció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

Pasar el cursor Transformar Traducir

Modifique este valor al pasar el mouse para cambiar la posición del elemento.

• Abajo: 9vw

Transiciones

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

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

Recrear el Ejemplo #3

Cambiar la estructura de la columna

¡Vamos al siguiente y último ejemplo! Comience modificando 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 (mismo ancho y alto).

Dimensionamiento

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

• Forzar ancho completo: Sí

Espaciado

Elimine 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 de bordes y agregue ‘500vw’ en cada una de las esquinas. Nos estamos asegurando de que este valor sea lo suficientemente alto para cubrir todos los tamaños de pantalla.

Borde flotante

Quite las esquinas redondeadas que ha agregado al pasar el mouse.

Filtros predeterminados

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

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

Filtros de desplazamiento

Habilite la opción de desplazamiento sobre 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%
• Fondo: 68%

Escala de transformación de desplazamiento

Cambie estos valores al pasar el mouse.

• Derecha: 130%
• Fondo: 130%

Traducción de transformación predeterminada

Pase a los valores de traducción de transformación y asegúrese de que los valores de traducción de transformación predeterminados sigan siendo los mismos:

• Derecha: 0px
• Abajo: 0px

Pasar el cursor Transformar Traducir

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: 600ms

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 hermosas posibilidades 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 regalos de Divi, asegúrese de suscribirse  a nuestro boletín de correo electrónico  y  al canal de YouTube  para que siempre sea una de las primeras personas en conocer y obtener los beneficios de este contenido gratuito.