Creación de revelaciones de desplazamiento en línea con Divi
Publicado: 2019-08-14Cada 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 de desplazamiento / liberación genial a la técnica que ayudará a los visitantes a sostener el contenedor de la columna y soltarlo cuando lo deseen. ¡También podrá descargar el archivo JSON de forma gratuita!
Avance
Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.
Escritorio
Móvil
Descargue el diseño de revelaciones de desplazamiento en línea GRATIS
Para poner sus manos en el diseño de revelaciones 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 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.
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.
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!
Crear nueva página usando la página de inicio de DJ Layout Pack
Agregar nueva página
Para este tutorial de casos de uso, usaremos 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.
Subir la página de inicio de DJ
Continúe cargando el diseño de la página de inicio de DJ en su página.
Agregue un valor de índice Z más alto a cada sección de la página
Agregar índice Z más alto a la sección Hero
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 en la que se encuentra la columna, que es la sección # 2 de 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
Copiar índice Z
Una vez que haya agregado el índice z, puede copiarlo.
Pegar en otras secciones de la página excepto en la sección 2
Y péguelo en todas las demás secciones de la página, excepto en la sección # 2 (la sección que contiene la columna que transformaremos en un despliegue de desplazamiento en línea).
Cambiar la sección # 2
Colocar el contenido de la columna en filas separadas
Cambiar estructura de columna de fila
Comencemos a modificar la segunda sección, comenzando con la estructura de columnas de la fila.
Fila duplicada
Continúe clonando la fila.
Eliminar módulos en filas
Quite los módulos de texto y botones de la primera fila y los módulos de audio de la segunda fila.
Modificar la fila n. ° 1 en la sección n. ° 2
Quite algunos módulos de audio (para adaptarse a tamaños de pantalla más pequeños)
En los próximos pasos, arreglaremos la columna que contiene los módulos de audio. Ahora, para asegurarnos de que la columna se ajuste a la altura de la ventana de visualización de tamaños de pantalla más pequeños, necesitaremos eliminar algunos módulos de audio.
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 algo de relleno en la parte inferior. Necesitaremos este espacio para permitir que la columna se muestre en el desplazamiento más adelante en el tutorial.
- Margen inferior: 700 px
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.
Sombra de caja flotante
Luego, vaya a la pestaña de diseño y cambie algunos valores de sombra de cuadro al pasar el mouse.
- Fuerza de desenfoque de sombra de caja: 150px
- Color de sombra: rgba (0,0,0,0.55)
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%
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;
Elemento principal de desplazamiento
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;
Í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, cambiaremos el índice z de la columna.
- Índice Z: 0
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 mouse en consecuencia:
- Índice Z: 10
Modificar la fila n. ° 2 en la sección n. ° 2
Agregar relleno superior a la columna
Por motivos estéticos, vamos a abrir la columna en la segunda fila de la sección # 2 y agregar un relleno superior personalizado.
- Acolchado superior: 80px
Agregar 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 algo de espacio para que aparezca. Lo hemos hecho para la fila en la que ya se encuentra (relleno inferior de 700 px), pero permitiremos que la columna se muestre también en otros lugares de la página. Abra la configuración de la sección de la siguiente sección:
Agregar margen inferior
Vaya a la configuración de espaciado y agregue un margen inferior. Agregar un margen inferior creará un espacio vacío en la página que permitirá que aparezca la columna de índice z bajo.
- Margen inferior: 700 px
Localizar sección
Configuración de sección abierta
Abra la siguiente sección a continuación:
Agregar margen inferior
Y agregue un margen inferior aquí también.
- Margen inferior: 700 px
Eliminar el exceso de relleno de la sección
Quite el acolchado inferior de la sección n. ° 2
Ahora, lo único que nos queda por hacer es optimizar la forma en que nuestro diseño coincide con el despliegue de desplazamiento en línea. Abra la segunda sección de la página y retire el relleno inferior.
- Abajo: 0px
Localizar sección
Configuración de sección abierta
A continuación, abra la siguiente sección de configuración:
Quitar el acolchado inferior y agregar el acolchado superior
Agregue un poco de acolchado superior y retire el acolchado inferior.
- Relleno superior: 100 px
- Acolchado inferior: 0px
Localizar sección
Configuración de sección abierta
A la última sección. Abra la configuración de la sección.
Quitar el acolchado superior
¡Quita el acolchado superior y listo!
- Relleno superior: 0px
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 crear revelaciones de desplazamiento en línea con Divi y DJ Layout Pack. Esta es una excelente manera de agregar interacción a su sitio web. ¡Esperamos que este tutorial lo inspire a crear sus propias revelaciones de desplazamiento en línea fijas 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 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.