Cómo crear una apariencia vertical cronológica pegajosa en la división

Crear una cronología pegajosa vertical puede ser extremadamente útil para clasificar el contenido según el año y / o el mes, ya que el usuario ejecuta la página hacia abajo. Los elementos de datos adhesivos permanecen arreglados al lado del contenido para un conveniente Boost UX que los usuarios apreciarán. En este tutorial, le mostraremos cómo crear un esquema vertical pegajoso en la división. Las claves de este diseño son (1) para dar a las columnas un ancho personalizado, de modo que los elementos de fecha no ocupan demasiado espacio horizontal en el móvil y (2) para hacer el año y el mes pegajoso, con límites pegajosos (para el año) y la fila (para la luna).
Aunque este aspecto tiene aplicaciones multifacéticas, construiremos un aspecto cronológico para presentar las galerías de fotos clasificadas de acuerdo con el mes y el año. ¡Vamos a empezar! Él saca la vista con un vistazo rápido al diseño que construiremos en este tutorial. Descargue el aspecto gratuito para poner su mano en los dibujos en este tutorial, 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. Se ha suscrito correctamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
Para importar la aparición de la sección en la Biblioteca de la Divica, navegue en la Biblioteca de la Divica.
Haga clic en el botón Importar. En la ventana de portabilidad emergente, seleccione la pestaña Importar y elija el archivo de descarga en su computadora. Luego haga clic en el botón Importar.
Después de haber terminado, la aparición de la sección estará disponible en Divi Builder. Pasemos al tutorial, ¿no? Qué necesitas para empezar

Para comenzar, deberá hacer lo siguiente:

Si aún no lo ha hecho, instale y active el tema de Div.
Cree una nueva página en WordPress y use Divi Builder para editar la página principal (Visual Builder).
Elija la opción “Construir desde cero”.
Después de eso, tendrá un lienzo vacío para comenzar a diseñar en el Div.
Parte 1: Construcción del título del palo El primer elemento que estamos a punto de diseñar es el encabezado pegajoso que permanecerá fijo en la parte superior de la página en el pergamino. Agregue la fila para iniciar, agregue una sección con una columna de dos quince y tres quifth.
El texto del encabezado izquierdo en la columna izquierda, agregaremos el título para la cronología que estará en el lado izquierdo de la página. Para hacer esto, agregue un módulo de texto a la columna izquierda. Luego agregue el texto “cronología” al cuerpo del módulo de texto.

En la pestaña Diseño, actualice los siguientes estilos de texto:

Texto de fuente: oxígeno

El peso de la fuente de texto: en negrita
Text -Text Style: TT
Color de texto de texto: # 666666
Tamaño de texto: 50 PX (escritorio), 30 px (tableta), 18 px (teléfono)
La altura de la línea de texto: 1em
Alineación de texto: correcto
Luego actualice el revestimiento:
forro: top 5 px

Texto del encabezado derecho Para crear el título para el contenido de la galería en el lado derecho de la página, copie el módulo de texto en la columna izquierda y péguelo a la columna derecha.
Luego abra la configuración del módulo de texto duplicado y actualice lo siguiente:

Color de texto de texto: # C22969

Alineación de texto: izquierda (escritorio), izquierda (tableta)
Configuración de fila Para darnos la habitación que necesitamos en el móvil, debemos actualizar la configuración de la fila de la siguiente manera:
El ancho de la canaleta: 1

Ancho: 100%
Ancho máximo: 1280 PX
Forro: 10 px arriba, 10 px abajo
En la pestaña avanzada, agregue los siguientes CSS personalizados al elemento principal en la tableta: Display: Flex;
Flex-Wrap: Nowrap;

Configuración de la columna izquierda Debido a que usamos un ancho del canal de la fila de 1, no hay distancia entre las columnas. Para agregar suficiente espacio, abra la configuración de la columna 1 y actualice el relleno de la siguiente manera:
Relleno (escritorio): 10 px arriba, 10 px abajo, 20 px izquierda, 20 px a la derecha

Revestimiento (tableta): 10 px abajo, 10 px izquierda, 10 px a la derecha
Luego, queremos reemplazar el ancho predeterminado de la columna izquierda en la tableta y el teléfono, de modo que sea el 30% del ancho. Esto se ajustará al ancho de la columna que agregaremos a las columnas en la cronología a continuación. Para hacer esto, abra la configuración de la columna izquierda (columna1) y agregue los siguientes CSS al elemento principal en la tableta: ¡ancho: 30%! importante;
Para la columna derecha, queremos agregar el mismo revestimiento que en la columna 1. y agregaremos un borde izquierdo a la columna para servir como divisor de la siguiente manera:

Relleno (escritorio): 10 px arriba, 10 px abajo, 20 px izquierda, 20 px a la derecha
Revestimiento (tableta): 10 px abajo, 10 px izquierda, 10 px a la derecha

Ancho del borde izquierdo: 2 PX
Color del borde izquierdo: # 333333
También queremos que el ancho de la columna correcta sea el 70% del ancho. Para actualizar el ancho de la columna, abra la configuración de la columna 2 y agregue el siguiente CSS al elemento principal en la tableta:
Ancho: 70%! Importante;
Configuración de la sección Para completar el diseño del título, abrir la configuración de la sección y actualizar el color de fondo:

Color de fondo: # 222222
Luego actualice la cuerda de la sección:

Forro: 0 px arriba, 0 px abajo
Para hacer la sección pegajosa, vaya a la pestaña avanzada y actualice lo siguiente:

Posición pegajosa: adhiérase a la parte superior
Parte 2: Creación de la cronología pegajosa La siguiente parte del diseño es el lugar donde creamos la parte pegajosa de la cronología. La clave aquí es diseñar la primera sección, fila y módulos con todos los elementos en su lugar. Luego podemos duplicar cada sección o fila según sea necesario.


Agregue la sección para comenzar, agregue una nueva sección habitual en la sección de título que acabamos de terminar. Comience a agregar nuestras líneas y contenido, abra la configuración de la sección y actualice lo siguiente:
Forro: 0 px arriba, 0 px abajo

Agregue la fila, los estilos de línea y la estructura de la columna luego, cree un quinto de una quinta quinta quinta fila de columna en la sección.
Para iniciar la fila del draft, copie los estilos de la fila a la sección de título anterior y colóquela en la nueva fila.

Luego abra la nueva configuración de la fila y actualice lo siguiente:
Revestimiento: 50 px arriba, 50 px abajo

Luego agregue CSS personalizado al elemento principal en la tableta de la siguiente manera: Display: Flex;

Flex-Wrap: Nowrap;

Crear el año pegajoso El primer elemento pegajoso para la cronología será el año. Este elemento de texto “Año” permanecerá en la parte superior de la sección de desplazamiento. Para crear el elemento de texto del año, agregue un nuevo módulo de texto en la columna 1.
Luego agregue el texto “2020” al cuerpo.

En la pestaña Diseño, actualice los estilos de texto de la siguiente manera:
Texto de fuente: oxígeno

El peso de la fuente de texto: en negrita

Tamaño de texto de texto: 40 px (escritorio), 24 px (tableta), 18 px (teléfono)

Alineación de texto: correcto
Para que el año permanezca en la parte superior de la sección, actualice lo siguiente:
Posición pegajosa: adhiérase a la parte superior
Gap Upper Lipritical: 50 PX
Pequeño límite inferior: sección

Creando la luna pegajosa para crear el texto de la luna pegajosa, copie el módulo de texto que contiene el año pegajoso y peguelo en la columna 2.
Luego abra la configuración del nuevo módulo de texto en la columna 2 y actualice el texto del texto con “DEC” (abreviatura del mes).
El texto de la luna debe permanecer en la parte superior de la fila en lugar de la sección, por lo que actualice el límite adhesivo de la siguiente manera: Límite inferior inferior: fila
Agregando el contenido de la galería a la columna derecha (columna 3), agregaremos el contenido que se correlaciona con el mes / año específico. En este caso, agregaremos un módulo de la galería para mostrar una galería de imágenes. Para crear la galería, agregue un módulo de la galería en la columna 3.

Luego agregue al menos 6 imágenes a la galería (o lo que quiera) y actualice lo siguiente:

Número de imágenes: 6

Título de la pantalla y leyenda: no
Cómo paginando: no

En la pestaña Diseño, actualice lo siguiente:

Revestimiento: 3% a la izquierda, 3% a la derecha
Para crear un cierto espacio personalizado entre los elementos de la galería, agregue los siguientes CSS personalizados a la Galería de artículos de CSS: relleno: 0 1% 2% 1%;
Actualice los anchos y el espacio de la columna como lo hemos hecho para las columnas en la sección de títulos, daremos el espacio de las columnas y los anchos personalizados (un móvil), para alinearse con los títulos y vernos bien en la tableta y el teléfono. Columna 1 Abra la configuración para la columna 1 y actualice lo siguiente:
Revestimiento: 1% a la izquierda, 2% a la derecha

En la pestaña Avanzada, agregue los siguientes CSS personalizados al elemento principal en la tableta: ¡Ancho: 15%! Importante;
Luego abra la configuración para la columna 2 y agregue el mismo relleno y CSS de la siguiente manera:

Revestimiento: 1% a la izquierda, 2% a la derecha

Artículo principal CSS (tableta): Ancho: 15%! Importante;
Luego abra la configuración de la columna 3 y actualice el relleno principal y el elemento de CSS de la siguiente manera:

Revestimiento: 1% a la izquierda, 2% a la derecha

Artículo principal CSS (tableta): Ancho: 70%! Importante;
Duplicar la fila durante los meses adicionales Una vez que se complete la primera fila, podemos duplicar la fila para otros meses. Duplicar el giro.
En la fila duplicada, elimine el texto del año. Solo necesitamos un año en la sección, porque el año permanecerá en la parte superior e inferior de la sección.

Luego abra el texto de la luna y actualice la abreviatura del mes con un nuevo mes.
Duplicar la sección durante años adicionales de la misma manera que duplicamos la fila durante meses adicionales, podemos duplicar la sección completa durante años adicionales. Continúe y copie la sección que acabo de crear para el contenido 2020.
En la sección duplicada, actualice el texto del año en la fila 1, columna 1 con el año “2019”.

Puede continuar este proceso para crear años y meses adicionales, según sea necesario para la aparición de la cronología. Resultado final verifique el resultado final. Pensamientos finales El peso del diseño funciona para este aspecto de la cronología es hacerlo receptivo, ofreciendo el tamaño del texto y el ancho de los estilos móviles específicos. Pero, el posicionamiento pegajoso de los elementos de fecha es extremadamente fácil con las opciones incrustadas del Div. Esperamos que esto sea útil para futuros proyectos. Veo que esto es útil para presentar una cronología histórica para una página sobre o incluso para una página de recursos, una página de descarga o actualizaciones de productos. Espero tener noticias suyas en los comentarios. ¡Suerte!