Por si no te has dado cuenta, desde hace un par de meses la apariencia de nuestra web ha cambiado ligeramente. Hemos hecho un pequeño lavado de cara a nuestra página, actualizando fuentes, estilos, paleta de colores… y hemos pasado de esto:
a esto:
Pero lo más interesante de estos cambios es que no son únicamente estéticos: decidimos rehacer nuestra web de cero para que estuviera completamente basada en bloques. Hoy me gustaría explicarte cómo conseguimos pasar de un tema hecho a medida y basado en plantillas a otro tema totalmente personalizado que confía la generación y maquetación del contenido a los bloques de WordPress.
De dónde venimos
Cuando lanzamos Nelio Content hace ya tres años decidimos reorganizar completamente todas nuestras webs y centralizar nuestra presencia online bajo un único dominio y marca: neliosoftware.com. Una de las tareas que hicimos fue, lógicamente, contactar con el equipo de Silo Creativo para que diseñaran la imagen de nuestra nueva web. Aquí puedes ver una de las primeras propuestas que nos hicieron:
Cuando dimos el visto bueno a ese diseño inicial, y siguiendo nuestras peticiones, Ricardo y Verónica se pusieron manos a la obra y nos implementaron un tema a medida con todas las plantillas necesarias para las diferentes partes de nuestra web: la página principal, el blog, las entradas, las páginas de ayuda, … Todo estaba integrado directamente en el tema como plantillas de página, con lo cual disfrutábamos de una extremadamente rápida de cargar y un poco «pesada» de editar (puesto que cambiar cualquier página pasaba por editar una plantilla).
Entendiendo el contenido de nuestra web
El nuevo editor de bloques de WordPress, Gutenberg, supone un cambio de paradigma a la creación de contenidos en un WordPress por defecto. Hasta ahora, crear páginas era un proceso tedioso y poco amigable para los usuarios, a no ser que usaras un page builder. Pero Gutenberg viene con una promesa bajo el brazo: crear contenido visualmente atractivo en WordPress debe estar al alcance de cualquiera. Y nosotros queríamos montarnos en el carro de Gutenberg e intentar aprovecharnos de esta promesa.
Si habías visto la web que teníamos anteriormente, sabrás que era un diseño sencillo y elegante. A pesar de no tener cosas excesivamente complicadas, algunas cosas que encontrábamos (y encontramos) en nuestra web son:
- Páginas con una imagen destacada que ocupa todo el primer scroll
- Bloques con texto descriptivo e imágenes y/o vídeo
- Formularios de contacto
- Páginas legales
- Tablas de precios
- Testimonios de nuestros usuarios
- Listados de funcionalidades con las características de nuestros plugins
¿Podríamos crear todo esto en Gutenberg? Nosotros creíamos que sí, puesto que Gutenberg promete poder crear cosas así… pero había que probarlo.
Nelio A/B Testing
Me sorprendió mucho la calidad del plugin, lo fácil que fue configurarlo y el increíble soporte que me dio Nelio. Recomiendo encarecidamente usar Nelio A/B Testing.
Josette Millar
Nuestro nuevo tema
Lo primero que hicimos para diseñar la nueva web fue crear un tema de cero. Para ello, decidimos partir del conocido starter theme underscores. Se trata de un tema que viene con las plantillas mínimas y necesarias para tener un tema de WordPress operativo, bien documentado y bien organizado.
Adaptando underscores
Todo tema WordPress tiene un conjunto de páginas que son comunes a toda instalación WordPress e independiente de qué contenidos acabes generando en tu web. Estoy hablando, por ejemplo, de la página del blog donde aparecen las últimas entrads, la página donde se ve una propia entrada, la página de error 404, la página de resultados de una búsqueda, etc. Pues bien, el primer paso para poder crear nuestro tema usando los bloques de WordPress consiste en adaptar underscores a nuestro propio estilo para que esas páginas se vean como queramos. Y eso fue lo que hicimos.
Si te fijas en la captura anterior, verás que descargamos el tema con la opción _sassify! activada, con lo que el tema se descarga con los estilos en formato SASS, organizados en múltiples ficheros y haciendo extremadamente sencilla su edición. Durante unas horas, estuvimos escribiendo código SASS y personalizando algunos detalles en functions.php para conseguir que el tema se viera como queríamos:
Los bloques como base
Una vez tenemos un tema inicial con el que nos sentimos cómodos (en nuestro caso, el tema que creamos a medida a partir del underscores, pero en tu caso podría ser perfectamente un tema que hayas encontrado en wordpress.org, un tema premium o incluso un tema también hecho a medida), es hora de maquetar todas nuestras páginas usando los bloques de WordPress.
Durante las próximas líneas, te voy a explicar los «retos» que había en nuestra página y cómo los hemos implementado con el editor de bloques.
Bloques por defecto
Los bloques que incluye WordPress por defecto son un poco limitados: párrafos, imágenes, galerías… y algún bloque de maquetación como columnas. De hecho, todos ellos parecen más enfocados a la creación de entradas de un blog que a la maquetación de páginas.
Pero no pasa nada.
No pasa nada porque, para empezar, toda web tiene páginas que parecen una entrada de blog: las páginas con asuntos legales, como por ejemplo nuestra página con información legal o nuestra política de privacidad y cookies. Si vas a ver cualquiera de esas páginas, verás que su maquetación es sencilla y encaja perfectamente bien con lo que Gutenberg nos da por defecto.
Pero tampoco pasa nada porque muchas de las páginas que tenemos maquetadas usan componentes lo suficientemente sencillos como para que Gutenberg pueda con ellos. Por ejemplo, un poco más arriba compartía contigo una imagen de una página de Nelio Content donde combinábamos texto e imagen/vídeo. Eso se puede hacer de forma súper sencilla con el bloque Medios y texto:
Como ves, conseguimos un resultado muy parecido al punto de partida. Genial, ¿no crees?
Combinando bloques por defecto
El siguiente punto es hacer cosas un poco más complicadas como, por ejemplo, la lista de funcionalidades:
Si te fijas, verás que cada una de las funcionalidades combina una imagen y un pequeño fragmento de texto descriptivo. Así que parece lógico pensar que cada una de ellas se implementará usando el mismo componente que antes, el Medios y texto. Pero, claro, aquí tenemos tres columnas… ¿conseguiremos el resultado añadiendo el bloque Columnas?
Pues sí, casi sí que lo tenemos ahí. El problema es que en la captura original cada fila de funcionalidades estaba alineada correctamente y lo que nosotros acabamos de maquetar aparece en forma de escalera. Para solucionar este problema hay que ser un poco astuto y saber jugar con los bloques por defecto. Así, en lugar de añadir un único bloque columnas y cada columna con múltiples funcionalidades, vamos a crear n bloques de columnas y en cada bloque habrá una única funcionalidad por columna:
¡Y ahora sí que lo tenemos bien!
Bloques por defecto con esteroides
Hay casos en los que el bloque por defecto no acaba de darnos el resultado que queremos. Si se trata de un problema con la apariencia, es probable que podamos solucionarlo por CSS, y la mejor parte es que el propio Gutenberg nos permite añadir clases a nuestros bloques para que se apliquen las reglas CSS que queramos.
Por ejemplo, si queremos que los bloques imagen puedan tener un sombreado, basta con definir la clase en nuestro CSS y añadirla al bloque usando la sección Avanzado:
El problema que tiene esta solución es que estamos mezclando la interfaz de usuario con detalles de implementación (el nombre de una clase CSS). ¿Por qué narices debería yo saber que existe una clase llamada shadow para sombrear imágenes? Pues bien, también esto tiene una sencilla solución.
La interfaz de programación del editor de bloques de WordPress expone una función llamada registerBlockStyle que nos permite definir qué estilos extra aplican a un bloque. De esta forma, si hacemos algo tal que así:
registerBlockStyle( 'core/image', {
name: 'image-with-shadow',
label: __( 'Shadow', 'nelio' ),
} );estaremos registrando un nuevo estilo para el bloque imagen (core/image) llamado Shadow que, cuando lo apliquemos, añadirá la clase has-style-image-with-shadow al bloque:
Bloques personalizados
Finalmente, para aquellos casos en los que te encuentres con algo que no puedas crear usando los bloques por defecto de WordPress, tienes la solución de crear tu propio bloque (o usar un bloque que haya creado otra parte). Nosotros implementamos esta solución en varios casos, como por ejemplo en la tabla de precios de Nelio Content y Nelio A/B Testing o en el mapa que aparece en la página de contacto (por cierto, ya te contamos cómo crear el bloque de mapas en esta otra entrada) y el resultado es impresionante:
Pero si no sabes cómo o no quieres crear tus propios bloques, te dejo con algunos plugins que incluyen bloques adicionales para muchas cosas:
Nuestra experiencia
Hace un par de meses decidimos que había que renovar un poco nuestra web e implementarla usando Gutenberg. Nuestro objetivo era doble: por un lado, queríamos poner un poco al día la web y darle un aire más fresco. Por otro, queríamos aprender más sobre Gutenberg, tanto a nivel de usuario como a nivel desarrollador. Al final, hemos conseguido migrar toda la web a Gutenberg y el resultado ha sido un éxito absoluto. Te animamos a que tú también lo hagas y, si tienes cualquier duda, no dudes en dejarla en los comentarios.
Por cierto, la entrada de hoy estaba inspirada en la charla que di en WordCamp Lisboa 2019. Te dejo con las transparencias aquí:
Imagen destacada de Samuel Zeller en Unsplash.
Deja una respuesta