Controlar el espaciado y la alineación

El espaciado debe describir las relaciones entre secciones y componentes. Aplícalo al contenedor que posee la relación en lugar de insertar contenido vacío.

Elige el nivel correcto

Relleno y separación externa

El relleno crea espacio dentro de una fila o columna, de modo que su fondo y su borde continúan alrededor de ese espacio. La separación externa coloca espacio entre contenedores vecinos.

No uses:

• bloques de Texto vacíos;
• etiquetas <br> repetidas;
• columnas vacías;
• imágenes transparentes;
• valores arbitrarios copiados de páginas no relacionadas.

Estos remedios improvisados ocultan la estructura de la página y a menudo producen un espacio excesivo en pantallas estrechas.

Para un separador fijo deliberado en contenido sencillo, inserta el bloque Gap . Elige uno de los valores compartidos de 0,75, 1,25, 2, 3, 4, 8 o 12rem en el inspector, o arrastra el bloque verticalmente. El arrastre es magnético y siempre se detiene en uno de esos valores rem exactos. El bloque guarda un web-gap-* de ayuda en el HTML estático y no carga su propio CSS ni JavaScript en el frontend.

Encuentra Gap en Design, o busca «space», «spacer» o «vertical». Con su tirador de cambio de tamaño enfocado, Arriba/Abajo eligen el tamaño anterior/siguiente e Inicio/Fin eligen el tamaño más pequeño/más grande. El foco permanece en el tirador mientras se cambia el tamaño.

Con el tirador de cambio de tamaño de Gap enfocado, usa Arriba/Abajo para recorrer la escala e Inicio/Fin para elegir su valor más pequeño/más grande. Device Visibility controla el separador completo; Advanced > HTML anchor asigna su ID. Los separadores ocultos siguen siendo seleccionables en el editor.

Ajustar filas y columnas duplicadas en el Page Builder heredado

Duplicar una fila o columna copia su configuración de espaciado actual. Para ajustar una copia:

1. Abre la página en Pages y edita la fila o columna copiada en el Page Builder.
2. Abre Spacing y define su relleno y su separación externa para Desktop, Tablet (horizontal), Tablet (vertical) y Mobile según sea necesario.
3. Guarda el elemento y luego actualiza la página.
4. Previsualiza el original y la copia en cada ancho afectado. Cada uno usa sus propios valores de espaciado, incluidas las filas y columnas anidadas.

El espaciado del Page Builder heredado usa píxeles. Los valores de Desktop se aplican por defecto; los campos de dispositivos más pequeños los anulan solo dentro de su rango etiquetado. Escribe 0 para eliminar explícitamente el espaciado en ese rango. Estos controles usan un modelo de herencia distinto del de los controles de Gutenberg que se describen más abajo.

Usa Spacing para cambiar estos valores y Extra class name para tus propios ganchos CSS. Las clases de espaciado generadas las gestiona el tema y no es necesario editarlas en el contenido de la página. Después de actualizar el tema, actualiza las páginas afectadas existentes para regenerar sus estilos de página y luego borra cualquier caché de página o CDN antes de comprobar el resultado.

Previsualizar el espaciado antes de publicar

1. Edita los valores de Spacing de la fila o columna y guarda el elemento en el Page Builder.
2. Haz clic en Preview en la página para inspeccionar los cambios pendientes antes de hacer clic en Update.
3. Comprueba los anchos de escritorio y de pantallas más pequeñas afectados. La previsualización usa el relleno y la separación externa autoguardados actuales, incluidos los valores cero explícitos.
4. Haz clic en Update cuando el resultado esté listo para los visitantes.

Previsualizar no cambia la página publicada ni sus estilos guardados, y no requiere compilar los recursos del sitio. Un bloque reutilizable incrustado en la página conserva su propio contenido y espaciado guardados: actualiza primero ese bloque reutilizable y después refresca la previsualización de la página que lo contiene. No necesitas actualizar la página contenedora solo para refrescar el espaciado del bloque reutilizable.

Alinear el contenido de la columna

Las columnas pueden alinear su contenido arriba, en el medio o abajo. Usa la alineación media para regiones cortas emparejadas, como texto junto a una imagen. Prefiere la alineación superior cuando las columnas contengan contenido largo o variable.

Después de que las columnas se apilen, comprueba que la alineación vertical o las opciones de altura mínima no dejen un área vacía grande.

Elegir anchos de columna en Gutenberg

1. Selecciona el bloque Column y luego abre Layout → Column width.
2. Elige el rango de dispositivo y configura Width mode en Inherit, Fixed grid widtho Flexible equal width.
3. Para un ancho fijo, elige de 1 a 12 unidades de cuadrícula. Las columnas flexibles comparten el espacio que dejan las hermanas de ancho fijo; varias hermanas flexibles reciben partes iguales.
4. Comprueba los rangos más pequeños. Un ancho configurado solo para Desktop se apila por debajo de 992px. Inherit conserva la elección explícita de un rango más pequeño; si ningún rango está configurado, las columnas son flexibles en todos los tamaños.
5. Guarda el borrador y comprueba su previsualización en el frontend antes de publicar.

El relleno y los márgenes permanecen independientes del ancho de la cuadrícula. El tema gestiona automáticamente las clases de espaciado generadas para Section, Row y Column, incluidos los bloques duplicados. Cambia el espaciado mediante los controles, no editando una clase generada. Tu propio HTML anchor permanece independiente de esas clases.

Con Respect column padding habilitado en una columna, su imagen de fondo, su vídeo y su superposición se recortan según el relleno de esa columna. El editor previsualiza ese recorte sin mover el fondo al contenedor de contenido fijo.

Mantener un ritmo coherente

En Gutenberg, abre Advanced → Spacing en una Section, Row o Column. Los botones de dispositivo en Padding y Margin seleccionan Mobile, Tablet Portrait, Tablet Landscape o Desktop. El botón seleccionado tiene un fondo claro y un icono oscuro; la tableta de lado representa Tablet Landscape. Pasa el cursor sobre un botón para leer su nombre de dispositivo y su rango de ancho. Usa Tab para enfocar un control y Espacio o Enter para activarlo. El botón de cadena vincula o desvincula los valores de los lados.

Los ajustes preestablecidos de margen de Paragraph, Heading, List y List Item usan los helpers rem compartidos: 0, 0,375, 0,75, 1, 1,25, 2, 3, 4, 6 y 8rem. Section, Row y Column conservan sus entradas de relleno/margen adaptativas separadas, incluidas las unidades personalizadas. Esos valores creados no se redondean a la escala de helpers.

El editor y el frontend usan el mismo contrato de tamaño de fuente raíz del 100%: normalmente 1rem son 16px, aunque las preferencias de fuente del navegador pueden cambiar esa base. En los campos adaptativos de espaciado y ancho de borde de Section, Row y Column, un valor vacío hereda del rango más pequeño anterior. Escribe 0 cuando quieras quitar el espaciado o el ancho de ese lado desde un rango concreto en adelante.

Reutiliza los valores de espaciado establecidos del sitio para relaciones similares: de sección a sección, de encabezado a párrafo y de párrafo a acción. Si muchas páginas necesitan la misma excepción, traslada la decisión al sistema de diseño en lugar de repetir anulaciones del constructor.

Verificación

Previsualiza cada rango de área de visualización afectado y comprueba:

• que el primer y el último componente no queden apretados contra el borde del contenedor;
• que las secciones adyacentes no dupliquen su separación;
• que los encabezados con salto de línea no choquen con el contenido siguiente;
• que las columnas apiladas no tengan espacio ausente ni excesivo;
• que los contornos de foco y los controles interactivos no queden recortados.