{"id":15772,"date":"2019-05-22T10:16:27","date_gmt":"2019-05-22T10:16:27","guid":{"rendered":"https:\/\/www.templatemonster.com\/es\/blog\/?p=15772"},"modified":"2020-05-08T07:31:32","modified_gmt":"2020-05-08T07:31:32","slug":"tutorial-de-gutenberg-de-wordpress-todo-lo-que-debes-saber","status":"publish","type":"post","link":"https:\/\/monsterspost.com\/es\/tutorial-de-gutenberg-de-wordpress-todo-lo-que-debes-saber\/","title":{"rendered":"Tutorial de Gutenberg de WordPress: Todo lo que debes saber"},"content":{"rendered":"<p>El editor\u00a0Gutenberg ocupa la mayor\u00a0atenci\u00f3n por el momento. A algunas personas les gusta y a otras - no,\u00a0algunas destacan sus ventajas, mientras que otras hablan de sus contras. En realidad, no hay\u00a0ning\u00fan constructor\u00a0web absolutamente perfecto en la Web,\u00a0como todos\u00a0ellos tienen sus desventajas, y por supuesto, Gutenberg tambi\u00e9n los tiene. Por otro lado, tambi\u00e9n tiene muchas ventajas. De todos modos, Gutenberg es ahora una aplicaci\u00f3n predeterminada y cada usuario de WordPress debe\u00a0probar de\u00a0usar ella. As\u00ed que,\u00a0hoy te proporcionamos un tutorial paso a paso que te gu\u00ede a trav\u00e9s de Gutenberg.<\/p>\n<p><!--more--><\/p>\n<div class=\"tweetdis_bl tweets-block-wrap tweet-box box_1\"><\/div>\n<h2>\u00bfCu\u00e1l es la diferencia entre el nuevo editor de WordPress y el cl\u00e1sico?<\/h2>\n<div class=\"spacer\"><\/div>\n<p><a href=\"https:\/\/s.tmimgcdn.com\/blog\/wp-content\/uploads\/2019\/05\/classiclook.png?x54449\" target=\"_blank\" rel=\"nofollow\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-154310 aligncenter\" src=\"https:\/\/s.tmimgcdn.com\/blog\/wp-content\/uploads\/2019\/05\/classiclook.png?x54449\" alt=\"\" width=\"880\" height=\"540\" data-lazy-loaded=\"true\" \/><\/a><\/p>\n<div class=\"spacer\"><\/div>\n<p>Lo primero que\u00a0se debe\u00a0mencionar es que Gutenberg es un constructor de p\u00e1ginas, mientras que el editor cl\u00e1sico de WP no lo es. Un\u00a0constructor de p\u00e1ginas es una aplicaci\u00f3n que, literalmente, ayuda a los creadores de sitios web a crear p\u00e1ginas. Esto significa que la imagen que ves en la pantalla de tu editor es exactamente lo\u00a0que ver\u00e1n los visitantes. El desarrollador no\u00a0tiene que cambiar entre la pantalla del administrador y la vista previa de la p\u00e1gina para entender c\u00f3mo se ver\u00e1 el resultado de su trabajo:\u00a0puede ver todo de manera clara y comprensible en\u00a0el campo de trabajo. Eso reduce suficientemente el tiempo y los esfuerzos que el creador del sitio web dedica a \"pulir todos los detalles\".<\/p>\n<div class=\"spacer\"><\/div>\n<p><a href=\"https:\/\/s.tmimgcdn.com\/blog\/wp-content\/uploads\/2019\/05\/gutenlook.png?x54449\" target=\"_blank\" rel=\"nofollow\"><img decoding=\"async\" loading=\"lazy\" class=\" wp-image-154326 aligncenter\" src=\"https:\/\/s.tmimgcdn.com\/blog\/wp-content\/uploads\/2019\/05\/gutenlook.png?x54449\" alt=\"\" width=\"880\" height=\"565\" data-lazy-loaded=\"true\" \/><\/a><\/p>\n<div class=\"spacer\"><\/div>\n<p>Sin embargo, echemos un vistazo a\u00a0algunos otros detalles:<\/p>\n<ul>\n<li><strong>Sistema de bloques. <\/strong>Todas las p\u00e1ginas o\u00a0entradas que creas con la ayuda de Gutenberg se componen de\u00a0bloques. Puedes ponerlos de cualquier forma que desees y crear cualquier dise\u00f1o que necesites.\u00a0Todo es muy f\u00e1cil y lo puedes hacer\u00a0sin escribir\u00a0una sola l\u00ednea de c\u00f3digo, simplemente arrastr\u00e1ndo y solt\u00e1ndo diferentes bloques.<\/li>\n<li><strong>Men\u00fa superior fijo.<\/strong> Esto es muy conveniente!\u00a0Cualquiera que intent\u00f3 crear una p\u00e1gina o entrada con Editor cl\u00e1sico sabe que era una molest\u00eda tener que desplazarse por toda la p\u00e1gina para publicarla o actualizarla. Y ahora el men\u00fa\u00a0te sigue mientras llenas una p\u00e1gina y puedes actualizar el contenido el mismo segundo\u00a0cuando decides hacerlo. Esa es una gran ventaja.<\/li>\n<li><strong>Bloque Navegaci\u00f3n. <\/strong>Es un bot\u00f3n en forma de lista en la esquina izquierda del men\u00fa superior. Esta gran opci\u00f3n te permite ver qu\u00e9 bloques y en qu\u00e9 orden se utilizaron en la p\u00e1gina. Tambi\u00e9n le da al creador del sitio web acceso directo y r\u00e1pido a cada uno de los bloques utilizados.\u00a0La navegaci\u00f3n tan r\u00e1pida y simple reduce suficientemente el tiempo\u00a0que se dedica a la creaci\u00f3n del sitio web.<\/li>\n<li><strong>Campo de trabajo flexible. <\/strong>En Gutenberg hay tres modos de trabajo y un mont\u00f3n de otras configuraciones que no afectan el contenido, solo tienen que ver con la conveniencia del uso del editor para el usuario. Todos los elementos de la barra lateral y otras herramientas se pueden eliminar del campo de trabajo; es decir, puedes personalizarlo\u00a0de acuerdo con\u00a0tus gustos y necesidades.<\/li>\n<\/ul>\n<div class=\"spacer\"><\/div>\n<h3>Pros y contras del constructor web Gutenberg de WordPress<\/h3>\n<div class=\"spacer\"><\/div>\n<table>\n<tbody>\n<tr>\n<td><strong>Pros<\/strong><\/td>\n<td><strong>Contras<\/strong><\/td>\n<\/tr>\n<tr>\n<td>Sistema de arrastrar y soltar de creaci\u00f3n de p\u00e1ginas<\/td>\n<td>Todos los elementos de la p\u00e1gina (como p\u00e1rrafos, cabeceras, im\u00e1genes, etc.)\u00a0se a\u00f1aden como bloques separados<\/td>\n<\/tr>\n<tr>\n<td>Sencilla adici\u00f3n de contenidos multimedia<\/td>\n<td>No es completamente accesible para personas con discapacidades<\/td>\n<\/tr>\n<tr>\n<td>Barra de herramientas flotante<\/td>\n<td>Puede ser que no sea compatible con tu tema o complementos<\/td>\n<\/tr>\n<tr>\n<td>Navegaci\u00f3n sencilla<\/td>\n<td>Es dif\u00edcil\u00a0de aprender<\/td>\n<\/tr>\n<tr>\n<td>Apariencia de interfaz flexible<\/td>\n<td>Interfaz complicada<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<div class=\"spacer\"><\/div>\n<hr \/>\n<div class=\"spacer\"><\/div>\n<h2>Empezar a trabajar con\u00a0Gutenberg<\/h2>\n<div class=\"spacer\"><\/div>\n<p>Leer sobre las diferencias entre Editor cl\u00e1sico y Gutenberg podr\u00eda ser un poco aburrido para aquellos que todav\u00eda no lo han probado. Pues,\u00a0procedamos\u00a0a los consejos pr\u00e1cticos.<\/p>\n<div class=\"spacer\"><\/div>\n<h3>\u00bfC\u00f3mo crear una entrada o una p\u00e1gina?<\/h3>\n<div class=\"spacer\"><\/div>\n<p>No debes hacer nada especial para crear una nueva p\u00e1gina o entrada con el nuevo constructor de p\u00e1ginas web de WordPress. Solo\u00a0debes hacer clic en Entradas &gt; A\u00f1adir nueva o en P\u00e1ginas &gt; A\u00f1adir nueva. Gutenberg se abrir\u00e1 autom\u00e1ticamente. De hecho, debes instalar\u00a0el complemento especial para que el editor se vea como en la versi\u00f3n \u00abantigua\u00bb de WordPress. Escribe\u00a0un t\u00edtulo, inserta\u00a0un texto e im\u00e1genes,\u00a0haz clic en el bot\u00f3n \"Publicar\" y eso es todo\u00a0- has creado una p\u00e1gina o una entrada.<\/p>\n<hr \/>\n<div class=\"spacer\"><\/div>\n<h3>Trabajar\u00a0con las herramientas del editor Gutenberg<\/h3>\n<div class=\"spacer\"><\/div>\n<p>Esto es lo\u00a0que ver\u00e1s despu\u00e9s de abrir el editor Gutenberg.\u00a0Y ahora echemos un vistazo a las herramientas disponibles por defecto.<\/p>\n<div class=\"spacer\"><\/div>\n<p><a href=\"https:\/\/s.tmimgcdn.com\/blog\/wp-content\/uploads\/2019\/05\/Gutcontrols.png?x54449\" target=\"_blank\" rel=\"nofollow\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-154315 aligncenter\" src=\"https:\/\/s.tmimgcdn.com\/blog\/wp-content\/uploads\/2019\/05\/Gutcontrols.png?x54449\" alt=\"\" width=\"938\" height=\"422\" data-lazy-loaded=\"true\" \/><\/a><\/p>\n<div class=\"spacer\"><\/div>\n<ul>\n<li><strong>A\u00f1adir bloque.<\/strong> Como puedes ver, hay tres botones que te ayudan a a\u00f1adir nuevos bloques a la p\u00e1gina. Uno\u00a0est\u00e1 en la esquina superior izquierda del conjunto de herramientas y otros dos est\u00e1n\u00a0a ambos lados del bloque.<\/li>\n<li><strong>Deshacer y rehacer.<\/strong> Todo es obvio: estos dos botones te permiten corregir f\u00e1cilmente algunas acciones que no deseas que ocurran.<\/li>\n<li><strong>Estructura de contenido.<\/strong> Cuando haces clic en esta opci\u00f3n,\u00a0se abre una peque\u00f1a tabla desplegable con\u00a0un n\u00famero de palabras de usuario, t\u00edtulos, p\u00e1rrafos y bloques.<\/li>\n<li><strong>Bloque Navegaci\u00f3n.<\/strong> Como\u00a0lo mencionamos anteriormente, esto es uno de los elementos m\u00e1s \u00fatiles en Gutenberg, como te\u00a0permite navegar r\u00e1pidamente por la p\u00e1gina. Cuando haces clic en\u00a0alg\u00fan bloque de la lista, se abre autom\u00e1ticamente para que puedas editarlo.<\/li>\n<li><strong>Panel de personalizaci\u00f3n de texto.<\/strong> Se abre cuando comienzas a editar un bloque de texto y te ofrece el conjunto m\u00e1s b\u00e1sico de herramientas\u00a0de edici\u00f3n de texto.<\/li>\n<li><strong>T\u00edtulo.<\/strong> Esto tambi\u00e9n es obvio: se trata del t\u00edtulo de\u00a0tu p\u00e1gina o entrada.<\/li>\n<li><strong>Insertar imagen, Insertar t\u00edtulo, Insertar galer\u00eda.<\/strong> Estos tres botones te ayudan a agregar contenidos para decorar el texto y hacerlo m\u00e1s f\u00e1cil de leer.<\/li>\n<\/ul>\n<p>En cuanto a la barra de herramientas\u00a0a la derecha, es\u00a0casi igual a la barra de la versi\u00f3n anterior del editor, por lo que solo mencionamos los detalles y las funciones m\u00e1s importantes para los principiantes.<\/p>\n<div class=\"spacer\"><\/div>\n<p><a href=\"https:\/\/s.tmimgcdn.com\/blog\/wp-content\/uploads\/2019\/05\/gutcontr2.png?x54449\" target=\"_blank\" rel=\"nofollow\"><img decoding=\"async\" loading=\"lazy\" class=\" wp-image-154314 aligncenter\" src=\"https:\/\/s.tmimgcdn.com\/blog\/wp-content\/uploads\/2019\/05\/gutcontr2.png?x54449\" alt=\"\" width=\"292\" height=\"352\" data-lazy-loaded=\"true\" \/><\/a><\/p>\n<div class=\"spacer\"><\/div>\n<p>Como puedes ver, hay 5 botones en la esquina izquierda del men\u00fa superior flotante.<\/p>\n<ul>\n<li><strong>Guardar borrador. <\/strong>Puedes guardar la p\u00e1gina que\u00a0creaste y aplicarla a todo tu sitio web.<\/li>\n<li><strong>Vista previa.<\/strong>\u00a0Para revisar\u00a0c\u00f3mo se ver\u00e1 la p\u00e1gina resultante.<\/li>\n<li><strong>Publicar.<\/strong> Este bot\u00f3n hace que la p\u00e1gina que\u00a0has creado con Gutenberg se vuelva\u00a0visible para todos los que abren tu sitio web.<\/li>\n<li><strong>Ajustes.<\/strong> Si no deseas que la barra de herramientas a la derecha est\u00e9 visible, puedes ocultarla con este bot\u00f3n.<\/li>\n<li><strong>Mostrar m\u00e1s.<\/strong> Las opciones que puedes ver al hacer\u00a0clic en este bot\u00f3n se describir\u00e1n un poco m\u00e1s tarde.<\/li>\n<\/ul>\n<p>La barra derecha tiene dos barras\u00a0m\u00e1s: \"Documento\" y \"Bloque\".\u00a0La primera es visible por defecto y\u00a0presenta\u00a0ajustes que se aplican a toda la p\u00e1gina. La barra \"Bloque\" se abre cuando seleccionas\u00a0alg\u00fan bloque y contiene todos sus ajustes. En general, todas las fichas son\u00a0id\u00e9nticas a aquellas del\u00a0Editor cl\u00e1sico.<\/p>\n<p>La parte del men\u00fa que puedes ver despu\u00e9s de hacer clic en el bot\u00f3n \"Mostrar m\u00e1s\" te\u00a0permite personalizar el campo de trabajo de acuerdo\u00a0con tus necesidades.<\/p>\n<div class=\"spacer\"><\/div>\n<p><a href=\"https:\/\/s.tmimgcdn.com\/blog\/wp-content\/uploads\/2019\/05\/showmore.png?x54449\" target=\"_blank\" rel=\"nofollow\"><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-154334 aligncenter\" src=\"https:\/\/s.tmimgcdn.com\/blog\/wp-content\/uploads\/2019\/05\/showmore.png?x54449\" alt=\"\" width=\"255\" height=\"602\" data-lazy-loaded=\"true\" \/><\/a><\/p>\n<div class=\"spacer\"><\/div>\n<ul>\n<li><strong>Barra de herramientas superior. <\/strong>Este modo\u00a0pone la barra de herramientas en la parte superior de la pantalla, donde se ver\u00e1 perfectamente. Es c\u00f3modo, si tienes una p\u00e1gina grande con muchos bloques, ya que en esta posici\u00f3n no te distraer\u00e1 de\u00a0ninguno de los bloques.<\/li>\n<li><strong>Modo Spotlight.<\/strong> En este caso la barra de herramientas se\u00a0pone en la parte superior del bloque con el que est\u00e1s trabajando actualmente. Eso ser\u00eda conveniente para las p\u00e1ginas con un\u00a0layout amplio de pantalla completa o para las personas que desean ver la barra\u00a0en el bloque que se\u00a0edita\u00a0por el momento.<\/li>\n<li><strong>Modo de pantalla completa<\/strong> elimina el men\u00fa superior y el men\u00fa izquierda de WordPress 5.0 y extiende el campo de trabajo a todo el ancho de pantalla. Pues, nada te molesta y puedes ver la imagen completa.<\/li>\n<li><strong>Editor visual.<\/strong> As\u00ed es como ves la p\u00e1gina\u00a0este mismo momento, y c\u00f3mo la ver\u00e1n los visitantes de tu sitio web.<\/li>\n<li><strong>Editor de c\u00f3digo.<\/strong>\u00a0Al activar este modo, ver\u00e1s el c\u00f3digo HTML y CSS, y podr\u00e1s\u00a0hacer algunos cambios b\u00e1sicos\u00a0en el n\u00facleo.<\/li>\n<li><strong>Administrador de bloques.<\/strong> Cuando haces clic en esta opci\u00f3n, se abre una lista de todos los bloques disponibles y\u00a0tambi\u00e9n haces\u00a0que no est\u00e9n disponibles en la lista que se\u00a0abre al hacer clic en el bot\u00f3n \"A\u00f1adir bloque\".<\/li>\n<li><strong>Administrar todos los bloques reutilizables.<\/strong> Esta opci\u00f3n\u00a0te llevar\u00e1 a la lista de todos los bloques que creaste\u00a0por tu mismo y\u00a0guardaste o descargaste de la Web. All\u00ed puedes usar ellas, eliminar o hacer que no est\u00e9n accesibles.<\/li>\n<li><strong>Atajos de teclado.<\/strong> Si olvidaste algunos atajos de teclado, puedes consultar esta opci\u00f3n. Se abre una lista de todas las teclas de acceso r\u00e1pido de Gutenberg.<\/li>\n<li><strong>Copiar todo el contenido.<\/strong> Es obvio: esta opci\u00f3n simplemente copia todo el contenido que has a\u00f1adido\u00a0a la p\u00e1gina.<\/li>\n<li><strong>Opciones.<\/strong> All\u00ed puedes elegir qu\u00e9 paneles se mostrar\u00e1n en el campo de trabajo y eliminar cualquiera de ellos.<\/li>\n<\/ul>\n<hr \/>\n<div class=\"spacer\"><\/div>\n<h2>\u00bfC\u00f3mo crear una\u00a0entrada (o p\u00e1gina) con\u00a0el nuevo constructor de WordPress?<\/h2>\n<div class=\"spacer\"><\/div>\n<p>Ahora,\u00a0despu\u00e9s de describir\u00a0brevemente las funcionalidades principales, es hora de practicar un poco. De todos modos,\u00a0los conocimientos te\u00f3ricos\u00a0no tienen ning\u00fan valor si no\u00a0puedes\u00a0aplicarlos\u00a0para crear tu sitio web. Pues, te mostraremos\u00a0c\u00f3mo crear una entrada. Y mientras tanto, tambi\u00e9n te mostraremos c\u00f3mo funcionan los bloques disponibles.<\/p>\n<p>Lo primero que debes recordar: cada p\u00e1rrafo y\u00a0t\u00edtulo se presentan como\u00a0bloques separados en Gutenberg. Incluso si pegas un texto ya escrito, cada su p\u00e1rrafo se convertir\u00e1 autom\u00e1ticamente en un bloque separado.<\/p>\n<div class=\"spacer\"><\/div>\n<p><a href=\"https:\/\/s.tmimgcdn.com\/blog\/wp-content\/uploads\/2019\/05\/gutcreation1.png?x54449\" target=\"_blank\" rel=\"nofollow\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-154316 aligncenter\" src=\"https:\/\/s.tmimgcdn.com\/blog\/wp-content\/uploads\/2019\/05\/gutcreation1.png?x54449\" alt=\"\" width=\"766\" height=\"459\" data-lazy-loaded=\"true\" \/><\/a><\/p>\n<div class=\"spacer\"><\/div>\n<p>El primer paso es muy simple y obvio. Abre el editor de Gutenberg, escribe\u00a0un t\u00edtulo y pega el texto que\u00a0has escrito para esta entrada (o escr\u00edbelo desde cero). En el modo Spotlight una barra de herramientas\u00a0conveniente se abre\u00a0justo por encima\u00a0del bloque que est\u00e1s editando actualmente. Esa barra de herramientas\u00a0te permite r\u00e1pidamente\u00a0modificar el bloque actual, ajustar su alineaci\u00f3n,\u00a0hacer que el texto sea en negrita o cursiva y a\u00f1adir un enlace. El bot\u00f3n \"M\u00e1s controles de texto enriquecido\"\u00a0abre\u00a0tres opciones m\u00e1s: insertar un c\u00f3digo o una imagen y tachar\u00a0un texto. El bot\u00f3n \"M\u00e1s opciones\" abre algunos ajustes generales\u00a0del bloque (se te permite\u00a0duplicarlo, eliminarlo, agregarlo a bloques reutilizables, etc.).<\/p>\n<div class=\"spacer\"><\/div>\n<p><a href=\"https:\/\/s.tmimgcdn.com\/blog\/wp-content\/uploads\/2019\/05\/gutcreation2.png?x54449\" target=\"_blank\" rel=\"nofollow\"><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-154318 aligncenter\" src=\"https:\/\/s.tmimgcdn.com\/blog\/wp-content\/uploads\/2019\/05\/gutcreation2.png?x54449\" alt=\"\" width=\"451\" height=\"207\" data-lazy-loaded=\"true\" \/><\/a><\/p>\n<div class=\"spacer\"><\/div>\n<h3>Adici\u00f3n de im\u00e1genes<\/h3>\n<div class=\"spacer\"><\/div>\n<p>Por supuesto, ninguna entrada buena no se compone solo del texto, como esto ser\u00eda demasiado aburrido.\u00a0As\u00ed que, vamos a\u00a0insertar un par de fotos. Cualquier bloque adicional que\u00a0olvidaste a\u00f1adir\u00a0se puede insertar en cualquier momento y en cualquier lugar. El bot\u00f3n superior \"A\u00f1adir bloque\" te permite insertar un nuevo bloque\u00a0por encima o por debajo de cualquiera de los contenidos ya colocados.\u00a0Pone el puntero sobre el bloque no seleccionado y ver\u00e1s el bot\u00f3n \"A\u00f1adir bloque\". Despu\u00e9s de hacer clic en \u00e9l,\u00a0se abrir\u00e1 una lista desplegable con todos los bloques disponibles. Haz clic en el bot\u00f3n \"Imagen\".<\/p>\n<div class=\"spacer\"><\/div>\n<p><a href=\"https:\/\/s.tmimgcdn.com\/blog\/wp-content\/uploads\/2019\/05\/gutcreation3.png?x54449\" target=\"_blank\" rel=\"nofollow\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-154319 aligncenter\" src=\"https:\/\/s.tmimgcdn.com\/blog\/wp-content\/uploads\/2019\/05\/gutcreation3.png?x54449\" alt=\"\" width=\"611\" height=\"499\" data-lazy-loaded=\"true\" \/><\/a><\/p>\n<div class=\"spacer\"><\/div>\n<p>La barra de herramientas por encima del bloque seleccionado\u00a0tambi\u00e9n cambia\u00a0y ahora solo te permite cambiar la alineaci\u00f3n. La imagen se puede\u00a0subir de tres maneras y eso es genial porque en\u00a0el editor cl\u00e1sico ten\u00edas que\u00a0subir todas las im\u00e1genes a la biblioteca de Medios antes de insertarla en una entrada. Ahora tambi\u00e9n puedes subirlo directamente desde tu dispositivo o\u00a0desde la URL.<\/p>\n<p>Vamos a subir\u00a0una imagen desde una computadora de escritorio. Se te permite\u00a0escalar una imagen seg\u00fan tus necesidades. El bot\u00f3n \"Editar imagen\" en la barra de herramientas abre la biblioteca de Medios donde puedes a\u00f1adir el texto alternativo, el t\u00edtulo y la descripci\u00f3n de tu imagen, as\u00ed como cambiar\u00a0el\u00a0t\u00edtulo de su archivo. El t\u00edtulo tambi\u00e9n se puede agregar justo debajo de la imagen sin\u00a0abrir la biblioteca de Medios.<\/p>\n<div class=\"spacer\"><\/div>\n<p><a href=\"https:\/\/s.tmimgcdn.com\/blog\/wp-content\/uploads\/2019\/05\/gutcreation4.png?x54449\" target=\"_blank\" rel=\"nofollow\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-154320 aligncenter\" src=\"https:\/\/s.tmimgcdn.com\/blog\/wp-content\/uploads\/2019\/05\/gutcreation4.png?x54449\" alt=\"\" width=\"620\" height=\"538\" data-lazy-loaded=\"true\" \/><\/a><\/p>\n<div class=\"spacer\"><\/div>\n<p>Como puedes ver, si\u00a0optes por la alineaci\u00f3n derecha o izquierda y haces que la imagen sea m\u00e1s peque\u00f1a, el texto envolver\u00e1 ella. Si\u00a0seleccionas \"Alineaci\u00f3n centrada\", la imagen permanecer\u00e1 en el centro y\u00a0no ser\u00e1 envuelta por el texto,\u00a0sea cual sea su tama\u00f1o.<\/p>\n<div class=\"spacer\"><\/div>\n<p><a href=\"https:\/\/s.tmimgcdn.com\/blog\/wp-content\/uploads\/2019\/05\/gutcreation5.png?x54449\" target=\"_blank\" rel=\"nofollow\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-154321 aligncenter\" src=\"https:\/\/s.tmimgcdn.com\/blog\/wp-content\/uploads\/2019\/05\/gutcreation5.png?x54449\" alt=\"\" width=\"843\" height=\"526\" data-lazy-loaded=\"true\" \/><\/a><\/p>\n<div class=\"spacer\"><\/div>\n<p>Adem\u00e1s de las opciones de personalizaci\u00f3n directa, tambi\u00e9n hay algunas de ellas en la barra \"Bloque\" en el men\u00fa a la derecha. All\u00ed puedes a\u00f1adir el texto alternativo, elegir el tama\u00f1o y las dimensiones de\u00a0tu imagen y adjuntarle un enlace.<\/p>\n<div class=\"spacer\"><\/div>\n<p><a href=\"https:\/\/s.tmimgcdn.com\/blog\/wp-content\/uploads\/2019\/05\/gutcreation6.png?x54449\" target=\"_blank\" rel=\"nofollow\"><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-154322 aligncenter\" src=\"https:\/\/s.tmimgcdn.com\/blog\/wp-content\/uploads\/2019\/05\/gutcreation6.png?x54449\" alt=\"\" width=\"274\" height=\"786\" data-lazy-loaded=\"true\" \/><\/a><\/p>\n<div class=\"spacer\"><\/div>\n<h3>Adici\u00f3n de t\u00edtulos<\/h3>\n<div class=\"spacer\"><\/div>\n<p>Para facilitar la navegaci\u00f3n y hacer que el texto sea m\u00e1s f\u00e1cil de comprender para los lectores, deber\u00edas usar t\u00edtulos. Como lo mencionamos anteriormente, los t\u00edtulos tambi\u00e9n son bloques separados en Gutenberg. La barra de herramientas superior te permite elegir el tama\u00f1o (desde H2 hasta H4), poner el texto en negrita y cursiva y a\u00f1adir un enlace. En general, esas son las mismas configuraciones que se aplican al texto. La barra de herramientas derecha tambi\u00e9n te permite configurar la alineaci\u00f3n y crear Anclas en HTML (de esta forma puedes hacer tablas de contenido clicables en la parte superior de la p\u00e1gina).<\/p>\n<div class=\"spacer\"><\/div>\n<p><a href=\"https:\/\/s.tmimgcdn.com\/blog\/wp-content\/uploads\/2019\/05\/gutcreation7.png?x54449\" target=\"_blank\" rel=\"nofollow\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-154323 aligncenter\" src=\"https:\/\/s.tmimgcdn.com\/blog\/wp-content\/uploads\/2019\/05\/gutcreation7.png?x54449\" alt=\"\" width=\"896\" height=\"521\" data-lazy-loaded=\"true\" \/><\/a><\/p>\n<div class=\"spacer\"><\/div>\n<h3>Adici\u00f3n de galer\u00edas de im\u00e1genes<\/h3>\n<div class=\"spacer\"><\/div>\n<p>En\u00a0el caso de Gutenberg, puedes subir una galer\u00eda de im\u00e1genes de la misma forma que subes una imagen\u00a0individual (la \u00fanica diferencia es que no\u00a0se te permite\u00a0subirla desde la URL). Despu\u00e9s de\u00a0subir\u00a0un n\u00famero de im\u00e1genes, puedes a\u00f1adir\u00a0a\u00fan m\u00e1s cada vez que quieras con solo hacer clic en el bot\u00f3n \"Subir una imagen\". Puedes a\u00f1adir\u00a0un t\u00edtulo\u00a0a\u00a0cada imagen\u00a0al solo escribirlo sobre esta imagen, o haz clic en el bot\u00f3n \"Editar galer\u00eda\" en la barra de herramientas superior y a\u00f1ade t\u00edtulos, textos alternativos y descripciones. La barra\u00a0\"Bloque\"\u00a0en la barra\u00a0de herramientas derecha te permite establecer el n\u00famero de columnas en la galer\u00eda mostrada, recortar las im\u00e1genes (para que\u00a0tengan los mismos tama\u00f1os) y a\u00f1adir enlaces.<\/p>\n<div class=\"spacer\"><\/div>\n<p><a href=\"https:\/\/s.tmimgcdn.com\/blog\/wp-content\/uploads\/2019\/05\/gutcreation8.png?x54449\" target=\"_blank\" rel=\"nofollow\"><img decoding=\"async\" loading=\"lazy\" class=\" wp-image-154324 aligncenter\" src=\"https:\/\/s.tmimgcdn.com\/blog\/wp-content\/uploads\/2019\/05\/gutcreation8.png?x54449\" alt=\"\" width=\"871\" height=\"509\" data-lazy-loaded=\"true\" \/><\/a><\/p>\n<div class=\"spacer\"><\/div>\n<h3>Otros bloques\u00a0frecuentemente utilizados\u00a0en Gutenberg de WordPress<\/h3>\n<div class=\"spacer\"><\/div>\n<h4>Portada<\/h4>\n<p>Se trata de\u00a0una superposici\u00f3n con algunas im\u00e1genes en color con un texto escrito sobre ellas. La barra de herramientas superior ofrece todas las opciones comunes\u00a0de personalizaci\u00f3n de textos o im\u00f1agenes (al hacer clic en una imagen puedes personalizarla por separado). En la pesta\u00f1a \"Bloque\" de la barra de herramientas derecha\u00a0puedes\u00a0configurar el tama\u00f1o y los colores del texto, el punto focal, el color de superposici\u00f3n y la opacidad del fondo de la imagen.<\/p>\n<div class=\"spacer\"><\/div>\n<p><a href=\"https:\/\/s.tmimgcdn.com\/blog\/wp-content\/uploads\/2019\/05\/cover.png?x54449\" target=\"_blank\" rel=\"nofollow\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-154311 aligncenter\" src=\"https:\/\/s.tmimgcdn.com\/blog\/wp-content\/uploads\/2019\/05\/cover.png?x54449\" alt=\"\" width=\"708\" height=\"515\" data-lazy-loaded=\"true\" \/><\/a><\/p>\n<div class=\"spacer\"><\/div>\n<p><a href=\"https:\/\/s.tmimgcdn.com\/blog\/wp-content\/uploads\/2019\/05\/cover2.png?x54449\" target=\"_blank\" rel=\"nofollow\"><img decoding=\"async\" loading=\"lazy\" class=\" wp-image-154312 aligncenter\" src=\"https:\/\/s.tmimgcdn.com\/blog\/wp-content\/uploads\/2019\/05\/cover2.png?x54449\" alt=\"\" width=\"763\" height=\"550\" data-lazy-loaded=\"true\" \/><\/a><\/p>\n<div class=\"spacer\"><\/div>\n<h4>Medios y textos<\/h4>\n<p>\u00c9ste es el\u00a0bloque excelente para publicar frases cortas y pegadizas o anuncios. A\u00f1ade a la p\u00e1gina una imagen con\u00a0un texto corto colocado a la izquierda o a la derecha de ella. Todas las opciones de personalizaci\u00f3n y barras de herramientas son casi\u00a0id\u00e9nticas\u00a0a aquellas del bloque de portada: configuraciones separadas\u00a0de imagen y\u00a0de texto.<\/p>\n<div class=\"spacer\"><\/div>\n<p><a href=\"https:\/\/s.tmimgcdn.com\/blog\/wp-content\/uploads\/2019\/05\/mediatext.png?x54449\" target=\"_blank\" rel=\"nofollow\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-154329 aligncenter\" src=\"https:\/\/s.tmimgcdn.com\/blog\/wp-content\/uploads\/2019\/05\/mediatext.png?x54449\" alt=\"\" width=\"830\" height=\"570\" data-lazy-loaded=\"true\" \/><\/a><\/p>\n<div class=\"spacer\"><\/div>\n<h4>Lista<\/h4>\n<p>Ya sabes que\u00a0los p\u00e1rrafos y los\u00a0t\u00edtulos se insertan como bloques separados, y las listas no son una excepci\u00f3n.\u00a0Cada vez que quieres\u00a0a\u00f1adir una lista numerada o una lista con vi\u00f1etas al texto,\u00a0debes usar este bloque. La barra de herramientas superior te permite elegir el tipo de lista, crear niveles adicionales y personalizar el texto.<\/p>\n<div class=\"spacer\"><\/div>\n<p><a href=\"https:\/\/s.tmimgcdn.com\/blog\/wp-content\/uploads\/2019\/05\/list.png?x54449\" target=\"_blank\" rel=\"nofollow\"><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-154328 aligncenter\" src=\"https:\/\/s.tmimgcdn.com\/blog\/wp-content\/uploads\/2019\/05\/list.png?x54449\" alt=\"\" width=\"773\" height=\"297\" data-lazy-loaded=\"true\" \/><\/a><\/p>\n<div class=\"spacer\"><\/div>\n<h4>Cita<\/h4>\n<p>Las frases m\u00e1s interesantes o importantes\u00a0se pueden resaltar con\u00a0el bloque Cita. La barra de herramientas superior contiene todas las configuraciones\u00a0de personalizaci\u00f3n del texto, por lo que no hay nada complicado. El men\u00fa a la derecha\u00a0te deja elegir entre dos estilos de cita.<\/p>\n<div class=\"spacer\"><\/div>\n<p><a href=\"https:\/\/s.tmimgcdn.com\/blog\/wp-content\/uploads\/2019\/05\/quote.png?x54449\" target=\"_blank\" rel=\"nofollow\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-154333 aligncenter\" src=\"https:\/\/s.tmimgcdn.com\/blog\/wp-content\/uploads\/2019\/05\/quote.png?x54449\" alt=\"\" width=\"827\" height=\"374\" data-lazy-loaded=\"true\" \/><\/a><\/p>\n<div class=\"spacer\"><\/div>\n<h4>Video<\/h4>\n<p>Si\u00a0necesitas incrustar un video de YouTube o Vimeo,\u00a0te recomendamos usar\u00a0el bloque de inserci\u00f3n especial. Sin embargo, el bloque Video\u00a0sirve perfectamente para subir\u00a0videos desde el dispositivo\u00a0en el que est\u00e1s creando\u00a0tu sitio web. Puedes escribir el\u00a0t\u00edtulo justo debajo del video o hacer clic en el bot\u00f3n \"Editar\" y abrirlo en la biblioteca de Medios.<\/p>\n<h3>Bloques incrustados<\/h3>\n<div class=\"spacer\"><\/div>\n<p>El editor Gutenberg\u00a0cuenta con un conjunto de bloques que realmente\u00a0nos impresionaron, y ellos son Bloques insertados. Hay una gran cantidad de bloques especializados para las redes sociales m\u00e1s populares como YouTube, Facebook, Instagram y Twitter. Adem\u00e1s,\u00a0te permiten insertar en tu p\u00e1gina algunos productos de Amazon y TED, o videos de Vimeo, audios de SoundCloud\u00a0u ofertas de Kickstarter.\u00a0El editor cl\u00e1sico te permite hacerlo solo con un complemento especial y debes usar un complemento separado para casi cada medio particular. Y ahora los tienes todos en un solo lugar.<\/p>\n<div class=\"spacer\"><\/div>\n<p><a href=\"https:\/\/s.tmimgcdn.com\/blog\/wp-content\/uploads\/2019\/05\/embeds.png?x54449\" target=\"_blank\" rel=\"nofollow\"><img decoding=\"async\" loading=\"lazy\" class=\" wp-image-154313 aligncenter\" src=\"https:\/\/s.tmimgcdn.com\/blog\/wp-content\/uploads\/2019\/05\/embeds.png?x54449\" alt=\"\" width=\"364\" height=\"392\" data-lazy-loaded=\"true\" \/><\/a><\/p>\n<div class=\"spacer\"><\/div>\n<hr \/>\n<div class=\"spacer\"><\/div>\n<h2>\u00bfC\u00f3mo a\u00f1adir bloques personalizados al nuevo constructor de sitios web de WordPress?<\/h2>\n<div class=\"spacer\"><\/div>\n<p>Muchos desarrolladores que esperaban ansiosamente el lanzamiento de Gutenberg comenzaron a crear complementos y <a href=\"https:\/\/www.templatemonster.com\/es\/wordpress-5-0-themes\/\" target=\"_blank\" rel=\"noopener noreferrer\">plantillas para WordPress 5.0<\/a> hace m\u00e1s de un a\u00f1o. Algunos de ellos pensaron que ser\u00eda genial expandir las\u00a0funciones predeterminas del editor y a\u00f1adir algunos bloques nuevos y personalizados a su men\u00fa. Es por eso que ahora hay muchos complementos para WordPress 5.0 que\u00a0permiten a\u00f1adir nuevos bloques al men\u00fa de Gutenberg. Puedes instalarlos\u00a0al igual que\u00a0cualquier otro complemento: desc\u00e1rgalos a tu computadora, ve a\u00a0Plugins &gt; A\u00f1adir nuevo &gt; Subir plugin. Despu\u00e9s de activarlo, se aparecer\u00e1n bloques adicionales en\u00a0la lista de bloques disponibles. Incluso podemos recomendarte algunos de ellos.<\/p>\n<div class=\"spacer\"><\/div>\n<h3>JetGuten<\/h3>\n<div class=\"spacer\"><\/div>\n<p><a href=\"https:\/\/s.tmimgcdn.com\/blog\/wp-content\/uploads\/2019\/05\/jetguten-1.png?x54449\" target=\"_blank\" rel=\"nofollow\"><img decoding=\"async\" loading=\"lazy\" class=\" wp-image-154327 aligncenter\" src=\"https:\/\/s.tmimgcdn.com\/blog\/wp-content\/uploads\/2019\/05\/jetguten-1.png?x54449\" alt=\"\" width=\"786\" height=\"256\" data-lazy-loaded=\"true\" \/><\/a><\/p>\n<div class=\"spacer\"><\/div>\n<p>La compa\u00f1\u00eda ZEMEZ cre\u00f3 una excelente colecci\u00f3n de complementos Jet para Elementor Page Builder y Gutenberg Editor. A\u00f1ade 9 nuevos bloques \u00fatiles al men\u00fa de Gutenberg y algunos m\u00e1s estar\u00e1n disponibles pr\u00f3ximamente. El complemento\u00a0se entrega con el mejor soporte t\u00e9cnico 24\/7.<\/p>\n<div class=\"spacer\"><\/div>\n<h3><a href=\"https:\/\/wordpress.org\/plugins\/ultimate-addons-for-gutenberg\/\" target=\"_blank\" rel=\"nofollow\">Gutenberg Blocks<\/a><\/h3>\n<div class=\"spacer\"><\/div>\n<p><a href=\"https:\/\/s.tmimgcdn.com\/blog\/wp-content\/uploads\/2019\/05\/plugin.png?x54449\" target=\"_blank\" rel=\"nofollow\"><img decoding=\"async\" loading=\"lazy\" class=\" wp-image-154332 aligncenter\" src=\"https:\/\/s.tmimgcdn.com\/blog\/wp-content\/uploads\/2019\/05\/plugin.png?x54449\" alt=\"\" width=\"837\" height=\"268\" data-lazy-loaded=\"true\" \/><\/a><\/p>\n<div class=\"spacer\"><\/div>\n<p>Este gran complemento a\u00f1ade 22 bloques profesionalmente desarrollados y convenientes a\u00a0tu lista de bloques.\u00a0Se cre\u00f3 por el equipo de Brainstorm Force y tiene\u00a0calificaciones excepcionalmente buenas en WordPress.org. El plugin\u00a0tiene un dise\u00f1o perfecto y funciona con Gutenberg sin problemas\u00a0ni errores.<\/p>\n<div class=\"spacer\"><\/div>\n<h3><a href=\"https:\/\/wordpress.org\/plugins\/stackable-ultimate-gutenberg-blocks\/\" target=\"_blank\" rel=\"nofollow\">Stackable<\/a><\/h3>\n<div class=\"spacer\"><\/div>\n<p><a href=\"https:\/\/s.tmimgcdn.com\/blog\/wp-content\/uploads\/2019\/05\/stackable-1.png?x54449\" target=\"_blank\" rel=\"nofollow\"><img decoding=\"async\" loading=\"lazy\" class=\" wp-image-154335 aligncenter\" src=\"https:\/\/s.tmimgcdn.com\/blog\/wp-content\/uploads\/2019\/05\/stackable-1.png?x54449\" alt=\"\" width=\"870\" height=\"279\" data-lazy-loaded=\"true\" \/><\/a><\/p>\n<div class=\"spacer\"><\/div>\n<p>Con este complemento obtienes 23\u00a0bloques cuidadosamente construidos y reunidos en una sola colecci\u00f3n. El equipo de Gambit Technologies lo actualiza constantemente para que no tenga problemas con su uso. Este complemento tambi\u00e9n\u00a0se califica altamente por los visitantes de WordPress.org: 123 de 133 usuarios le dieron cinco estrellas!<\/p>\n<hr \/>\n<div class=\"spacer\"><\/div>\n<p>Esperamos\u00a0que estos consejos sean suficientes para comenzar a\u00a0trabajar con Gutenberg. Por supuesto, hay muchos detalles que no\u00a0mencionamos en este peque\u00f1o tutorial de Gutenberg, pero\u00a0todo el resto\u00a0se hace\u00a0claro, cuando empieces a crear tu sitio web.<\/p>\n<p>Fuente: \"<a href=\"https:\/\/monsterspost.com\/gutenberg-wordpress-editor\/\" target=\"_blank\" rel=\"noopener noreferrer\">WordPress Gutenberg Tutorial: What You Need To Know<\/a>\" por Elizabeth Thistle<\/p>\n","protected":false},"excerpt":{"rendered":"<p>El editor\u00a0Gutenberg ocupa la mayor\u00a0atenci\u00f3n por el momento. A algunas personas les gusta y a otras - no,\u00a0algunas destacan sus ventajas, mientras que otras hablan de sus contras. En realidad, no hay\u00a0ning\u00fan constructor\u00a0web absolutamente perfecto en la Web,\u00a0como todos\u00a0ellos tienen sus desventajas, y por supuesto, Gutenberg tambi\u00e9n los tiene. Por otro lado, tambi\u00e9n tiene muchas [&hellip;]<\/p>\n","protected":false},"author":1334762,"featured_media":15794,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[13,37],"tags":[479,442],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v19.11 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Tutorial de Gutenberg de WordPress: Todo lo que debes saber<\/title>\n<meta name=\"description\" content=\"Hoy te proporcionamos un tutorial paso a paso que te gu\u00ede a trav\u00e9s de Gutenberg.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/monsterspost.com\/es\/tutorial-de-gutenberg-de-wordpress-todo-lo-que-debes-saber\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tutorial de Gutenberg de WordPress: Todo lo que debes saber\" \/>\n<meta property=\"og:description\" content=\"Hoy te proporcionamos un tutorial paso a paso que te gu\u00ede a trav\u00e9s de Gutenberg.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/monsterspost.com\/es\/tutorial-de-gutenberg-de-wordpress-todo-lo-que-debes-saber\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog de TemplateMonster\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/TemplateMonsterEspana\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/profile.php?id=100004881674652\" \/>\n<meta property=\"article:published_time\" content=\"2019-05-22T10:16:27+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-05-08T07:31:32+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2019\/05\/Gutenberg-900x538.png\" \/>\n\t<meta property=\"og:image:width\" content=\"900\" \/>\n\t<meta property=\"og:image:height\" content=\"538\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Diane Parks\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@TMonster_ES\" \/>\n<meta name=\"twitter:site\" content=\"@TMonster_ES\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Diane Parks\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"16 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/monsterspost.com\/es\/tutorial-de-gutenberg-de-wordpress-todo-lo-que-debes-saber\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/monsterspost.com\/es\/tutorial-de-gutenberg-de-wordpress-todo-lo-que-debes-saber\/\"},\"author\":{\"name\":\"Diane Parks\",\"@id\":\"https:\/\/monsterspost.com\/es\/#\/schema\/person\/9347a229c99d039260b529468e03bb3c\"},\"headline\":\"Tutorial de Gutenberg de WordPress: Todo lo que debes saber\",\"datePublished\":\"2019-05-22T10:16:27+00:00\",\"dateModified\":\"2020-05-08T07:31:32+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/monsterspost.com\/es\/tutorial-de-gutenberg-de-wordpress-todo-lo-que-debes-saber\/\"},\"wordCount\":3230,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/monsterspost.com\/es\/#organization\"},\"keywords\":[\"gutenberg\",\"tutorial de wordpress\"],\"articleSection\":[\"Tutoriales\",\"WordPress\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/monsterspost.com\/es\/tutorial-de-gutenberg-de-wordpress-todo-lo-que-debes-saber\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/monsterspost.com\/es\/tutorial-de-gutenberg-de-wordpress-todo-lo-que-debes-saber\/\",\"url\":\"https:\/\/monsterspost.com\/es\/tutorial-de-gutenberg-de-wordpress-todo-lo-que-debes-saber\/\",\"name\":\"Tutorial de Gutenberg de WordPress: Todo lo que debes saber\",\"isPartOf\":{\"@id\":\"https:\/\/monsterspost.com\/es\/#website\"},\"datePublished\":\"2019-05-22T10:16:27+00:00\",\"dateModified\":\"2020-05-08T07:31:32+00:00\",\"description\":\"Hoy te proporcionamos un tutorial paso a paso que te gu\u00ede a trav\u00e9s de Gutenberg.\",\"breadcrumb\":{\"@id\":\"https:\/\/monsterspost.com\/es\/tutorial-de-gutenberg-de-wordpress-todo-lo-que-debes-saber\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/monsterspost.com\/es\/tutorial-de-gutenberg-de-wordpress-todo-lo-que-debes-saber\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/monsterspost.com\/es\/tutorial-de-gutenberg-de-wordpress-todo-lo-que-debes-saber\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/monsterspost.com\/es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tutorial de Gutenberg de WordPress: Todo lo que debes saber\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/monsterspost.com\/es\/#website\",\"url\":\"https:\/\/monsterspost.com\/es\/\",\"name\":\"Blog de TemplateMonster\",\"description\":\"Just another MonsterPost Sites site\",\"publisher\":{\"@id\":\"https:\/\/monsterspost.com\/es\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/monsterspost.com\/es\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/monsterspost.com\/es\/#organization\",\"name\":\"MonstersPost Espa\u00f1a\",\"url\":\"https:\/\/monsterspost.com\/es\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/monsterspost.com\/es\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2020\/03\/Logo-TM.png\",\"contentUrl\":\"https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2020\/03\/Logo-TM.png\",\"width\":180,\"height\":180,\"caption\":\"MonstersPost Espa\u00f1a\"},\"image\":{\"@id\":\"https:\/\/monsterspost.com\/es\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.instagram.com\/template_monster\/\",\"https:\/\/www.pinterest.com\/templatemonster\/\",\"https:\/\/www.youtube.com\/user\/TemplateMonsterCo\/\",\"https:\/\/www.facebook.com\/TemplateMonsterEspana\",\"https:\/\/twitter.com\/TMonster_ES\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/monsterspost.com\/es\/#\/schema\/person\/9347a229c99d039260b529468e03bb3c\",\"name\":\"Diane Parks\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/monsterspost.com\/es\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/9dc57114df7de4f9c97b5d1f73e7c5ff?s=96&d=https%3A%2F%2Fmonsterspost.com%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/9dc57114df7de4f9c97b5d1f73e7c5ff?s=96&d=https%3A%2F%2Fmonsterspost.com%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g\",\"caption\":\"Diane Parks\"},\"description\":\"Diane trabja como una redactora del blog MonsterPost Espa\u00f1a desde hace muchos a\u00f1os. No imagina su vida sin escribir, aprender algo nuevo cada d\u00eda, desarollarse personalmente y profesionalmente, y compartir sus conocimientos y experiencia con los lectores del blog. \u00a1S\u00edguela en Facebook!\",\"sameAs\":[\"https:\/\/www.facebook.com\/profile.php?id=100004881674652\"],\"url\":\"https:\/\/monsterspost.com\/es\/author\/diane\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Tutorial de Gutenberg de WordPress: Todo lo que debes saber","description":"Hoy te proporcionamos un tutorial paso a paso que te gu\u00ede a trav\u00e9s de Gutenberg.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/monsterspost.com\/es\/tutorial-de-gutenberg-de-wordpress-todo-lo-que-debes-saber\/","og_locale":"es_ES","og_type":"article","og_title":"Tutorial de Gutenberg de WordPress: Todo lo que debes saber","og_description":"Hoy te proporcionamos un tutorial paso a paso que te gu\u00ede a trav\u00e9s de Gutenberg.","og_url":"https:\/\/monsterspost.com\/es\/tutorial-de-gutenberg-de-wordpress-todo-lo-que-debes-saber\/","og_site_name":"Blog de TemplateMonster","article_publisher":"https:\/\/www.facebook.com\/TemplateMonsterEspana","article_author":"https:\/\/www.facebook.com\/profile.php?id=100004881674652","article_published_time":"2019-05-22T10:16:27+00:00","article_modified_time":"2020-05-08T07:31:32+00:00","og_image":[{"width":900,"height":538,"url":"https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2019\/05\/Gutenberg-900x538.png","type":"image\/png"}],"author":"Diane Parks","twitter_card":"summary_large_image","twitter_creator":"@TMonster_ES","twitter_site":"@TMonster_ES","twitter_misc":{"Escrito por":"Diane Parks","Tiempo de lectura":"16 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/monsterspost.com\/es\/tutorial-de-gutenberg-de-wordpress-todo-lo-que-debes-saber\/#article","isPartOf":{"@id":"https:\/\/monsterspost.com\/es\/tutorial-de-gutenberg-de-wordpress-todo-lo-que-debes-saber\/"},"author":{"name":"Diane Parks","@id":"https:\/\/monsterspost.com\/es\/#\/schema\/person\/9347a229c99d039260b529468e03bb3c"},"headline":"Tutorial de Gutenberg de WordPress: Todo lo que debes saber","datePublished":"2019-05-22T10:16:27+00:00","dateModified":"2020-05-08T07:31:32+00:00","mainEntityOfPage":{"@id":"https:\/\/monsterspost.com\/es\/tutorial-de-gutenberg-de-wordpress-todo-lo-que-debes-saber\/"},"wordCount":3230,"commentCount":0,"publisher":{"@id":"https:\/\/monsterspost.com\/es\/#organization"},"keywords":["gutenberg","tutorial de wordpress"],"articleSection":["Tutoriales","WordPress"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/monsterspost.com\/es\/tutorial-de-gutenberg-de-wordpress-todo-lo-que-debes-saber\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/monsterspost.com\/es\/tutorial-de-gutenberg-de-wordpress-todo-lo-que-debes-saber\/","url":"https:\/\/monsterspost.com\/es\/tutorial-de-gutenberg-de-wordpress-todo-lo-que-debes-saber\/","name":"Tutorial de Gutenberg de WordPress: Todo lo que debes saber","isPartOf":{"@id":"https:\/\/monsterspost.com\/es\/#website"},"datePublished":"2019-05-22T10:16:27+00:00","dateModified":"2020-05-08T07:31:32+00:00","description":"Hoy te proporcionamos un tutorial paso a paso que te gu\u00ede a trav\u00e9s de Gutenberg.","breadcrumb":{"@id":"https:\/\/monsterspost.com\/es\/tutorial-de-gutenberg-de-wordpress-todo-lo-que-debes-saber\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/monsterspost.com\/es\/tutorial-de-gutenberg-de-wordpress-todo-lo-que-debes-saber\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/monsterspost.com\/es\/tutorial-de-gutenberg-de-wordpress-todo-lo-que-debes-saber\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/monsterspost.com\/es\/"},{"@type":"ListItem","position":2,"name":"Tutorial de Gutenberg de WordPress: Todo lo que debes saber"}]},{"@type":"WebSite","@id":"https:\/\/monsterspost.com\/es\/#website","url":"https:\/\/monsterspost.com\/es\/","name":"Blog de TemplateMonster","description":"Just another MonsterPost Sites site","publisher":{"@id":"https:\/\/monsterspost.com\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/monsterspost.com\/es\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/monsterspost.com\/es\/#organization","name":"MonstersPost Espa\u00f1a","url":"https:\/\/monsterspost.com\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/monsterspost.com\/es\/#\/schema\/logo\/image\/","url":"https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2020\/03\/Logo-TM.png","contentUrl":"https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2020\/03\/Logo-TM.png","width":180,"height":180,"caption":"MonstersPost Espa\u00f1a"},"image":{"@id":"https:\/\/monsterspost.com\/es\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.instagram.com\/template_monster\/","https:\/\/www.pinterest.com\/templatemonster\/","https:\/\/www.youtube.com\/user\/TemplateMonsterCo\/","https:\/\/www.facebook.com\/TemplateMonsterEspana","https:\/\/twitter.com\/TMonster_ES"]},{"@type":"Person","@id":"https:\/\/monsterspost.com\/es\/#\/schema\/person\/9347a229c99d039260b529468e03bb3c","name":"Diane Parks","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/monsterspost.com\/es\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/9dc57114df7de4f9c97b5d1f73e7c5ff?s=96&d=https%3A%2F%2Fmonsterspost.com%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/9dc57114df7de4f9c97b5d1f73e7c5ff?s=96&d=https%3A%2F%2Fmonsterspost.com%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g","caption":"Diane Parks"},"description":"Diane trabja como una redactora del blog MonsterPost Espa\u00f1a desde hace muchos a\u00f1os. No imagina su vida sin escribir, aprender algo nuevo cada d\u00eda, desarollarse personalmente y profesionalmente, y compartir sus conocimientos y experiencia con los lectores del blog. \u00a1S\u00edguela en Facebook!","sameAs":["https:\/\/www.facebook.com\/profile.php?id=100004881674652"],"url":"https:\/\/monsterspost.com\/es\/author\/diane\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/monsterspost.com\/es\/wp-json\/wp\/v2\/posts\/15772"}],"collection":[{"href":"https:\/\/monsterspost.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/monsterspost.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/monsterspost.com\/es\/wp-json\/wp\/v2\/users\/1334762"}],"replies":[{"embeddable":true,"href":"https:\/\/monsterspost.com\/es\/wp-json\/wp\/v2\/comments?post=15772"}],"version-history":[{"count":5,"href":"https:\/\/monsterspost.com\/es\/wp-json\/wp\/v2\/posts\/15772\/revisions"}],"predecessor-version":[{"id":23321,"href":"https:\/\/monsterspost.com\/es\/wp-json\/wp\/v2\/posts\/15772\/revisions\/23321"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/monsterspost.com\/es\/wp-json\/wp\/v2\/media\/15794"}],"wp:attachment":[{"href":"https:\/\/monsterspost.com\/es\/wp-json\/wp\/v2\/media?parent=15772"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/monsterspost.com\/es\/wp-json\/wp\/v2\/categories?post=15772"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/monsterspost.com\/es\/wp-json\/wp\/v2\/tags?post=15772"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}