Cómo apilar filas en desplazamiento con las opciones fijas de Divi

Desde que salieron Divi y sus opciones pegajosas, le mostramos formas de usar las diferentes funciones a lo largo de las construcciones de su sitio web, particularmente dentro de los encabezados. Pero hay muchas maneras en que puede usar las opciones fijas para mejorar la experiencia del usuario que las personas tienen en su sitio web y hacer que su sitio web brille. En el tutorial de hoy, por ejemplo, le mostraremos cómo apilar filas en el desplazamiento con las opciones adhesivas de Divi. Tan pronto como una fila toque la parte superior de su ventana gráfica, comenzará a ir debajo de la siguiente fila, lo que brinda un efecto de apilamiento que se ve hermoso. ¡Recrearemos el diseño desde cero y también podrá descargar el archivo JSON de la sección de forma gratuita!

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

Descargue el diseño de apilamiento de filas GRATIS

Para poner sus manos en el diseño de apilamiento de filas gratis, 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.

Descárgalo gratis

Únase al boletín informativo 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 muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro 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.

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

1. Crear concepto de primera fila

Agregar nueva sección

Espaciado

En la primera parte de este tutorial, comenzaremos a sentar las bases de nuestra primera fila. Una vez que hayamos terminado de diseñar los elementos en la primera fila, podemos reutilizarlos por completo para crear el efecto de apilamiento de filas. Agregue una nueva sección a la página en la que está trabajando. Abra la configuración de la sección y aplique algunos valores de relleno personalizados en diferentes tamaños de pantalla.

  • Acolchado superior:

    • Escritorio: 100px
    • Tableta: 40px
    • Teléfono: 25px
  • Acolchado inferior:

    • Escritorio: 100px
    • Tableta: 40px
    • Teléfono: 25px

Agregar nueva fila

Estructura de la columna

Continúe agregando una nueva fila usando la siguiente estructura de columnas:

Dimensionamiento

Sin agregar ningún módulo todavía, abra la configuración de la fila y aplique la siguiente configuración de tamaño:

  • Usar ancho de canalón personalizado: Sí
  • Ancho del canalón: 1
  • Igualar alturas de columna: Sí
  • Ancho: 90%
  • Ancho máximo: 2580px

Espaciado

A continuación, elimine todo el relleno superior e inferior predeterminado.

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

Configuración de la columna 1

Color de fondo

Luego, abra la configuración de la columna 1 y aplique un color de fondo de su elección.

  • Color de fondo: #2b343b

Imagen de fondo

Utilice una imagen de fondo también. Si desea utilizar las que se muestran a lo largo de este tutorial, descargue la carpeta comprimida al comienzo del tutorial y cargue las imágenes de fondo en su biblioteca de medios.

  • Tamaño de la imagen de fondo: Ajuste

Espaciado

Pase a la pestaña de diseño de la columna y aplique los siguientes valores de relleno en diferentes tamaños de pantalla a continuación:

  • Acolchado superior:

    • Escritorio: 25%
    • Tableta: 40%
    • Teléfono: 50%
  • Acolchado inferior:

    • Escritorio: 25%
    • Tableta: 40%
    • Teléfono: 50%
  • Relleno izquierdo: 5%
  • Relleno derecho: 5%

Configuración de la columna 2

Color de fondo

Luego, abra la segunda columna y use un color de fondo allí también.

  • Color de fondo: #394751

Espaciado

Junto con algunos valores de relleno personalizados.

  • Acolchado superior: 13%
  • Acolchado inferior: 13%
  • Relleno izquierdo: 8%
  • Relleno derecho: 8%

Sombra de la caja

Y una sombra de caja.

  • Posición vertical de la sombra del cuadro: 20px
  • Fuerza de desenfoque de sombra de cuadro: 50px
  • Color de sombra: rgba (0,0,0,0.14)

Agregar módulo de texto a la columna 1

Agregar contenido H2

Es hora de agregar módulos, comenzando con un módulo de texto en la columna 1. Coloque algún contenido H2 de su elección dentro del cuadro de contenido.

Configuración de texto H2

Pase a la pestaña de diseño del módulo y diseñe la configuración de texto H2 en consecuencia:

  • Encabezado 2 Fuente: Alata
  • Encabezado 2 Peso de fuente: Negrita
  • Encabezado 2 Alineación de texto: Centro
  • Título 2 Color del texto: #ffffff
  • Título 2 Tamaño del texto:

    • Escritorio: 200px
    • Tableta: 150px
    • Teléfono: 100px
  • Encabezado 2 Espaciado entre letras: -1px

Posición

Vuelva a colocar el módulo en la pestaña avanzada también.

  • Posición: Absoluta
  • Ubicación: Arriba a la izquierda
  • Desplazamiento vertical: 2 %
  • Desplazamiento Horizontal: 2%

Agregar módulo de botones a la columna 1

Agregar copia

El siguiente y último módulo que necesitamos en la columna 1 es un módulo de botones. Agregue alguna copia de su elección.

Configuración de botones

Pase a la pestaña de diseño del módulo y diseñe el botón según corresponda:

  • Usar estilos personalizados para el botón: Sí
  • Tamaño del texto del botón: 20px
  • Color del texto del botón: #ffffff
  • Color de fondo del botón: #83a5bf
  • Ancho del borde del botón: 0px
  • Radio del borde del botón: 1px
  • Fuente del botón: Alata

Espaciado

Agregue algunos valores de relleno personalizados a continuación.

  • Relleno superior: 20px
  • Relleno inferior: 20px
  • Relleno izquierdo: 50px
  • Relleno derecho: 50px

Posición

Y reposicione el módulo en la pestaña avanzada.

  • Posición: Absoluta
  • Ubicación: abajo a la derecha

Agregue el Módulo de Texto #1 a la Columna 2

Agregar contenido H3

Vamos a la segunda columna. Agregue un primer módulo de texto 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 aplique los siguientes estilos de texto H3:

  • Encabezado 3 Fuente: Alata
  • Encabezado 3 Peso de fuente: Negrita
  • Título 3 Color del texto: #ffffff
  • Encabezado 3 Tamaño del texto: 40px

Agregue el módulo divisor a la columna 2

Visibilidad

Debajo del primer módulo de texto, agregaremos un módulo divisor. Asegúrese de que la opción «Mostrar divisor» esté habilitada.

  • Mostrar divisor: Sí

Configuración de línea

Pase a la pestaña de diseño del módulo y cambie el color de la línea.

  • Color de línea: #f3f0ee

Dimensionamiento

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

  • Peso del divisor: 5px
  • Ancho: 19%
  • Altura: 5px

Espaciado

Y complete la configuración del módulo agregando un margen inferior a la configuración de espaciado.

  • Margen inferior: 20%

Agregue el Módulo de Texto #2 a la Columna 2

Agregar contenido

Agregue otro módulo de texto justo debajo del módulo divisor. Ingrese algún contenido de descripción de su elección.

Configuración de texto

Estilo el texto del módulo en consecuencia:

  • Fuente del texto: Montserrat
  • Color del texto: #ffffff
  • Tamano del texto:

    • Escritorio: 15px
    • Tableta y teléfono: 14px
  • Altura de línea de texto: 2em

2. Convierta la fila en un elemento de apilamiento

Configuración de fila

Índice Z

Ahora que tenemos nuestra primera fila en su lugar, es hora de aplicar la configuración de apilamiento de filas fijas. Aplicaremos esta configuración antes de clonar nuestra fila para reutilizarla, de modo que el efecto de apilamiento se produzca automáticamente. Abra la configuración de la fila, vaya a la pestaña avanzada y aplique un índice z de 1. Este índice z nos ayudará a garantizar que cada fila siguiente se coloque encima de la anterior.

  • Índice Z: 1

Configuraciones adhesivas

Luego, iremos a la configuración de efectos de desplazamiento y aplicaremos la siguiente configuración fija:

  • Posición pegajosa:

    • Escritorio: Stick to Top
    • Tableta y teléfono: No se pegue
  • Límite pegajoso inferior: Sección
  • Desplazamiento de los elementos pegajosos circundantes: No

3. Reutilice la fila de apilamiento en la misma sección

Fila de clones x3

Ahora que se han aplicado nuestras opciones adhesivas, podemos reutilizar toda la fila tantas veces como queramos.

Cambios generales

Cambiar todo Copiar

Asegúrate de cambiar la copia en cada duplicado

Cambiar los colores e imágenes de fondo de la columna 1

Junto con los colores e imágenes de fondo de la columna 1.

  • Duplicado 1: #edc1b6
  • Duplicado 2: #efe7e2
  • Duplicado 3: #f7f6f4

Cambiar los colores de fondo de la columna 2

También estamos usando diferentes colores para la segunda columna de cada fila duplicada.

  • Duplicado 1: #ffd1c1
  • Duplicado 2: #fff8f2
  • Duplicado 3: #fffaf7

Cambiar los colores de fondo del botón

A continuación, cambiaremos los colores de fondo de los botones en cada fila duplicada.

  • Duplicado 1: #c18a7a
  • Duplicado 2: #bab5b2
  • Duplicado 3: #c98f7d

Cambios en filas con colores de fondo claros

Cambiar colores de texto

Y por último pero no menos importante, cambiaremos el color del texto para cada módulo de texto en las filas con un color de fondo más claro. ¡Eso es todo!

  • Color del texto: #2b343b

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 dentro del diseño de su página. Más específicamente, le mostramos cómo apilar filas para crear un diseño y una experiencia de usuario atractivos. ¡Hemos recreado un hermoso ejemplo de diseño desde cero y 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.