En este artículo, algo específico voy a mostrar como maquetar la página de archivo por fecha con flexbox en dos columnas. He seguido la linea de diseño de bloques visuales del resto de la web. Evidentemente, ese aspecto lo podremos cambiar para adaptar el diseño al de cada web.
Una página de archivo no deja de ser una especie de sitemap, en que excluimos las páginas y sólo dejamos los artículos del blog.
Requisitos
Para crear esta página necesitaremos un template para mostrar en ella todos los artículos por fecha. La uso mucho desde hace tiempo. Sobre todo para los blogs con mucho contenido porque es muy organizada y visual. Salvo que el cliente me pida algo distinto.
Es bastante minimalista y muestra un único listado de los artículos mostrados por meses y listados en base al día de la publicación del artículo. Con el rediseño y alguna modificación en el código lograremos hacerlo por bloques como lo tengo yo en mi web.
Y con las modificaciones necesarias así quedaría en Genesis Sample.
Empecemos. Lo primero será crear un archivo para el template y lo llamaremos de una manera descriptiva.
Este contenido está sólo disponible para los suscriptores.
Puedes identificarte aquí o bien registrate en este enlace.
Verás que en las primeras lineas, donde definimos los datos del template le he dado el nombre de Archive by date, esto es simplemente para reconocerlo en el siguiente punto en la lista de templates.
Aplicamos el template
El siguiente paso es crear una página y aplicarle el template. En mi caso la he llamado Archivo por Fecha, como has podido observar en la captura de pantalla. Lo importante es aplicarle el Template a esa página. En la barra lateral, en la edición de la página lo podrás hacer. En el bloque de «Atributos de página».
Y con esto ya tenemos nuestra página de archivo de artículos ordenados por fecha.
El CSS
Ahora sólo queda darle el estilo necesario para que se vea por bloques, cosa que a mi me gusta y visualmente da sensación de organización.
Este contenido está sólo disponible para los suscriptores.
Puedes identificarte aquí o bien registrate en este enlace.
Genesis Sample Develop viene con una sola media query. Por configuración para mi web he tenido que añadir más, pero cada tema es un mundo no dudes en agregar alguna media queries si lo necesitas, pero recuerda que menos es más ;).[/restrict]
Para cualquier duda, aportación o pregunta podéis dejarme un comentario justo debajo. O también me podéis mandar un mensaje a través del formulario de contacto. Si sois suscriptores no os olvidéis de hacerlo a través de la Intranet, pues os daré preferencia a la hora de contestar emails.