Cómo apilar las filas al desplazarse con las opciones pegajosas de Div

Desde que han aparecido las opciones adhesivas de Div, le he demostrado que usa las diferentes características durante la construcción de su sitio, especialmente en encabezados. Pero hay muchas maneras de usar opciones pegajosas para mejorar la experiencia de uso en su sitio web y hacer que su sitio brille. En el tutorial de hoy, por ejemplo, le mostraremos cómo apilar el desplazamiento con las opciones pegajosas de Div. Tan pronto como una fila llegue a la parte superior de su pantalla, comenzará a pasar debajo de la siguiente fila, que proporciona un efecto de apilamiento que se ve hermoso. ¡Recrearemos el diseño desde cero y podrá descargar el archivo JSON de la sección de forma gratuita!
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 diseño de apilamiento de fila de forma gratuita para poner sus manos en el aspecto de apilamiento gratuito, primero deberá descargarlo con 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. Se ha suscrito correctamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
1. Cree el concepto de primera fila Agregue una nueva sección en la primera parte de este tutorial, comenzaremos a establecer las bases de nuestra primera fila. Una vez que hayamos terminado de estilizar los elementos primero, podemos reutilizarlo por completo para crear el efecto de apilar las 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 llenado personalizados en diferentes tamaños de pantalla.
Revestimiento superior:
Desktop: 100 PX
Tableta: 40 PX
Teléfono: 25 PX
Levante inferior:
Desktop: 100 PX
Tableta: 40 PX
Teléfono: 25 PX
Agregue una nueva estructura de columna de fila Continuar agregando una nueva línea utilizando la siguiente estructura de columnas:

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

Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1
Igualar las alturas de la columna: sí
Ancho: 90%
Ancho máximo: 2580 PX
Espacio y luego, retire todos los valores predeterminados desde arriba e inferior.

SUS Lingo: 0 PX
Finamiento inferior: 0 PX
Configuración Columna 1 Color de fondo Luego, abra la configuración de la columna 1 y aplique un color de fondo.

La imagen de fondo también usa una imagen de fondo. Si desea usar los que se muestran en este tutorial, descargue la carpeta ZIP al comienzo del tutorial y cargue las imágenes de fondo en su biblioteca de medios.
Tamaño de la imagen de fondo: adecuado

Espacio ir a la pestaña Diseño de la columna vertebral y aplique los siguientes valores de llenado en diferentes tamaños de pantalla:
Revestimiento superior:

Escritorio: 25%
Tableta: 40%
Teléfono: 50%
Levante inferior:
Escritorio: 25%
Tableta: 40%
Teléfono: 50%
ENLIZACIÓN IZQUIERDA: 5%
Revestimiento derecho: 5%
Configuración Columna 2 Color de fondo Luego, abra la segunda columna y use un color de fondo allí.
Color de fondo: # 394751

Espacio junto con algunos valores de llenado personalizados.
Revestimiento superior: 13%

Finamiento inferior: 13%
ENLIZACIÓN IZQUIERDA: 8%
Revelaje derecho: 8%
Box Shadow y un tono de caja.
Box Shadow Posición vertical: 20 PX

Poder de poco claro de la sombra de la caja: 50 px
Color de la sombra: RGBA (0.0,0,0.14)
Agregue un 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 un contenido H2 de su elección en el cuadro de contenido.
Configuración de texto H2 Vaya a la pestaña Diseño del módulo y estilice la configuración de texto H2 en consecuencia:

2 Fuentes de fuentes: Aleata

Título 2 Fuente de peso: Bold
Título 2 Alineación de texto: Centro
Rúbrica 2 color de texto: #ffffff
Rúbrica 2 Dimensión de texto:
Escritorio: 200 PX
Tableta: 150 PX
Teléfono: 100 PX
Rúbrica 2 Espaciación de litros: -1 PX
Repose de posición el módulo y en la pestaña avanzada. Posición: Absoluto
Ubicación: superior izquierda

Brecha vertical: 2%
Brecha horizontal: 2%
Agregue el módulo de botón a la columna 1 Agregue una copia a continuación y el último módulo que necesitamos en la columna 1 es un módulo de botón. Agregue una copia de su elección.
Configuración del botón Pase a la pestaña Diseño del módulo y estilice el botón de acuerdo con:
Use estilos personalizados para el botón: Sí


Botón de tamaño de texto: 20 PX

El color del texto del botón: #ffffff
El color de fondo del botón: # 83A5BF
El ancho del nudo del botón: 0 PX
Botón Raza: 1 PX
Botón de fuente: Alda
Espacio agregue algunos valores de llenado personalizados.
Revestimiento superior: 20 px
Finamiento inferior: 20 PX


ENNIZACIÓN IZQUIERDA: 50 PX
Revestimiento derecho: 50 PX
Posición y reposicione el módulo en la pestaña avanzada.
Posición: Absoluto
Ubicación: en el lado inferior derecho

Agregue el módulo de texto no. 1 en la columna 2 Agregue contenido H3 a la segunda columna. Agregue un primer módulo de texto con un contenido H3 de su elección.
Configuración de texto H3 Cambiar a la pestaña Diseño del módulo y aplique los siguientes estilos de texto H3:
3 Fuentes de fuentes: Aleata

Título 3 Fuente de peso: Bold

Frup 3 color de texto: #ffffff
Rúbrica 3 Dimensión de texto: 40 PX
Agregue el módulo divisor a la visibilidad de la columna 2 en el primer módulo de texto, agregaremos un módulo divisor. Asegúrese de que la opción “Show Divider” esté activada.
Divisor del espectáculo: si
Configuración de línea Vaya a la pestaña Diseño del módulo y cambie el color de la línea.

Color de línea: # F3F0EE
Dimensión Modifique la configuración de tamaño.

Peso del divisor: 5 PX
Ancho: 19%

Altura: 5 PX
Espacio y complete la configuración del módulo agregando un margen más bajo a la configuración de espaciado. Marja inferior: 20%
Agregue el módulo de texto no. 2 En la columna 2 Agregar contenido Agregue otro módulo de texto justo debajo del módulo Divisor. Ingrese el contenido de descripción de su elección.
Configuración de texto Estilice el texto del módulo de acuerdo con:

Texto de fuente: Montserrat
Color de texto: #ffffff

Tamano del texto:

Escritorio: 15 PX
Tableta y teléfono: 14 PX
Altura de la línea de texto: 2em
2. Convierta la fila en la configuración del elemento de apilamiento R ÍNDICE DE RODA Z Ahora que tenemos nuestra primera fila, es hora de aplicar la configuración de apilamiento de las filas adhesivas. Aplicaremos estas configuraciones antes de clonar nuestro turno para su reutilización, de modo que el efecto de apilamiento tenga lugar automáticamente. Abra la configuración de la fila, acceda a la pestaña avanzada y aplique un índice AZ de 1. Este índice nos ayudará a asegurarnos de que cada fila siguiente se coloque por encima de la anterior.
IND ÍNDICE: 1
Configuración pegajosa Entonces, accederemos a la configuración de los efectos de configuración y aplicaremos la siguiente configuración pegajosa:
Posición pegajosa:

Desktop: quédese en la parte superior
Tableta y teléfono: no pegue

Pequeño límite inferior: sección
Brecha de los elementos circundantes adhesivos: no
3. Reutilice la fila de apilamiento en la misma sección Clone Row X3 ahora que nuestras opciones pegajosas se han aplicado, podemos reutilizar toda la fila tantas veces como queramos.
Cambios generales Cambiar todas las copias Asegúrese de cambiar la copia de cada duplicado
Cambie la columna 1 colores e imágenes de fondo con colores de columna 1 e imágenes de fondo.
Duplicado 1: # EDC1B6

Duplicado 2: # Efe7e2

Duplicado 3: # F7F6F4

Cambie los colores de fondo de la columna 2 usamos diferentes colores y para la segunda columna de cada fila duplicada. Bypass 1: # FFD1C1
Duplicado 2: # FFF8F2
Duplicado 3: # fffaf7
Cambie los colores del fondo de fondo, cambiaremos los colores de fondo del botón en cada duplicado.


Duplicado 1: # C18A7A
Duplicado 2: # bab5b2
Duplicado 3: # C98F7D
Los cambios en las filas con colores de fondo abierto cambian los colores del texto y no menos importante, cambiaremos el color del texto para cada módulo de texto con un color de fondo más claro. ¡Eso es todo!

Color de texto: # 2b343b
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 del diseño de la página. Específicamente, le mostré cómo apilar líneas para crear un diseño y experiencia atractivos. ¡Recreé desde cero un buen ejemplo de diseño y podría descargar el archivo json gratis! 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.