Ejecuta una sección de borde a borde.
Puedes dejar que el contenido de una sección vaya de borde a borde, o mantenerlo enmarcado en el centro mientras el fondo llena la ventana. Un interruptor en la sección decide: Full width. El ejemplo crea una sección gris con tres columnas, y luego activa Full width para que las columnas se estiren. Para rellenos de color y foto, consulta Fondos.
El vídeo crea una sección gris con 3 columnas, y luego deja que su contenido vaya de borde a borde.
Crea una sección enmarcada
- Haz clic en Add Elements en el área de contenido vacía y escoge Section en la pestaña Layout.
- Pasa sobre la sección, abre More y elige Settings.
- Abre el panel Style y escoge un Background gris claro.
- Haz clic en Save. El gris ya cubre la ventana.
- Haz clic en + en la sección y escoge Row.
- Haz clic en el icono de cuadrícula en la fila, escoge la baldosa con tres columnas iguales y haz clic en Save.
- En cada columna, haz clic en +, escoge Text en la pestaña Content, escribe un Heading 4 y una línea, y haz clic en Save.
Las tres columnas quedan en un recuadro centrado en la banda gris.
Activa Full width
- Abre More en la sección y elige Settings.
- En el panel General, activa Full width.
- Haz clic en Save.
- Haz clic en Save en la barra de DXPR Builder.
- Abre el menú de vista, el icono de ojo en la barra, y elige Preview.
Lo que ves
La banda gris se ve igual que antes. Solo cambió el recuadro de contenido: la primera columna ahora empieza en el borde izquierdo de la sección y la última termina en el borde derecho.
Cada sección tiene dos partes: un elemento exterior que lleva el fondo, y un recuadro interior que guarda las filas. Full width solo cambia el recuadro interior. Desactivado, está centrado con un ancho máximo; activado, se estira a los bordes de la sección.
Ajustes
El panel General de la sección tiene tres interruptores de diseño, todos desactivados por defecto:
| Ajuste | Qué hace |
|---|---|
| Full width | Las filas llenan la sección de borde a borde en lugar de un recuadro centrado |
| 100% height | La sección es al menos tan alta como la ventana del navegador |
| Vertical centering | Las filas están en el centro vertical de la sección |
Las filas no tienen ajuste de ancho propio; la sección decide.
Dos patrones
- Fondo de borde a borde, texto en recuadro: el hero común. Deja Full width desactivado y fija el fondo en el panel Style o Background effects.
- Contenido de borde a borde: una tira de tarjetas o imágenes. Activa Full width y dale a las columnas algo de Padding si el texto queda muy cerca del borde de la ventana.
Si no ves el cambio
- Nada cambia al activar Full width. En una pantalla estrecha, como un teléfono, la versión enmarcada ya llena el ancho. Ensancha la ventana del navegador y mira de nuevo.
- El fondo no llega a los bordes de la ventana. Tu tema pone el contenido de página en una región enmarcada, y la sección solo puede llenar esa región. Elige un diseño de página o región de ancho completo en tu tema.
- Text touches the window edge. Eso es lo que hace Full width. Añade Padding en el panel Style de las columnas, o deja Full width desactivado.
¿Qué sigue?
- Rellena una sección con color, foto o degradado: da estilo a la banda tras tu contenido.
- Haz que tu diseño funcione en teléfonos: controla cómo se comportan las columnas en pantallas pequeñas.