Descargue una sección cronológica gratuita hecha con Div

Cuando se trata de estructurar el contenido, crear una cronología es una excelente manera de mantener información interesante y atractiva para sus visitantes. Y cuando usa un diseño hermoso, plantea el aspecto general de su página en esta publicación, le mostraremos cómo crear una sección de cronología increíble con las opciones de transformación de Div. El diseño que recrearemos permanecerá receptivo en dimensiones de pantalla más pequeñas. ¡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 aspecto de la sección de cronología de forma gratuita para obtener la apariencia de la sección de cronología gratuita, primero tendrá que descargarla 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!
¡Comencemos a recrear!
Suscríbase a nuestro canal de YouTube Agregue una nueva sección, cree una nueva página o abra una existente y agregue una sección ordinaria. Abra la configuración de la sección, acceda a la configuración de espaciado y agregue algunos forrados e inferiores personalizados.
Revestimiento superior: 12VW
Revestimiento inferior: 0 VW
Agregue la estructura de la columna de la fila # 1 Continuar agregando una nueva línea a la sección utilizando la siguiente estructura de columna:

Dimensión sin agregar módulos, abra la configuración de la fila. Vaya a la configuración de tamaño en la pestaña de diseño y permita que el giro ocupe todo el ancho de la pantalla.

Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1
Ancho: 100%
Ancho máximo: 100%
Visibilidad Usaremos esta fila para agregar una ilustración en los próximos pasos. Sin embargo, solo necesitamos esta ilustración para el escritorio. Por lo tanto, ocultaremos toda la fila en la tableta y el teléfono.

Agregue un módulo de imagen Carga la ilustración como se menciona en el paso anterior de esta publicación, la única razón por la que necesitamos esta fila es agregar la ilustración de cronología. Puede encontrarlo en el archivo que descargó al comienzo de esta publicación. Una vez que lo ubique, cargue en un nuevo modo de imagen. Dimensión para asegurarse de que todo permanezca receptivo a todos los tamaños de pantalla, activaremos la opción “Ancho completo” en la configuración de dimensionamiento del módulo de imagen.

Fuerza el ancho completo: si

Agregue la estructura de la fila # 2 de la columna Continuar agregando una segunda fila a la sección utilizando la siguiente estructura de columnas:
Dimensión sin agregar módulos, abra la configuración de la fila y permita que la fila ocupe todo el ancho de la pantalla.

Use el ancho personalizado de la canaleta: sí

El ancho de la canaleta: 1
Ancho: 100%
Ancho máximo: 100%
El espacio luego accede a la configuración de espaciado. Aquí, queremos limitar el espacio ocupado por la fila (en el escritorio) eliminando todos los rellenos superiores e inferiores personalizados. Mantenemos algunos rellenos superior e inferior en tamaños de pantalla más pequeños.
Revestimiento superior: 0 PX (escritorio), 15 VW (tableta y teléfono)

Con el revestimiento inferior: 0 PX (escritorio), 15 VW (tableta y teléfono)
¡Agregue los módulos de blurb a la columna 1 Agregar contenido es hora de comenzar a agregar módulos! Agregue un módulo de propaganda en la columna 1. Ingrese un contenido de su elección.
Seleccione el icono Continuar seleccionando un icono de su elección.

El fondo de gradiente también agrega un fondo de gradiente.


Color 1: # A5C4FF

Color 2: #ffffff
Posición inicial: 40%
Posición final: 40%
Icono de configuración Entonces, acceda a la pestaña de diseño y cambie la configuración del icono.
Colocando iconos: arriba

Use el icono del tamaño de la fuente: sí
Icono de tamaño de fuente: 5VW (escritorio), 17VW (tableta), 18VW (teléfono)
Configuración de texto de título Vaya a la configuración del texto del título y cambie las opciones de acuerdo con:
Título de la fuente: Didact Gothic
Título Fuente de peso: Bold

Alineación del texto del título: Centro
Título Tamaño del texto: 1.1VW (escritorio), 2.7VW (tableta), 4VW (teléfono)
Altura de la línea de título: 2.8em
La configuración del texto del cuerpo hace lo mismo para la configuración del texto del cuerpo.
Font Corp: Open Sans
Alineación del texto del cuerpo: Centro

Tamaño de texto del cuerpo: 0.7VW (escritorio), 1.5VW (tableta), 2.1VW (teléfono)
La altura de la línea del cuerpo: 2em
Espacio también agregamos algunos valores de margen personalizado y llenado que personalizaremos de acuerdo con diferentes tamaños de pantalla.
Margen izquierdo: 3VW
Margen derecho: 3VW

Margen inferior: 5VW (tableta), 7VW (teléfono)
Revelaje superior: 2VW (escritorio), 6VW (tableta y teléfono)
Bajo forro: 2VW (escritorio), 6VW (tableta y teléfono)
ENLIZACIÓN IZQUIERDA: 3VW (escritorio), 9VW (tableta y teléfono)
Revestimiento derecho: 3VW (escritorio), 9VW (tableta y teléfono)
El borde vaya a la configuración del borde y agregue “20 PX” a cada esquina.
Por último, pero no menos importante, crea una cierta profundidad de la página agregando un tono de caja sutil al módulo de propaganda.
Poder de poco claro de la sombra de la caja: 80 px

Color de la sombra: RGBA (0.0,0,0,1)

Clone el módulo de la propaganda tres veces y coloque los duplicados en las columnas restantes después de haber terminado de crear y personalizar el módulo de la propaganda, puede clonar tres veces. Coloque los duplicados en las columnas restantes de la fila. Cambie el fondo de gradiente duplicado no. 1 Abra el primer duplicado (módulos de propaganda en la columna 2) y cambie el primer color del fondo de gradiente.
Color 1: # FFA5AE
Cambie el fondo de gradiente duplicado no. 2 Haga lo mismo para el módulo de propaganda en la columna 3.

Color 1: # F7E3A0

Cambie el fondo de gradiente duplicado no. 3 y cambie el fondo de gradiente del último módulo de propaganda.
Color 1: # CAA5FF

Agregue la configuración de transformación a los módulos de blurbs Agregar transformación al módulo de blurbs # 1 Ahora, que tenemos todos los elementos de diseño que necesitamos, ¡podemos comenzar a cambiar su posición! Para hacer esto, utilizaremos la opción de traducción traducida. Abra el módulo de propaganda en la columna 1 y cambie los valores en consecuencia:
La parte inferior: 2VW (escritorio), 0VW (tableta y teléfono)

Derecha: -106VW (escritorio), 0VW (tableta y teléfono)
Agregar transformación Translate al módulo de blurb # 2 al segundo módulo de propaganda y cambie los valores transformados en consecuencia:

Abajo: 16.6VW (abajo), 0VW (tableta y teléfono)
Derecha: -78VW (derecha), 0VW (tableta y teléfono)
Agregar transformación Translate al módulo de blurb # 3 Abra el módulo de la propaganda en la columna 3 más y use los siguientes valores de traducción de transformación:

La parte inferior: 17VW (escritorio), 0VW (tableta y teléfono)
Derecha: -46VW (escritorio), 0VW (tableta y teléfono)
Agregar transformación Traduce al módulo de blurb # 4 Haga lo mismo para el último módulo de blurbs, utilizando los siguientes valores: La parte inferior: -66VW (escritorio), 0VW (tableta y teléfono)

Derecha: -24VW (escritorio), 0VW (tableta y teléfono)
Agregue el margen inferior negativo en el turno 2 El uso de la opción de traducción de transformación no eliminará el espacio que inicialmente está ocupado por los módulos de propaganda en una fila. Para deshacerse de este espacio, podemos agregar un margen inferior negativo en una fila y ¡hemos terminado!
Margen inferior: -15VW (escritorio), 0VW (tableta y teléfono)

Vista previa ahora, que hemos dado todos los pasos, para echar un vistazo final al resultado. Escritorio
Móvil
Pensamientos finales En esta publicación, le mostré cómo crear una hermosa sección de cronología utilizando las nuevas opciones de transformación de la Divic. ¡Al comienzo del tutorial, puede descargar el archivo JSON y la ilustración de forma gratuita! Esto debería ayudarlo a comenzar de inmediato. Si tiene alguna pregunta o sugerencia, asegúrese de dejar un comentario en la sección de comentarios a continuación.