WordPress Gutenberg Tutorial para usuarios

Maddy Osman Última actualización 05.01.2021
11 min.
Gutenberg-Guía
Última actualización 05.01.2021

Si está pensando en crear un sitio web con WordPress , probablemente haya oído hablar de Gutenberg . Gutenberg es el editor de WordPress , que se lanzó con la versión 5.0. 

Desde su lanzamiento inicial, se han añadido muchas funciones al editor de bloques de WordPress , como la agrupación de bloques y los patrones de bloques. Pero la razón principal por la que Gutenberg es tan popular es que permite editar entradas y páginas de forma mucho más visual que el editor estándar de WordPress .

WordPress  Gutenberg  Tutorial para usuarios

Esta guía incluye:

  • Información sobre Gutenberg
  • una guía completa de Gutenberg para desarrolladores
  • una breve lista de las diferentes características en Gutenberg

Y puedo prometerte una cosa ahora mismo: Después de esta guía sabrá cómo crear diseños profesionales para los sitios web tu con la ayuda de Gutenberg .

WordPress 5.6 por fin está aquí!

La última versión de WordPress se centra en la maquetación y el diseño: un nuevo Theme, opciones adicionales de maquetación para las entradas y las páginas y patrones de bloques para tu todo el sitio web. Puede encontrar todos los detalles en la nota de lanzamiento oficial y en la guía de campoWordPress .

¿Qué hay de nuevo en el editor de bloques de Gutenberg ?

Antes de sumergirnos específicamente en el tutorial de WordPress Gutenberg , echemos un vistazo a lo que es realmente Gutenberg . 

Gutenberg sustituye al editor TinyMCE y le permite utilizar bloques de contenido para añadir texto, imágenes y otros medios a sus publicaciones y páginas. El editor clásico de TinyMCE estaba basado en texto y limitaba a los nuevos usuarios que no tenían conocimientos de codificación. 

Aunque el conocimiento de HTML no era esencial para utilizar el editor clásico, a menudo había que entrar en la vista HTML para hacer cualquier cambio. De lo contrario, había que instalar un Plugin aparte para añadir funciones sencillas como tablas o galerías de imágenes a tus .

WordPress  Gutenberg  Tutorial para usuarios

Con Gutenberg puede diseñar el sitio web tu no con texto sino con imágenes. Con el editor de bloques de WordPress Gutenberg puedes añadir fácilmente bloques de contenido a tus páginas y entradas. Hay bloques para imágenes, para párrafos - y para casi cualquier otro elemento que desee tener en el sitio web tus .

WordPress  Gutenberg  Tutorial para usuarios

Gutenberg es ahora el editor de bloques por defecto de WordPress y viene con muchos bloques out-of-the-box. También puedes añadir WordPress Plugins que te dará aún más bloques para incrustar fácilmente varias funciones en los posts y páginas de tu . 

WordPress Gutenberg Tutorial

Cuando se construyen sitios web, nunca está de más simplificar el flujo de trabajo. Gutenberg puede ahorrarle mucho tiempo. Así que ya es hora de que echemos un vistazo al editor de bloques WordPress . En primer lugar, vamos a repasar juntos los fundamentos de Gutenberg.  

Cómo utilizar Gutenberg

  1. Cree una nueva entrada de blog como de costumbre en WordPress . 
  2. Haga clic en el signo azul más en la esquina superior izquierda. 
  3. Seleccione el bloque que desea incluir en su publicación. 
  4. Ajuste la configuración del bloque dentro del diseño del puesto. 
  5. Reorganice los bloques de tu arrastrándolos y soltándolos.

¡Eso es! Lo único que necesita un poco más de explicación es entender cómo funcionan los bloques individuales, cómo personalizarlos y cómo agruparlos. Llegaremos a eso en el resto de nuestro tutorial de WordPress Gutenberg . 

Manual detallado del editor de bloques Gutenberg 

Ahora que ya tenemos lo básico, vamos a profundizar en los detalles del editor de bloques de WordPress . Cuando se carga por primera vez la pantalla del editor de un sitio o de un post con Gutenberg , el editor parece bastante vacío, incluso más que el editor clásico porque faltan las opciones del menú tradicional. No pasa nada. El primer paso es añadir algunos bloques. 

1. añadir bloques a su puesto

Para añadir un bloque a tu entrada, pulsa el signo más en la esquina superior izquierda del borrador de la entrada. Se superpone un nuevo bloque con un pequeño conjunto de opciones de menú. 

Nos centraremos primero en el menú principal, y luego discutiremos cómo puede hacer más ajustes con el menú secundario.

WordPress  Gutenberg  Tutorial para usuarios

Puede examinar los tipos de bloques o utilizar la barra de búsqueda para encontrar el tipo de bloque que desea. A continuación, añada un bloque escribiendo "/" y el tipo de bloque. Por ejemplo, si quieres insertar una imagen, debes escribir "/image".

Hay muchos bloques disponibles, entre ellos

  • Tacones
  • Imágenes
  • Titulares
  • Escuche
  • Tablas
  • Separador
  • Galería
  • Botones
  • Vídeos
  • Archivos de audio 

Si ha instalado Plugins con bloques personalizados, también aparecerán en esta lista. 

También puede añadir un bloque haciendo clic en el signo negro más: Esto aparece cuando se hace clic en el borrador donde dice "Escribir algo o escribir para bloquear la selección". 

WordPress  Gutenberg  Tutorial para usuarios

O puede seguir las instrucciones del texto y escribir "/" para seleccionar de una lista desplegable de opciones.  

WordPress  Gutenberg  Tutorial para usuarios

2. reordenar los bloques de tu

Puedes mover los bloques hasta donde quieras que aparezcan utilizando las flechas del propio bloque o pulsando los puntos entre las flechas para arrastrar y soltar los bloques.

WordPress  Gutenberg  Tutorial para usuarios

El editor de bloques de WordPress facilita mucho la reorganización de los contenidos de tu en comparación con el editor clásico. No hay que preocuparse por romper el código, ya que toda la información sobre el contenido del bloque (incluyendo la fuente, el color y el tamaño) se mueve con el bloque. 

La facilidad para organizar los bloques de tu es una de las mejores características del editor de bloques de Gutenberg . Se ahorra tiempo en arreglar el código roto y no hay que depender de copiar y pegar para hacer el trabajo.

3. ajustar la configuración del estilo tu Bloques

El siguiente paso en nuestro tutorial de WordPress Gutenberg es conocer el menú de Configuración de Estilo. En algunos casos, algunas opciones aparecen cerca del bloque cuando se hace clic en ellas. Por ejemplo, si está editando un bloque de párrafos, aparecerán algunas opciones familiares justo encima del bloque. 

WordPress  Gutenberg  Tutorial para usuarios

Sin embargo, también aparecerá un menú secundario en la parte derecha sitio de la pantalla. Haga clic en la pestaña"Configuración".  

WordPress  Gutenberg  Tutorial para usuarios

Las opciones de configuración de estilo que puede personalizar dependen del bloque. Por ejemplo, la configuración del bloque Párrafo es diferente a la del bloque Imagen.

WordPress  Gutenberg  Tutorial para usuarios

El menú de configuración de estilo te permite personalizar fácilmente los bloques de tus entradas. De nuevo, a diferencia del editor clásico, no tienes que preocuparte de hacer cambios en el pie de foto y estropear el formato del texto subyacente. 

Crear bloques reutilizables del editor Gutenberg

Ahora llegamos a los consejos avanzados del tutorial de WordPress Gutenberg . Te ahorrarás mucho tiempo y esfuerzo guardando bloques que podrás reutilizar en futuras entradas, páginas y otros sitios web de WordPress .

WordPress  Gutenberg  Tutorial para usuarios

Los bloques reutilizables son útiles cuando tienes elementos que necesitan ser añadidos regularmente a un determinado sitio o tipo de post. 

Supongamos que escribes críticas de películas y tienes una hoja de cálculo que muestra la clasificación tu de cada película. Quieres que siempre tenga el mismo aspecto, con un estilo específico y el mismo número de columnas y filas. Si creas un bloque reutilizable, puedes ahorrar una cantidad considerable de tiempo al recrearlo para cada entrada. 

Guardar el estilo y los distintos atributos de los elementos también puede suponer un verdadero ahorro de tiempo para los botones. 

Digamos que necesitas la misma CTA (llamada a la acción) en cada post que escribes. Para crear un botón reutilizable, empiece por el proceso típico de añadir un bloque de botones. Ajusta el estilo y el texto hasta que tenga el aspecto que deseas.  

WordPress  Gutenberg  Tutorial para usuarios

A continuación, haga clic en los tres puntos del menú de bloques y seleccione Añadir a bloques reutilizables

WordPress  Gutenberg  Tutorial para usuarios

Aquí puede dar un nombre a su nuevo bloque. 

WordPress  Gutenberg  Tutorial para usuarios

Si quiere reutilizar este bloque, vaya al menú"Bloques habituales", cambie a la pestaña"Reutilizable" y seleccione el bloque guardado. 

WordPress  Gutenberg  Tutorial para usuarios

También puede exportar bloques reutilizables para utilizarlos en otros sitios web. Sólo tienes que hacer clic en los tres puntos que hay junto al bloque, seleccionar Exportar como JSON y descargar el archivo. 

WordPress  Gutenberg  Tutorial para usuarios

A continuación, para añadir un bloque reutilizable exportado a otro sitio WordPress , vaya a la pestaña Reutilizable del menú Bloques y seleccione Gestionar todos los bloques reutilizables

WordPress  Gutenberg  Tutorial para usuarios

Esto abre una sección de aspecto más tradicional en el WordPress panel de control donde podrá gestionar todos los bloques reutilizables que haya creado. 

Si ha guardado bloques reutilizables de otros sitios web, puede cargarlos haciendo clic en Importar desde JSON. Una vez hecho esto, deberías poder acceder a ellos como siempre desde la pestaña Reutilizable del menú de Bloques

Colocar los bloques de tu en grupos

El siguiente consejo profesional en nuestro tutorial de WordPress Gutenberg es sobre la agrupación de bloques. Si coloca dos o más bloques en un grupo, puede ajustarlos y manipularlos como si fueran un solo bloque. 

Por ejemplo, puede agrupar un bloque de llamada a la acción para redes sociales con un bloque que contenga iconos para compartir en redes sociales. También puedes agrupar un bloque de párrafos con un bloque de botones para crear un CTA estándar que puedes insertar al final de las entradas de tus . 

Para crear un grupo de bloques con el editor de bloquesGutenberg , seleccione todos los bloques que desee agrupar. A continuación, haga clic en el icono de la capa en la izquierda sitio del pequeño menú superpuesto:

WordPress  Gutenberg  Tutorial para usuarios

Aparece un nuevo menú con la inscripción"Transformar a", haga clic en Grupo. Eso es todo. Ahora puedes mover y ajustar estos bloques como si fueran uno solo. 

Todavía se pueden hacer cambios en la configuración de cada bloque individual. Por ejemplo, puede añadir texto a un bloque de párrafos y cambiar su aspecto. 

Si desea desagrupar los bloques, seleccione el grupo y luego haga clic en los tres puntos del menú de superposición. Desplácese hacia abajo y haga clic en Desagrupar.

WordPress  Gutenberg  Tutorial para usuarios

Esta función también funciona con bloques reutilizables. Una vez agrupados los bloques, puede guardarlos como bloques reutilizables siguiendo el mismo procedimiento anterior. 

Uso de patrones de bloques en el editor de bloques WordPress

Con WordPress Block Patterns puede crear y compartir diseños de bloques predefinidos. Con Block Patterns puedes crear diseños complejos con unos pocos clics de ratón.

Para acceder a los patrones de bloques, haga clic en el mismo signo más que utilizó para acceder al menú de bloques . Seleccione la pestaña Patrones

WordPress  Gutenberg  Tutorial para usuarios

A primera vista, los patrones de bloques se parecen a los bloques reutilizables. Sin embargo, los patrones de bloques son lo más parecido a la posibilidad de crear páginas enteras en Gutenberg el más cercano. 

Con Block Patterns, puedes añadir secciones de diseño completas a tus entradas o páginas con un solo clic. Son ideales si quieres crear y guardar un diseño para utilizarlo en varias entradas. 

El editor de bloques de WordPress viene con varios patrones prediseñados, incluyendo

  • varias columnas de texto
  • botones adyacentes
  • cabeceras personalizadas
  • Citas con imágenes
WordPress  Gutenberg  Tutorial para usuarios

Otra ventaja de los patrones de bloques es que permiten cambiar más fácilmente entre los Themes cambiar entre ellos. Dado que el formato tu está ligado a los propios bloques, no se ve afectado por otro Theme . 

Si desea crear manualmente los patrones de bloques personalizados de tu , esto requiere algunos conocimientos de programación. En el manual de desarrollo se denominan disposiciones de bloque predefinidas

La creación de patrones de bloques desde cero requiere el uso de la interfaz de programación de aplicaciones (API) de bloques. Sin embargo, elconstructor de patrones de bloques Plugin puede ayudar. 

WordPress  Gutenberg  Tutorial para usuarios

Añadir bloques adicionales a Gutenberg

Antes de continuar con este tutorial de WordPress Gutenberg , debe saber que hay varios Plugins que le permiten añadir aún más tipos de bloques al editor, incluyendo

  • Tabla de contenidos
  • Listas de precios
  • Google Maps
  • Formularios de contacto

Existe un directorio oficial de bloques de WordPress donde se pueden encontrar y añadir bloques adicionales para Gutenberg . 

WordPress  Gutenberg  Tutorial para usuarios

El plan original era crear un subdirectorio para el bloque único Plugins. En su lugar, el directorio actual es una subsección del directorio estándar Plugin de WordPress con una lista de búsqueda basada en bloques Plugins. 

Edición completa del sitio web en Gutenberg

Por el momento, Gutenberg no permite todavía la edición completa del sitio web. Sin embargo, el equipo de desarrollo de WordPress está haciendo grandes progresos hacia este objetivo, incluyendo la adición de patrones de bloques. 

Actualmente existe una versión experimental de Twenty Twenty Themes, que utiliza la edición completa del sitio web y adopta la idea de un bloque basado en Themes

Con el editor de bloques de WordPress , ahora puedes crear diseños basados en bloques totalmente personalizados, pero sólo para entradas y páginas. Una vez que la edición completa del sitio web ha llegado a Gutenberg , los widgets quedan obsoletos. Esto ofrece a los usuarios un control completo sobre cada elemento de diseño, incluyendo cabeceras, barras laterales y pies de página. 

Aunque el editor de bloques de Gutenberg todavía no es un constructor de páginas completo deWordPress , está en camino de serlo. Mientras tanto, los patrones de bloques, tal y como se explica en el tutorial de bloques de WordPress Gutenberg , proporcionan un conjunto de funciones muy cercano al de un editor de sitios web completo. 

Desventajas del editor Gutenberg 

Aunque Gutenberg es una herramienta útil que ha cambiado la forma en que muchos usuarios interactúan con WordPress y crean contenidos, el editor no está exento de inconvenientes. 

Por ejemplo, cuando Gutenberg se introdujo por primera vez, tenía bastantes fallos. La mayor parte de eso se ha arreglado desde entonces. 

Sin embargo, algo que no es un error es el hecho de que Gutenberg sigue siendo incompatible con muchos Themes . Por lo tanto, si quieres utilizar un determinado Theme y te gusta el diseño, es probable que no puedas personalizarlo ni utilizar Gutenberg en él. Si lo intentas, el resultado suele ser simplemente un desastre. 

Bueno, Gutenberg es compatible con algunos Themes , pero no lo suficiente como para presumir de una compatibilidad generalizada. 

Otro problema que plantea Gutenberg es que no ofrece la misma flexibilidad que el editor clásico. Por supuesto, Gutenberg elimina algunos de los problemas de formato idiosincrásicos que se producen con el editor clásico, pero desgraciadamente está limitado en los tipos de páginas que puede crear. 

Theme Dado que aún no se dispone de opciones de personalización más amplias en Gutenberg , tendrá que conformarse con lo que Gutenberg sea compatible Themes y con los bloques y el bloque Plugins . 

Theme Los recursos disponibles para el uso de Gutenberg están creciendo a un ritmo constante - pero esto no hace que Gutenberg sea un constructor. Todavía no. 

En definitiva, Gutenberg es la opción ideal para quienes ya están acostumbrados a los constructores de páginas o a los editores puramente visuales y quieren mantener esa experiencia, o para quienes sólo quieren centrarse en el contenido y hacer el diseño arrastrando y soltando. 

Reflexiones finales: guía para WordPress Gutenberg 

El editor Gutenberg forma ahora parte del núcleo de WordPress . El equipo de desarrollo de WordPress tiene grandes planes para él. Con el tiempo podrá crear menús de navegación con Gutenberg , crear diseños completos de sitios web y Gutenberg será compatible con aún más Themes . 

Hasta entonces, puedes aprovechar al máximo las funciones que ofrece actualmente WordPress Block Editor y crear entradas y páginas visualmente atractivas, sin saber una sola línea de código. Un buen trato, si nos preguntas. 

Así que adelante: utilice los consejos de nuestro tutorial WordPress Gutenberg y empiece a personalizar el contenido del sitio web tus . Y asegúrese de que el sitio web tu esté funcionando con una oferta del sitio webWordPress Hosting de RAIDBOXES funciona a una velocidad óptima. 

WordPress Gutenberg Editor: tu Preguntas

¿Qué opina del editor de WordPress Gutenberg ? ¿Qué preguntas tienes para Maddy? No dude en utilizar la función de comentarios. ¿Quieres más consejos sobre WordPress ? Entonces síganos en Twitter, Facebook o a través de nuestro boletín.

Maddy Osman es una especialista en estrategias de contenidos SEO. Trabaja con clientes seleccionados en el ámbito de WordPress y alojamientos web. Gracias a su formación en diseño web y WordPress ha adquirido un profundo conocimiento de SEO y sabe exactamente cómo conectar las marcas con contenido relevante SEO.

Artículos relacionados

Comentarios sobre este artículo

Escribe un comentario

La dirección de correo electrónicotu no se publicará. Los campos obligatorios están marcados con *.