Publicado en ,
7 minutos

Cómo usar Gutenberg el editor de WordPress

Cómo usar Gutenberg el editor de WordPress
Gutenberg irrumpió en WordPress, con la idea de hacer más fácil personalizar entradas y páginas. Aquí te explico como usarlo.
Carlos Soriano
Carlos Soriano

Diseñador Web en WordPress

Tabla de Contenidos

Sé que hay a quienes no les gusta. Pero, parece haber llegado para quedarse. Y, aunque sigue existiendo una alternativa, siempre valdrá la pena echarle un vistazo. Por supuesto, hablo de cómo usar Gutenberg el editor de WordPress.

Este ha ido evolucionando desde que apareció con la versión 5.0 de WordPress. La comunidad de desarrolladores de esta plataforma, han ido introduciendo mejoras en su rendimiento, añadiendo nuevos bloques y funcionalidades. Y, además, han ido cambiando su interfaz.

Ya te he hablado antes de Gutenberg, incluso, te he contado cómo añadir bloques a una entrada. Pero, debido a la evolución que ha sufrido, he creído necesario actualizar aquellos tutoriales. Aunque, si quieres saber algo más sobre Gutenberg, te recomiendo que les eches un vistazo.

Una vez aclarado esto, sin más dilación, comenzamos.

Añadir un nuevo bloque

Vamos a ir directos al grano. Aunque con Gutenberg puedes editar cualquier contenido de WordPress, para este tutorial, vamos a crear y editar una entrada. Para ello, debes acceder al Panel de Administración de WordPress, y dirigirte a “Entradas”, en el menú de administración. Haz clic en “Añadir una entrada nueva”.

Cómo usar Gutenberg, el editor de WordPress

Una vez aquí, comenzamos con la edición de la entrada. Y, como primer paso, debes ponerle un título. Para ello, introdúcelo sobre “Escribe un título”. Cuando lo tengas, procederemos a añadir un nuevo bloque. Sigue estos pasos:

1. Insertar un bloque

Haz clic en el icono de inserción de bloques «+» en la barra de herramientas superior.

Añadir un nuevo bloque

2. Selecciona el bloque que quieras

Selecciona el tipo de bloque que deseas agregar. Vamos a probar con una “Lista”.

Selecciona un bloque, para insertarlo.

3. Añadir más bloques

Para añadir más bloques, simplemente haz clic en el icono «+» debajo del bloque recién agregado. Cada vez que pulses «Enter», se añadirá automáticamente un nuevo bloque de párrafo.

Añadir más bloques

Personalizar los bloques

Cada bloque posee su propia configuración, sobre su funcionamiento y sus estilos. De modo que podrás personalizar la entrada a tu gusto. Te explico cómo hacerlo:

1. Selecciona un bloque

Haz clic sobre el bloque “Lista”, que acabamos de añadir. (O al que hayas añadido tú). Al hacerlo, ocurrirán cosas:

  • Sobre el bloque, verás una barra de herramientas flotante, con funciones y estilos.
  • En la barra lateral de configuración, verás otras funciones.
Personalizar un bloque

1.1 Desplegar Barra de Ajustes

Si, en tu WordPress no ves la barra lateral de Ajustes, haz clic en el siguiente botón, para desplegarla:

Barra lateral de configuración

2. Personaliza el bloque

En las opciones de configuración del bloque, puedes ajustar cosas como el tamaño de la fuente, añadir enlaces o poner en negrita, entre otros.

Añadir títulos y texto

Los títulos o encabezados, sirven para estructurar el contenido de tu entrada, que estará formado, principalmente, por texto. Vamos a añadir un título o encabezado:

1. Insertar un nuevo bloque

Haz clic en el icono «+» en la barra de herramientas superior. También puedes hacerlo en el botón “+” que aparece en el cuerpo de la entrada.

Añadir títulos o encabezados

2. Selecciona «Encabazado»

Selecciona «Encabezado» para añadir un título.

Añade y escribe tu encabezado

3. Añadir un párrafo

Para añadir texto, busca el bloque «Párrafo». Te recuerdo que, si presionas “Enter”, inmediatamente después de escribir tu “Encabezado”, automáticamente se cargará un bloque de texto.

Añadir párrafos

4. Empieza a escribir

Escribe un texto para el párrafo.

Escribe tu párrafo

Añadir imágenes y medios

El editor de bloques ofrece varias formas de añadir imágenes y medios a la entrada. Tienes la posibilidad de subir una imagen única, o una galería. También encontrarás bloques para crear un banner, con una imagen de fondo y texto encima. Pero, en esta ocasión, te indicaré cómo añadir una imagen:

1. Añadir un bloque

Haz clic en el icono «+» en la barra de herramientas superior.

2. Selecciona el bloque de imagen

Busca el bloque de imagen, escribiéndolo en el cuadro de búsqueda. Haz clic en el para insertarlo o arrástralo hasta donde lo vayas a colocar.

Añadir una imagen

3. Sube una imagen

Al insertarlo verás un cuadro que te permitirá subir una imagen nueva, buscarla entra las fotos que ya hayas subido al sitio o insertarla desde una url. Para cualquiera de las opciones que elijas, el resultado final será el mismo.

Subir una imagen

4. Personaliza la imagen

Ahora solo te queda personalizarla. Entre las funciones que permite Gutenberg, podrás:

  • Ajustar el tamaño de la imagen.
  • Alinear la imagen.
  • Añadir una leyenda bajo la imagen.
  • Añadir un enlace a la imagen. Esta actuará como un botón, que te llevará a la url que añadas.
  • Puedes añadir texto encima, ideal para crear un banner o llamada a la acción.
  • Activar la opción “Ampliar al hacer clic”. Si has añadido ya un enlace personalizado a la imagen, esta opción no funcionará.
Personaliza tu imagen

Incrustar medios

Con incrustar medios, me refiero a insertar un vídeo, una imagen u otro contenido multimedia, que esté alojado en otra plataforma. Youtube, Vimeo o SoundCloud permiten insertar un vídeo o un podcast, a través de un enlace. Para este tutorial, voy a enseñarte cómo insertar un vídeo de Youtube:

1. Añadir un nuevo bloque

Haz clic en el icono «+» en la barra de herramientas superior. Navega por el contenedor de bloques o usa la barra de búsqueda, para encontrar Youtube.

Incrustar Medios

2. Añade la url del vídeo

Selecciona el bloque, y en el cuadro de configuración, añade la url del vídeo.

Insertar la url de un video de Youtube

3. Incrusta el medio

Una vez hayas añadido la url del video, haz clic en “Incrustar”.

Insertar un video de Youtube

Organizar los bloques

A medida que vamos añadiendo contenido a nuestra entrada, puede darse la circunstancia de que necesites organizar algunos bloques, y colocarlos de otra manera. Con Gutenberg es muy sencillo de hacer, y además, tienes dos posibilidades. Arrastrando un o deslizando uno o varios bloques bloque.

Organizar Los bloques
  1. Arrastrar un bloque: Haz clic y mantenlo pulsado sobre el icono de puntos, y arrastra el bloque para colocarlo donde quieras.
  2. Haz clic en los iconos de dirección, para mover el bloque hacia arriba o abajo.

Con esto, ya sabes algo más sobre cómo usar Gutenberg el editor de WordPress. Pero hay otras configuraciones que tal vez te puedan ayudar.

Otras configuraciones de bloques

En la barra de herramientas flotante de cada bloque, verás tres puntos. Haz clic ahí y encontrarás otras configuraciones, que podrían serte útiles:

Otras configuraciones de bloques
  • Copiar un bloque, para pegarlo en otro lugar del sitio.
  • Duplicar un bloque.
  • Puedes copiar los estilos que hayas añadido a un bloque, y pegarlos en otros.
  • Puedes bloquearlo, para evitar modificarlo por error.
  • También puedes borrar el bloque.

Y mucho más

Hasta aquí este tutorial sobre cómo usar Gutenberg el editor de WordPress. Aunque nos hayamos centrado en crear una entrada, también puedes seguir estos pasos para crear una página.

Pero hay mucho más. Gutenberg a añadido bloques que te permiten modificar la estructura de una página, añadiendo columnas, agrupando bloques o añadiendo espacios en blanco, para separar los bloques. Todas estas son funcionas de diseño, que, por lo general, su uso es más habitual en páginas, que en entradas. De modo que, próximamente prepararé un tutorial para enseñarte cómo usar estos bloques.

Hasta entonces, este tutorial te ayudará a componer una entrada para tu blog, aprovechando las ventajas de los bloques de Gutenberg.

Hasta pronto.

Este sitio funciona con Hostinger. ¿Quieres un Alojamiento Web para tu WordPress?
Etiquetas:
Facebook
Twitter
LinkedIn
WhatsApp
Telegram

Comentarios

Deja una respuesta

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

Juan Carlos Soriano Hernández, como Responsable de tratamiento de datos de Carlos Soriano - Diseño Web, te comunica que la finalidad de la recogida y tratamiento de los datos personales se debe a gestionar tus comentarios y responder a tus comentarios, así como al control antispam. La Legitimación se establece al marcar la casilla de aceptación, dando tu legítimo consentimiento. No se cederán datos a terceros destinatarios, salvo por obligación legal. Tienes Derecho a acceder, rectificar, limitar y suprimir tus datos. Para ello contacta con

cinco + 12 =

Publicar comentario

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