Tabla de contenidos:<\/p>
- \u00bfQu\u00e9 es Gutenberg en WordPress?<\/a><\/li>
- Ventajas del editor Gutenberg<\/a>
- Edici\u00f3n basada en bloques<\/a><\/li>
- Interfaz visual e intuitiva<\/a><\/li>
- Bloques reutilizables<\/a><\/li>
- Inserci\u00f3n de bloques sencilla<\/a><\/li>
- Personalizaci\u00f3n avanzada<\/a><\/li>
- Compatibilidad con plugins y extensiones<\/a><\/li>
- Optimizaci\u00f3n para dispositivos m\u00f3viles<\/a><\/li>
- Plantillas de bloques<\/a><\/li>
- Integraci\u00f3n de multimedia mejorada<\/a><\/li>
- Compatibilidad con temas modernos<\/a><\/li><\/ul><\/li>
- Inconvenientes de Gutenberg<\/a><\/li>
- 8 bloques del editor Gutenberg que debes conocer<\/a>
- Bloque de texto<\/a><\/li>
- Bloque de medios<\/a><\/li>
- Bloque de dise\u00f1o<\/a><\/li>
- Bloque de Widgets<\/a><\/li>
- Bloque de tema<\/a><\/li>
- Bloque de incrustados<\/a><\/li>
- Bloque WooCommerce<\/a><\/li>
- Bloque WooCommerce Elements<\/a><\/li><\/ul><\/li>
- C\u00f3mo usar el editor de bloques de Gutenberg<\/a>
- Paso 1: Instala Gutenberg editor WordPress<\/a><\/li>
- Paso 2: A\u00f1ade un nuevo bloque al editor Gutenberg de WordPress<\/a><\/li>
- Paso 3: Inserta un texto en editor de Gutenberg<\/a><\/li>
- Paso 4: A\u00f1ade im\u00e1genes y v\u00eddeos en Gutenberg editor<\/a><\/li>
- Paso 5: Agrega un bloque columnas Gutenberg<\/a><\/li>
- Paso 6: Crea bloques reutilizables WordPress<\/a><\/li>
- Paso 7: Copia los bloques en Gutenberg<\/a><\/li><\/ul><\/li>
- C\u00f3mo desactivar Gutenberg en WordPress<\/a><\/li>
- 10 consejos para sacarle el m\u00e1ximo partido a Gutenberg<\/a><\/li>
- 10 plugins imprescindibles para Gutenberg WordPress<\/a>
- Gutenberg Blocks with AI by Kadence WP \u2013 Page Builder Features<\/a><\/li>
- GenerateBlocks<\/a><\/li>
- Genesis Blocks<\/a><\/li>
- Gutenberg Blocks \u2013 PublishPress Blocks Gutenberg Editor Plugin<\/a><\/li>
- Stackable \u2013 Page Builder Gutenberg Blocks<\/a><\/li>
- Ghost Kit \u2013 Page Builder Blocks & Extensions<\/a><\/li>
- Essential Blocks – Page Builder Gutenberg WordPress<\/a><\/li>
- Spectra \u2013 WordPress Gutenberg Blocks<\/a><\/li>
- Orbit Fox by ThemeIsle<\/a><\/li>
- Getwid – Gutenberg Blocks<\/a><\/li><\/ul><\/li>
- \u00bfCu\u00e1l ha sido tu experiencia con Gutenberg? \u00bfQu\u00e9 otras funcionalidades te gustar\u00eda ver en el futuro?<\/a><\/li><\/ul><\/div>\n\n
\u00bfQu\u00e9 es Gutenberg en WordPress?<\/span><\/h2>\n
Gutenberg WordPress fue lanzado en 2018 con la versi\u00f3n 5.0 de WordPress, con el objetivo de reemplazar al editor TinyMCE y ofrecer una nueva forma de crear entradas y p\u00e1ginas m\u00e1s interactivas.<\/p>\n
Durante la versi\u00f3n 5.0 de WordPress se generaron opiniones encontradas. A pesar de a\u00f1adir nuevas funcionalidades que promet\u00edan hacer su uso m\u00e1s accesible, como es habitual en estos casos, surgieron controversias entre seguidores y detractores de esta versi\u00f3n y de sus nuevas caracter\u00edsticas.<\/p>\n
El foco de la pol\u00e9mica estaba en la posible eliminaci\u00f3n del cl\u00e1sico panel de edici\u00f3n WYSIWYG de TinyMCE, reemplazado por el nuevo editor Gutenberg. Aunque la meta principal de Gutenberg era simplificar y flexibilizar el proceso de publicaci\u00f3n a trav\u00e9s del uso de bloques, las versiones beta iniciales tuvieron bastantes errores, lo que desat\u00f3 las cr\u00edticas y dej\u00f3 insatisfechas las expectativas de muchos.<\/p>\n
![\"Gutenberg](\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2024\/06\/Gutenberg-Plugin-WordPress-300x130.png\" "\\"\\"")
<\/p>\nCon la actualizaci\u00f3n a WordPress 5.9, Gutenberg dej\u00f3 de ser un mero editor de contenido para convertirse en una herramienta de personalizaci\u00f3n capaz de generar una experiencia completa en la edici\u00f3n de sitios web. Gracias a estas mejoras, hoy en d\u00eda ya es posible dise\u00f1ar y estructurar todo tu sitio de WordPress utilizando Gutenberg.<\/p>\n
\u00bfPero qu\u00e9 es Gutenberg exactamente? Te cuento.<\/p>\n
El editor Gutenberg est\u00e1 basado en bloques e incluye todos los elementos necesarios para crear p\u00e1ginas web: p\u00e1rrafos, encabezados, listas, botones, widgets, incrustaciones, columnas, etc. M\u00e1s adelante te ense\u00f1ar\u00e9 estos elementos para que los veas.<\/p>\n
Adem\u00e1s, el editor Gutenberg tambi\u00e9n cuenta con una representaci\u00f3n visual mejorada de la p\u00e1gina, lo que lo hace m\u00e1s similar a un constructor de p\u00e1ginas (page builder<\/i>) que al editor cl\u00e1sico de WordPress.<\/p>\n
En la actualidad, sigue habiendo debate dentro de la comunidad sobre algunos problemas que han llevado al plugin Gutenberg<\/a><\/strong> a recibir rese\u00f1as poco favorables en el repositorio de plugins de WordPress. Como se suele decir, una imagen vale m\u00e1s que mil palabras:<\/p>\n
![\"gutenberg-wordpress-opiniones\"](\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2024\/06\/gutenberg-wordpress-opiniones-300x259.png\" "\\"\\"")
<\/p>\nAlgunas de las rese\u00f1as negativas que ves en la imagen anterior cuestionan la falta de usabilidad, la ruptura en los estilos CSS<\/a> predeterminados de Gutenberg, los cambios de bloque en WooCommerce y la gesti\u00f3n del dise\u00f1o, entre otros aspectos.<\/p>\n
Ten en cuenta que, cuando se lanz\u00f3 por primera vez y se pas\u00f3 de un editor cl\u00e1sico de texto a un editor basado en bloques, la curva de aprendizaje no fue f\u00e1cil para todos los usuarios (con la correspondiente frustraci\u00f3n y resistencia al cambio).<\/p>\n
M\u00e1s all\u00e1 de los gustos de cada uno, lo que es innegable es que los desarrolladores de la comunidad WordPress trabajan en actualizaciones frecuentes que incluyen nuevas caracter\u00edsticas, mejoras de rendimiento y correcci\u00f3n de errores para que Gutenberg sea cada vez m\u00e1s vers\u00e1til y m\u00e1s potente.<\/p>\n
Ahora que ya sabes qu\u00e9 es Gutenberg, quiero que conozcas lo que te puede ofrecer este editor, \u00bfok? \ud83d\ude09<\/p>\n
Ventajas del editor Gutenberg<\/span><\/h2>\n
La funcionalidad drag-and-drop (arrastrar y soltar), las opciones avanzadas de dise\u00f1o, una interfaz m\u00e1s visual e intuitiva… Son muchos los motivos por los que Gutenberg ha venido a establecer un nuevo est\u00e1ndar en la edici\u00f3n de contenido en WordPress.<\/p>\n
\u00a1Ojo! Debes tener en cuenta que el editor Gutenberg es el editor por defecto que encontrar\u00e1s actualmente en WordPress. Si deseas usar el editor cl\u00e1sico, tendr\u00e1s que instalar un plugin espec\u00edfico para ello. Te cuento m\u00e1s en detalle al final de este post \ud83d\ude0a<\/p>\n
En esta secci\u00f3n, voy a descubrirte las ventajas que hacen de Gutenberg un editor moderno, flexible y vers\u00e1til con el que dar forma al contenido de tu web.<\/p>\n
Edici\u00f3n basada en bloques<\/span><\/h3>\n
Gutenberg cuenta con un sistema de bloques donde cada elemento de contenido (p\u00e1rrafos, im\u00e1genes, videos, citas, listas, etc.) es un bloque independiente que puedes personalizar y colocar donde desees. Esto te permite una mayor flexibilidad y control sobre el dise\u00f1o y la estructura del contenido que est\u00e1s creando.<\/p>\n
![\"Bloques](\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2024\/06\/Bloques-Editor-Gutenberg-WordPress-143x300.png\" "\\"\\"")
<\/p>\nInterfaz visual e intuitiva<\/span><\/h3>\n
Parte integral de lo que es Gutenberg es la experiencia de edici\u00f3n visual y de tipo WYSIWYG (What You See Is What You Get), que te permite visualizar el contenido final mientras est\u00e1s editando y eliminando, sin la necesidad de alternar entre la vista de edici\u00f3n y la vista previa (que era lo que ten\u00edamos que hacer cuando us\u00e1bamos el editor cl\u00e1sico). Con los bloques Gutenberg, puedes ver c\u00f3mo va a quedar tu web mientras la maquetas.<\/p>\n
![\"bloques-gutenberg-wordpress\"](\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2024\/06\/bloques-gutenberg-wordpress-224x300.png\" "\\"\\"")
<\/p>\nBloques reutilizables<\/span><\/h3>\n
Puedes crear bloques reutilizables para ahorrar tiempo y mantener la coherencia en todo el contenido web. Una vez configurado un bloque reutilizable, puedes insertarlo en cualquier parte de tu sitio web. Qu\u00e9date hasta el final, ya que te ense\u00f1ar\u00e9 c\u00f3mo crear un bloque reutilizable en el editor Gutenberg.<\/p>\n
![\"gutenberg-block-editor\"](\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2024\/06\/gutenberg-block-editor-235x300.png\" "\\"\\"")
<\/p>\nInserci\u00f3n de bloques sencilla<\/span><\/h3>\n
Puedes a\u00f1adir nuevos bloques de forma f\u00e1cil y r\u00e1pida, simplemente con el bot\u00f3n \u00ab+\u00bb disponible en el editor. Gutenberg tambi\u00e9n permite arrastrar y soltar bloques para reorganizar el contenido de manera intuitiva.<\/p>\n
![\"gutenberg-editor-wordpress\"](\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2024\/06\/gutenberg-editor-wordpress-300x187.png\" "\\"\\"")
<\/p>\nPersonalizaci\u00f3n avanzada<\/span><\/h3>\n
Cada bloque en Gutenberg es totalmente personalizable y puedes realizar configuraciones espec\u00edficas para cada tipo de bloque. Mira el ejemplo del bloque de p\u00e1rrafo, donde puedes establecer alineaci\u00f3n, colores, estilos de texto y todo lo que se te ocurra:<\/p>\n
![\"wordpress](\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2024\/06\/wordpress-gutenberg-editor-162x300.png\" "\\"\\"")
<\/p>\nCompatibilidad con plugins y extensiones<\/span><\/h3>\n
Gutenberg es compatible con numerosos plugins que a\u00f1aden bloques adicionales o mejoran los existentes, lo que sirve para ampliar a\u00fan m\u00e1s las funcionalidades del editor.<\/p>\n
Sigue leyendo hasta el final, que voy a recomendarte algunos de mis preferidos \ud83d\ude09<\/p>\n
![\"editor](\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2024\/06\/editor-de-texto-gutenberg-300x86.png\" "\\"\\"")
<\/p>\nOptimizaci\u00f3n para dispositivos m\u00f3viles<\/span><\/h3>\n
El editor Gutenberg est\u00e1 dise\u00f1ado para ser responsive, por lo que funciona bien tanto en dispositivos m\u00f3viles como en tablets, permitiendo editar y gestionar contenido sobre la marcha.<\/p>\n
![\"como](\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2024\/06\/como-usar-gutenberg-wordpress.png\" "\\"\\"")
<\/p>\nPlantillas de bloques<\/span><\/h3>\n
Puedes crear plantillas personalizadas de bloques para reutilizarlas en diferentes p\u00e1ginas y publicaciones, lo que (una vez m\u00e1s) mejora tanto la eficiencia del proceso de dise\u00f1o como la coherencia del resultado final.<\/p>\n
![\"gutenberg](\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2024\/06\/gutenberg-editor-wordpress-tutorial-copia-300x191.png\" "\\"\\"")
<\/p>\nIntegraci\u00f3n de multimedia mejorada<\/span><\/h3>\n
Gutenberg para WordPress facilita la inserci\u00f3n y la gesti\u00f3n del contenido multimedia porque permite arrastrar y soltar im\u00e1genes, videos y otros archivos directamente en el editor.<\/p>\n
![\"gutenberg](\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2024\/06\/gutenberg-wordpress-que-es-290x300.png\" "\\"\\"")
<\/p>\nCompatibilidad con temas modernos<\/span><\/h3>\n
Muchos temas de WordPress<\/a> est\u00e1n dise\u00f1ados espec\u00edficamente para aprovechar las funciones de Gutenberg para as\u00ed garantizar una integraci\u00f3n m\u00e1s fluida y mejor optimizada con el editor de bloques.<\/p>\n
![\"gutenberg](\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2024\/06\/gutenberg-wordpress-tutorial-300x130.png\" "\\"\\"")
<\/p>\nEstar\u00e1s de acuerdo conmigo en que todas estas caracter\u00edsticas hacen de Gutenberg una herramienta muy vers\u00e1til para la creaci\u00f3n de contenido en WordPress y, adem\u00e1s, mejoran significativamente la experiencia de usuario y la experiencia de dise\u00f1o y gesti\u00f3n de un sitio web.<\/p>\n
Inconvenientes de Gutenberg<\/span><\/h2>\n
Ahora que ya conoces los pros de utilizar el editor Gutenberg, tambi\u00e9n es importante que conozcas sus contras. \u00a1Que tambi\u00e9n los tiene! \ud83d\ude44<\/p>\n
- \n
- Curva de aprendizaje inicial:<\/strong> Para los usuarios acostumbrados al editor cl\u00e1sico de WordPress, la transici\u00f3n a Gutenberg puede llevar tiempo porque hay que familiarizarse con el nuevo flujo de trabajo basado en bloques. Una vez lo aprendes, resulta sencillo y ya no vas a querer volver atr\u00e1s, tambi\u00e9n te lo digo.<\/li>\n
- Compatibilidad con temas y plugins:<\/strong> Algunos temas y plugins pueden presentar alguna incompatibilidad con Gutenberg, lo que puede causar problemas de dise\u00f1o o funcionalidad hasta que se realicen los ajustes y actualizaciones necesarios. Ahora que el editor Gutenberg lleva en WordPress varios a\u00f1os, este problema es cada vez m\u00e1s raro.<\/li>\n
- Personalizaci\u00f3n avanzada limitada:<\/strong> Aunque Gutenberg permite crear bloques personalizados, la personalizaci\u00f3n avanzada requiere conocimientos t\u00e9cnicos adicionales o el uso de plugins espec\u00edficos. Sin embargo, esto ya era cierto con el editor cl\u00e1sico\u2026<\/li>\n
- Dependencia de bloques de terceros:<\/strong> Algunos usuarios pueden encontrar limitaciones en la variedad y funcionalidades de los bloques integrados, lo que puede requerir el uso de bloques adicionales de terceros.<\/li>\n<\/ul>\n
A pesar de estos inconvenientes, que podemos considerar menores, lo cierto es que el editor Gutenberg para WordPress va evolucionando con cada actualizaci\u00f3n, mejorando su funcionalidad y compatibilidad con el ecosistema del CMS.<\/p>\n
8 bloques del editor Gutenberg que debes conocer<\/span><\/h2>\n
Si a\u00fan no sabes qu\u00e9 son los bloques de Gutenberg a los que me he estado refiriendo a lo largo de todo el post, ahora te explicar\u00e9 en qu\u00e9 consisten y qu\u00e9 tipos de bloques ofrece el editor Gutenberg para que los conozcas un poco m\u00e1s al dedillo.<\/p>\n
A ver.<\/p>\n
Los bloques son elementos esenciales del editor Gutenberg de WordPress, ya que son unidades de contenido independientes que a\u00f1ades uno a uno de manera visual para construir las p\u00e1ginas y entradas de tu web completamente a tu gusto.<\/p>\n
Cada bloque cuenta con sus propios ajustes y opciones de personalizaci\u00f3n. Al combinar diferentes bloques, puedes crear una variedad de contenidos y dise\u00f1os en Gutenberg de forma intuitiva y sin necesidad de tener conocimientos t\u00e9cnicos.<\/p>\n
Para que me entiendas mejor, deja que te ense\u00f1e los distintos tipos de bloques que encontrar\u00e1s en tu WordPress.<\/p>\n
Bloque de texto<\/span><\/h3>\n
Los bloques de texto facilitan la creaci\u00f3n de contenido organizado y f\u00e1cil de leer en las entradas y p\u00e1ginas.<\/p>\n
Aqu\u00ed tienes los distintos tipos de bloques de texto que puedes a\u00f1adir a tu p\u00e1gina o entrada (ten en cuenta que cada uno de estos tipos tiene sus propios ajustes, para que personalices del todo el aspecto del resultado final):<\/p>\n
![\"bloque-texto-gutenberg-wordPress\"](\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2024\/06\/Bloque-Texto-Gutenberg-WordPress-233x300.png\" "\\"\\"")
<\/p>\nBloque de medios<\/span><\/h3>\n
Otro de los bloques de Gutenberg disponibles es el bloque de medios, que permite incluir y mostrar todo tipo de contenido multimedia. \u00bfQu\u00e9 tipos de contenido exactamente? Pues mira:<\/p>\n
<\/p>\nBloque de dise\u00f1o<\/span><\/h3>\n
Para crear una p\u00e1gina m\u00e1s llamativa y original, cuentas con el bloque de Gutenberg de dise\u00f1o, que te permite crear estructuras m\u00e1s avanzadas combinando m\u00faltiples elementos en una \u00fanica secci\u00f3n. Por ejemplo, puedes organizar el contenido en columnas, en filas, utilizar separadores\u2026 \u00a1Mira!<\/p>\n
![\"bloques](\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2024\/06\/bloques-diseno-Gutenberg-WordPress-300x296.png\" "\\"\\"")
<\/p>\nBloque de Widgets<\/span><\/h3>\n
Los widgets son componentes de contenido compactos que se pueden insertar en la barra lateral, en el pie de p\u00e1gina o en otras zonas de tu web. Al emplear bloques de Gutenberg de widgets, puedes integrar estas funcionalidades adapt\u00e1ndolas dentro de tu contenido.<\/p>\n
Sin ir m\u00e1s lejos, seguro que has visto muchas veces el bloque de \u201cEntradas m\u00e1s recientes\u201d o \u201c\u00daltimas entradas\u201d en la barra lateral derecha de un blog. Pero mira todas las opciones que puedes a\u00f1adir gracias al bloque de Gutenberg de widgets:<\/p>\n
![\"Bloques](\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2024\/06\/Bloques-Widgets-Gutenberg-WordPress-217x300.png\" "\\"\\"")
<\/p>\nBloque de tema<\/span><\/h3>\n
Los bloques de Gutenberg de tema son propios del tema de WordPress que utilices. Su objetivo es que puedas personalizar el aspecto y la disposici\u00f3n de las publicaciones y p\u00e1ginas y est\u00e1n dise\u00f1ados para integrarse de manera coherente con el estilo visual y el dise\u00f1o del resto del sitio web.<\/p>\n
Esto es a lo que me refiero:<\/p>\n
![\"Bloque](\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2024\/06\/Bloque-Tema-Gutenberg-WordPress-150x300.png\" "\\"\\"")
![\"Bloques](\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2024\/06\/Bloques-Tema-Gutenberg-WordPress-178x300.png\" "\\"\\"")
<\/p>\nBloque de incrustados<\/span><\/h3>\n
Por \u00faltimo, tenemos el bloque de incrustados en Gutenberg, que facilita la integraci\u00f3n de contenido de plataformas externas directamente en tu p\u00e1gina o entrada. Resulta bastante \u00fatil para mostrar contenido de tus redes sociales o v\u00eddeos, por ejemplo, sin necesidad de usar c\u00f3digos complicados.<\/p>\n
Mira todas las aplicaciones de terceros que puedes a\u00f1adir a tu web f\u00e1cilmente a d\u00eda de hoy:<\/p>\n
![\"Bloque](\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2024\/06\/Bloque-incrustados-Gutenberg-WordPress-201x300.png\" "\\"\\"")
\u00a0\u00a0 ![\"Bloques](\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2024\/06\/Bloques-incrustados-Editor-Gutenberg-183x300.png\" "\\"\\"")
<\/p>\nAdem\u00e1s, en el caso de que tengas instalado WooCommerce en tu WordPress, seguramente te aparecer\u00e1n otros bloques de Gutenberg extras. \u00bfTe explico cu\u00e1les son y para qu\u00e9 sirven?<\/p>\n
Bloque WooCommerce<\/span><\/h3>\n
El bloque de Gutenberg de WooCommerce te ayuda a mostrar de forma sencilla y vers\u00e1til los productos de tu e-commerce tanto en las publicaciones como en las p\u00e1ginas de WordPress. Mira todas las opciones que te proporciona, \u00a1puedes elegir todo lo que necesites!<\/p>\n
![\"Bloque](\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2024\/06\/Bloque-WooCommerce-Gutenberg-WordPress-175x300.png\" "\\"\\"")
\u00a0\u00a0 ![\"Bloques](\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2024\/06\/Bloques-WooCommerce-Editor-Gutenberg-150x300.png\" "\\"\\"")
<\/p>\nBloque WooCommerce Elements<\/span><\/h3>\n
Para finalizar la secci\u00f3n de bloques de Gutenberg para WooCommerce, encontrar\u00e1s el bloque \u00abWooCommerce Product Elements\u00bb, que te permite a\u00f1adir el precio de tus productos de forma autom\u00e1tica en una p\u00e1gina:<\/p>\n
![\"Bloque](\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2024\/06\/Bloque-WooCommerce-Product-Elements-Gutenberg-300x148.png\" "\\"\\"")
<\/p>\nPor lo tanto, si tienes una tienda WooCommerce, los bloques de Gutenberg te permitir\u00e1n crear p\u00e1ginas de producto mucho m\u00e1s visuales y llamativas y, \u00a1ojo!, sin romperte la cabeza, porque vas a poder reorganizar y personalizar cada elemento en tiempo real y sin necesidad de conocimientos avanzados de programaci\u00f3n.<\/p>\n
De verdad que, para alguien que tiene una tienda online, los bloques de Gutenberg son man\u00e1 del cielo \ud83d\ude09<\/p>\n
Y ahora que ya conoces cada uno de los tipos de bloques Gutenberg disponibles, ha llegado el momento de ense\u00f1arte m\u00e1s en detalle c\u00f3mo utilizar el editor Gutenberg en tu sitio web, \u00bfno crees?<\/p>\n
Pues vamos a ello.<\/p>\n
C\u00f3mo usar el editor de bloques de Gutenberg<\/span><\/h2>\n
Si ya est\u00e1s habituado a WordPress, sabes que crear y gestionar una p\u00e1gina web con este popular CMS resulta muy f\u00e1cil. Pues con el editor Gutenberg es a\u00fan m\u00e1s sencillo (al menos, desde mi punto de vista y el de muchos expertos).<\/p>\n
Para que veas lo que quiero decir, en esta secci\u00f3n voy a ayudarte a dar tus primeros pasos en el uso de Gutenberg en WordPress para crear y editar bloques en tu sitio web.<\/p>\n
Paso 1: Instala Gutenberg editor WordPress<\/span><\/h3>\n
Si has instalado recientemente WordPress o ya tienes la \u00faltima versi\u00f3n, el editor Gutenberg aparecer\u00e1 por defecto. Por lo tanto, no tendr\u00e1s que hacer nada.<\/p>\n
En caso de que necesites activar Gutenberg en WordPress, el proceso ser\u00e1 el mismo que has seguido hasta ahora para instalar un plugin en tu p\u00e1gina web.<\/p>\n
Por si lo necesitas, te refresco un poco la memoria \ud83d\ude09<\/p>\n
Para instalar Gutenberg en WordPress, ve a la secci\u00f3n de \u201cPlugins\u201d del men\u00fa de tu WordPress y busca el plugin \u201cGutenberg\u201d en el repositorio de WordPress.<\/p>\n
Cuando lo tengas, pulsa en el bot\u00f3n \u201cInstalar ahora\u201d y luego activa el plugin. \u00a1Y listo! Ya lo tienes instalado y activado \ud83d\ude0e<\/p>\n
![\"plugin](\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2024\/06\/plugin-Gutenberg-WordPress-300x166.png\" "\\"\\"")
<\/p>\nPaso 2: A\u00f1ade un nuevo bloque al editor Gutenberg de WordPress<\/span><\/h3>\n
Cada vez que necesites a\u00f1adir bloques Gutenberg, simplemente tendr\u00e1s que pulsar en el icono del signo m\u00e1s (+) que encontrar\u00e1s en la parte superior izquierda del \u00e1rea de edici\u00f3n.<\/p>\n
![\"activar](\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2024\/06\/activar-gutenberg-wordpress-300x43.png\" "\\"\\"")
<\/p>\nAll\u00ed, busca el bloque de Gutenberg que deseas a\u00f1adir a tu espacio de trabajo en WordPress, y haz clic en \u00e9l o arr\u00e1stralo y su\u00e9ltalo en el \u00e1rea de edici\u00f3n.<\/p>\n
\u00a1Y voil\u00e0! \ud83d\ude0a<\/p>\n
Paso 3: Inserta un texto en editor de Gutenberg<\/span><\/h3>\n
Ya sabes c\u00f3mo a\u00f1adir un bloque en Gutenberg, as\u00ed que para a\u00f1adir un bloque de tipo texto solo tienes que ir a los \u201cBloques de texto\u201d de Gutenberg y arrastrar el bloque \u201cP\u00e1rrafo\u201d a tu espacio de trabajo.<\/p>\n
![\"como](\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2024\/06\/como-activar-gutenberg-como-editor-en-wordpress-174x300.png\" "\\"\\"")
<\/p>\nDesde el editor Gutenberg, puedes empezar a escribir el texto que desees. Una vez escrito, puedes realizar diferentes tipos de ajustes desde la barra de herramientas ubicada sobre el texto.<\/p>\n
![\"como](\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2024\/06\/como-usar-editor-gutenberg-300x113.png\" "\\"\\"")
<\/p>\nEn la barra de herramientas del bloque p\u00e1rrafo se ofrecen las siguientes opciones de configuraci\u00f3n:<\/p>\n
- \n
- Transformar este mismo p\u00e1rrafo en otras alternativas como encabezado, lista, cita, columnas, c\u00f3digo, grupo, preformateado, p\u00e1rrafo de cita y verso. Selecciona una de ellas para cambiar de un formato a otro.<\/li>\n
- Arrastrar el bloque de Gutenberg a otra \u00e1rea de tu sitio web.<\/li>\n
- Cambiar la ubicaci\u00f3n del bloque saltando de un bloque a otro.<\/li>\n
- Seleccionar la alineaci\u00f3n del texto (izquierda, centro, derecha).<\/li>\n
- Destacar alguna palabra del p\u00e1rrafo.<\/li>\n
- Resaltar el texto, poni\u00e9ndolo en cursiva.<\/li>\n
- A\u00f1adir alg\u00fan enlace al texto para redirigir a los usuarios a una p\u00e1gina en concreto.<\/li>\n
- Otras funciones adicionales que puedes aplicar al p\u00e1rrafo son c\u00f3digo integrado, entrada de teclado, idioma, imagen integrada, notas al pie de p\u00e1gina, resaltado, sub\u00edndice, super\u00edndice y tachado.<\/li>\n<\/ul>\n
Y a\u00fan hay m\u00e1s.<\/p>\n
![\"editor](\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2024\/06\/editor-texto-Gutenberg-WordPress-128x300.png\" "\\"\\"")
<\/p>\nEn el men\u00fa de la derecha puedes realizar otra serie de ajustes al bloque de p\u00e1rrafo, como:<\/p>\n
- \n
- Color:<\/strong> Aplica color tanto al texto como al fondo.<\/li>\n
- Tipograf\u00eda:<\/strong> Selecciona el tama\u00f1o del texto que desees.<\/li>\n
- Dimensiones:<\/strong> A\u00f1ade relleno en los m\u00e1rgenes horizontales y verticales.<\/li>\n
- Avanzado:<\/strong> Permite a\u00f1adir un anchor HTML para redirigir el tr\u00e1fico de tu web a otra p\u00e1gina.<\/li>\n<\/ul>\n
Ahora s\u00ed que s\u00ed, ya conoces todas las funcionalidades del bloque Gutenberg para p\u00e1rrafos, por lo que est\u00e1s preparado para que el dise\u00f1o de tu web est\u00e9 en consonancia con la identidad de tu marca \ud83d\ude1c<\/p>\n
Paso 4: A\u00f1ade im\u00e1genes y v\u00eddeos en Gutenberg editor<\/span><\/h3>\n
Si quieres a\u00f1adir cualquier tipo de multimedia en tu WordPress, podr\u00e1s hacerlo desde el bloque Medios de Gutenberg. Desde all\u00ed, arrastra el bloque \u201cImagen\u201d al editor Gutenberg.<\/p>\n
![\"insertar](\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2024\/06\/insertar-imagenes-Gutenberg-WordPress-296x300.png\" "\\"\\"")
<\/p>\nVer\u00e1s el panel de edici\u00f3n de \u201cImagen\u201d, donde podr\u00e1s subir el archivo de imagen que deseas a tu sitio web. WordPress te da diferentes alternativas:<\/p>\n
- \n
- Subir el archivo directamente haciendo clic en el bot\u00f3n azul \u201cSubir\u201d. Desde ah\u00ed, podr\u00e1s a\u00f1adir cualquier imagen que tengas guardada en tu ordenador.<\/li>\n
- Si has usado la imagen previamente en tu web, puedes reutilizarla simplemente seleccionando \u201cBiblioteca de medios\u201d.<\/li>\n
- Insertar la URL de la imagen si est\u00e1 alojada en otro servidor.<\/li>\n<\/ul>\n
![\"editor](\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2024\/06\/editor-Gutenberg-WordPress-300x129.png\" "\\"\\"")
<\/p>\nEn el lado derecho, tienes el panel de configuraci\u00f3n donde puedes realizar cambios en la imagen, como los estilos (que puedes elegir entre el predeterminado, redondeado, bordes y marco) y ajustes (donde puedes cambiar la relaci\u00f3n de aspecto, anchura y altura).<\/p>\n
Tambi\u00e9n cuenta con otras opciones en la secci\u00f3n \u00abAvanzado\u00bb, que permiten crear un texto ancla para redirigir a los visitantes a otra p\u00e1gina de tu sitio web.<\/p>\n
Paso 5: Agrega un bloque columnas Gutenberg<\/span><\/h3>\n
Si est\u00e1s en el proceso de dise\u00f1ar la estructura de cada secci\u00f3n de tu web, es importante que sepas c\u00f3mo a\u00f1adir columnas utilizando el bloque de columnas en Gutenberg.<\/p>\n
El proceso para a\u00f1adir este bloque es igual al que hemos estado siguiendo hasta ahora: selecciona y arrastra el bloque a tu \u00e1rea de trabajo en el editor de Gutenberg.<\/p>\n
![\"Bloque](\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2024\/06\/Bloque-columnas-Gutenberg-WordPress-300x300.png\" "\\"\\"")
<\/p>\nCuando a\u00f1adas el bloque de columna en Gutenberg, tendr\u00e1s que elegir una de las distintas opciones de estructura de columnas que se muestran, haciendo clic sobre cualquiera de ellas.<\/p>\n
![\"ajuste](\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2024\/06\/ajuste-bloque-columnas-editor-Gutenberg-300x136.png\" "\\"\\"")
<\/p>\nPara ajustar el bloque de columna en Gutenberg, podr\u00e1s hacerlo desde el panel que encontrar\u00e1s en el lado derecho.<\/p>\n
Las configuraciones que te permiten realizar son los estilos (donde puedes elegir entre por defecto y superposici\u00f3n), el color (permite cambiar el color tanto del texto como del fondo), la tipograf\u00eda (donde puedes seleccionar el tama\u00f1o de la tipograf\u00eda m\u00e1s adecuado para tu web) y las dimensiones (donde puedes a\u00f1adir m\u00e1rgenes tanto horizontales como verticales).<\/p>\n
Por si esto fuera poco, en el apartado \u201cAvanzado\u201d tienes la opci\u00f3n de a\u00f1adir un texto ancla para redirigir a los usuarios a otra secci\u00f3n si as\u00ed lo deseas.<\/p>\n
Paso 6: Crea bloques reutilizables WordPress<\/span><\/h3>\n
Los bloques reutilizables de Gutenberg son una pasada, ya que te ayudan a mejorar la productividad en el desarrollo de tu web.<\/p>\n
Es decir, si has dise\u00f1ado una landing page espec\u00edfica con mucho mimo y mucho esmero, y te ha quedado de 10, puedes reutilizar una secci\u00f3n de esta que consideras que puede encajar en otras p\u00e1ginas de tu web.<\/p>\n
Y s\u00ed, puedes hacerlo todas las veces que quieras.<\/p>\n
En cuanto aprendas a crear un bloque reutilizable en Gutenberg, va a acabar siendo uno de tus favoritos. \u00a1Te lo digo por experiencia! \u263a\ufe0f<\/p>\n
Vamos al l\u00edo, para que puedas usarlo desde ya.<\/p>\n
Cuando hayas insertado el bloque en el editor Gutenberg (es v\u00e1lido para cualquier tipo de bloque), haz clic en los tres puntos que encontrar\u00e1s en la barra de edici\u00f3n para abrir el men\u00fa desplegable, como se muestra en la captura.<\/p>\n
Una vez ah\u00ed, despl\u00e1zate hacia abajo hasta \u00abCrear patr\u00f3n\u00bb y haz clic en \u00e9l.<\/p>\n
![\"crear](\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2024\/06\/crear-patron-Gutenberg-WordPress-300x144.png\" "\\"\\"")
<\/p>\nDespu\u00e9s, ver\u00e1s la siguiente ventana donde tendr\u00e1s que a\u00f1adir el \u00abNombre\u00bb y seleccionar las \u00abCategor\u00edas\u00bb de p\u00e1ginas donde quieres que aparezca el bloque reutilizable. Cuando lo hayas hecho, pulsa en el bot\u00f3n \u00abCrear\u00bb, \u00a1y listo!<\/p>\n
![\"crear](\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2024\/06\/crear-bloques-editor-Gutenberg-252x300.png\" "\\"\\"")
<\/p>\nSi en la configuraci\u00f3n previa no has a\u00f1adido ning\u00fan tipo de categor\u00eda, no pasa nada, lo podr\u00e1s a\u00f1adir f\u00e1cilmente de todas formas. Para a\u00f1adir el bloque reutilizable a Gutenberg, haz clic en el icono de m\u00e1s (+) en la parte superior izquierda del \u00e1rea de edici\u00f3n.<\/p>\n
<\/p>\nCuando se despliegue el men\u00fa del editor bloques, dir\u00edgete a la secci\u00f3n \u201cPatrones\u201d y ve hacia abajo a \u201cExplorar todos los patrones\u201d.<\/p>\n
![\"men\u00fa](\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2024\/06\/menu-editor-bloques-Gutenberg-132x300.png\" "\\"\\"")
<\/p>\nLuego, se abrir\u00e1 un nuevo panel donde podr\u00e1s ver el patr\u00f3n que has creado. Estar\u00e1 identificado con el nombre que le hayas asignado previamente en la configuraci\u00f3n.<\/p>\n
![\"bloques](\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2024\/06\/bloques-reutilizable-Gutenberg1-291x300.png\" "\\"\\"")
<\/p>\nPara insertarlo en el editor Gutenberg, pulsa sobre \u00e9l y lo ver\u00e1s aparecer en el dise\u00f1o de tu p\u00e1gina.<\/p>\n
F\u00e1cil, \u00bfverdad? \ud83e\udd17<\/p>\n
Paso 7: Copia los bloques en Gutenberg<\/span><\/h3>\n
Si durante el transcurso de la creaci\u00f3n de tu sitio web necesitas copiar un bloque Gutenberg que ya has insertado al editor de bloques, es bastante simple.<\/p>\n
En la barra de herramientas del bloque (generalmente ubicada en la parte superior del bloque), haz clic en los tres puntos verticales. Ahora, selecciona la opci\u00f3n \u201cCopiar\u201d de ese men\u00fa.<\/p>\n
![\"copiar](\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2024\/06\/copiar-bloques-editor-Gutenberg-copia-1-300x276.png\" "\\"\\"")
<\/p>\nAhora coloca el cursor en el lugar donde deseas pegar el bloque y utiliza la combinaci\u00f3n de teclas Ctrl + V (o Cmd + V en Mac) para a\u00f1adirlo en el editor Gutenberg.<\/p>\n
![\"como](\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2024\/06\/como-usar-editor-gutenberg-wordpress-208x300.png\" "\\"\\"")
<\/p>\nComo has podido ver, no tiene ninguna complejidad y lo podr\u00e1s hacer en cualquier \u00e1rea de tu web siempre que lo necesites.<\/p>\n
C\u00f3mo desactivar Gutenberg en WordPress<\/span><\/h2>\n
Puede que hayas probado el editor Gutenberg y, despu\u00e9s de varios intentos, no te convenza. Si necesitas saber c\u00f3mo quitar el editor de Gutenberg, no te preocupes. \u00a1Est\u00e1s en el sitio adecuado! \ud83d\ude0e<\/p>\n
Quiero darte una buena noticia: puedes volver a tu editor anterior, TinyMCE. Y lo mejor de todo es que no perder\u00e1s todo el contenido que has creado, excepto aquel creado espec\u00edficamente con Gutenberg, por supuesto.<\/p>\n
![\"plugin](\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2024\/06\/plugin-editor-clasico-WordPress-300x217.png\" "\\"\\"")
<\/p>\nSimplemente tienes que instalar el plugin \u00abEditor Cl\u00e1sico<\/a>\u00ab<\/strong> para que reemplace al editor Gutenberg en WordPress. \u00a1Y listo! \ud83d\ude0e<\/p>\n
10 consejos para sacarle el m\u00e1ximo partido a Gutenberg<\/span><\/h2>\n
Si eres de los que se han enamorado del editor Gutenberg y adem\u00e1s quieres sacarle todo el jugo, aprovecha estos consejos \u00fatiles que te doy a continuaci\u00f3n. Mi intenci\u00f3n es que sepas c\u00f3mo mejorar tu flujo de trabajo, optimizar el dise\u00f1o de tu web y aprovechar al m\u00e1ximo todas las funcionalidades que ofrece este potente editor de WordPress.<\/p>\n
\u00bfPreparado? \ud83d\ude09<\/p>\n
- \n
- Explora y practica:<\/strong> Ante todo, dedica tiempo a explorar todas las funcionalidades que ofrece Gutenberg. Experimenta con diferentes tipos de bloques y familiar\u00edzate con su funcionamiento antes de aplicarlos a proyectos importantes.<\/li>\n
- Aprende atajos de teclado:<\/strong> Utiliza los atajos de teclado de Gutenberg para agilizar tu flujo de trabajo. Por ejemplo, Ctrl + S para guardar cambios, Ctrl + Z para deshacer, y Ctrl + Alt + N para insertar un nuevo bloque.<\/li>\n
- Personaliza tu interfaz:<\/strong> Aprovecha las opciones de personalizaci\u00f3n de la interfaz de Gutenberg. Puedes ajustar el tama\u00f1o del texto, activar o desactivar el modo de pantalla completa y configurar preferencias de visualizaci\u00f3n desde el men\u00fa de opciones.<\/li>\n
- Crea bloques reutilizables:<\/strong> Simplifica la creaci\u00f3n de contenido mediante bloques reutilizables. Crea y guarda aquellos bloques personalizados que uses con frecuencia, como llamadas a la acci\u00f3n, testimonios o formularios. De este modo, ahorrar\u00e1s tiempo en pr\u00f3ximas publicaciones.<\/li>\n
- Usa plantillas de bloques: <\/strong>Aprovecha las plantillas de bloques predise\u00f1adas o crea las tuyas propias para mantener la coherencia en la identidad de marca y la estructura de tus publicaciones. Esto es especialmente \u00fatil para blogs con un formato espec\u00edfico o p\u00e1ginas de productos.<\/li>\n
- Optimiza para SEO:<\/strong> Comprueba que tu contenido en Gutenberg est\u00e9 optimizado para SEO. Utiliza t\u00edtulos y subt\u00edtulos claros (H1, H2, H3, etc.), a\u00f1ade metadescripciones relevantes y emplea palabras clave estrat\u00e9gicamente en tus bloques de texto.<\/li>\n
- Prueba con bloques de terceros:<\/strong> Indaga y prueba los bloques de terceros disponibles en el repositorio de WordPress o en el marketplace de plugins. Estos pueden ofrecer funcionalidades avanzadas y opciones de dise\u00f1o adicionales que complementen a Gutenberg.<\/li>\n
- Mant\u00e9n Gutenberg actualizado:<\/strong> Mant\u00e9n actualizada tanto tu instalaci\u00f3n de WordPress como de Gutenberg para beneficiarte de las \u00faltimas caracter\u00edsticas, mejoras de rendimiento y seguridad. Adem\u00e1s, esto ayudar\u00e1 a garantizar la compatibilidad con otros plugins y temas.<\/li>\n
- Consulta la documentaci\u00f3n y recursos:<\/strong> Siempre que tengas dudas, consulta la documentaci\u00f3n oficial de Gutenberg, los foros de soporte de WordPress y tutoriales online. All\u00ed encontrar\u00e1s soluciones y consejos \u00fatiles proporcionados por la propia comunidad.<\/li>\n<\/ul>\n
10 plugins imprescindibles para Gutenberg WordPress<\/span><\/h2>\n
Aunque Gutenberg te va a servir para personalizar m\u00e1s tus proyectos, no funciona como un creador de p\u00e1ginas convencional. La verdad es que los bloques de WordPress no incluyen todas las opciones de dise\u00f1o que suelen ofrecer los creadores de p\u00e1ginas, as\u00ed que hay que buscar alternativas para ampliar el rango de acci\u00f3n.<\/p>\n
Por suerte, existen plugins de bloques dise\u00f1ados para ampliar las funcionalidades de Gutenberg. Aqu\u00ed tienes algunos de mis favoritos (adem\u00e1s de ser de los m\u00e1s populares).<\/p>\n
Gutenberg Blocks with AI by Kadence WP \u2013 Page Builder Features<\/span><\/h3>\n
Kadence Blocks<\/a><\/strong> proporciona m\u00e1s funcionalidades a los editores de bloques de Gutenberg WordPress y compite directamente con los constructores de p\u00e1ginas m\u00e1s reconocidos como Elementor<\/a> o Beaver Builder.<\/p>\n
![\"Kadence](\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2024\/06\/Kadence-Blocks-300x130.png\" "\\"\\"")
<\/p>\nCaracter\u00edsticas principales de Kadence Blocks:
\n<\/strong><\/p>\n- \n
- Genera y mejora el texto autom\u00e1ticamente utilizando inteligencia artificial.<\/li>\n
- Ofrece un sinf\u00edn de patrones y p\u00e1ginas preconstruidas que vas a poder adaptar a la identidad de tu marca.<\/li>\n
- Optimiza el rendimiento de tu sitio web cargando CSS y JavaScript solo cuando es necesario y \u00fanicamente para los bloques utilizados en cada p\u00e1gina espec\u00edfica.<\/li>\n
- Ajusta el dise\u00f1o para cada tama\u00f1o de pantalla, por lo que es 100% responsive.<\/li>\n
- Puedes elegir entre m\u00e1s de 900 fuentes de Google para personalizar completamente la tipograf\u00eda de tu sitio.<\/li>\n
- Adapta todos los aspectos del dise\u00f1o de forma detallada con fondos parallax, gradientes, superposiciones, etc.<\/li>\n
- Oculta las configuraciones de bloque a seg\u00fan los tipos de roles de usuario para mantener el foco en el contenido y evitar distracciones en los dise\u00f1os de bloques.<\/li>\n
- Ajusta el espaciado con m\u00e1s precisi\u00f3n para mejorar el dise\u00f1o de tu p\u00e1gina web.<\/li>\n<\/ul>\n
GenerateBlocks<\/span><\/h3>\n
Con GenerateBlocks<\/a><\/strong>, puedes encontrar una variedad de bloques dise\u00f1ados y utilizarlos para crear cualquier tipo de contenido. Adem\u00e1s, es compatible con la plantilla GeneratePress, aunque est\u00e1 dise\u00f1ado para ser compatible con cualquier tema.<\/p>\n
![\"GenerateBlocks\"](\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2024\/06\/GenerateBlocks-300x130.png\" "\\"\\"")
<\/p>\nCaracter\u00edsticas destacables de GenerateBlocks:<\/strong><\/p>\n
- \n
- Permite organizar tu contenido en secciones y filas estructuradas.<\/li>\n
- Crea dise\u00f1os avanzados usando estructuras de cuadr\u00edcula flexibles.<\/li>\n
- Genera listas de publicaciones de diferentes tipos utilizando ajustes avanzados.<\/li>\n
- Cuenta con una estructura HTML simple para mantener una mayor flexibilidad.<\/li>\n
- Se ajusta a cualquier tipo de dispositivo.<\/li>\n<\/ul>\n
Genesis Blocks<\/span><\/h3>\n
Genesis Blocks<\/a><\/strong> incluye una serie de bloques de construcci\u00f3n de p\u00e1ginas dise\u00f1ados para el editor de bloques Gutenberg. Ofrece un mayor control para crear y lanzar r\u00e1pidamente cualquier tipo de sitio web que quieras.<\/p>\n
![\"Genesis](\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2024\/06\/Genesis-Blocks-300x130.png\" "\\"\\"")
<\/strong><\/p>\nCaracter\u00edsticas principales de Genesis Blocks:<\/strong><\/p>\n
- \n
- Crea y utiliza contenido r\u00e1pidamente mediante secciones predefinidas personalizadas con dise\u00f1os de p\u00e1gina completos que encontrar\u00e1s dentro del propio editor de bloques.<\/li>\n
- Los bloques de contenido adicionales y el selector de dise\u00f1o hacen que sea m\u00e1s f\u00e1cil aprovechar al m\u00e1ximo este editor de bloques.<\/li>\n<\/ul>\n
Gutenberg Blocks \u2013 PublishPress Blocks Gutenberg Editor Plugin<\/span><\/h3>\n
- Aprende atajos de teclado:<\/strong> Utiliza los atajos de teclado de Gutenberg para agilizar tu flujo de trabajo. Por ejemplo, Ctrl + S para guardar cambios, Ctrl + Z para deshacer, y Ctrl + Alt + N para insertar un nuevo bloque.<\/li>\n
- Explora y practica:<\/strong> Ante todo, dedica tiempo a explorar todas las funcionalidades que ofrece Gutenberg. Experimenta con diferentes tipos de bloques y familiar\u00edzate con su funcionamiento antes de aplicarlos a proyectos importantes.<\/li>\n
- Tipograf\u00eda:<\/strong> Selecciona el tama\u00f1o del texto que desees.<\/li>\n
- Color:<\/strong> Aplica color tanto al texto como al fondo.<\/li>\n
- Compatibilidad con temas y plugins:<\/strong> Algunos temas y plugins pueden presentar alguna incompatibilidad con Gutenberg, lo que puede causar problemas de dise\u00f1o o funcionalidad hasta que se realicen los ajustes y actualizaciones necesarios. Ahora que el editor Gutenberg lleva en WordPress varios a\u00f1os, este problema es cada vez m\u00e1s raro.<\/li>\n
- GenerateBlocks<\/a><\/li>
- Paso 2: A\u00f1ade un nuevo bloque al editor Gutenberg de WordPress<\/a><\/li>
- Bloque de medios<\/a><\/li>
- Interfaz visual e intuitiva<\/a><\/li>
- Ventajas del editor Gutenberg<\/a>
![\"Gutenberg](\"https:\/\/www.lucushost.com\/blog\/wp-content\/uploads\/2024\/06\/Gutenberg-Blocks-PublishPress-Blocks-Gutenberg-Editor-300x130.png\" "\\"\\"")
<\/p>\n