La creación de una línea de tiempo fija vertical puede ser extremadamente útil para categorizar el contenido por año y/o mes a medida que el usuario se desplaza hacia abajo en la página. Los elementos de fecha fijos permanecen fijos junto al contenido para un impulso de UX conveniente que los usuarios apreciarán.
En este tutorial, le mostraremos cómo crear un diseño de línea de tiempo fijo vertical completo en Divi . Las claves de este diseño son (1) dar a sus columnas un ancho personalizado para que los elementos de fecha no ocupen demasiado espacio horizontal en el móvil y (2) hacer que el año y el mes sean fijos, con límites fijos en la sección. (para el año) y fila (para el mes).
Aunque este diseño tiene aplicaciones multifacéticas, vamos a crear un diseño de línea de tiempo para mostrar galerías de fotos clasificadas por mes y año. Esta es una excelente manera de usar Divi para una línea de tiempo sin instalar un complemento de línea de tiempo por separado .
¡Empecemos!
Aquí hay un vistazo rápido al diseño que construiremos en este tutorial.
Descarga el diseño GRATIS
Para poner sus manos en los diseños de este tutorial, 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!
Para importar el diseño de la sección a su Biblioteca Divi, navegue hasta la Biblioteca Divi.
Haga clic en el botón Importar.
En la ventana emergente de portabilidad, seleccione la pestaña de importación y elija el archivo de descarga desde su computadora.
Luego haga clic en el botón importar.
Una vez hecho esto, el diseño de la sección estará disponible en Divi Builder.
Vayamos al tutorial, ¿de acuerdo?
Lo que necesitas para empezar
Para comenzar, deberá hacer lo siguiente:
- Si aún no lo has hecho, instala y activa el tema Divi .
- Cree una nueva página en WordPress y use Divi Builder para editar la página en la parte delantera (constructor visual).
- Elija la opción «Construir desde cero».
Después de eso, tendrás un lienzo en blanco para comenzar a diseñar en Divi.
Parte 1: Construyendo el encabezado del palo
El primer elemento que vamos a diseñar es el encabezado fijo que permanecerá fijo en la parte superior de la página al hacer scroll.
Añadir fila
Para comenzar, agregue un diseño de columna de dos quintos y tres quintos a la sección.
Texto de encabezado izquierdo
En la columna de la izquierda, vamos a agregar el encabezado de la línea de tiempo 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 «Línea de tiempo» al cuerpo del módulo de texto.
En la pestaña de diseño, actualice los siguientes estilos de texto:
- Fuente de texto: Oxígeno
- Peso de fuente de texto: Negrita
- Estilo de fuente de texto: TT
- Texto Color del texto: #666666
- Tamaño del texto: 50 px (escritorio), 30 px (tableta), 18 px (teléfono)
- Altura de línea de texto: 1em
- Alineación de texto: derecha
Luego actualice el relleno también:
- relleno: 5px arriba
Texto de encabezado derecho
Para crear el encabezado del contenido de la galería en el lado derecho de la página, copie el módulo de texto en la columna de la izquierda y péguelo en la columna de la derecha.
Luego abra la configuración del módulo de texto duplicado y actualice lo siguiente:
- Texto Color del texto: #c22969
- Alineación de texto: Izquierda (escritorio), Izquierda (tableta)
Configuración de fila
Para darnos el espacio que necesitamos en el móvil, necesitamos actualizar la configuración de la fila de la siguiente manera:
- Ancho del canalón: 1
- Ancho: 100%
- Ancho máximo: 1280px
- Relleno: 10px arriba, 10px abajo
En la pestaña avanzada, agregue el siguiente CSS personalizado al elemento principal en la tableta:
|
01
02
|
display:flex;flex-wrap:nowrap; |
Configuración de la columna izquierda
Debido a que estamos usando un ancho de medianil de fila de 1, no hay espacio 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): 10px arriba, 10px abajo, 20px a la izquierda, 20px a la derecha
- Relleno (tableta): 10px abajo, 10px a la izquierda, 10px a la derecha
A continuación, queremos anular el ancho predeterminado de la columna izquierda en la tableta y el teléfono para que sea el 30 % del ancho de la fila. Esto coincidirá con el ancho de columna que vamos a agregar a las columnas en la línea de tiempo a continuación.
Para hacer esto, abra la configuración de la columna izquierda (columna 1) y agregue el siguiente CSS al elemento principal en la tableta:
|
01
|
width: 30% !important; |
Para la columna de la derecha, queremos agregar el mismo relleno que hicimos en la columna 1. Y agregaremos un borde izquierdo a la columna para que sirva como divisor de la siguiente manera:
- Relleno (escritorio): 10px arriba, 10px abajo, 20px a la izquierda, 20px a la derecha
- Relleno (tableta): 10px abajo, 10px a la izquierda, 10px a la derecha
- Ancho del borde izquierdo: 2px
- Color del borde izquierdo: #333333
También queremos que el ancho de la columna de la derecha sea el 70% del ancho de la fila. 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:
|
01
|
width: 70% !important; |
Ajustes de sección
Para terminar el diseño del encabezado, abra la configuración de la sección y actualice el color de fondo:
- Color de fondo: #222222
Luego actualice el relleno de la sección:
- Relleno: 0px arriba, 0px abajo
Para hacer que la sección sea permanente, vaya a la pestaña Avanzado y actualice lo siguiente:
- Posición pegajosa: Stick to Top
Parte 2: Creación de la línea de tiempo fija
La siguiente parte del diseño es donde creamos la parte de la línea de tiempo fija del diseño. 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.
Agregar sección
Para comenzar, agregue una nueva sección regular debajo de la sección de encabezado que acabamos de terminar.
Antes de comenzar a agregar nuestras filas y contenido, abra la configuración de la sección y actualice lo siguiente:
- Relleno: 0px arriba, 0px abajo
Agregue la fila, los estilos de fila y la estructura de columna
A continuación, cree una fila de columna de un quinto de un quinto de tres quintos para la sección.
Para iniciar el diseño de la fila, copie los estilos de la fila en la sección de encabezado de arriba y péguelos en la nueva fila.
Luego abra la configuración de la nueva fila y actualice lo siguiente:
- Relleno: 50px arriba, 50px abajo
Luego agregue el CSS personalizado al elemento principal en la tableta de la siguiente manera:
|
01
02
|
display:flex;flex-wrap:nowrap; |
Crear el año pegajoso
El primer elemento de fecha fijo para la línea de tiempo será el año. Este elemento de texto de «año» se adherirá a la parte superior de la sección en el desplazamiento.
Para crear el elemento de texto del año, agregue un nuevo módulo de texto a la columna 1.
Luego agregue el texto «2020» al cuerpo.
En la pestaña de diseño, actualice los estilos de texto de la siguiente manera:
- Fuente de texto: Oxígeno
- Peso de fuente de texto: Negrita
- Texto Tamaño del texto: 40 px (escritorio), 24 px (tableta), 18 px (teléfono)
- Alineación de texto: derecha
Para que el año se mantenga en la parte superior de la sección, actualice lo siguiente:
- Posición pegajosa: Stick to Top
- Desplazamiento superior pegajoso: 50px
- Límite pegajoso inferior: Sección
Crear el mes pegajoso
Para crear el texto del mes fijo, copie el módulo de texto que contiene el año fijo y péguelo en la columna 2.
Luego abra la configuración para el nuevo módulo de texto en la columna 2 y actualice el cuerpo del texto con «dec» (la abreviatura del mes).
El texto del mes debe adherirse a la parte superior de la fila en lugar de a la sección, así que actualice el límite fijo de la siguiente manera:
- Límite fijo inferior: Fila
Agregar el contenido de la galería
En la columna de la derecha (columna 3), vamos a agregar el contenido que se correlaciona con el mes/año específico. En este caso, vamos a agregar un módulo de galería para mostrar una galería de imágenes.
Para crear la galería, agregue un módulo de galería en la columna 3.
Luego agregue al menos 6 imágenes a la galería (o las que desee) y actualice lo siguiente:
- Recuento de imágenes: 6
- Mostrar título y subtítulo: NO
- Cómo Paginación: NO
En la pestaña de diseño, actualice lo siguiente:
- Relleno: 3% a la izquierda, 3% a la derecha
Para crear un espacio personalizado entre los elementos de la galería, agregue el siguiente CSS personalizado al CSS del elemento de la galería:
|
01
|
padding: 0 1% 2% 1%; |
Actualizar anchos de columna y espaciado
Al igual que hicimos con las columnas en la sección de encabezado, vamos a dar a nuestras columnas espaciado y ancho personalizados (un móvil) para que se alineen con los encabezados y se vean bien en tabletas y teléfonos.
columna 1
Abra la configuración de la columna 1 y actualice lo siguiente:
- Relleno: 1% a la izquierda, 2% a la derecha
En la pestaña avanzada, agregue el siguiente CSS personalizado al elemento principal en la tableta:
|
01
|
width: 15% !important; |
Luego abra la configuración para la columna 2 y agregue el mismo relleno y CSS de la siguiente manera:
- Relleno: 1% a la izquierda, 2% a la derecha
Elemento principal CSS (tableta):
|
01
|
width: 15% !important; |
Luego abra la configuración para la columna 3 y actualice el relleno y el CSS del elemento principal de la siguiente manera:
- Relleno: 1% a la izquierda, 2% a la derecha
Elemento principal CSS (tableta):
|
01
|
width: 70% !important; |
Duplicar la fila para meses adicionales
Una vez que se completa la primera fila, podemos duplicar la fila por meses adicionales.
Duplica la fila.
En la fila duplicada, elimine el texto del año. Solo necesitamos un año por sección, ya que el año se mantendrá en la parte superior e inferior de la sección.
Luego abra el texto del mes y actualice la abreviatura del mes con un nuevo mes.
Duplicar la Sección para Años Adicionales
De la misma manera que duplicamos la fila para meses adicionales, podemos duplicar toda la sección para años adicionales.
Continúe y duplique la sección que acabamos de crear para el contenido de 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 con este proceso para crear años y meses adicionales según sea necesario para el diseño de su línea de tiempo.
Resultado final
Mira el resultado final.
Pensamientos finales
La mayor parte del trabajo de diseño para este diseño de línea de tiempo es hacer que responda al proporcionar estilos específicos para dispositivos móviles a los tamaños de texto y al ancho de columna. Pero, el posicionamiento fijo de los elementos de fecha es extremadamente fácil con las opciones integradas de Divi. Con suerte, esto será útil para futuros proyectos. Puedo ver que esto es útil para mostrar una línea de tiempo de historial para una página de información o incluso para una página de recursos, página de descargas o actualizaciones de productos.
Espero escuchar de usted en los comentarios.
¡Salud!