Cómo crear transiciones de copia de Parallax con las opciones adhesivas de Divi

Cuando busca formas creativas de darle vida a los diseños de su página, los efectos de paralaje pueden resultar útiles. Aportan esa interacción adicional en el pergamino sin ser demasiado invasivos. Si está buscando una forma de extender ese efecto de paralaje a varias secciones de su página, le encantará este tutorial. Hoy, le mostraremos cómo crear transiciones de copia de paralaje con las opciones adhesivas de Divi. Tan pronto como los visitantes se desplazan más allá de una determinada sección, la copia se desplaza hacia abajo con la imagen de fondo de paralaje, lo que da un efecto realmente nítido. Tan pronto como se llega a la siguiente sección de la línea, la copia se reemplaza por otro título. El resultado que buscamos se ve muy bien en todos los tamaños de pantalla y también podrá descargar el archivo JSON 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á 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!

https://youtu.be/uZCD0__Apjk

Suscríbete a nuestro canal de Youtube

1. Cree la estructura del elemento

Agregar nueva sección

Comience agregando una nueva sección a la página en la que está trabajando. Este efecto funcionará especialmente bien si tiene contenido por encima y por debajo del diseño que estamos a punto de crear.

Agregar nueva fila

Estructura de la columna

Continúe agregando una nueva fila 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:

• Ecualizar alturas de columna: Sí
• Ancho: 95%
• Ancho máximo: 100%

Espaciado

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

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

Imagen de fondo de la columna

Ahora que hemos modificado la configuración general de la fila, también aplicaremos algunas configuraciones personalizadas a la columna dentro de nuestra fila. Comience abriendo la configuración de la columna.

Sube una imagen de fondo y habilita un efecto de paralaje en ella.

• Usar efecto de paralaje: Sí
• Método de paralaje: CSS

Espaciado de columnas

A continuación, vaya a la pestaña de diseño y aplique un acolchado inferior personalizado.

• Acolchado inferior: 50vh

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

Agregar contenido H2

Es el momento de agregar módulos, comenzando con un módulo de texto que contenga contenido H2 de su elección.

Configuración de texto H2

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

• Fuente del encabezado 2: Montserrat
• Peso de fuente del encabezado 2: Negrita
• Estilo de fuente del título 2: mayúsculas
• Color del texto del encabezado 2: #ffffff
• Tamaño del texto del encabezado 2:
  • Escritorio: 9vw
  • Tableta: 14vw
  • Teléfono: 15vw

Filtros

También estamos habilitando un modo de mezcla en la configuración de filtros.

• Modo de fusión: superposición

Agregar módulo de botones a la columna 1

Agregar copia

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

Añadir enlace

A continuación, inserte un enlace.

Configuración de botones

Luego, pase a la pestaña de diseño del módulo y cambie la configuración del botón en consecuencia:

• Usar estilos personalizados para el botón: Sí
• Tamaño del texto del botón:
  • Escritorio: 2vw
  • Tableta y teléfono: 7vw
• Color del texto del botón: #ffffff
• Ancho del borde del botón: 0px
• Espaciado de letras de botones: 0.06vw

• Fuente del botón: Karla
• Mostrar icono de botón: Sí
• Ubicación del icono del botón: Izquierda
• Mostrar solo el icono al pasar el mouse por el botón: No

Espaciado

Agregue un poco de acolchado superior e inferior personalizado también.

• Acolchado superior: 8%
• Acolchado inferior: 8%

Posición

Y complete la configuración del módulo reposicionando el módulo en la esquina inferior derecha de la columna.

• Posición: Absoluto
• Ubicación: Abajo a la derecha

2. Pasos necesarios para el efecto

Convertir el módulo de texto en adhesivo

Ahora que hemos establecido la base de nuestro diseño con todos los elementos necesarios, es hora de habilitar la transición de copia de paralaje. Para hacer eso, usaremos las opciones adhesivas integradas de Divi en el Módulo de texto. Abra la configuración del módulo, vaya a la pestaña avanzada y aplique la siguiente configuración adhesiva:

• Posición adhesiva: adherirse a la parte superior
• Desplazamiento superior pegajoso: 150px
• Límite inferior pegajoso: sección
• Desplazamiento de elementos pegajosos circundantes: Sí
• Transición de estilos predeterminados y pegajosos: Sí

Modificar el espaciado del módulo de texto

Defecto

Ahora que hemos habilitado las opciones adhesivas en este módulo, podemos aplicar estilos adhesivos. De forma predeterminada, el módulo se colocará encima de la propia columna. Y debido al color de texto blanco del módulo, se mezclará con el color de fondo de la sección y hará que parezca que no hay texto en absoluto. Para crear este posicionamiento, usaremos un margen superior negativo en diferentes tamaños de pantalla.

• Margen superior:
  • Escritorio: -10vw
  • Tableta: -14vw
  • Teléfono: -15vw

Pegajoso

Una vez que el módulo de texto se vuelve pegajoso, queremos que vuelva a estar a la vista. Para asegurarnos de que eso suceda, devolveremos este margen superior a "0vh" en un estado fijo.

• Margen superior pegajoso: 0vh

Espaciado de sección

También necesitaremos algo de espacio en la parte superior e inferior de nuestra sección, para que el fondo y el Módulo de texto puedan combinarse en color. Para hacer eso, abriremos la configuración de la sección nuevamente y aplicaremos un relleno superior e inferior personalizado.

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

Clonar toda la sección tantas veces como desee

Una vez que haya completado el diseño de la sección, puede clonarlo tantas veces como desee.

Cambiar contenido y enlaces

¡Asegúrese de cambiar el contenido y los enlaces de cada módulo dentro de las secciones duplicadas y listo!

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 las opciones pegajosas de Divi. Más precisamente, le hemos mostrado cómo crear transiciones de copia de paralaje que le permitan extender el efecto de paralaje a lo largo de múltiples secciones de su página. ¡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.