Cómo combinar la copia en el desplazamiento con la configuración de posición y los efectos de desplazamiento de Divi

La forma en que utiliza creativamente las funciones integradas de Divi puede marcar la diferencia en el diseño de su página. Los efectos de desplazamiento de Divi, por ejemplo, le permiten crear hermosas interacciones en el desplazamiento. Hoy, agregamos otro tutorial a su lista de cosas que puede hacer con los efectos de desplazamiento integrados de Divi. Más específicamente, le mostraremos cómo combinar la copia en el desplazamiento. A primera vista, la copia se coloca debajo de la imagen adjunta. Sin embargo, tan pronto como se desplace a un punto determinado, la copia aparecerá en la parte superior de la imagen del producto y comenzará a fusionarse con la imagen. Esto conduce a un efecto llamativo que parece sin esfuerzo. ¡También podrá descargar el archivo JSON de diseño de forma gratuita!

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

Descarga The Layout GRATIS

Para poner sus manos en el diseño gratuito, 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!

¡Empecemos a recrear!

Agregar 2 secciones de marcador de posición

Agregar nueva sección

Comience agregando una sección de marcador de posición a la página en la que está trabajando.

Dimensionamiento

Abra la configuración de la sección y cambie la altura en la configuración de tamaño.

• Altura: 50vh

Sección de clonación

Clona la sección una vez. Esto te deja con dos secciones de marcador de posición en tu página. Estas secciones de marcadores de posición lo ayudarán a ver el efecto final después de seguir el tutorial. En un sitio web en vivo, las secciones de marcador de posición se reemplazarán con secciones normales que usa en toda la página.

Agregar nueva sección entre secciones de marcador de posición

Una vez que las secciones de marcador de posición estén en su lugar, agregue una nueva sección entre las secciones de marcador de posición.

Color de fondo

Abra la configuración de la sección y use un color de fondo blanco.

• Color de fondo: #ffffff

Espaciado

Vaya a la pestaña de diseño de la sección y modifique los valores de relleno superior e inferior en consecuencia:

• Acolchado superior: 10vh
• Acolchado inferior: 10vh

Agregar fila n. ° 1

Estructura de la columna

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

Dimensionamiento

Sin agregar módulos todavía, abra la configuración de fila, vaya a la configuración de tamaño y modifique los valores de ancho y ancho máximo.

• Ancho: 100%
• Ancho máximo: 100%

Agregar módulo de texto a la columna

Agregar copia

El único módulo que necesitamos para esta fila es un módulo de texto. Agregue una copia 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 en consecuencia:

• Fuente de texto: Montserrat
• Peso de la fuente del texto: Ultra Bold
• Estilo de fuente de texto: mayúsculas
• Color del texto: # fff2ea
• Tamaño del texto: 11vw
• Altura de la línea de texto: 1em
• Alineación de texto: centro

Agregar fila n. ° 2

Estructura de la columna

Agregue otra fila a la sección usando la siguiente estructura de columnas:

Dimensionamiento

Sin agregar módulos todavía, 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: 2
• Ancho: 90%
• Alineación de filas: centro

Agregar módulo de imagen a la columna

Cargar imagen

Agregue un módulo de imagen a la columna de la fila. Sube una imagen de tu elección.

Alineación

Vaya a la pestaña de diseño del módulo y cambie la alineación de la imagen en consecuencia:

• Alineación de la imagen: centro

Dimensionamiento

Luego, vaya a la configuración de tamaño y fuerce el ancho completo en el módulo.

• Forzar ancho completo: Sí

Agregar módulo de botones a la columna

Agregar copia

El siguiente y último módulo que agregaremos a la columna es un módulo de botones. Utilice alguna copia de su elección.

Alineación de botones

Vaya a la pestaña de diseño y cambie la alineación de los botones.

• Alineación de botones: centro

Configuración de botones

Luego, diseñe el botón de la siguiente manera:

• Usar estilos personalizados para el botón: Sí
• Tamaño del texto del botón: 16px
• Color del texto del botón: # 000000
• Color de fondo del botón: #ffffff
• Ancho del borde del botón: 0px
• Espacio entre letras del botón: 2px
• Fuente del botón: Montserrat
• Peso de la fuente del botón: negrita
• Estilo de fuente del botón: mayúsculas

Espaciado

Utilice también algunos valores de relleno personalizados en la configuración de espaciado.

• Acolchado superior: 20px
• Acolchado inferior: 20px
• Acolchado izquierdo: 5%
• Acolchado derecho: 5%

Agregar posicionamiento absoluto a la fila n. ° 1

Una vez que haya completado la segunda fila, vuelva a la fila n. ° 1. Abra la configuración de la fila, vaya a la pestaña avanzada y convierta la sección en absoluta. Al hacer esto, la fila y el módulo de texto dentro de ella se colocarán debajo de la fila que contiene el módulo de imagen.

• Posición: Absoluto
• Ubicación: Centro

Clonar la fila n. ° 1 y colocar el duplicado debajo de la fila n. ° 2

Para permitir que el módulo de texto aparezca en la parte superior de la imagen, necesitaremos otra fila con un valor de índice z más alto. Clona la primera fila y coloca el duplicado debajo de la segunda fila.

Aplicar efectos a la fila n. ° 3

Aumentar el índice Z

Abra la fila duplicada y cambie el índice z en la pestaña avanzada.

• Índice Z: 12

Cambiar el color del texto

Abra el Módulo de texto en la fila y cambie el color del texto.

• Color del texto: # 1e1e1e

Aplicar el modo de fusión a la fila

Luego, abra la configuración de la fila y cambie el modo de fusión en la configuración de los filtros.

• Modo de fusión: superposición

Utilice el efecto de desplazamiento en el módulo de texto en la fila n. ° 3

Agregar efecto de desvanecimiento de entrada y salida

Complete el tutorial abriendo el Módulo de texto nuevamente, yendo a los efectos de desplazamiento y habilitando el efecto de aparición y desaparición gradual. ¡Eso es todo!

• Activar desvanecimiento de entrada y salida: Sí
  • Opacidad inicial: 0%
  • Opacidad media: 0% (al 26%)
  • Opacidad final: 100% (al 28%)
• Disparador de efecto de movimiento: medio del elemento

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 integrados de Divi. Más específicamente, le mostramos cómo combinar la copia en el desplazamiento. Al principio, la copia parece estar debajo de la imagen. Después de desplazarse, la copia se revela sobre la imagen y se fusiona con la imagen. ¡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.