En este post se dan las claves para convertir con Gutenberg un sitio web en un medio. Es la segunda parte del tratado «Cómo convertir Gutenberg en un generador de sitios web», cuya primera parte también puedes encontrar en Blogpocket.
En dicha primera parte, vimos cuál es el fundamento de la creación y diseño de un sitio web con bloques del editor de WordPress: tener la capacidad de alcanzar todas las páginas del sitio (incluidas las entradas del blog) y poder diseñarlas solo con bloques de Gutenberg. Eso supone, por supuesto, poder entrar en la página de inicio (home) y rellenarla con bloques.
Vimos también, que con el plugin «Fullwidth Page Templates» es posible romper las restricciones que impone el tema en cuanto a los anchos preestablecidos del contenido en las páginas.
Finalmente, y como caso práctico, se explicó cómo crear una landing page o sitio web de una única página.
En esta segunda parte, iremos bastante más allá logrando alcanzar todas las áreas posibles, susceptibles de albergar contenidos, previstas en el tema; con el objetivo de poder insertar también diseños hechos con bloques.
Finalmente, se proporcionarán los recursos -recomendados en Blogpocket- con el fin de convertir un sitio web generado con Gutenberg en un medio (blog, newsletter, podcast, vlog, membresía, etc.)
1. Cómo aplicar estilos CSS a los bloques con el plugin «Editor Plus»
Una vez que somos capaces de diseñar y crear todas las páginas del sitio web con bloques de Gutenberg, debemos tener la posibilidad de aplicar estilos CSS a dichos diseños. Y lo mejor sería que lo pudiese hacer cualquiera -incluso aquellos que no tienen conocimientos técnicos- ya que estamos desgranando un método sin código.
Hay un plugin que permite hacer eso y que, además, se integra con Gutenberg Hub, un recurso para insertar con un clic secciones y plantillas enteras hechas con bloques en cualquier página. Me refiero a Editor Plus cuyas posibilidades son francamente maravillosas.
2. Cómo alcanzar cualquier ubicación del sitio web (footers, sidebar y otras áreas de widgets) con los bloques reutilizables y el plugin «Reusable Block Extended»
Con la capacidad de alcanzar cualquier página y diseñarla con bloques; más el mecanismo de Editor Plus con el que podemos aplicar estilos CSS a cualquier diseño ¡sin saber CSS!, poseemos parte de una gran súper poder que es generar webs:
- Sin utilizar más que el editor de bloques
- Sin ayuda de terceros (si es que poseemos tiempo y no podemos invertir en delegarlo)
Pero aún queda otra parte del súper poder que es personalizar las áreas de widgets previstas en el tema. Recordemos que ni a la cabecera ni al footer general podremos llegar con bloques.
Las áreas de widgets son aquellas ubicaciones del sitio web que el desarrollador del tema prevé con el fin de que se puedan personalizar con widgets. Este es el planteamiento tradicional en la era pre Gutenberg pero también ahora. Al menos, hasta que llegue la Edición del sitio Completo (FSE, por sus siglas en inglés).
En principio, las áreas de widgets son espacios personalizables pero no con bloques de Gutenberg. Sin embargo, hay un plugin denominado Reusable Block Extended que permite arrastrar a cualquier área de widgets un widget llamado Reusable Block. Este widget se configura eligiendo un bloque reutilizable y mostrando éste dentro del área de widgets.
El plugin también añade una nueva opción al Administrador de WordPress para gestionar los bloques reutilizables. Recordemos que el bloque reutilizable es una función nativa de WordPress por la cual puedes tener los mismos diseños hechos con bloques en distintos lugares de un sitio web. Y si modificas una instancia del mismo diseño, todas las instancias sufren la actualización automáticamente.
Por lo tanto, el plugin Reusable Block Extended, junto a los bloques reutilizables, es un artefacto perfecto para alcanzar las ubicaciones personalizables previstas en forma de áreas de widgets.
Cada tema posee sus propias áreas de widgets pero ya tenemos la manera de diseñar con bloques de Gutenberg, cualquier lugar del sitio web, excepto -como ya se apuntó- la cabecera y el footer general (no confundir éste último con las áreas de widgets denominadas «footers»).
3. Las limitaciones de los temas tradicionales y cómo se pueden resolver con Blocksy, un tema orientado a bloques avanzado
Los temas tradicionales orientados a bloques pueden presentar, entonces, las siguientes limitaciones principales:
- No se puede personalizar la cabecera (ni el footer general) más allá de subir un logo y confeccionar un menú)
- No se puede cambiar sin código los tipos de letra, a menos que el desarrollador lo haya previsto en Apariencia > Personalizar; o utilicemos un plugin del estilo de Fonts Plugin | Google Fonts Typography.
- No se puede cambiar sin código los colores de branding (enlaces, etc.) a menos que el desarrollador lo haya previsto en Apariencia > Personalizar; o utilicemos un plugin.
Afortundamente, existen soluciones que sin alejarse de la idea principal de facilitar la creación y el diseño del sitio web con bloques, resuelven esos problemas.
Una de ellas es el tema Blocksy que conjuga las características de un tema orientado a bloques con una suite muy sencilla (pero potente) de construcción visual, desde Apariencia > Personalizar.
Con Blocksy puedes personalizar cabecera y footer general, además de cambiar la tipografía, la paleta de colores y muchas cosas más, incluyendo plantillas adicionales.
4. Cómo convertir un sitio web generado con Gutenberg en un medio (blog, newsletter, podcast, vlog, etc.)
El método de generación de sitios web mediante Gutenberg posee un colofón extraordinario. Si el sitio web lo has creado con el Método Blogocket, tendrás inicialmente una web optimizada en rendimiento, seguridad y legalidad.
Para convertir un sitio así creado en un medio solo hay que emplear los recursos adecuados. En este apartado se revisan todos ellos con el fin de que puedas crear fácilmente, y dentro de WordPress, un blog, una newsletter, un podcast, un vídeo blog, una tienda online, etc.
Recursos
Existe mucha información en Blogpocket acerca de Gutenberg.
Si quieres iniciarte, empieza con lo siguiente:
- Manual de WordPress. La parte del editor de bloques está completa.
- Zona Gutenberg. Incluye un curso básico del funcionamiento de Gutenberg.
- Suscríbete a la newsletter. Información en exclusiva, todos los lunes sobre WordPress y Gutenberg.
Sobre optimización, seguridad, legalidad y creación de blogs y otros medios también encontrarás muchos contenidos. Hay un tour de inicio aquí.
Suscríbete a la newsletter
Todos los lunes por la mañana, enviamos a los suscriptores un boletín especial con las últimas noticias e ideas sobre WordPress y el editor de bloques.
Suscríbete ahora y accede a contenido exclusivo (ebooks, cursos, trainings, etc.)
Deja una respuesta