Sigue este blog vía RSS, en el Fediverso en @acambronero@www.blogpocket.com, o vía email.

You don’t speak Spanish? Explore a selection of Blogpocket posts in English

Cómo convertir Gutenberg en un generador de sitios web (para usuarios finales y sin código) – 2ª parte: Convertir con Gutenberg un sitio web en un medio

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:

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.)

Responder en Mastodon (requiere usuario en esa plataforma)

Puedes usar tu cuenta de Mastodon para responder a este post de

Copia y pega esta URL (https://www.blogpocket.com/?p=66274) en el campo de búsqueda de la interfaz web de tu servidor Mastodon.

Icono de Mastodon

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Información básica sobre protección de datos Ver más

  • Responsable: Antonio Cambronero.
  • Finalidad:  Moderar los comentarios.
  • Legitimación:  Por consentimiento del interesado.
  • Destinatarios y encargados de tratamiento: No se ceden o comunican datos a terceros para prestar este servicio. El Titular ha contratado los servicios de alojamiento web a GreenGeeks que actúa como encargado de tratamiento.
  • Derechos: Acceder, rectificar y suprimir los datos.
  • Información Adicional: Puede consultar la información detallada en la Política de Privacidad.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ir al contenido