Desarrollo Web

Editor Gutenberg en WordPress – La guía completa + video

Gutenberg

Si estás aquí porque ya conoces a Gutenberg, este nuevo editor de texto versión 5.0 o posterior se usa de forma nativa en WordPress, pero … ¿sabes cómo usarlo?

En realidad, es más fácil de lo que parece, tanto que se supone que nos facilitará la vida a la hora de escribir publicaciones (posts) o páginas. Aquí te dejo con un sencillo pero completo manual de instrucciones y un video explicativo.

¿Qué nos ofrece el editor de Gutenberg?

Lo primero que apreciamos es la sensación de tener un lugar que tiene más espacio que el clásico editor de WordPress Un menú más sencillo A nuestra derecha.

Sin embargo, todo indica que en realidad se trata de un editor que nos facilitará el trabajo, aunque pueda parecer confuso al principio.

Visual de Gutenberg
El aspecto del editor de WordPress Gutenberg

Usa Gutenberg gradualmente

Siempre digo que no hay mejor manera de aprender que ver con tus propios ojos cómo se hace, así que Escribiré un artículo de inmediato Seguiré comentando todo lo que he hecho y lo que puedo hacer.

Dediquemos unos minutos a discutir este tema porque realmente vale la pena aprender a usarlo correctamente. Porque este es el editor que siempre será el predeterminado, a partir de ahora.

Primero hacemos clic en el menú de WordPress de la izquierda debajo de “.tarjetas«Luego»Agregar nuevoUna especie de «.

Tutorial en Gutenberg
Crea párrafos con el editor de texto de Gutenberg

Cómo colocar un título en Gutenberg

Nada es más intuitivo que escribir el título de nuestra publicación «.Añadir ttuloPara «. Solo tenemos que hacer clic con el mouse, escribir el título y finalmente hacer clic fuera del área o presionar la tecla»IngresarUna especie de «.

Párrafo introductorio

Debajo del encabezado vemos el texto «Escribe tu historia“Vamos a hacer clic en el texto y empezar a escribir algunos párrafos.

Una de las técnicas de optimización de motores de búsqueda (SEO), los dos primeros párrafos son un resumen del contenido del artículo. Así que comencemos con eso.

Cada vez que usa el «representar Se crea un nuevo campoPalathos € œUn lugar donde podemos agregar más texto.

Editor de texto de Gutenberg
Opciones de edición de texto para Gutenberg

Observe que junto al párrafo hay flechas en las que Podemos mover nuestra posición hacia arriba o hacia abajo Ese párrafo en particular. De esta forma podemos crear nuevos espacios entre párrafos para agregar imágenes, videos, etc.

Hay más opciones de edición en la parte superior de la pantalla y en el nuevo menú de la izquierda, como: B. Tamaño de fuente, color del texto, uso de mayúsculas e incluso agregar CSS personalizado.

Opciones de edición
Opciones de edición adicionales

Si hacemos clic en los tres puntos verticales que aparecen a la derecha de cada bloque, se ocultan opciones de edición adicionales en el resto del menú.

Insertar imagen en Gutenberg

Con las flechas del párrafo dejé el huevo entre el primer y segundo párrafo. ¿Dónde puedo leer ahora?Agregar o ingresar texto …Una especie de «.

Quiero agregar fotos en lugar de texto para brindar información visual y realzar la belleza del artículo. Para hacer esto, podemos presionar “.Círculo con signo +Â “o en el icono.

Insertar imagen en Gutenberg
Insertar imágenes entre párrafos

Este editor trabaja con bloques, por lo que podemos insertar un bloque de texto (párrafo, contenido escrito) o podemos «dibujoO archivos multimedia.

Después de insertar la imagen podemos centrarla a través del menú superior y usar el mouse y el «Punto azul»O agregamos un título (comentario) debajo de la foto.

Opciones de visualización
Opciones de edición de imágenes en Gutenberg

¿Cómo agrego videos y otros medios?

Siempre me sorprende la simplicidad de este editor, especialmente después de ver lo fácil que es ahora incrustar videos de Youtube o Vimeo. Supongamos que quiero colocar un video en lugar de una foto.

Lo que quiero hacer es hacer clic en el ícono a la derecha de «YouTube «o alrededor»+ Botón «luego seleccione»Incorporado«Luego» Youtube «.

Insertar video en Gutenberg
Haga clic en Insertar o Agregar video

Cuando se selecciona esta opción, aparecerá una ventana en uno de sus atajos. Solo necesitamos ingresar la URL del video de YouTube y presionar el botónEmpotrarUna especie de «.

Insertar video en Gutenberg
Hemos incrustado videos de YouTube

Agregue los títulos H2, H3, H4 …

Al agregar un nuevo bloque, presione «+ Botón «y opciones»difícil de usar«Haremos clic»títuloUna especie de «.

Cuando haga esto, verá varias opciones de encabezado en el menú superior indicando de qué tipo es: H2, H3 o H4.

Agregar encabezado en Gutenberg
Agregar encabezado en Gutenberg

Vemos la misma opción en el menú de Gutenberg a la derecha.

Cómo personalizar tu imagen favorita

Otra de las muchas funciones que usamos normalmente al escribir mensajes ahora está oculta a simple vista en el menú derecho del editor de Gutenberg.

Mejor película de Gutenberg
Inserta tu imagen favorita en el Editor Gutenberg

Solo tenemos que hacer clic «Establecer imagen favorita»Y elija o cargue la imagen que nos gustaría usar para el artículo (esta imagen aparecerá junto al artículo en la página de inicio o cuando se publique en las redes sociales).

Cómo habilitar comentarios

Nunca ha sido tan fácil habilitar o deshabilitar individualmente los comentarios en nuestros artículos o páginas de WordPress.

A través del menú de edición de Gutenberg, que se encuentra en el lado derecho de la pantalla, accedemos al «Observaciones“Desde allí podemos optar por habilitarlo o deshabilitarlo.

De forma predeterminada, la configuración está marcada en la configuración general de WordPress.

Publica contenido con Gutenberg
Publicación de nuestro contenido en Gutenberg

¿Cómo se puede publicar con Gutenberg?

En la esquina superior derecha de la pantalla vemos el botón «publicación“Solo tenemos que hacer clic en él.

Como WordPress sabe que estamos un poco confundidos, nos pregunta por segunda vez si queremos publicar y vuelve a presionar el botón para confirmar.publicación“Publicaremos nuestros artículos en Internet.

Desde aquí podemos cambiar la fecha de publicación y el acceso (público o privado).

Haga clic en la rueda

Al hacer clic en la rueda de selección en la esquina superior derecha del editor, se ocultará el menú de opciones a la derecha. Si vuelve a hacer clic, aparecerá.

Esto nos permite ver artículos en modo de pantalla completa sin distracciones. Porque la concentración es mejor cuando se trata de escribir.

¿Cómo creo una página con Gutenberg?

Como acabo de explicar para el artículo, la simplicidad es el objetivo de este nuevo editor de texto de WordPress.

No tiene sentido utilizar diferentes editores para publicaciones y páginas. Por eso permanecen igual.

Editor clásico de WordPress
Editor clásico de WordPress

Alternativa a Gutenberg y WordPress

Si no le gustan los cambios en el nuevo editor de texto, no se vuelva loco porque puede seguir usando el antiguo editor de texto sin ningún problema.

Solo tiene que instalar el complemento Classic Editor desde el menú de WordPress de la izquierda (Complementos-Agregar nuevo). En el Activa el editor normal con las opciones habituales.

También puede descargar el complemento aquí y cargarlo en su sitio web:

oferta

Hasta que dudo precio Una vez que nos acostumbremos a este nuevo editor, se perderán unos días. WordPress lo usará por defecto a partir de la versión 5.0, y tarde o temprano tendremos que aprender a usarlo.

En realidad, es muy simple, así que no te desanimes, aprenderás a usarlo con los ojos cerrados en unos días.

[fusion_youtube id=»https://www.youtube.com/watch?v=ss2dFnPomts» alignment=»center» width=»» height=»» autoplay=»false» api_params=»» hide_on_mobile=»small-visibility,medium-visibility,large-visibility» class=»» css_id=»»][/fusion_youtube]

Si tiene alguna pregunta, no dude en dejar un comentario e intentaré ayudarlo a resolverlo.

Deja una respuesta

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

Botón volver arriba