Diseño web en WordPress con Gutenberg

Autor : Cantabria Cloud

14 Mar, 2021

Hace no tanto tiempo la edición y maquetación de contenidos en WordPress era ardua y contaba con cierta complicación. Incluso en ocasiones no quedaba otra opción que armarse de valor, «remangarse» y tirar de nuestros conocimientos de código HTML para hacer algunas tareas realmente triviales (centrar algunos elementos por ejemplo).

Bien es cierto que en muchos sitios web actuales tendremos instalados temas que cuentan con sus propios editores de bloques (por ejemplo en Divi) y otros que los tienen instalados como plugin (el más conocido es Elementor). Pero con la llegada de Gutenberg al ecosistema de WordPress, la maquetación de textos, imágenes y medios se simplificó sobremanera. No puede obviarse que quizás a día de hoy, Gutenberg es insuficiente a la hora de hacer el diseño web de una home o una landing, por ejemplo, pero con él bien se pueden hacer estupendos posts o artículos con un aspecto muy atractivo y con poco esfuerzo.

¿Qué es Gutenberg?

Se trata de una funcionalidad (aunque en la web oficial del proyecto se hace referencia a él como un nuevo «paradigma«) para la construcción y publicación de contenidos en WordPress. Inicialmente apareció como plugin para finalmente integrarse en el core de las instalaciones de WordPress. La intención es que haya cuatro fases de funcionalidades (edición, personalización, colaboración y multilenguaje) que prometen revolucionar lo que actualmente supone WordPress. Todo de lo que hablemos en este artículo forma parte de la primera fase, la de edición. El resto están en un proceso muy inicial pero está habiendo actualizaciones en el núcleo de WP que nos indican que podrían estar desarrollándose nuevas funcionalidades.

A nivel práctico podríamos decir que Gutenberg es la forma en la que podremos introducir y maquetar cualquier tipo de contenido en las páginas y entradas de una web hecha en WordPress. Se basa en la introducción de diversos bloques, uno tras otro, que se pueden complementar entre si. Un bloque puede ser un párrafo de texto, una imagen, listas de opciones y un larguísimo etcétera que veremos a continuación.

Por supuesto, su nombre proviene de Johannes Gutenberg, el inventor que ideó la imprenta en el año de 1450.

¿Hay que hacer algo para instalar Gutenberg?

Si tu web está actualizada, en lo que a la versión de WordPress se refiere, no necesitas instalar nada. Al entrar a la edición de entradas y artículos verás que ya te encuentras con esta estructura de maquetación:

He marcado en rojo cuatro zonas claramente diferenciadas:

  • Barra superior, consta de dos partes:
  • En la parte izquierda podrás añadir nuevos bloques (cosa que podrás hacer directamente en la propia área de bloques o contenido), así como acceder a las opciones de deshacer/rehacer o acceder a las estadísticas de la página.
  • En la parte derecha, tenemos básicamente el acceso al guardado y publicación.
  • Título: en ella tenemos pocas opciones, simplemente servirá para indicar el título descriptivo de nuestra entrada.
  • Área de bloques: que es dónde trabajaremos introduciendo los sucesivos bloques.
  • Menú derecho. Aquí tendrás acceso a dos funcionalidades:
  • Opciones de página: cambiar la imagen destacada, cambios de diseño, enlace permanente o atributos de página.
  • Opciones de bloque: al seleccionar cualquier bloque aquí es donde veremos sus propiedades avanzadas de edición.

¿Cómo se introduce un bloque?

La única zona donde podremos poner bloques es en el área de bloques (o blocks). Allí al pulsar nos saldrá un icono «+» que nos permitirá elegir que bloque queremos añadir:

El bloque que seleccionemos aparecerá en el área de bloques. Como habrás podido ver existe un botón inferior que pone «Ver todos». Con él podremos tener acceso a todos los bloques que nos aparecerán en la parte izquierda de la pantalla:

Llegados a este punto tenemos que decir que además de bloques, existen también los «patrones» que suponen estructuras de contenido de mayor complejidad y que también veremos más adelante.

Hay que indicar que tanto los patrones como los bloques serán compatibles con la mayoría de temas, y se adaptarán a aspectos como la propia tipografía que tenga preinstalada cada web. Por ello el uso de Gutenberg en cada web puede tener un aspecto similar, pero no exactamente idéntico. Así, verás que las capturas de pantalla y ejemplos que te mostramos para ver el resultado de introducir los diversos bloques y patrones, son de color «rojizo». Esto se debe a que hacemos las pruebas en una web que tiene esos colores base. Si tu web es azul, los contenidos serán acordes a ese color.

Vamos a ver a continuación los diferentes tipos de bloques que existen. ¿Te animas a conocerlos?

Bloques en Gutenberg

Los diferentes bloques de Gutenberg se pueden agrupar en varios tipos:

  • Bloques de texto
  • Bloques de medios
  • Bloques de diseño
  • Bloques de widgets
  • Bloques de incrustados

Vamos a ir desglosando uno a uno todos ellos.

Bloques de texto

Párrafo

Si hay un bloque que destaca por encima del resto, al menos en el número de utilizaciones que haremos de él, este es el de párrafo. Con este bloque de texto, introduciremos cada uno de los párrafos de nuestras páginas.

Al introducirlo (y veremos que esto es algo común a cualquier otro bloque) aparecerán dos elementos que serán comunes al resto de blocks y patrones:

  • Una barrita superior que nos permitirá editar algunos aspectos de este bloque en concreto (en cada bloque aparecerán unas u otras opciones).
  • Un menú lateral que como ya vimos, también nos va a dejar gestionar otros aspectos (en este caso, colores).

Vamos a ver un ejemplo:

Encabezado

Con este bloque incluiremos un encabezado (desde H1 hasta H6):

Lista

Este bloque permite incluir listas de elementos (ya sean ordenadas o sin ordenar):

Cita

Para añadir citas y pensamientos:

Código

Permite introducir trozos de código sin que se ejecuten (HTML, CSS o PHP por ejemplo):

Clásico

Nos permite incluir bloques «a la antigua usanza»:

Preformateado

Podemos incluir texto cuyos caracteres son del mismo tamaño aunque los formateemos. Esto puede ser útil para tabular contenidos con espacios:

Párrafo de cita

Una vistosa forma de mostrar una cita:

Tabla

Se pueden integrar tablas con un diseño atractivo y personalizable:

Verso

Básicamente se usa para incluir poesías o trozos de texto:

Bloques de medios

Imagen

Con él podremos incluir una fotografía o dibujo.

Galería

La galería básicamente nos permite meter una cuadrícula de imágenes:

Audio

Con este bloque podremos subir un audio y se generará para el usuario un completo control de dicho audio:

Fondo

Este bloque sirve para introducir un fondo con texto (el fondo puede ser un color o una imagen):

Archivo

Simplifica mucho el hecho de subir archivos a la web y que el usuario lo pueda descargar (un pdf por ejemplo):

Medios y texto

Este es un bloque de dos columnas con una imagen a un lado y el contenido a la derecha:

Vídeo

Realmente apenas se usa, salvo que por alguna razón requieras subir el archivo a tu propia web. Genera una interfaz al estilo youtube para que el usuario vea dicho vídeo.

Bloques de diseño

Botones

Genera un botón o varios botones:

Columnas

Si queremos encolumnar varios textos o imágenes, mediante este útil bloque, podremos crear «x» columnas y cada una de ellas rellenarlas con el contenido que deseemos:

Grupo

Con este elemento podremos agrupar muchos otros en uno único.

Más

Nos permite incluir un elemento «Read More» o «Leer más». Esto se utiliza especialmente para la previsualización en la vista «blog» de las entradas. Así, no se mostrará el contenido que encuentre a partir de dicho elemento.

Salto de página

Mediante la inclusión de los saltos de página podremos dotar de paginación una publicación.

Separador

Nos introducirá una barra horizontal muy interesante para dividir diferentes contenidos de la misma página.

Espaciador

El espaciador es un elemento «invisible» (aunque se puede colorear si se desea), que permite separar elementos un número determinado de pixels.

Bloques de widgets

Shortcode

Sirve para introducir shortcodes o trocitos de código que a la hora de verlos el usuario se convierten en otra cosa:

Archivos

Para mostrar la sección «Archivo» de la web.

Calendario

Se muestra un calendario de publicaciones.

Categorías

Se muestra las categorías de la web.

HTML personalizado

Se puede introducir HTML a nuestro gusto.

Últimos comentarios

Se muestran los últimos comentarios de la página.

Últimas entradas

Se muestran las últimas entradas del blog.

RSS

Se puede mostrar una lista de distribución RSS, ya sea de esta web o de cualquier otra.

Iconos sociales

Para introducir iconos.

Nube de etiquetas

Muestra una nube de etiquetas.

Buscar

Incrusta la opción de búsqueda en la propia página.

Bloques de incrustados

Sirven para introducir tarjetas (cards) y contenidos de diversas webs bien contenidas. Un ejemplo claro serían vídeos de YouTube o Vimeo, o una tarjeta de Twitter. En este caso siempre presentarán el contenido de manera nativa.

Actualmente están disponibles los de:

  • Incrustado (para contenidos genéricos)
  • Twitter
  • YouTube
  • WordPress
  • SoundCloud
  • Spotify
  • Flickr
  • Vimeo
  • Animoto
  • Cloudup
  • Crowdsignal
  • Dailymotion
  • Imgur
  • Issuu
  • Kickstarter
  • Meetup.com
  • Mixcloud
  • Reddit
  • ReverbNation
  • Screencast
  • Scribd
  • Slideshare
  • SmugMug
  • Speake Deck
  • TikTok
  • TED
  • Tumblr
  • VideoPress
  • WordPress.tv
  • Amazon Kindle

Patrones de Gutenberg

Ya hemos visto todos los bloques que Gutenberg incorpora. ¡Pero ahí no acaba todo!. Existen también los archiconocidos patrones, que no son otra cosa que combinaciones algo más complejos de los bloques y que suponen un ahorro importante a la hora de maquetar contenidos.

Has de tener en cuenta que cuando introduzcas cualquier patrón te introducirá algunos aspectos como defecto, textos (normalmente del Quijote), imágenes, etc. Simplemente tendrás que cambiar esos elementos por los que realmente te interesen: tus fotografías, frases, párrafos, etc.

Pueden repartirse también en varios tipos diferentes que son:

  • Patrones de botón
  • Patrones de columnas
  • Patrones de galería de imágenes
  • Patrones de galería
  • Patrones de texto

Vamos a verlos todos ellos

Patrones de botón

Dos botones

Crea una estructura de dos botones diferentes:

Tres botones

Idem, pero con tres botones:

Patrones de columnas

Dos columnas de texto

Una bonita estructura de texto en dos columnas:

Dos columnas de texto con imágenes

Idem, pero cambiando el encabezado por dos imágenes:

Tres columnas de texto con botones

Interesante patrón de tres columnas con textos y botones:

Patrones de galería de imágenes

En este caso solo hay uno (a día de hoy al menos).

Patrón de dos imágenes contiguas

Dos imágenes encolumnadas:

Patrones de Cabeceras

Patrón de cabecera grande con un encabezado

Interesante patrón similar al bloque de «fondos» pero añadiendo un botón:

Patrón de cabecera grande con un encabezado y un botón

Este básicamente es el mismo que el fondo:

Patrones de texto

Patrón de encabezado y párrafo

Otra estructura con texto y su encabezado:

Patrón de cita

Adecuación de cita, añadiéndole una imagen:

Conclusiones sobre el diseño web en WordPress con Gutenberg

Nuestra opinión es clara: es interesante conocer en profundidad Gutenberg y estar al tanto de sus actualizaciones y nuevos añadidos. Nos permitirá añadir funcionalidades en la maquetación de contenidos, ahorrándonos recursos en cuanto a plugins adicionales que tendríamos que añadir. ¿Vale para diseñar una web completa? A día de hoy, no. Es cierto que podremos montar un sitio web sólo con Gutenberg, pero carecerá aún de bastantes aspectos visuales modernos comunes. Ahora bien: habrá que estar atentos, ya que se están viendo muchísimas actualizaciones en Gutenberg y es previsible que acabe convirtiéndose en una herramienta mucho más potente.

Artículos Relacionados

Artículos de Interes

Guía de optimización de fichas de producto en tiendas online
Guía de optimización de fichas de producto en tiendas online

Guía de optimización de fichas de producto en tiendas online

Si tienes una tienda online probablemente te habrás dado cuenta que si no has trabajado en profundidad las fichas de productos, estas apenas reciben tráfico orgánico. Esto es debido a que nos enfrentamos a una tipología de página "diferente" con algunas...

¿Necesitas gestión de cita previa en tu web? Nosotros te lo ofrecemos
¿Necesitas gestión de cita previa en tu web? Nosotros te lo ofrecemos

¿Necesitas gestión de cita previa en tu web? Nosotros te lo ofrecemos

Con la crisis del covid-19 es indudable que se ha hecho aún más necesario para cualquier negocio el integrar en su página web un sistema de reservas para controlar las citas previas con nuestros clientes. Lo cierto es que siempre ha sido interesante para no...

Guía de optimización de fichas de producto en tiendas online
Guía de optimización de fichas de producto en tiendas online

Guía de optimización de fichas de producto en tiendas online

Si tienes una tienda online probablemente te habrás dado cuenta que si no has trabajado en profundidad las fichas de productos, estas apenas reciben tráfico orgánico. Esto es debido a que nos enfrentamos a una tipología de página "diferente" con algunas...

¿Necesitas gestión de cita previa en tu web? Nosotros te lo ofrecemos
¿Necesitas gestión de cita previa en tu web? Nosotros te lo ofrecemos

¿Necesitas gestión de cita previa en tu web? Nosotros te lo ofrecemos

Con la crisis del covid-19 es indudable que se ha hecho aún más necesario para cualquier negocio el integrar en su página web un sistema de reservas para controlar las citas previas con nuestros clientes. Lo cierto es que siempre ha sido interesante para no...

Abrir chat
1
Hola, 👋, Soy Carlos de Cantabria Cloud, ¿Tienes alguna duda? ¿En qué te puede ayudar? Recuerda que SABER y HABLAR es GRATIS. ¿Qué necesitas?