Cómo crear una lista interactiva en el desplazamiento con las opciones adhesivas de Divi

Las opciones adhesivas de Divi le permiten agregar interacción sin esfuerzo a las páginas que crea y diseña. Si está buscando una forma de mencionar varios elementos sin solo crear 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 Divi. A medida que las personas se desplazan hacia abajo en la sección, se agregan diferentes elementos a la lista de la izquierda. Esto ayuda a mantener una visión general. ¡También podrá descargar el archivo JSON gratuito!

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!

Crear estructura de elementos

Agregar nueva sección

Color de fondo

Comience agregando una nueva sección a la página en la que está trabajando. Agrega un color de fondo a la sección.

• Color de fondo: # f2f2f2

Añadir 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:

• Ancho: 100%
• Ancho máximo: 100%

Color de fondo de la columna 1

Luego, abra la configuración de la columna 1 y agregue un color de fondo.

• Color de fondo: # f2f2f2

Espaciado de la columna 1

A continuación, modifique la configuración de espaciado de la columna.

• Acolchado superior:
  • Tableta: 20px
  • Teléfono: 20px
• Acolchado inferior:
  • Tableta: 20px
  • Teléfono: 20px
• Acolchado izquierdo: 3%
• Acolchado derecho: 3%

Columna 1 Índice Z

Y aumente el índice z de la columna en la pestaña avanzada.

• Índice Z: 12

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

Agregar contenido

Es hora de agregar módulos, comenzando con un primer módulo de texto en la columna 1. Agregue algún contenido de su elección.

Configuración de texto

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

• Fuente de texto: Playfair Display
• Peso de la fuente del texto: negrita
• Estilo de fuente de texto: cursiva
• Color del texto: #bfbfbf
• Tamano del texto:
  • Escritorio: 2vw
  • Tableta: 5vw
  • Teléfono: 8vw
• Altura de la línea de texto: 1em

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

Agregar contenido H3

Agregue otro módulo de texto a la columna con algún contenido H3 de su elección.

Configuración de texto H3

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

• Fuente del título 3: Playfair Display
• Peso de fuente del encabezado 3: Negrita
• Título 3 Color del texto: # 000000
• Tamaño del texto del encabezado 3:
  • Escritorio: 3vw
  • Tableta: 10vw
  • Teléfono: 12vw

Espaciado

Agregue un margen superior e inferior personalizado a continuación.

• Margen superior: 2vh
• Margen inferior: 2vh

Transformar escala

Luego, aplique algunos ajustes de escala de transformación personalizados.

• Ambos: 300%

Transformar Traducir

Y complete la configuración del módulo aplicando la siguiente configuración de traducción de transformación:

• Inferior: 30%

Agregar módulo divisor a la columna 1

Visibilidad

El último módulo que necesitamos en la columna 1 es un módulo divisor. Asegúrese de que la opción "Mostrar divisor" esté habilitada.

• Mostrar divisor: Sí

Línea

Vaya a la pestaña de 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 la línea: superior

Dimensionamiento

Modifique también la configuración de tamaño del módulo.

• Peso del divisor: 4px
• Altura del divisor: 4px

Agregar módulo de imagen a la columna 2

Dejar el cuadro de imagen vacío

En la columna 2, el primer módulo que agregaremos es un módulo de imagen. Deje el cuadro de imagen vacío.

Imagen de fondo

En su lugar, utilice una imagen de fondo.

• Tamaño de la imagen de fondo: Portada
• Posición de la imagen de fondo: Centro

Espaciado

Y para permitir que aparezca la imagen de fondo, modificaremos la configuración de espaciado de la siguiente manera:

• Margen superior:
  • Escritorio: 15vh
  • Tableta y teléfono: 0vh
• Acolchado superior: 33vh
• Acolchado inferior: 33vh

Agregar módulo de texto a la columna 2

Agregar contenido

El siguiente y último módulo que necesitamos es un módulo de texto debajo del módulo de imagen. Agregue algún contenido descriptivo de su elección.

Configuración de texto

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

• Fuente de texto: cabina
• Color del texto: # 000000
• Tamano del texto:
  • Escritorio: 1.2vw
  • Tableta: 2.3vw
  • Teléfono: 3.4vw
• Altura de la línea de texto: 1.6em

Espaciado

Complete la configuración del módulo cambiando la configuración de espaciado del módulo en consecuencia:

• Acolchado izquierdo:
  • Tableta y teléfono: 5%
• Acolchado derecho: 5%

Aplicar efectos pegajosos

Convertir la columna n. ° 1 en pegajosa

Ahora que todos los elementos están en su lugar, podemos comenzar a aplicar la configuración adhesiva. Abra la configuración de la columna 1 y use la siguiente configuración adhesiva receptiva en la pestaña avanzada:

• Posición adhesiva: adherirse a la parte superior
• Límite inferior pegajoso
  • Escritorio: Sección
  • Tableta y teléfono: Fila
• Desplazamiento de elementos pegajosos circundantes:
  • Escritorio: si
  • Tableta y teléfono: No
• Transición de estilos predeterminados y pegajosos: Sí

Módulo de texto n. ° 1 en la columna n. ° 1: Configuración fija

Altura

Ahora que la columna 1 se ha vuelto pegajosa, podemos comenzar a aplicar algunas configuraciones pegajosas a los elementos dentro de esta columna. Comenzaremos con la altura del primer módulo de texto.

• Alto: 0px
• Altura pegajosa: Auto

Opacidad

También estamos modificando la opacidad.

• Opacidad: 0%
• Opacidad pegajosa: 100%

Módulo de texto n. ° 2 en la columna n. ° 1: Configuración fija

Transformar escala

A continuación, abriremos el segundo módulo de texto en la columna 1. Devuelva los valores de la escala de transformación a "100%" en un estado pegajoso.

• Pegajoso Ambos: 100%

Transformar Traducir

Cambie también la configuración de traducción de la transformación adhesiva.

• Parte inferior pegajosa: 0%

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

Módulo divisor: Configuración adhesiva

Anchura máxima

Por último, pero no menos importante, también modificaremos el ancho máximo del módulo divisor.

• Ancho máximo: 0px
• Ancho máximo pegajoso: 120px

Clonar fila dos veces

Una vez que haya completado su primera fila, puede clonarla dos veces.

Cambiar todo el contenido y las imágenes

¡Asegúrate de cambiar todo el contenido y las imágenes 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 específicamente, le mostramos cómo crear una lista interactiva en scroll. A medida que las personas se desplazan hacia abajo en el diseño de la sección, se recopilan diferentes elementos de su lista en el lado izquierdo. Esto brinda una descripción general estructurada y lo ayuda a crear un diseño interactivo. ¡Puede utilizar este enfoque para cualquier tipo de lista que desee compartir en sus páginas! 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 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.