Section y Container: controlar el ancho de la página

Objetivo: evitar que el texto ocupe todo el ancho de una pantalla grande y dar a una franja de contenido su propio aire.
Tiempo: 3 minutos
Necesita: una página con un slot Main

1. En el slot Main, seleccione Add Block y elija Section.
2. Póngale un Name. Es una etiqueta solo para el panel, para distinguir secciones en la lista de bloques; los visitantes no la ven nunca.
3. Ajuste Spacing para el aire vertical alrededor de la franja, y añada una imagen de fondo con Background Position y Overlay si la sección lo pide.
4. En la fila de la Section dentro de la lista de bloques, seleccione Add child block y elija Container.
5. Ajuste Width —de sm a xl, o full— y Flow. stack separa los hijos de manera uniforme; none los deja como están.
6. Añada sus bloques de contenido como hijos del Container.

Section es la franja horizontal. Va de borde a borde, lleva el fondo y es dueña del espacio de arriba y de abajo.

Container vive dentro y decide cuánto ancho se le permite al contenido.

Esa separación es la que permite que una fotografía a todo ancho quede detrás de una columna de texto que sigue siendo cómoda de leer.

• Las líneas largas cuestan de leer. Entre 60 y 75 caracteres es el rango cómodo, y para eso están los anchos estrechos. full es para imágenes y disposición, no para párrafos.
• El campo Name de los bloques de disposición es solo del panel. Úselo: una lista con cinco Sections llamadas «Section» no ayuda a nadie.
• Una Section sin Container es legítima y a veces correcta, pero entonces su texto es tan ancho como la pantalla.
• El anidado se hace con Add child block en la fila del padre, no añadiendo un bloque de primer nivel y confiando en la suerte.