La creación de desplazamiento en línea revela con Divi


Cada semana, le proporcionamos paquetes de diseño Divi nuevos y gratuitos que puede usar para su próximo proyecto. Para uno de los paquetes de diseño, también compartimos un caso de uso que lo ayudará a llevar su sitio web al siguiente nivel.

Esta semana, como parte de nuestra iniciativa de diseño Divi en curso, le mostraremos cómo crear hermosas revelaciones de desplazamiento en línea utilizando el DJ Layout Pack. Esta es una excelente manera de llamar la atención sobre un contenedor de columna específico en su sitio web, sin tener que agregarlo a su página varias veces. Agregaremos un efecto genial de desplazamiento / liberación a la técnica que ayudará a los visitantes a aferrarse al contenedor de la columna y soltarlo cuando lo deseen. ¡También podrás descargar el archivo JSON gratis!

Avance

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

Escritorio

desplazamiento revela

Móvil

desplazamiento revela

Descargar The Inline Scroll Reveals Layout GRATIS

Para poner sus manos en el diseño de revelado de desplazamiento en línea 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 siguiente formulario. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete de diseño Divi 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 "volverá a suscribir" ni recibirá correos electrónicos adicionales.

¡Comencemos a recrearnos!

Crear nueva página usando la página de inicio de DJ Layout Pack

Agregar nueva página

Para este tutorial de caso de uso, vamos a utilizar uno de los diseños de DJ. Comience creando una nueva página, asigne un título a su página y cambie a Visual Builder.

desplazamiento revela

Subir DJ Página de inicio

Continúe cargando el diseño de la página de inicio de DJ en su página.

desplazamiento revela

Agregue un valor de índice Z más alto a cada sección de la página

Agregar un índice Z superior a la sección de héroe

Vamos a arreglar una columna específica y permitir que se muestre donde queramos. Lo contrario también es cierto; queremos ocultarlo donde no queremos que aparezca. Para hacer eso, le daremos a cada sección de la página (además de la que se encuentra la columna, que es la sección # 2 en la página) un valor de índice z más alto. Comience abriendo la sección de héroe y aumente el índice z en la configuración de visibilidad.

  • Índice Z: 2

desplazamiento revela

Copiar índice Z

Una vez que haya agregado el índice z, puede copiarlo.

desplazamiento revela

Pegar en otras secciones en la página Excepto la Sección # 2

Y péguelo en todas las demás secciones de la página, excepto por la sección # 2 (la sección que contiene la columna que transformaremos en una revelación de desplazamiento en línea).

desplazamiento revela

Cambiar Sección # 2

Colocar contenido de columna en filas separadas

Cambiar estructura de columna de fila

Comencemos por modificar la segunda sección, comenzando con la estructura de columnas de la fila.

desplazamiento revela

Fila duplicada

Continúe clonando la fila.

desplazamiento revela

Eliminar módulos en filas

Elimine los módulos de texto y botón en la primera fila y los módulos de audio en la segunda fila.

desplazamiento revela

Modifique la fila n. ° 1 en la sección n. ° 2

Eliminar algunos módulos de audio (para adaptarse a tamaños de pantalla más pequeños)

En los próximos pasos, repararemos la columna que contiene los módulos de audio. Ahora, para asegurarnos de que la columna se ajuste a la altura de la vista de tamaños de pantalla más pequeños, necesitaremos eliminar algunos módulos de audio.

desplazamiento revela

Agregar margen inferior a la fila

Continúe abriendo la configuración de la fila, vaya a la pestaña de diseño y agregue un poco de relleno inferior. Necesitaremos este espacio para permitir que la columna se muestre en el desplazamiento más adelante en el tutorial.

  • Margen inferior: 700 px

desplazamiento revela

Abrir configuración de columna

¡Es hora de comenzar a transformar la columna en una revelación de desplazamiento en línea! Abra la configuración de la columna.

desplazamiento revela

Hover Box Shadow

Luego, vaya a la pestaña de diseño y cambie algunos valores de sombra de cuadro al pasar el cursor.

  • Caja Shadow Blur Fuerza: 150px
  • Color de sombra: rgba (0,0,0,0.55)

desplazamiento revela

Escala de transformación de desplazamiento

Aumente el tamaño de la columna al pasar el mouse también modificando los valores de escala de transformación.

  • Inferior: 110%
  • Derecha: 110%

desplazamiento revela

Elemento principal predeterminado

Para arreglar la columna, agregaremos algunas líneas de código CSS al elemento principal de la columna.

position: fixed;
bottom: 100px;
max-width: 800px !important;
width: 80% !important;

desplazamiento revela

Pase el elemento principal

Asegúrese de agregar la línea CSS de posición fija al elemento principal de desplazamiento también. Esto evitará que la columna parpadee.

position: fixed;

desplazamiento revela

Índice Z predeterminado

Ahora, en circunstancias normales, queremos que el módulo aparezca debajo de todo el contenido de la página. Para asegurarnos de que eso suceda, vamos a cambiar el índice z de la columna.

  • Índice Z: 0

desplazamiento revela

Hover Z Index

Sin embargo, al pasar el mouse, queremos que la columna se superponga a todo el contenido de la página. Tan pronto como alguien suelte la columna, volverá a su lugar detrás de todo el contenido de la página. Cambie el índice z al pasar el ratón en consecuencia:

  • Índice Z: 10

desplazamiento revela

Modificar fila # 2 en la sección # 2

Agregar relleno superior a la columna

Con fines estéticos, vamos a abrir la columna en la segunda fila de la sección # 2 y agregaremos un relleno superior personalizado.

  • Relleno superior: 80px

desplazamiento revela

desplazamiento revela

Agregue un margen inferior personalizado a las secciones en toda la página

Localizar sección

Configuración de sección abierta

Ahora que hemos modificado la columna de revelación de desplazamiento en línea, tenemos que crear un espacio para que aparezca. Ya lo hemos hecho para la fila en la que ya se encuentra (relleno de fondo de 700 píxeles), pero también permitiremos que la columna se muestre en otros puntos de la página. Abra la configuración de la sección de la siguiente sección:

desplazamiento revela

Agregar margen inferior

Vaya a la configuración de espaciado y agregue un margen inferior. Agregar margen inferior creará un espacio vacío en la página que permitirá que aparezca la columna de bajo índice z.

  • Margen inferior: 700 px

desplazamiento revela

Localizar sección

Configuración de sección abierta

Abra la siguiente sección a continuación:

desplazamiento revela

Agregar margen inferior

Y agregue un margen inferior aquí también.

  • Margen inferior: 700 px

desplazamiento revela

Eliminar el exceso de relleno de sección

Retire la sección # 2 de relleno inferior

Ahora, lo único que nos queda por hacer es optimizar la forma en que nuestro diseño coincide con la revelación de desplazamiento en línea. Abra la segunda sección de la página y elimine el relleno inferior.

  • Inferior: 0px

desplazamiento revela

Localizar sección

Configuración de sección abierta

Abra la siguiente configuración de sección a continuación:

desplazamiento revela

Retire el relleno inferior y agregue el relleno superior

Agregue un poco de relleno superior y elimine el relleno inferior.

  • Relleno superior: 100 px
  • Relleno inferior: 0px

desplazamiento revela

Localizar sección

Configuración de sección abierta

En la última sección. Abra la configuración de la sección.

desplazamiento revela

Eliminar el relleno superior

¡Retire el relleno superior y ya está!

  • Relleno superior: 0px

desplazamiento revela

Avance

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

Escritorio

desplazamiento revela

Móvil

desplazamiento revela

Pensamientos finales

En esta publicación, le mostramos cómo crear revelaciones de desplazamiento en línea con Divi y el DJ Layout Pack. Esta es una excelente manera de agregar interacción a su sitio web. ¡Esperamos que este tutorial te inspire a crear tus propias revelaciones fijas de desplazamiento en línea también! 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 Divi, asegúrese de Suscríbete a nuestro boletín de correo electrónico y Canal de Youtube así que siempre serás una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.