Cómo crear un diseño de línea de tiempo pegajoso vertical en Divi
Publicado: 2020-10-14La creación de una línea de tiempo fija vertical puede ser extremadamente útil para clasificar 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 fija permanecen fijos al lado del contenido para un conveniente impulso de UX que los usuarios apreciarán.
En este tutorial, le mostraremos cómo crear un diseño de línea de tiempo adhesivo 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 dispositivo 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 categorizadas por mes y año.
¡Empecemos!
Vistazo
Aquí hay un vistazo rápido al diseño que crearemos en este tutorial.
Descarga el diseño GRATIS
Para poner sus manos sobre 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 nuestra lista de correo electrónico Divi Daily mediante 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 se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín 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 toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de 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.
Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!
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 ha hecho, instale y active Divi Theme.
- Cree una nueva página en WordPress y use Divi Builder para editar la página en el front-end (constructor visual).
- Elija la opción "Construir desde cero".
Después de eso, tendrá un lienzo en blanco para comenzar a diseñar en Divi.
Parte 1: Construyendo el rumbo del palo
El primer elemento que vamos a diseñar es el encabezado adhesivo que permanecerá fijo en la parte superior de la página en el 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 a la izquierda
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 de la 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 la fuente del texto: negrita
- Estilo de fuente de texto: TT
- Color del texto del texto: # 666666
- Tamaño del texto: 50 px (escritorio), 30 px (tableta), 18 px (teléfono)
- Altura de la línea de texto: 1em
- Alineación de texto: derecha
Luego actualice también el relleno:
- acolchado: 5px superior
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:
- Color del texto del texto: # c22969
- Alineación de texto: izquierda (escritorio), izquierda (tableta)
Configuración de filas
Para darnos el espacio que necesitamos en el móvil, debemos actualizar la configuración de la fila de la siguiente manera:
- Ancho de la canaleta: 1
- Ancho: 100%
- Ancho máximo: 1280px
- Relleno: 10 píxeles en la parte superior, 10 píxeles en la parte inferior
En la pestaña avanzada, agregue el siguiente CSS personalizado al elemento principal en la tableta:
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 columnas. Para agregar suficiente espacio, abra la configuración de la columna 1 y actualice el relleno de la siguiente manera:
- Relleno (escritorio): 10 píxeles en la parte superior, 10 píxeles en la parte inferior, 20 píxeles a la izquierda, 20 píxeles a la derecha
- Relleno (tableta): 10 px en la parte inferior, 10 px a la izquierda, 10 px 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:
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): 10 píxeles en la parte superior, 10 píxeles en la parte inferior, 20 píxeles a la izquierda, 20 píxeles a la derecha
- Relleno (tableta): 10 px en la parte inferior, 10 px a la izquierda, 10 px 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:
width: 70% !important;
Configuración de la 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 pegajosa, vaya a la pestaña Avanzado y actualice lo siguiente:
- Posición adhesiva: adherirse a la parte superior
Parte 2: Creación de la línea de tiempo pegajosa
La siguiente parte del diseño es donde creamos la parte de la línea de tiempo pegajosa 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 un quinto tres quintos a 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éguelo en la nueva fila.
Luego abra la configuración de la nueva fila y actualice lo siguiente:
- Relleno: 50 píxeles en la parte superior, 50 píxeles en la parte inferior
Luego, agregue el CSS personalizado al elemento principal en la tableta de la siguiente manera:
display:flex; flex-wrap:nowrap;
Creando el año pegajoso
El primer elemento de fecha fija para la línea de tiempo será el año. Este elemento de texto "año" se pegará 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 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 la fuente del 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 adhesiva: adherirse a la parte superior
- Desplazamiento superior pegajoso: 50px
- Límite inferior pegajoso: sección
Creando 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 del 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 permanecer en la parte superior de la fila en lugar de en la sección, así que actualice el límite fijo de la siguiente manera:
- Límite inferior fijo: Fila
Agregar el contenido de la galería
En la columna del extremo derecho (columna 3), agregaremos 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 todas las que desee) y actualice lo siguiente:
- Recuento de imágenes: 6
- Mostrar título y pie de foto: 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:
padding: 0 1% 2% 1%;
Actualizar el ancho y el espaciado de las columnas
Al igual que hicimos con las columnas en la sección de encabezados, le daremos a nuestras columnas espacios y anchos 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:
width: 15% !important;
Luego abra la configuración de 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):
width: 15% !important;
Luego, abra la configuración de 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):
width: 70% !important;
Duplique la fila para meses adicionales
Una vez que se completa la primera fila, podemos duplicar la fila durante meses adicionales.
Duplica la fila.
En la fila duplicada, saque 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.
Duplique la sección para 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 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 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 hacerlo receptivo al proporcionar tamaños de texto y estilos específicos para dispositivos móviles de 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 proyectos futuros. Puedo ver que esto es útil para mostrar una cronología del historial para una página acerca de o incluso para una página de recursos, una página de descargas o actualizaciones de productos.
Espero tener noticias tuyas en los comentarios.
¡Salud!