Aprende en este tutorial cómo crear una página de blog en formato rejilla con un overlay (título sobrepuesto a la imagen) en un child theme de Genesis.
Una de las peticiones más recurrentes de los suscriptores de Código Génesis es cómo mostrar la página de blog de una forma más visual.
En un tutorial anterior te expliqué cómo puedes mostrarla en formato de rejilla, pero hoy aprenderás a llevarlo un punto más allá combinándolo con un un efecto de overlay.
Este sería el resultado final:
¿Te interesa? Sigue leyendo.
Pasos para mostrar una página de blog en formato rejilla con el título sobre la imagen destacada en un child theme de Genesis
1. Crea el archivo home.php
Crea el archivo home.php en la raíz del child theme y añade el siguiente código:
Para ver este código y los otros 1921 snippets de esta web,
identifícate o suscríbete aquí.
Con este código eliminas el loop por defecto de Genesis y creas uno personalizado en el que se muestra la imagen destacada de las entradas con el título sobre ella.
Y puedes modificar:
- Orden descendente (en este caso DESC, pero puedes cambiar a ASC)
- Número de entradas que se muestran (en este caso 6)
Con el snippet anterior, el tamaño de imagen que usas es gb-block-post-grid-landscape, pero si no tienes Genesis Blocks instalado puedes usar los nativos de WordPress o los creados por otros plugins (o tema). Si quieres saber todos los tamaños de imagen que tienes en tu instalación de WordPress echa un ojo a este tutorial.
Ya casi lo tienes.
2. Aplica diseño de rejilla al bucle de entradas y crea el efecto overlay
Añade el siguiente fragmento al final del fichero style.css:
Para ver este código y los otros 1921 snippets de esta web,
identifícate o suscríbete aquí.
Con esto consigues mostrar las entradas en formato de rejilla. Puedes jugar con el valor del minmax (300px) para cambiar el número de columnas que se muestran.
Dependiendo de la longitud del título tendrás que ajustar el tamaño del mismo, en este caso 32px.
También puedes ajustar el color o la opacidad del overlay a tu gusto.
Si por ejemplo quieres que el overlay solo se muestre al hacer hover sobre la entrada (como muestra el GIF de arriba), puedes sustituir el CSS anterior por este:
Para ver este código y los otros 1921 snippets de esta web,
identifícate o suscríbete aquí.
El ejemplo mostrado en el tutorial está creado en el tema Genesis Sample (3.4.1) pero puedes aplicarlo a cualquier child theme de Genesis con pequeños ajustes.
Aprovecho para agradecer a Juan (ciudadanob) por compartir conmigo su elegante estrategia para mostrar overlays con CSS.
Conclusiones
Si quieres mostrar un bucle de entradas en formato rejilla y con el título sobrepuesto sobre la imagen destacada en la página de blog de un child themes de Genesis ahora ya sabes cómo hacerlo.
¿Alguna duda? Te leo en los comentarios.
Y si quieres darme una sugerencia para próximos tutoriales, déjamela en el formulario de contacto. Ventajas de ser suscriptor. 😉
