Cómo crear una lista interactiva en Scroll con las opciones fijas de Divi

Avance

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

Escritorio

Móvil

Descarga el diseño 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 nuestro boletín utilizando 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 será «resuscrito» ni recibirá correos electrónicos adicionales.

https://youtu.be/vSZyvv1nAsE

Suscríbete a nuestro canal de Youtube

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. Agregue 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

Columna 1 Espaciado

Modifique la configuración de espaciado de la columna a continuación.

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

Índice Z de la columna 1

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 contenido de su elección.

Configuración de texto

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

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

Agregue el Módulo de Texto #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

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

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

Espaciado

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

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

Escala de transformación

Luego, aplique algunas configuraciones de escala de transformación personalizadas.

• Ambos: 300%

Transformar Traducir

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

• Fondo: 30%

Agregue el 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

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

• Color de línea: #000000
• Estilo de línea: Sólido
• Posición de la línea: Arriba

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 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

Utilice una imagen de fondo en su lugar.

• 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 de descripción de su elección.

Configuración de texto

Pase 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 línea de texto: 1,6 em

Espaciado

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

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

Aplicar efectos adhesivos

Gire la columna n.º 1 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 pegajosa: Stick to Top
• Límite pegajoso inferior
  
  • Escritorio: Sección
  • Tableta y teléfono: Fila
• Desplazamiento de los elementos pegajosos circundantes:
  
  • Escritorio: Sí
  • Tableta y teléfono: Sí
• Estilos predeterminados y fijos de transición: Sí

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

Altura

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

• Altura: 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

Escala de transformación

A continuación, abriremos el segundo módulo de texto en la columna 1. Devuelva los valores de la escala de transformación al «100%» en un estado fijo.

• Pegajoso Ambos: 100%

Transformar Traducir

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

• Fondo pegajoso: 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: 1000ms

Módulo divisor: ajustes pegajosos

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 fijo: 120 px

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 adhesivas de Divi. Más específicamente, le mostramos cómo crear una lista interactiva en el desplazamiento. 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 usar 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 regalos de Divi, 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 los beneficios de este contenido gratuito.