Bloques core y layout
Domina composición profesional con bloques nativos para crear layouts consistentes, mantenibles y adaptados a móvil sin depender de soluciones frágiles.
Maquetar bien en Gutenberg no consiste en apilar bloques: consiste en construir una estructura visual y semántica que el equipo pueda mantener sin romper consistencia.
Los bloques core (Group, Columns, Cover, Media & Text, Buttons, Spacer, Separator...) permiten resolver la mayoría de diseños sin plugins adicionales.
El objetivo operativo es crear secciones reutilizables con jerarquía clara, espaciado coherente y comportamiento responsive predecible.
Trabaja en rutas como <code>Entradas > Añadir nueva</code>, <code>Páginas > Añadir nueva</code> y valida estilos globales en <code>Apariencia > Editor</code> cuando proceda.
- Una buena maquetación empieza por decidir estructura y ritmo visual antes de colocar contenido.
- Define primero la arquitectura de secciones: hero, bloque de valor, prueba social, contenido principal y cierre. Después asigna bloques adecuados a cada zona.
- Usa <strong>Group</strong> para encapsular secciones y aplicar espaciados coherentes; usa <strong>Columns</strong> solo cuando exista una necesidad real de distribución horizontal.
- Evita usar Spacer como solución universal. El espaciado debe apoyarse preferentemente en estilos globales para reducir parches locales difíciles de mantener.
- Rutas de edición: <code>Entradas > Añadir nueva</code> y <code>Páginas > Añadir nueva</code>
Fundamentos de composición por bloques
Una buena maquetación empieza por decidir estructura y ritmo visual antes de colocar contenido.
Define primero la arquitectura de secciones: hero, bloque de valor, prueba social, contenido principal y cierre. Después asigna bloques adecuados a cada zona.
Usa <strong>Group</strong> para encapsular secciones y aplicar espaciados coherentes; usa <strong>Columns</strong> solo cuando exista una necesidad real de distribución horizontal.
Evita usar Spacer como solución universal. El espaciado debe apoyarse preferentemente en estilos globales para reducir parches locales difíciles de mantener.
- Rutas de edición: <code>Entradas > Añadir nueva</code> y <code>Páginas > Añadir nueva</code>
- Bloques estructurales clave: Group, Columns, Cover
- Bloques de soporte: Buttons, List, Separator, Spacer
- Regla base: semántica clara + layout consistente
Claves teóricas de layout profesional
Estas decisiones reducen deuda visual y aceleran publicación con calidad uniforme.
Aplicación práctica en una página real
Este flujo te permite construir layouts reutilizables sin caer en improvisación visual.
<strong>Paso 1</strong>: define wireframe básico por secciones y tradúcelo a bloques core antes de ajustar estilos finos.
<strong>Paso 2</strong>: implementa estructura en editor, validando cada sección en desktop y móvil antes de continuar con la siguiente.
<strong>Paso 3</strong>: revisa accesibilidad básica (contraste, orden de lectura, botones claros) y prepara versión reutilizable para futuras páginas similares.
- Diseñar estructura antes del detalle visual
- Aplicar sistema de espaciado consistente
- Validar responsive durante la edición, no al final
- Preparar bloques/patrones reutilizables
Validación y mantenimiento del layout
No cierres esta lección hasta comprobar que el diseño es consistente, legible y sostenible para el equipo.
Evalúa si otro editor puede modificar la página sin romper estructura. Si no puede, la composición sigue siendo demasiado frágil.
Comprueba consistencia de espaciados, alineaciones y jerarquía visual entre secciones en al menos dos tamaños de pantalla.
Registra decisiones clave de layout para que el sistema evolucione de forma controlada y no por cambios ad hoc.
- Estructura simple y editable por el equipo
- Espaciado y anchura coherentes
- Comportamiento responsive validado
- Reglas de layout documentadas