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 usas Divi de forma creativa y sus funciones integradas pueden marcar la diferencia en el diseño de tu 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 que la acompaña. 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 se ve 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 el diseño 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 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.
¡Empecemos a Recrear!
Agregar 2x 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.
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 marcador 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
Pase 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
Añadir Fila #1
Estructura de la columna
Continúe agregando una nueva fila a la sección utilizando la siguiente estructura de columnas:
Dimensionamiento
Sin agregar módulos todavía, abra la configuración de la 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 alguna copia de su elección.
Configuración de texto
Pase a la pestaña de diseño del módulo y cambie la configuración del texto en consecuencia:
- Fuente del texto: Montserrat
- Peso de fuente de texto: ultra negrita
- Estilo de fuente de texto: Mayúsculas
- Color del texto: #fff2ea
- Tamaño del texto: 11vw
- Altura de línea de texto: 1em
- Alineación de texto: Centro
Añadir Fila #2
Estructura de la columna
Agregue otra fila a la sección utilizando 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 del canalón: 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
Pase a la pestaña de diseño del módulo y cambie la alineación de la imagen en consecuencia:
Dimensionamiento
Luego, vaya a la configuración de tamaño y fuerce el ancho completo en el módulo.
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 botón. Utilice alguna copia de su elección.
Alineación de botones
Ve a la pestaña de diseño y cambia la alineación de los botones.
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
- Espaciado entre letras de botones: 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.
- Relleno superior: 20px
- Relleno inferior: 20px
- Relleno izquierdo: 5%
- Relleno derecho: 5%
Añadir Posicionamiento Absoluto a la Fila #1
Una vez que haya completado la segunda fila, navegue de regreso a la fila #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: Absoluta
- 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 encima 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 #3
Aumentar índice Z
Abra la fila duplicada y cambie el índice z en la pestaña avanzada.
Cambiar el color del texto
Abra el módulo de texto en la fila y cambie el color del texto.
Aplicar el modo de fusión a la fila
Luego, abra la configuración de fila y cambie el modo de fusión en la configuración de filtros.
Use el efecto de desplazamiento en el módulo de texto en la fila n. ° 3
Agregar efecto de aparición y desaparición gradual
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!
- Habilitar aparición y desaparición gradual: 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 mezcla con la imagen. ¡También pudo descargar el archivo JSON de forma gratuita! 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 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 saber y obtener beneficios de este contenido gratuito.
