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 Group para encapsular secciones y aplicar espaciados coherentes; usa Columns 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: Entradas > Añadir nueva y Páginas > Añadir nueva
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 Group para encapsular secciones y aplicar espaciados coherentes; usa Columns 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: Entradas > Añadir nueva y Páginas > Añadir nueva
- 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.
Paso 1: define wireframe básico por secciones y tradúcelo a bloques core antes de ajustar estilos finos.
Paso 2: implementa estructura en editor, validando cada sección en desktop y móvil antes de continuar con la siguiente.
Paso 3: 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