10 consejos y trucos útiles para el editor de WordPress Gutenberg
Publicado: 2025-04-17El editor de Gutenberg ha cambiado la forma en que las personas usan WordPress. Es más visual, basado en bloques y flexible que el antiguo editor clásico. Pero si eres nuevo en eso, o incluso si lo has estado usando por un tiempo, algunas cosas aún pueden sentirse un poco complicadas.
¿La buena noticia? Hay toneladas de consejos y trucos útiles que pueden hacer las cosas más rápidas, más fáciles y divertidas.
En esta publicación, estamos compartiendo 10 consejos prácticos de Gutenberg. Esto lo ayudará a crear un mejor contenido y hacer más sin la frustración habitual.
Evolución del editor de WordPress Gutenberg
Gutenberg se presentó por primera vez en WordPress 5.0 en diciembre de 2018. Reemplazó el editor clásico, que había existido durante años. La idea principal detrás de Gutenberg era dar a los usuarios más control sobre su contenido utilizando un sistema basado en bloques.
Al principio, muchos usuarios no estaban seguros sobre el cambio. La interfaz se sintió diferente. Me llevó un poco de tiempo para acostumbrarse. Pero con el tiempo, Gutenberg mejoró mucho. Se volvió más rápido, más estable y más flexible.
Con cada actualización de WordPress, Gutenberg obtuvo nuevas características. Ahora puede construir diseños de página completos con bloques. Puede reutilizar bloques personalizados. Incluso puede diseñar encabezados, pies de página y plantillas utilizando el editor del sitio (para temas de bloque).
Hoy, Gutenberg no es solo un editor de contenido. Se está convirtiendo en una herramienta de edición de sitios completos . Y está mejorando con cada lanzamiento.
10 consejos y trucos útiles para el editor de WordPress Gutenberg
Gutenberg ofrece mucho más que solo bloques de contenido básicos. Una vez que aprenda algunos consejos inteligentes, puede trabajar más rápido y crear páginas más atractivas sin tocar ningún código.
Aquí hay una lista rápida de trucos útiles que pueden nivelar su experiencia de Gutenberg:
- Use comandos de barra para insertar bloques rápidamente
- Convierta cualquier bloque en un bloque reutilizable
- Arrastrar y soltar bloques para reorganizar contenido
- Use la vista de lista para una fácil navegación de bloque
- Bloques grupales para moverlos o diseñarlos juntos
- Bloqueos de bloqueo para evitar cambios accidentales
- Use atajos de teclado para ahorrar tiempo
- Use patrones para diseños listos
- Copiar y pegar bloques entre páginas
- Agregue CSS personalizado a bloques específicos
¡Ahora, entremos en los detalles!
01. Use comandos de corte para insertar bloques rápidamente
Digamos que está escribiendo una publicación de blog y desea agregar una imagen justo después de un párrafo. Mueve su cursor hacia abajo, presiona la tecla ENTER y luego ... alcanza el mouse, hace clic en el pequeño icono de plus, desplázate a través de las opciones de bloque y finalmente elige el bloque de imágenes. ¿Suena familiar?
Ahora, hagámoslo más inteligente.
En lugar de todo ese clic, simplemente escriba una barra de reenvío ( /) justo después de presionar Enter. En el momento en que lo haces, aparece una lista de bloques. Escriba /image y presione Enter nuevamente. Hecho. Acaba de insertar un bloque de imágenes sin siquiera tocar el mouse.
Este truco no es solo para imágenes. Prueba /heading , /quote , /table , o incluso /columns . Una vez que te acostumbres, sentirás que estás escribiendo comandos en una herramienta de escritura sobrealimentada.
Es rápido, suave y mantiene vivo su flujo de escritura. No más enfoque de ruptura. Simplemente escriba y construya a medida que avanza.
02. Convierta cualquier bloque en un bloque reutilizable
¿Alguna vez escribió un cuadro de registro de llamadas a la acción o un boletín que desea reutilizar en varias publicaciones? Copiarlo, pasarlo cada vez, no es ideal. Ajuste uno, olvida actualizar otro y Boom: su sitio termina con cinco versiones diferentes de lo mismo.
Aquí es donde los bloques reutilizables son útiles.
Digamos que ha diseñado una sección CTA perfecta. Tal vez sea un encabezado, una oración corta y un botón. Seleccione todos esos bloques, haga clic en el menú de tres puntos (⋮) y elija "Agregar a bloques reutilizables". Dale un nombre como "Post Pooter CTA" y guarda.
Ahora, cada vez que escribe una nueva publicación, solo busque ese bloque reutilizable. Inserte en un solo clic. Y aquí está la mejor parte: si alguna vez actualiza ese bloque, cambia en todas partes.
No más inconsistencias. No más tiempo perdido.
Es como tener su propia plantilla personalizada, lista cuando la necesite.
03. Arrastre y suelte los bloques para reorganizar el contenido
A veces, su contenido simplemente no fluye de la manera que pensaba que lo haría.
Tal vez esa imagen se ve mejor sobre el texto. Tal vez la cita se siente más poderosa cerca del final. Reorganizar el contenido en Gutenberg es tan fácil como arrastrar y soltar bloques.
Así es como funciona.
Pasar el ronco sobre cualquier bloque. Verás un mango de seis puntos en el lado izquierdo. Agarrelo y arrastre el bloque donde quieras. ¿Quieres mover una sección completa hecha de múltiples bloques? Gruparlos primero, luego arrastre todo el grupo en un movimiento suave.
Esto le brinda el control total sobre el diseño: sin cortar, pegar o tratar con ningún código desordenado.
Se siente como trabajar con bloques de construcción. Mueva cosas hasta que todo se ajuste a la perfección.
Simple. Visual. Instante.
04. Use la vista de lista para una fácil navegación de bloque
¿Alguna vez construyó una larga publicación de blog con toneladas de imágenes, texto, botones y tal vez algunas columnas? En algún momento, desplazándose hacia arriba y hacia abajo para encontrar un bloque específico se convierte en un dolor de cabeza.
Ahí es donde la vista de la lista guarda el día.
Haga clic en el pequeño icono con tres líneas apiladas en la esquina superior izquierda del editor. Esto abre un panel que muestra cada bloque de su publicación, en orden. Verá un contorno limpio y estructurado, al igual que una tabla de contenido para sus bloques de contenido.
Puede hacer clic en cualquier bloque de la lista para saltar directamente a él. También puede arrastrar y soltar bloques directamente desde la vista de lista. ¿Necesita seleccionar un bloque que esté dentro de un grupo o una columna? La vista de la lista le permite encontrarlo al instante, no más caza.
Es especialmente útil cuando se trabaja con diseños complejos o bloques anidados.
05. Bloques grupales para moverlos o diseñarlos juntos
Imagine esto, ha construido una sección con un encabezado, un párrafo, un botón y tal vez un color de fondo. Se ve genial. Pero ahora quieres mover todo a otro lugar en la página. Un bloque a la vez? No. Demasiado lento.
Solo agrupalos.
Seleccione todos los bloques que desea mantener juntos. Luego haga clic en el menú de tres puntos y elija "Grupo". Ahora esos bloques están envueltos dentro de un solo contenedor.
Puedes moverlos como una unidad. Agregue un fondo al grupo. Ajuste el relleno. Cambiar la alineación. Incluso duplica la sección completa en un solo clic.
Los grupos hacen que los diseños complejos sean simples. También mantienen las cosas organizadas, especialmente cuando trabaja en páginas de destino o secciones personalizadas.
06. Bloqueos de bloqueo para evitar cambios accidentales
Tienes tu diseño tal como lo quieres. Todo está alineado perfectamente. Pero luego, mientras edita, elimina accidentalmente un bloque o mueve algo fuera de lugar. Molesto, ¿verdad?
Aquí está la solución: bloquea tus bloques .
Haga clic en cualquier bloque, abra la configuración (menú de tres puntos) y elija "Bloquear". Puede prevenir el movimiento, evitar la extracción o ambos. De esta manera, nadie, incluido usted, puede estropearlo sin desbloquearlo primero.
Es súper útil cuando trabaja con diseños reutilizables y páginas compartidas o simplemente desea proteger su propio trabajo duro.
07. Use atajos de teclado para ahorrar tiempo
Hacer clic en los trabajos, pero los atajos de teclado? Esa es la eficiencia del siguiente nivel.
En lugar de mover el mouse cada pocos segundos, aprenda algunos combos rápidos y volará a través de su contenido. Por ejemplo:
- Ctrl + Shift + D (CMD en Mac): duplicar un bloque
- Ctrl + Alt + T: inserte un bloque arriba
- Ctrl + Alt + Y: inserte un bloque a continuación
- Shift + Alt + Z: Retire un bloque
- / (barra de avance): abra el inserter del bloque al instante
Hay más, pero incluso unos pocos pueden ahorrar minutos, especialmente si construye publicaciones o páginas largas regularmente.
Es como conocer códigos de trucos secretos. Y una vez que sus dedos los recuerden, se preguntará cómo trabajó sin ellos.
08. Use patrones para diseños listos
Diseñar una página desde cero puede sentirse abrumador. Sabes lo que quieres, pero llegar a BLOCK por bloque lleva tiempo. Ahí es donde entran los patrones .
Los patrones son diseños de bloques prediseñados. WordPress incluye un montón por defecto, como secciones de héroes, testimonios, CTA y más. Simplemente elige uno y lo deja caer en su página. Hecho.
Haga clic en el icono más para agregar un nuevo bloque. Luego cambie a la pestaña Patrones . Encontrará categorías como texto, imágenes, columnas, encabezados, lo que sea. Elija uno, y todo el diseño aparece instantáneamente.
Puede editar el texto, reemplazar imágenes y ajustar estilos. Pero la estructura ya está ahí.
Es como hacer que un diseñador te entregue un kit de inicio. Secciones de gran aspecto. Sin estrés. No hay ansiedad en blanco.
09. Copie y pegue bloques entre páginas
¿Construyó algo bueno en una página y quiere lo mismo en otra? No comiences desde cero. Simplemente copie y pegue los bloques.
Es más fácil de lo que piensas.
Haga clic en el bloque (o grupo de bloques), luego presione Ctrl + C (o CMD + C en Mac). Vaya a su otra página o publique. Haga clic en donde desea que vaya y presione Ctrl + V. Boom, todo aparece, así como así.
Todo el formato, estilos, botones, imágenes, todo viene.
Y sí, incluso funciona en las pestañas del navegador. Por lo tanto, puede abrir dos publicaciones una al lado de la otra y mover contenido entre ellos en segundos.
10. Agregue CSS personalizado a bloques específicos
A veces, los estilos incorporados simplemente no lo cortan. Quieres algo más único. Aquí es donde entra en juego CSS personalizado .
Gutenberg le permite aplicar CSS personalizados a bloques individuales, para que pueda hacer que partes específicas de su contenido se destaquen sin afectar toda la página.
Aquí le mostramos cómo hacerlo:
- Seleccione el bloque que desea personalizar.
- En la configuración del bloque a la derecha, busque la sección avanzada .
- Bajo la clase CSS adicional (ES) , agregue un nombre de clase personalizado (por ejemplo,
my-custom-style). - Luego, vaya a su personalizador de WordPress o una sección CSS personalizada en su tema y agregue estilos utilizando esa clase (por ejemplo,.
.my-custom-style { color: red; }).
De esta manera, no estás jugando con los estilos globales, sino que lo adaptan solo para ese bloque.
Es perfecto cuando desea un botón específico, encabezado o sección para tener un aspecto diferente sin afectar el resto de su contenido.
Conclusión
Con estos consejos y trucos, estás en camino de dominar el editor de WordPress Gutenberg. Desde acelerar su flujo de trabajo con comandos de corte hasta agregar estilos personalizados con facilidad, Gutenberg ofrece una tonelada de flexibilidad para los creadores de contenido.
Recuerde, la clave es experimentar y encontrar las herramientas que funcionan mejor para su estilo. Ya sea que esté creando publicaciones simples o diseños complejos, estas características lo ayudarán a ahorrar tiempo, mantenerse organizado y agregar un toque personal a su sitio.
Si desea comparar Gutenberg con Elementor, puede consultar nuestra publicación de blog en Elementor vs Gutenberg para saber quién lidera el camino.
¿Quieres compartir tus comentarios relacionados con esta publicación de blog? Hágalo usando el cuadro de comentarios a continuación. Nos encantaría conocer sus comentarios. ¡Cuidarse!