Cómo crear una animación de envolvente con los efectos de desplazamiento de Divi

Cada vez que aparece una nueva función de Divi, intentamos compartir algunos tutoriales interesantes y útiles que te ayudarán a pensar fuera de la caja y ser creativo con Divi. El tutorial de hoy hace exactamente eso. Le mostraremos cómo puede crear una animación de envolvente receptiva con los efectos de desplazamiento de Divi. Esta es una excelente manera de enfatizar un bloque de llamado a la acción, por ejemplo, pero también puede usarlo para otros fines. ¡También podrás descargar el archivo JSON gratis!

Hagámoslo.

Avance

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

Escritorio

Móvil

Suscríbete a nuestro canal de Youtube

Descargue el diseño de animación de envolvente GRATIS

Para poner sus manos en el diseño de animación de sobre gratuito, 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.

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!

Recrear la estructura del elemento

Agregar nueva sección al medio o al final de la página

Color de fondo

Comience agregando una nueva sección en algún lugar en el medio o en la parte inferior de su página. Abra la configuración de la sección y cambie el color de fondo a blanco.

• Color de fondo: #FFFFFF

Espaciado

A continuación, modifique la configuración de espaciado.

• Acolchado superior: 5vw
• Acolchado inferior: 0px

Desbordes

Y esconde los desbordamientos de la sección.

• Desbordamiento horizontal: oculto
• Desbordamiento vertical: oculto

Agregar fila n. ° 1

Estructura de la columna

Continúe agregando una nueva fila a la sección usando la siguiente estructura de columnas:

Color de fondo

Sin agregar ningún módulo todavía, abra la configuración de la fila y cambie el color de fondo.

• Color de fondo: #FFFFFF

Dimensionamiento

Vaya a la pestaña de diseño de la fila a continuación y cambie la configuración de tamaño de la siguiente manera:

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

Espaciado

Luego, agregue algunos valores de relleno personalizados en diferentes tamaños de pantalla.

• Acolchado superior: 14vw (escritorio), 11vw (tableta y teléfono)
• Acolchado inferior: 14vw (escritorio), 11vw (tableta y teléfono)
• Acolchado izquierdo: 20vw (escritorio), 10vw (tableta y teléfono)
• Relleno derecho: 20vw (escritorio), 10vw (tableta y teléfono)

Frontera

Agregue un poco de radio de borde también.

• Todas las esquinas: 20px

Sombra de la caja

También estamos usando una sombra de caja sutil.

• Posición vertical de la sombra del cuadro: 38px
• Fuerza de desenfoque de sombra de caja: 80px
• Color de sombra: rgba (0,0,0,0.08)

Índice Z

Complete la configuración de la fila aumentando el índice z en la pestaña avanzada.

• Índice Z: 11

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

Agregar contenido H2

Es hora de agregar módulos, comenzando con un primer módulo de texto. Ingrese algún contenido H2 de su elección.

Configuración de texto H2

Cambie la configuración de texto H2 del módulo de la siguiente manera:

• Fuente del título 2: Poppins
• Encabezado 2 Tamaño del texto: 2vw (escritorio), 4vw (tableta), 5vw (teléfono)

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

Agregar contenido

Agregue otro módulo de texto justo debajo del anterior e inserte algún contenido descriptivo de su elección.

Configuración de texto

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

• Fuente de texto: Open Sans
• Tamaño del texto: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
• Altura de la línea de texto: 2.6em

Espaciado

Agregue también algunos valores superiores e inferiores personalizados en diferentes tamaños de pantalla.

• Acolchado superior: 2vw (escritorio), 4vw (tableta), 5vw (teléfono)
• Acolchado inferior: 2vw (escritorio), 4vw (tableta), 5vw (teléfono)

Agregar módulo de botones a la columna

Agregar copia

El siguiente y último módulo que colocaremos en esta fila es un módulo de botones. Agregue una copia de su elección.

Configuración de botones

Luego, diseñe el botón en consecuencia:

• Usar estilos personalizados para el botón: Sí
• Tamaño del texto del botón: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
• Color del texto del botón: #ffffff
• Color de fondo del botón: # 0f33ff
• Ancho del borde del botón: 0px

• Radio del borde del botón: 100 px
• Fuente del botón: Poppins

Espaciado

Y complete la configuración del módulo agregando algunos valores de relleno personalizados en diferentes tamaños de pantalla.

• Acolchado superior: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
• Acolchado inferior: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
• Acolchado izquierdo: 2vw (escritorio), 4vw (tableta), 6vw (teléfono)
• Relleno derecho: 2vw (escritorio), 4vw (tableta), 6vw (teléfono)

Agregar fila n. ° 2

Estructura de la columna

Ahora que tenemos la fila de llamada a la acción en su lugar, es hora de comenzar a crear la forma del sobre. Para hacer eso, agregue una nueva fila usando la siguiente estructura de columnas:

Dimensionamiento

Permita que la fila ocupe todo el ancho de la sección cambiando la configuración de tamaño de la siguiente manera:

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

Espaciado

Elimine también todo el acolchado superior e inferior predeterminado.

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

Monitor

Y para asegurarnos de que las columnas aparezcan una al lado de la otra en tamaños de pantalla más pequeños, agregaremos una línea de código CSS al elemento principal de la fila.

display: flex;

Agregar módulo de imagen a la columna 1

Dejar el cuadro de imagen vacío

Agregue un módulo de imagen a la columna 1 y deje el cuadro de imagen vacío.

Fondo degradado

En su lugar, usamos un fondo degradado.

• Color 1: rgba (255,255,255,0)
• Color 2: # e8e8e8
• Tipo de degradado: lineal
• Dirección del gradiente: 150 grados
• Posición inicial: 50%
• Posición final: 50%

Espaciado

Cambie los valores de relleno del módulo en consecuencia:

• Acolchado superior: 15vw
• Acolchado inferior: 15vw

Clonar el módulo de imagen en la columna 1 y colocar el duplicado en la columna 2

Una vez que haya completado el Módulo de imagen en la columna 1, puede clonar todo el módulo y colocar el duplicado en la columna 2.

Cambiar fondo degradado

Cambie el fondo degradado de la siguiente manera:

• Color 1: rgba (255,255,255,0)
• Color 2: #efefef
• Tipo de degradado: lineal
• Dirección del gradiente: 210 grados
• Posición inicial: 50%
• Posición final: 50%

Agregar fila n. ° 3

Estructura de la columna

Para crear la parte inferior del sobre, necesitaremos otra fila con la siguiente estructura de columnas:

Dimensionamiento

Abra la configuración de fila y cambie la configuración de tamaño de la siguiente manera:

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

Espaciado

A continuación, elimine todo el acolchado superior e inferior predeterminado.

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

Monitor

Y permita que ambas columnas aparezcan una al lado de la otra agregando una sola línea de código CSS al elemento principal de la fila.

display: flex;

Índice Z

Complete la configuración de la fila aumentando el índice z en la pestaña avanzada.

• Índice Z: 12

Agregar módulo de imagen a la columna 1

Dejar el cuadro de imagen vacío

Agregue un módulo de imagen a la columna 1 y, nuevamente, deje el cuadro de imagen vacío.

Fondo degradado

En su lugar, utilice un fondo degradado.

• Color 1: rgba (255,255,255,0)
• Color 2: #efefef
• Tipo de degradado: lineal
• Dirección del gradiente: 213 grados
• Posición inicial: 40%
• Posición final: 40%

Espaciado

Y aumente el tamaño del módulo agregando algo de relleno superior e inferior.

• Acolchado superior: 20vw
• Acolchado inferior: 20vw

Clonar el módulo de imagen en la columna 1 y colocar el duplicado en la columna 2

Una vez que haya completado el Módulo de imagen en la columna 1, puede clonarlo y colocar el duplicado en la columna 2.

Cambiar fondo degradado

Asegúrese de cambiar el fondo degradado del duplicado.

• Color 1: rgba (255,255,255,0)
• Color 2: # e8e8e8
• Tipo de degradado: lineal
• Dirección del gradiente: 147 grados
• Posición inicial: 40%
• Posición final: 40%

Agregar movimiento vertical a la fila n. ° 1

Ahora, la última parte para hacer que la animación de la envolvente funcione es agregar un efecto de desplazamiento de movimiento vertical sensible a la primera fila de su sección y ¡listo!

• Habilitar movimiento vertical: sí
• Desplazamiento inicial:
  • Escritorio: 0 (al 68%)
  • Comprimido: 0,5 (al 61%)
  • Teléfono: 0.5 (al 43%)
• Desplazamiento medio:
  • Computadora de escritorio: 6.5 (al 81%)
  • Tableta y teléfono: 21,5 (al 82%)
• Desplazamiento final:
  • Escritorio: 16 (al 95%)
  • Tableta y teléfono: 21,5 (al 82%)

Avance

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

Escritorio

Móvil

Pensamientos finales

En esta publicación, le mostramos cómo ser creativo con los efectos de desplazamiento de Divi. Más específicamente, le mostramos cómo armar una animación de envolvente. Puede usar esta animación para muchos tipos de cosas, para resaltar su bloque de CTA, por ejemplo. ¡También pudo descargar el archivo JSON gratis! Si tiene alguna pregunta o sugerencia, no dude en 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.