Estás aquí:
< Atrás

¡Hola! En este tutorial queremos hablarte sobre Gutenberg, el nuevo editor visual de WordPress, que elementos trae como funciona y que podemos hacer con él.

Una breve introducción…

WordPress venía usando su editor WYSIWYG, era un editor bastante simple, similar a un documento de Word, donde tu podía escribir tus entradas al blog, pero que no daba espacio a la libertad de diseño (salvo si se tenían conocimientos de programación y código).

Muchas personas usaban plugin’s que les permitían modificar el aspecto visual de sus entradas y páginas, como Elementor, ofreciendo una experiencia más controlada y personalizada.

Con esto en mente, se planeo el desarrollo de Gutenberg un maquetador visual que permita realizar el mismo trabajo que estos plugin’s pero siendo propio de WordPress.

Cómo obtener Gutenberg…

En su fase de desarrollo, Gutenberg se realizo como un plugin, con el objetivo de ponerlo a prueba y en base a los comentarios de los usuarios, ir perfeccionándolo, en la actualidad, Gutenberg viene predeterminado con la versión 5.0 de WordPress, esta actualización no es automática, es decir, debes autorizar dicha actualización. Si decides actualizar a WordPress 5.0 automáticamente contarás con Gutenberg.

Cómo funciona Gutenberg…

Gutenberg funciona con lo que ellos denominan “bloques”, cada bloque cumple con una función especifica para estructurar y diseñar el contenido de la pagina o la entrada más fácilmente; puedes copiar, pegar, duplicar y lo mejor, posicionarlos en diferentes puntos de la entrada o página, por lo que tendrás control sobre el diseño.

La nueva área de trabajo cuenta con 3 secciones importantes:

  1. Barra de herramientas: es en esta parte donde puedes agregar todos los bloques para diseñar tu página entrada, deshacer/rehacer cambios, ver la estructura del sitio, guardar los cambios, además cuenta con opciones como la vista previa de tus diseños, opciones avanzadas y copiar el contenido.
  2. Área de contenido: Su mismo nombre lo indica, y es aquí donde agregamos los bloques y el contenido para diseñar nuestras páginas y entradas.
  3. Ajustes avanzados: En esta parte se divide en ajustes del documento y del bloque. Para el documento (es decir la página o la entrada) se ven opciones como la visibilidad, las revisiones, fecha de publicación imagen destacada entre otras. Para los bloques se ven ajustes extras propios de cada bloque; hay bloques que no tienes estos ajustes avanzados, y generalmente todas las configuraciones propias del bloque se muestran en la barra de herramientas propia.

Cuando creas una página o una entrada, te aparece el área de trabajo, agrega el titulo donde dice “añadir título” y ahora agrega los bloques.

Para agregar un bloque vas a la barra de herramientas y haces clic, esto te desplegará todos los bloques que existen, buscas el que quieres, lo seleccionas y este se agregara a tu área de contenido automáticamente.

Cuando seleccionas un bloque, las herramientas también se mostrarán encima del bloque.

Si quieres mover bloque de posición, al lado izquierdo aparecerán unas flechas para  subir o bajar el bloque, también puede hacer clic directamente en el bloque y moverlo arrastrandolo.

Gutenberg cuenta con los siguientes bloques:

Los bloques más utilizados  son: bloque de párrafo, bloque de imagen, bloque de citas, bloque de encabezado y bloque de listas.

Bloque de Párrafo

Este es el bloque más utilizado, ya que aquí en  donde depositaremos el contenido escrito de nuestra entrada o página. A diferencia de otros  maquetadores visuales, en Gutenberg cada párrafo es un bloque independiente; para agregar un bloque de párrafo, iremos a la barra de  herramientas y seleccionaremos el  bloque de párrafo ubicado en la sección “Bloques comunes”

Cuando seleccionas el  bloque, puedes modificar su alineación (izquierda, centro o derecha), puede darle negrita o cursiva, puede tachar un y también añadir un Hipervinculo, a una palabra en concreto, debes señarla y luego hacer clic en la opción.

 

Si deseas cambiar el tamaño o el color  de tu texto, en área de ajustes avanzado y seleccionando el bloque de párrafo encontraras varias opciones:

  • Ajustes del texto: puedes cambiar el tamaño de la letra, la herramienta ofrece unos tamaños preestablecidos, o puedes seleccionar un tamaño que desees. Hay también una opción para capitalizar la primera letras (es decir que aparezca en mayúscula, para darle un toque más periodístico).
  • Ajuste de color: Aquí podremos cambiar el color dela letra y/o el fondo.

Bloque de imagen

Este bloque , como su nombre lo indica, sirve para poner imágenes,para añadirñlo, ve a la barra de herramientas y en bloques comunes selecciona el bloque de imagen. te aparece un bloque gris con unas opciones, selecciona el primer botón y añade la imagen desde tu computador.

En la barra de herramientas del bloque  imagen puede alinearla a la izquierda, al centro o a la derecha y en la  parte inferior tendrás un espacio para copiar un pequeño texto que complemente la imagen.

En la sección de ajustes avanzados tendremos dos opciones:

  • Ajustes de imagen: Aquí  puedes cambiar el tamaño de la imagen, tienes tamaños predeterminados o puedes darle medidas propias. 
  • Ajustes de enlace: Aquí puedes  enlazar tu imagen a una pagina propia de tu sitio web o a una pagina externa

Bloque de citas

Este bloque sirve para colocar citas ya sea de personajes o citar textos importantes de tu propio contenido, en la ventana de avanzados puedes escoger dos estilos: una linea o en grande. para agregar este bloque vea la barra de herramientas y en bloques comunes selecciona el bloque de cita.

Bloque de listas

Este bloque sirve para crear listas tanto  ordenadas como no ordenadas. Para sacar el bloque ve la barra de herramientas y selecciona el bloque de lista. Cuando lo agregues debes escribir los elementos de la lista, y en su barra de herramientas puede seleccionar si quieres que sea ordenada (con números) o  no ordenada (con puntos).

Bloque de encabezado

Este bloque sirve para hacer etiquetas de encabezado (H2, h3 H4 H5 H6) esto es para darle importancia a ciertos apartados del texto. Para seleccionar este bloque, ve a la barra de herramientas y selecciona el bloque de encabezado; es similar al bloque de párrafo, escribe en él y selecciona que etiqueta quieres. Generalmente se recomienda utilizar H2 o H3 para los subtitulo.

Cuando termines de diseñar tu entrada o tu página, guarda los cambios y has clic en publicar. Como ves, Gutenberg es similar a otros plugin’s de diseño de WordPress, por lo cual es bastante intuitivo si ya has utilizado alguno de ellos.