Usa los controles de espaciado de forma coherente
POM no requiere bloques vacíos para crear espacio de diseño. Usa el control que pertenece a la relación que estás ajustando.
Dónde vive el espaciado
| Relación | Control compatible |
|---|---|
| Espacio alrededor de una fila o columna del Page Builder | Grupo Spacing |
| Ritmo de párrafo a párrafo | Paragraph margin bottom en General styles |
| Ritmo de encabezado a contenido | Headings margin bottom en General styles |
| Ancho o radio del borde de un botón | Control de cuatro lados en Buttons |
| Espaciado interno específico de un componente | El ajuste propio del componente, cuando se proporciona |
Espaciado del Page Builder
Las filas, filas internas, columnas y columnas internas proporcionan valores separados de Padding y Margin para arriba, derecha, abajo e izquierda. El control usa píxeles y cuatro vistas adaptativas:
- Desktop;
- Tablet (horizontal): de 768 px a menos de 992 px;
- Tablet (vertical): de 544 px a menos de 768 px;
- Mobile: por debajo de 544 px.
El padding no debe ser negativo. El margin puede usarse para el posicionamiento externo, pero los valores negativos deben ser excepcionales y probarse con cuidado.
Establece un ritmo
Para las clases de plantilla reutilizables y los preajustes de margen de los bloques de texto de Gutenberg, usa la escala compartida de 0, 0.375, 0.75, 1, 1.25, 2, 3, 4, 6 y 8rem. Por ejemplo, p-1 añade 1rem de padding y mb-2 añade 2rem de margen inferior. Consulta la referencia completa de helpers. Esto no cambia los valores arbitrarios de espaciado del Page Builder por dispositivo descritos anteriormente.
Elige una progresión pequeña de valores aprobados y usa cada valor para una relación definida. Por ejemplo, usa una cantidad dentro de un componente compacto, otra entre grupos relacionados y una cantidad mayor entre secciones de página.
La interfaz de ajustes no asigna nombres semánticos a estos valores de espaciado, así que registra la progresión acordada en la especificación de diseño del sitio.
Evita soluciones estructurales alternativas
No crees espacio con:
- bloques de texto vacíos;
- saltos de línea repetidos;
- columnas vacías;
- imágenes transparentes;
- desplazamientos arbitrarios copiados.
Estos métodos ocultan el orden de origen y dificultan las correcciones adaptativas.
Verifica
Comprueba cada vista adaptativa que use el componente. Busca huecos de sección duplicados, contornos de enfoque recortados, espacio excesivo después de que las columnas se apilen y texto apretado contra un fondo o borde.