Monochrome Pro Theme es uno de los temas mas minimalistas y a la vez más atractivos de StudioPress . Uno de los factores que lo hacen tan atractivo a la vista es ese valor monocromático. Casi todo en Genesis Monochrome Pro son tonos negros y blancos, con algún gris discreto y ligeros toques de color en algunos de sus elementos.
Tanto es el valor que le doy que forma parte de la lista de mi artículo de los mejores themes de Genesis Framework, un artículo en el que he trabajado durante horas y horas para aportar valor como guía de compra de Genesis Themes y aún trabajo añadiendo contenido actualmente.
Página de inicio
Hasta ahora la página de inicio de Monochrome Pro, como en casi todos los themes de StudioPress, estaba compuesta por áreas de widgets. Dependiendo de las secciones, estaban combinadas de una manera u otra. De hecho, aún se puede construir con widgets, pero con la llegada de Gutenberg, el nuevo editor de bloques, esto ha cambiado drásticamente.
StudioPress está aprovechando todo el potencial de Gutenberg para construir sus themes, es espacial, la portada. Ya son varios los themes que ha rediseñado y reconstruido su portada para hacerlo con bloques, mucho más intuitivos y fáciles de editar por cualquier usuario.
Para ello tienen una herramienta totalmente automatizada, que al instalar Monochrome Pro te pregunta si quieres configurar tu sitio. Te muestra que plugins instalará y te avisa que añadirá contenido de ejemplo para así poder «rellenar» todos los artículos y páginas necesarios para configurar el theme. No te preocupes no es mucho contenido.
Todos los plugins son necesarios para esa configuración. Son plugins fiables y potntentes con los que podemos trabajar más tarde como Atomic Blocks, o WPForms. Claro está, cada implementador o desarrolladora tiene su manera de trabajar, pero digamos que es un buen punto de partida.
Mensaje principal en Monochrome Pro
Lo he llamado mensaje principal, porque tal y como está diseñado y desarrollado no tiene una llamada a la acción (CTA), como se espera en un theme de StudioPress. En realidad es sólo informativo, no hay acción a realizar.
Eso sí, es un bloque con una imagen de fondo que da ese estilo minimalista y monochromático a este theme de Genesis. Esta imagen, dado que trabajamos con Gutenberg, la definiremos en el propio bloque donde además podremos ajustar varios parametros más jugando así con transparencias y colores.
Desde que han mejorado Monochrome Pro y han contruido su portada o página de inicio con Gutenberg, podemos añadir cualquier elemento de manera sencilla. Por ejemplo, para añadir un botón bajo las lineas de texto sería tan sencillo como añadir un bloque más, en este caso un bloque de botón y darle el estilo que deseemos.
Bloques de servicios
En la segunda sección de la portada nos muestra tres posibles bloques de servicios, cada uno con un botón el cual redirige a la página o el artículo en cuestión.
Dada la versatilidad Gutenberg es muy sencillo añadir otros tres bloques, respetando las columnas y así el diseño. La flexibilidad de esta sección realmente la pones tu misma. Siempre he dicho y mantengo que cuanto más simple sea una cosa mas libertad te da para usarla. En este caso es cierto, porque bien podríamos destacar productos de un ecommerce o incluso productos de ese mismo ecommerce. Categorías, páginas, elementos de un portfolio, etc… la lista es larguísima.
Bloque de marcas
Es un bloque sencillo, donde se muestran algunas de las marcas con las que nuestra empresa ha podido trabajar o trabaja. Son imágenes que pesan poco, luego no recargan mucho la portada y por lo tanto no aumentan el tiempo de carga.
Esta sección o bloque como la primera, tiene una imagen de fondo que podremos editar de manera sencilla desde los ajustes del propio bloque en el editor de WordPress.
Bloque de artículos para Monochrome Pro
Algo que no podría faltar en un theme de StudioPress, porque ellos saben lo importante que es el marketing de contenidos, es un bloque con los últimos artículos en la portada.
En este caso nos muestran 4 artículos, con imagen, título, autor y fecha. Hablo de la demo oficial, la cual me puedo imaginar que aún está construida con el antiguo sistema de widgets. Si optamos por la herrramienta de configuracion automática de la que hablabamos al principio de este artículo veremos que nos lo ha congigurado de manera distinta.
En este caso nos muestra imagen, título, autor, fecha, extracto de contenido y enlace de continuar leyendo. Una vez más al trabajar con el nuevo editor de bloques es relativamente sencillo observar y cambiar las distintas opciones del bloque para conseguir la configuración de deseemos mostrar. Os dejo captura del resultado en una web de pruebas en mi servidor local.
Podemos incluso marcar que densidad de palabras queremos en extracto del contenido de los artículos.
CTA antes del footer
Justo antes del pie de página podemos ver en la demo una sección con un sencillo CTA que nos invita a descubrir una mirada minimalista. No es más que un sencillo bloque con un degradado de azules. Es una de las pocas notas de color de Monochrome Pro.
Ambos colores del degradado, los podremos definir en los ajustes de Genesis.
Menús
En Monochrome Pro son dos las posiciones de menú las que tenemos disponibles. La principal que se sitúa en la cabecera del theme y otra al pie de página.
El menú principal
El menú principal de Monochrome Pro es un menú fijo con fondo blanco que carece de animaciones, algo que encaja perfectamente con el minimalismo del theme.
No obstante, tiene una opción interesante que me gustaría detallar. Es la opción de mostrar el enlace para buscar en forma de icono de lupa. Es opcional, es decir, en el personalizador lo podemos deshabilitar y esto es genial, porque no todas las webs necesitan una opción para buscar en su contenido.
Algo que no me termina de convencer, incluso escribí un tutorial para solucionarlo, es que en la versión móvil, cuando el menú se esconde detrás del famoso icono de hamburguesa, el propio icono de buscar desaparece. Y no me refiero que se también se oculte en ese menú adaptativo, no, es que desaparece y no es muestra. Ni dentro ni fuera del menú. Como si los usuarios del móvil no tuviesen la opción de buscar. Creo que es un fallo de accesibilidad, aunque puede resolverse de manera sencilla con algo de código.
El menú secundario
El menú secundario, o el que está al pie de página es un menú sencillo, separado por guiones y que se suele usar para enlaces de servicio o como en el caso de la demo de Monochrome Pro, para enlaces sociales.
Barra de buscar integrada
Hablando de los menús, no puedo dejar de pasar la oportunidad de comentar una de las cosas que más me gustan de este tema. Una de las propiedades, o mejor dicho elementos de diseño, es su barra de búsqueda. Está completamente integrada en la cabecera. ¿Que quieres decir con esto Luis? me refiero a que cuando hacemos clic en ese icono de buscar que hemos mostrado junto al menú aparecerá una barra de buscar que ocupa toda la cabecera, de manera que no tapa nada del contenido de la web.
No importa, si ya has hecho scroll y estás a media página, al ser una cabecera fija, la barra aparecerá de igual manera. Pero una imagen vale más que mil palabras. te dejo una captura.
Como puedes ver se visualiza con el icono de cerrar, claro está. Aunque si haces clic en cualquier sitio fuera de la barra de buscar, también se cerrará.
Artículos, diseño y propiedades
Algo que también me gustaría señalar de Monochrome Pro son los diseños de los artículos. Aunque el contenido está en una columna algo estrecha, ideal para leer párrafos cortos y muy optimizada tanto para tablets como para móviles, en la cabecera del artículo se muestra la imagen destacada del mismo con el ancho completo de la pantalla.
Sobre esta imagen de ancho completo y encabezando el contenido, se muestra el Gravatar del autor seguido del título título y detalles del artículo. Es muy interesante ese acercamiento de mostrar la imagen destacada maximizada a todo el ancho. Me parece algo muy elegante y que da mucho juego a la hora de plantear un diseño. Además, aporta algo al lector que en ocasiones se nos olvida, concordancia.
Y me voy explicar a lo que me refiero con concordancia. ¿Cuantas veces hemos hecho clic en un anuncio en FB o Google y nos ha llevado a una página con imágenes complementarte distintas y otro título? En esas ocasiones nos sentimos perdidos y/o engañados, al menos yo. Pues este diseño aporta esa concordancia al lector de que ha llegado al sitio adecuado.
Te dejo una captura de pantalla, pero no de la demo, sino de mi sitio de pruebas.
Cómo podrás observar es la misma imagen destacada que en la captura del bloque de artículos de la portada. A eso me refería con concordancia. Además de que visualmente es un diseño muy atractivo.
Otra cosa a señalar sobre los artículos es la opción que tiene Monochrome Pro de resaltar de manera automática el primer párrafo del contenido. Si te fijas, verás que el primer párrafo de la anterior captura tiene el tamaño de letra un poco mayor que el resto y en negrita.
Esta es una opción que nos ofrece Monochrome Pro como algo exclusivo. No es común en el resto de Themes, al menos en los Genesis themes de StudioPress. Y podrás activarlo o deshabilitarlo cuando quieras en el panel del personalizador de WordPress.
Woocommerce
Por supuesto, como todos los Genesis themes de StudioPress tiene soporte para Woocommerce. ¿Que quiere decir que tiene soporte? Pues que viene preparado para ello. Que si instalamos Woocommerce y creamos una tienda, tendrá un aspecto y diseño como el del resto del theme.
En el caso de Monochrome Pro el aspecto de la página de tienda, es limpio y monocromático como el resto del theme.
Aporta quizás un poco de color, eso si, de manera tímida en el título de los artículos y en el precio.
Al igual pasa con la página de producto. El diseño es muy parecio a otros themes de la misma marca. En este caso con el aspecto monocromático del theme en cuestión, pero minimalista y elegante. Mantienen ese efecto lupa que se produce al pasar el ratón por encima de la fotografía del producto.
Optimizado para Gutengerb
Como muchos de los themes de StudioPress, Mpnochrome Pro está optimizado para Gutenberg. De hecho, en la demo el tema tienes, si quieres verlo, una página de ejemplo de como quedan casi todos los elementos de contenido maquetados a través de Gutenberg. Desde imágenes destacadas, pasando por galerías hasta botones, títulos y tamaños de letra.
Conclusiones
Monochrome Pro Theme es un tema, tanto para desarrolladoras para que lo tomen como punto de partida a la hora de desarrollar un tema para un proyecto, como para alguien que quiera un theme serio, minimalista y con detalles que le harán la vida más fácil, no solo a ella si no también a sus lectoras.
Ya sabes, si crees que podría comentar algo más o tienes alguna duda puedes dejar un comentario abajo. O también puedes ponerte en contacto conmigo en el formulario de la web.
Feliz día ;).