crear una página web con gutenberg

En este post vamos a crear una página web estática con Gutenberg el nuevo editor de bloques de WordPress con el objetivo de averiguar qué características tiene para el diseño web y cuáles son sus limitaciones.

Bloques de diseño

Gutenberg tiene módulos sencillos enfocados al diseño para la maquetación, algo que nos da un poder que con el editor clásico no teníamos por defecto.

Bloque de fondo: Un gran bloque muy visual, está formado por un fondo con imagen y un título sencillo, se puede utilizar como cabecera simple, una pena que no tenga opciones con efecto paralaje o formato para el texto.

Bloque Separador: permite crear un espacio en blanco entre otros bloques para crear diseños donde los elementos no se aglutinen y darle “aire” al diseño.

separador de gutenberg

Bloque de columnas: Un bloque básico para crear columnas de elementos, sencillamente magnífico y necesario para la maquetación, en el editor clásico no existía esta opción.

columnas-para-maquetar

De esta manera podemos crear diseños más elaborados y secciones como la típica “Sección con contenido en Zig Zag” combinando imágenes y texto.

columnas de gutenberg

Incluso podemos crear secciones como la de recomendación de usuarios fácilmente gracias a las columnas.

sección con columnas

Bloque de Medios y Texto: Un bloque combinado de imagen y texto muy útil para la maquetación, además tiene opciones de ancho completo y crea un diseño bastante logrado para una sección de la web.

bloque de medios y texto

Bloque de Botones: poner botones con el editor clásico de WordPress no era lo más cómodo del mundo, ahora es realmente sencillo y combinado con un título y texto tienes una llamada a la acción sencilla.

bloque de botones

Limitaciones

Maquetar con Gutenberg está muy bien en general pero los bloques tienen pocas opciones de personalización avanzadas lo que te limita mucho al crear un diseño.

Podemos encontrar limitaciones de personalización básicas en casi todos los bloques, por ejemplo, el bloque de fondo, donde no podemos dar estilo al texto, también existen escasas opciones para los bloques compuestos como el de medios y texto.

Aparte de limitaciones de las opciones básicas, tampoco existen opciones avanzadas para el diseño, como efectos paralaje, estilo “Hover” para los botones u opciones de estilo para las imágenes sencillas.

Problemas

También podemos encontrar problemas con la interfaz y bugs poco agradables,

Un ejemplo es la selección de las columnas o el bloque de separador, que tienes que hacer clic en el selector del bloque para seleccionarlo, ya que hacer clic en el contenido no te lo selecciona.

Conclusión

El editor de bloques Gutenberg de WordPress tiene una interfaz preparada para usar bloques y un drag and drop avanzado pero aún le queda mucho para ser una buena herramienta para maquetar.

Tiene que evolucionar tanto en opciones como en bloques, ya que las opciones básicas se quedan cortas para crear un diseño elaborado.

Aun así, se puede crear un diseño sencillo que se ajuste al estándar de diseño de la mayoría de webs de hoy en dia.

Esperamos las nuevas fases del editor Gutenberg, ya que tiene mucho potencial y aún es un diamante sin pulir.

También espero que te haya gustado esta review del editor de WordPress orientada a la maquetación de una web estática.

Un comentario en “Diseñando una página web con Gutenberg

Deja un comentario

El email no será publicado. Vas a introducir datos en la web si comentas:

  • Responsable de los datos Gerardo García Asensio
  • Los datos se usarán para gestión de comentarios y medidas de seguridad
  • Legitimación: tu consentimiento.
  • Destinatarios: los datos estarán ubicados en los servidores de Siteground.
  • Derechos: podrás ejercer tus derechos, entre otros, rectificar, limitar y borrar tus datos.

Pin It on Pinterest

Esta web utiliza cookies para su funcionamiento. Lee y acepta el aviso legal o abandona la web. más info

Los ajustes de cookies de esta web están configurados para "permitir cookies" y así ofrecerte la mejor experiencia de navegación posible. Si sigues utilizando esta web sin cambiar tus ajustes de cookies o haces clic en "Aceptar" estarás dando tu consentimiento a esto.

Cerrar