Diseño y contenido de la página
Las páginas se estructuran de la siguiente manera: sección → fila → columna → bloque; los fondos de las secciones se mantienen a sangre, mientras que el ancho máximo de las filas limita el contenido; utiliza el modo de diseño «Attr» (Contenido, Ancho fijo, De borde a borde) y la altura (% de la ventana gráfica) en la sección, no el ancho de «Estilo» en cada bloque.
La mayoría de las páginas siguen una estructura: Sección → Fila → Columna(s) → Bloque(s). Entender qué capa controla el ancho y cuál el espaciado permite que los diseños se mantengan centrados en el ordenador y resulten cómodos en el móvil.
Conceptos básicos de la barra lateral: Barra lateral y barra de herramientas del editor de páginas. Catálogo de bloques: Referencia de bloques y diseños del editor.
El modelo del marco de fotos
Piensa en cada sección como un marco de fotos a ancho completo. La fila que hay en su interior es el paspartú: un recuadro centrado con un ancho máximo. Tus bloques se encuentran dentro de ese recuadro.
┌─ SECCIÓN (100 % de ancho — fondo, espacio de separación vertical) ────┐
│ │
│ ┌─ FILA (ancho máximo, centrada — límite del contenido principal) ─────┐ │
│ │ [ Cuadrícula de portafolio / texto / botones / otros bloques ] │ │
│ └─────────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────────┘
El fondo de la sección se mantiene a sangre. El color, la imagen y la superposición cubren toda la sección de extremo a extremo. Fila → Ancho máximo solo limita el contenido dentro del marco; no reduce el fondo.
No utilices un relleno grande a la izquierda o a la derecha en la sección para «apretar» el contenido y hacerlo más estrecho en el ordenador de sobremesa. Esto va en contra del sistema de maquetación y provoca errores previsibles en pantallas más pequeñas. En su lugar, comprime el ancho del contenido con Fila → Ancho máximo en Atributos.
Qué controla cada capa
| Capa | Controla | Dónde editar |
|---|---|---|
| Sección | Modo de maquetación, altura, fondo a sangre (imagen/superposición), espaciado vertical | Selecciona sección → Atributos; color sólido en Estilo |
| Fila | Ancho máximo, separación entre columnas, relleno de fila, centrado horizontal | Selecciona fila → Atributos (diseño de fila) |
| Columna | Relleno de la celda, altura mínima, alineación vertical de los bloques en la celda | Selecciona columna → Atributos |
| Bloque | Ajustes específicos del bloque (fuente del portafolio, imagen destacada, destinatario del formulario, etc.) | Selecciona bloque → Atributos |
El relleno de la sección no cambia el tamaño de los elementos secundarios. Añade espacio alrededor de la fila; no estira las filas ni las columnas para llenar el área de visualización. Para hacer que una banda sea más alta, utiliza Atributos → Altura en la sección, aumenta la altura mínima de la columna, añade relleno a la columna o inserta un bloque Espaciador.
Atributos de la sección: modo de diseño y altura
Con la sección seleccionada, Editar → Atributos muestra Diseño de la sección:
| Control | Opciones | Qué hace |
|---|---|---|
| Modo de diseño | Contenido (por defecto), Ancho fijo, De borde a borde | Cómo se relacionan la sección y su fila interior con el ancho del área de visualización. La opción De borde a borde ocupa toda el área de visualización; las columnas siguen apilándose en dispositivos móviles. |
| Altura | Automático, 50 % de la ventana gráfica, 80 % de la ventana gráfica, 100 % de la ventana gráfica | Altura de la banda de la sección en relación con la ventana del navegador (o con la altura del contenido si se selecciona Automático). |
Fondo de la sección (en el mismo panel Atributos): elige una imagen de fondo, el tamaño y la posición, y la opacidad de la superposición. El color de relleno sólido se mantiene en la pestaña Estilo; el panel Atributos no duplica un segundo selector de color.
Recuerda: la imagen y la superposición se aplican a la banda de sección a ancho completo. Reduce el ancho del titular o la cuadrícula con Fila → Ancho máximo, no recortando el fondo.
Configuración del ancho del contenido (la palanca de la derecha)
| Objetivo | Control recomendado | Qué evitar |
|---|---|---|
| Portafolio amplio o cuadrícula de artículos destacados (~1280 px) | Fila → Ancho máximo → 1280 / Completo | Gran espaciado horizontal de la sección |
| Artículo estrecho o texto extenso (~768 px) | Fila → Ancho máximo → 960 o un valor predefinido menor | Ancho de la pestaña «Estilo» en la sección |
| Margen lateral cómodo en móviles | Espaciado de la sección (normalmente entre 32 y 64 píxeles) | Uso del relleno para simular el ancho máximo de escritorio |
| Bloque independiente en el lienzo (portafolio incrustado, formulario de contacto) | Estilo → Ancho (se centra cuando se establece un valor fijo) | Esperar un contenedor de fila que no existe |
Las filas se centran automáticamente al establecer el ancho máximo en Atributos. Esa es la forma principal de comprimir o ampliar el contenido de la página.
Pestaña «Estilo» frente a «Atributos» para el diseño
| Control | Prefiere Atributos cuando… | La pestaña Estilo sirve para… |
|---|---|---|
| Ancho máximo de la fila | Siempre (características de diseño de la fila) | Solo en casos excepcionales de anulación |
| Modo de diseño de la sección / altura | Siempre (características de diseño de la sección) | No simularlo solo con la altura de «Estilo» |
| Relleno de fila / sección | Filas: solo Atributos; secciones: primero Atributos | Ajustes puntuales en elementos que no sean filas |
| Ancho del bloque en el lienzo | El bloque no tiene fila (incrustación independiente) | Ancho fijo con centrado automático (p. ej., 800px) |
| Color sólido de sección / bloque | — | Color de fondo y ajustes preestablecidos del tema |
| Imagen de fondo de sección / CTA + superposición | Siempre bajo Attr | — |
| Tipografía y otros colores | Características del bloque cuando estén disponibles | Anulaciones visuales detalladas |
Si tanto Attr como Style exponen el relleno en la misma fila, utiliza solo Attr para evitar valores conflictivos en el sitio web en producción.
Relleno: vinculado y no vinculado
En Estilo → Espaciado, Relleno y Margen admiten dos modos:
- Vinculado (icono de enlace activado): un único valor se aplica a los cuatro lados, como en la sintaxis abreviada de CSS (
padding: 32px). - No vinculado (icono de enlace desactivado): configura superior, derecho, inferior e izquierdo de forma independiente.
Los controles deslizantes llegan hasta 160 px. Para valores mayores o asimétricos, cambia al modo «sin vincular» y escribe los valores en los campos numéricos (por ejemplo, 200px o 48px 24px en los campos de cada lado).
Seleccionar el elemento correcto
| Problema | Solución |
|---|---|
| No se puede hacer clic en la fila del lienzo | Capas → expandir Sección → seleccionar Fila |
| El contenido aparece alineado a la izquierda con espacio vacío a la derecha | Establecer Fila → Ancho máximo en Atributos, no solo Estilo → Ancho en un bloque secundario |
| La banda es demasiado alta o demasiado baja | Configura Sección → Atributos → Altura, o ajusta el espaciado vertical / la altura mínima de la columna, no el ancho de la sección |
| El fondo parece recortado al ancho del contenido | El fondo está pensado para ocupar todo el espacio; reduce el ancho del contenido con Fila → Ancho máximo en su lugar |
| La incrustación del portafolio no está centrada con un ancho personalizado | Estilo → Ancho en el bloque (se centra automáticamente); confirma Guardar página y previsualiza |
Plantillas de página habituales
Página de contenido estándar
- Añade una Sección.
- En su interior: Fila (el ancho máximo predeterminado suele ser suficiente).
- Añade 1 columna o 2 columnas.
- Coloca los bloques en las columnas.
Banda de sección a todo el ancho, cuerpo contenido
- Selecciona la sección → Atributos → Modo de diseño → De borde a borde (opcional) y configura la altura si quieres una banda alta.
- Añade una imagen de fondo o un color Estilo sólido a la sección; mantén el ancho máximo de la fila para los titulares y los botones.
- Siguiente sección: Contenida con un ancho máximo normal de fila para el cuerpo del texto o las cuadrículas.
Incrustación independiente (sin fila)
Algunos bloques (por ejemplo, Incrustación de portafolio, Formulario de contacto) pueden colocarse directamente en la página sin necesidad de una fila. Utiliza Estilo → Ancho para ajustarlos y centrarlos; utiliza Atributos para las opciones específicas del bloque.
Próximos pasos y validación
- Abre un borrador de página → Capas → confirma la jerarquía Sección → Fila → Columna.
- Selecciona la sección → Atributos → prueba Contenido frente a De borde a borde y una altura del % de la ventana gráfica → previsualiza en Ordenador y Móvil.
- Selecciona la fila → Atributos → cambia el Ancho máximo → comprueba que el fondo sigue ocupando todo el ancho mientras que el contenido se estrecha.
- Añade relleno horizontal a la sección solo para dejar espacio libre en los bordes, no para simular un ancho máximo.
- En un bloque independiente, configura Estilo → Ancho en
800px→ comprueba que se centra tras Guardar página.
Relacionado: Barra lateral y barra de herramientas del editor de páginas · Referencia de bloques y diseño del editor · Bloques de presentación multimedia compatibles