Cómo construir una lista interactiva en el desplazamiento con las opciones pegajosas de Div

Las opciones adhesivas de Divic le permiten agregar interacciones sin parar a las páginas creadas y diseñadas. Si está buscando una manera de mencionar más elementos sin crear solo una lista estática, disfrutará de este tutorial. Hoy le mostramos cómo crear una lista interactiva en el desplazamiento utilizando las opciones adhesivas de Div. A medida que las personas ejecutan la sección, se agregan diferentes elementos a la lista de la izquierda. Esto te ayuda a mantener una descripción general. ¡Podrá descargar el archivo JSON gratuito! Vamos a eso. Vista previa antes de arrojar nuestras cabezas en el tutorial, para echar un vistazo rápido al resultado en diferentes tamaños de pantalla.
Escritorio

Móvil

Descargue el aspecto gratuito para poner su mano en el aspecto gratuito, primero deberá descargarlo usando el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar archivos

Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia.
Te has suscripto satisfactoriamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos! Cree la estructura del elemento Agregue un nuevo color de fondo Iniciar agregando una nueva sección a la página a la que trabaja. Agregue un color de fondo a la sección.
Color de fondo: # F2F2F2
Agregue la fila La estructura de la columna Continúe agregando una nueva fila utilizando la siguiente estructura de columnas:

Dimensión sin agregar módulos, abra la configuración de la fila y cambie la configuración de tamaño de la siguiente manera:

Ancho: 100%
Ancho máximo: 100%
Columna 1 Color de fondo luego abra la configuración de la columna 1 y agregue un color de fondo.

Color de fondo: # F2F2F2
Columna 1 Extienda y luego cambie la configuración de espaciado espinal.

Revestimiento superior:
Tableta: 20 PX
Teléfono: 20 PX
Levante inferior:
Tableta: 20 PX
Teléfono: 20 PX
ENLIZACIÓN IZQUIERDA: 3%
Revelaje derecho: 3%
Columna 1 Índice Z y aumente el índice de su columna en la pestaña avanzada.

IND ÍNDICE: 12
Agregue el módulo de texto no. 1 en la columna 1 Agregar contenido es el momento de agregar módulos, comenzando con un primer módulo de texto en la columna 1. Agregue un contenido de su elección.

Configuración de texto Vaya a la pestaña Diseño del módulo y cambie la configuración de texto de la siguiente manera:

Texto de fuente: PlayFair Display
El peso de la fuente de texto: en negrita
Estilo de texto de fuente: cursivo
Color de texto: #BFBFBF
Tamano del texto:
Escritorio: 2VW
Tableta: 5VW
Teléfono: 8VW
La altura de la línea de texto: 1em
Agregue el módulo de texto no. 2 En la columna 2 Agregue el contenido H3 Agregue otro módulo de texto en la columna con un contenido H3 de su elección.

Configuración de texto H3 Cambiar a la pestaña Diseño del módulo y cambie la configuración de texto H3 de la siguiente manera: 3 Fuentes: PlayFair Display

Título 3 Fuente de peso: Bold
Rúbrica 3 Color de texto: # 000000
Rúbrica 3 Dimensión de texto:
Escritorio: 3VW
Tableta: 10 VW
Teléfono: 12VW
El espacio agregue algunos bordes superiores e inferiores personalizados.
Margen superior: 2 VH

Margen inferior: 2 VH
La escala de transformación luego aplica algunas configuraciones personalizadas de la escala de transformación.
Ambos: 300%

Transformar la traducción y completar la configuración del módulo aplicando la siguiente configuración de traducción de transformación:
ABAJO: 30%

Agregue un módulo divisor en la visibilidad de la columna 1 La última forma en que necesitamos en la columna 1 es un módulo divisor. Asegúrese de que la opción “Show Divider” esté activada.
Divisor del espectáculo: si

La línea vaya a la pestaña Diseño del módulo y cambie la configuración de la línea en consecuencia:

Color de línea: # 000000

Estilo de línea: sólido
Posición de línea: arriba
Dimensión Modifique la configuración de dimensionamiento del módulo.
Peso del divisor: 4 PX

Altura del divisor: 4 PX
Agregue el módulo de imagen a la columna 2 Deje el cuadro de imagen vacío en la columna 2, el primer módulo que agregaremos es un módulo de imagen. Deja el cuadro de imagen vacío.
Imagen de fondo Use una imagen de fondo en su lugar.

Tamaño de la imagen de fondo: portada

Posición de la imagen de fondo: Centro
Espacio y para permitir que se muestre la imagen de fondo, cambiaremos la configuración de espaciado de la siguiente manera:
Margen superior:

Escritorio: 15 VH
Tableta y teléfono: 0 VH
Revestimiento superior: 33VH
Revestimiento inferior: 33VH
Agregue un módulo de texto en la columna 2 agrega contenido y el último módulo que necesitamos es un módulo de texto en el módulo de imagen. Agregue un contenido de descripción de su elección. Configuración de texto Vaya a la pestaña Diseño del módulo y cambie la configuración de texto de la siguiente manera:
Texto de fuente: cabina

Color de texto: # 000000

Tamano del texto:
Escritorio: 1.2VW
Tableta: 2.3VW
Teléfono: 3.4VW
La altura de la línea de texto: 1.6em
Espacio Complete la configuración del módulo modificando correctamente la configuración de espaciado del módulo:
Forro izquierdo:
Tableta y teléfono: 5%

Revestimiento derecho: 5%
Aplique Sticky Effects Devuelve la columna # 1 Sticky ahora, que todos los elementos están en su lugar, podemos comenzar a aplicar configuraciones adhesivas. Abra la configuración de la columna 1 y use la siguiente configuración adhesiva de respuesta en la pestaña Avanzada:
Posición pegajosa: adhiérase a la parte superior
El límite inferior inferior

Escritorio: sección
Tableta y teléfono: fila
Compensación de los elementos circundantes adhesivos:
Escritorio: si
Tableta y teléfono: no
Transición predeterminada y estilos adhesivos: sí
Módulo de texto no. 1 de la columna no. 1: Altura de configuración de aterrizaje Ahora, cuando la columna 1 se ha transformado pegajosa, podemos comenzar a aplicar algunas configuraciones adhesivas a esta columna. Comenzaremos con la altura del primer módulo de texto.
Altura: 0px
Altura pegajosa: Auto

Opacidad cambiamos la opacidad.
Opacidad: 0%
Opacidad pegajosa: 100%


Módulo de texto no. 2 de la columna no. 1: Configuración de aterrizaje de transformación Entonces, abriremos el segundo módulo de texto en la columna 1. Lleve los valores de la escala de transformación al “100%” en un estado pegajoso.
Ambos pegajosos: 100%
Transformar el cambio de traducción y la configuración de traducción de la transformación adhesiva


Transición y complete la configuración del módulo aumentando la duración de la transición en la pestaña avanzada.
Transición: 1000 ms

Modo divisor: Configuración de aterrizaje Ancho máximo por último, pero no menos importante, también cambiaremos el ancho máximo del módulo divisor.
Ancho máximo: 0 PX

Ancho adhesivo máximo: 120 PX
Clone Row dos veces Una vez que se haya completado la primera fila, puede clonarlo dos veces.

¡Cambie todo el contenido e imágenes, asegúrese de cambiar todo el contenido y las imágenes y ya está listo!
Vista previa ahora que hemos dado todos los pasos, para echar un vistazo final al resultado en diferentes tamaños de pantalla. Escritorio
Móvil


Pensamientos finales En esta publicación, te mostré cómo ser creativo con las opciones pegajosas de Div. Específicamente, le mostré cómo crear una lista interactiva en el desplazamiento. A medida que las personas ejecutan el diseño de la sección, se recopilan diferentes elementos en su lista en el lado izquierdo. Esto proporciona una imagen general estructurada y le ayuda a crear un diseño interactivo. ¡Puede usar este enfoque para cualquier tipo de lista que desee distribuir en sus páginas! Puede 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 obtener más información sobre Divi y obtener más regalos de la Divicidad, 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 conocer y obtener beneficios de este contenido gratuito.