Ha sido uno de los 10 temas de Genesis Framework más vendidos de StudioPress en el 2017. Monochrome Pro theme, es además es uno de mis temas preferidos a la hora de trabajar y desarrollar sitio minimalistas. Tiene un aspecto muy limpio y la organización de los archivos de cara a la programación es muy clara. Y por supuesto adaptativo (responsive).
No es un secreto que StudioPress, los desarrolladores de Monohcrome Pro, es una de las mejores empresas en cuanto a tienda de themes se refiere. Fueron los creadores de Genesis Framework y por ello saben mejor que nadie como trabajar con este Theme. Por ello pasé horas elaborando una lista de los mejores themes de Genesis Framework, basándome en su trabajo.
Contenido de ejemplo
Necesitaremos tener contenido, ya bien demo o real para trabajar con el tema. Tengo un artículo donde hablo de como importar contenido demo para cualquier Genesis Child Theme.
Ajustes de WordPress
Importado ya el contenido de ejemplo para configurar el tema, sólo nos queda configurar la página de inicio y la de blog. Algo necesario para dejar Monochrome Pro como en la demo.
Vamos a Ajustes → Lectura. Ahí designaremos la página de inicio y la de blog. Yo para mejor organización he creado dos que se llaman de la misma manera. Sin contenido ninguno.
Otros ajustes que he tocado y que me ayudan siempre que instalo WordPress, son los enlaces permanentes. Los dejo para que se muestre sólo el nombre de la entrada. Y en los ajustes de medios, desmarco la casilla de organizar los archivos de medios por fecha. Pero son cosas que depende de que tipo de sitio estés creando. Hay ocasiones en las que se necesita por organización de URL’s mostrar la categoría en los enlaces permanentes, como es en MundoGenesis.com. Así lo quise para una mejor organización y para optimizar aún más el SEO.
Dado este primer paso general, vamos a dejar Monochrome Pro como en la demo.
La cabecera
Vayamos por partes. Comencemos por el principio.
El menú y el icono de búsqueda
Vamos al personalizador y desde allí crearemos el menú principal y lo asignaremos como Header menu. Añadimos todas las páginas y enlaces que necesitamos.
Sin salir del personalizador, no iremos a la sección Theme → Options. Allí tenemos la opción de mostrar o no el icono de búsqueda. Si lo habilitamos, veremos que automáticamente nos aparecerá el icono de búsqueda junto al menú.
En este punto, Monochrome Pro tiene uno de sus mayores fallos. Un error de accesibilidad para mi importante y es que en la versión Móvil del menú no se muestra el icono de buscar. Y no es que esté oculto tras el icono de menú de hamburguesa, sino que desaparece para móviles y tablets.
Por suerte esto está solucionado en un artículo de cómo sacar el icono de búsqueda del menú en Monochrome Pro, que escribí ya hace tiempo cuando estuve trabajando con este Theme de manera más intensiva.
El logo
Seguimos en el personalizador. Y asignemos el logo como en la demo. Yo me he creado el mismo que vemos en la demo con una tipografía muy smiliar. El propio theme recomienda que tenga unas medidas máximas de 320x120px.
Con esto damos por terminada la cabecera.
Página de Inicio
Actualización
Desde la verión 1.2.0, Monochrome Pro viene preparado para configurar de manera automática la portada con el nuevo editor de bloques.
Imagen principal (Front page 1)
La primera de las áreas de widgets de la página de inicio, donde debería ir el Call to Action o llamada a la acción, contiene un sencillo widget de texto con una imagen de ancho completo de fondo. Para resaltar la primera palabra del texto irá entre dos etiquetas HTML con una clase concreta. Os dejo captura para que sepáis de lo que hablo.
Para añadir el widget vamos al Personalizador > Widgets > Front Page 1, o el área de widgets que corresponda. Y hacemos clic en el botón Añadir nuevo Widget.
Dejo el código para que puedas copiarlo.
<p><span class="lead">Monochrome</span>is a creative agency based in Chicago. We developed the Genesis Framework and Build mobile-optimized themes for WordPress.</p>Front page 2
En la segunda área de widgets, aunque parezca lo contrario son simplemente 4 widgets de texto. Cada uno con su título, texto y enlace, nada más. El enlace, claro está lo apuntáis donde queráis, una página, un artículo, al formulario de contacto, una categoría, etc…
Mononchrome Pro viene con soporte para flexible widgets. Es decir, la maquetación de las áreas de widget reaccionan de manera distinta dependiendo del número de widgets que contengan. Personalmente, prefiero diseñarlo y maquetarlo yo mismo sabiendo cuantos widgets contendrá o incluso hacerlo con Custom fiels. Es mucho más eficiente, pero si no se te sientes muy cómodo con el código, los flexible widgets es una muy buena solución.
Dejo el código HTML de uno de los widgets para facilitaros la tarea ;).
<p>With an emphasis on typography, white space, and mobile-optimized design, your website will look absolutely breathtaking.</p>
<a class="button" href="http://monochrome.themes.des/2017/04/01/great-design/">Aprender</a>Front Page 3
El área de widgets Front Page 3, de nuevo está construido con widgets de texto y HTML. El primero sólo contiene el título y una frase. Y el que contiene los logos de las marcas está hecho con HTML.
Os dejo captura del primero y el código del segundo, para facilitar la configuración. El código es el original, luego aparecerán las marcas visibles en la demo. Deberás luego cambiar las imágenes por las tuyas propias. Procura que tengan todas las mismas medidas, de esa manera te quedará un diseño consistente.
<div class="one-sixth first">
<img src="https://demo.studiopress.com/monochrome/files/2017/04/les-avenirs.png">
</div>
<div class="one-sixth">
<img src="https://demo.studiopress.com/monochrome/files/2017/04/avec-simple.png">
</div>
<div class="one-sixth">
<img src="https://demo.studiopress.com/monochrome/files/2017/04/whitespace.png">
</div>
<div class="one-sixth">
<img src="https://demo.studiopress.com/monochrome/files/2017/04/minimalism.png">
</div>
<div class="one-sixth">
<img src="https://demo.studiopress.com/monochrome/files/2017/04/barcelona-33.png">
</div>
<div class="one-sixth">
<img src="https://demo.studiopress.com/monochrome/files/2017/04/smooth-vanilla.png">
</div>Front Page 4
El área Front Page 4 contiene las 4 úlitmas entradas del blog. Esto lo hacemos con dos widgets. Uno de texto para elegantemente aportar el título a la sección y para los artículos del blog, el widget Genesis – Featured Post. La configuración es sencilla. Sin contenido. Sólo el título y la imagen destacada.
Del primer widget, es decir del de texto, sólo deberéis rellenar el título, el contenido quedará vacío. Para le segundo, dejo captura para mostrar la configuración.
Algo curioso que me gustó y que ya he usado, es que cuando yo he importado el contenido de Monochrome Pro se ha creado una categoría llamada Front Page. Esta categoría es usada para seleccionar los artículos que queremos que aparezcan como destacados en portada. De esta manera, no lo dejamos al azar, o que simplemente se muestren los últimos.
Before footer CTA
Por último el área de widgets Before Footer CTA. No es más que una simple llamada a la acción que, una vez más, se crea con un widget de HTML. Aquí os dejo el código.
<p>Hit the ground running with a minimalist look. <span class="footer-cta-button"><a class="button" href="#">Learn More</a></span></p>En el enlace no olvides insertar la dirección destino donde quieras que este apunte.
Página de tabla de precios
Para la página de precios, que contiene las distintas configuraciones de tablas de precios, antiguamente requiería una pequeña configuración, además de todo el código HTML que formaba la estructura de las tablas de precios, claro está.
Hoy día con gutenberg o el nuevo editor de bloques, que no será tan nuevo, dependiendo de cuando esté leyendo esto, se ha simplificado muchísimo.
Desde el comienzo del editor de bloques, Genesis y Atomic Blocks han ido de la mano. Y es con esta herramienta, que no deja de ser una extensión con más bloques, con la que se configuran las tablas de precios.
Simplemente añadimos el bloque de tablas de precios de Atomic blocks y las configuramos a nuestro gusto. Ya dependerá de cuantas tablas necesites, si las quieres con alineación más o menos ancha, el grosor de los bordes, etc…
Al añadir el bloque de tabla de precios, ya viene con contenido demo para que sepas que es cada cosa. Eso simplifica y facilita mucho la tarea.
Incluso te permite mover los «sub-bloques», cambiando así el orden dentro de las propias tablas de precios.
Woocommerce y conclusiones
En Woocommerce no hay nada especial que configurar, salvo crear los productos, crear la tienda, asignar las páginas y toda la configuración que requiere Woocommerce en si mismo.
En el demo verás que la página de tienda tiene un ancho especialmente en escritorio. Esto es porque Monochrome Pro ya viene preparado para Woocommerce y pensado para una tienda online minimalista. No requiere que hagas ningún cambio.
En cuanto al resto, no hay mucho más que hacer, salvo crear contenido e ir creando nuestra web.
Si tienes alguna duda, por favor, deja un comentario abajo y con gusto contestaré las dudas que vayan surgiendo. Feliz día!