--- url: 'https://dxpr.com/es/hc/documentation/learn-dxpr-builder/design/full-width-layouts' title: 'Ejecuta una sección de borde a borde | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T11:17:54+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- 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. tags: - Ontwerpgidsen image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T11:17:54+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Ejecuta una sección de borde a borde' description: |- 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. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T11:17:54+0000' dateModified: '2026-10-24T11:17:54+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/es/hc/documentation/learn-dxpr-builder/design/full-width-layouts' articleSection: Ontwerpgidsen - '@type': WebPage '@id': 'https://dxpr.com/es/hc/documentation/learn-dxpr-builder/design/full-width-layouts' description: |- 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. breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Inicio item: 'https://dxpr.com/es' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: es --- [Help Center](/es/hc)/[Documentation](/es/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Elementen stylen](/hc/documentation/learn-dxpr-builder/element-settings) /[Ontwerpgidsen](/hc/documentation/learn-dxpr-builder/design/overview) # Ejecuta una sección de borde a borde. Learn DXPR BuilderBuild pagesElementen stylenOntwerpgidsen ## In this guide Related guides - [Dale a una sección un fondo de color, foto o degradado](/es/hc/documentation/learn-dxpr-builder/design/backgrounds) - [Haz que tu diseño funcione en teléfonos](/es/hc/documentation/learn-dxpr-builder/design/responsive-design) 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](/hc/documentation/learn-dxpr-builder/design/backgrounds). 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 1. Haz clic en **Add Elements** en el área de contenido vacía y escoge **Section** en la pestaña **Layout**. 2. Pasa sobre la sección, abre **More** y elige **Settings**. 3. Abre el panel **Style** y escoge un **Background** gris claro. 4. Haz clic en **Save**. El gris ya cubre la ventana. 5. Haz clic en **+** en la sección y escoge **Row**. 6. Haz clic en el icono de cuadrícula en la fila, escoge la baldosa con tres columnas iguales y haz clic en **Save**. 7. 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 1. Abre **More** en la sección y elige **Settings**. 2. En el panel **General**, activa **Full width**. 3. Haz clic en **Save**. 4. Haz clic en **Save** en la barra de DXPR Builder. 5. 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](/hc/documentation/learn-dxpr-builder/design/backgrounds): da estilo a la banda tras tu contenido. - [Haz que tu diseño funcione en teléfonos](/hc/documentation/learn-dxpr-builder/design/responsive-design): controla cómo se comportan las columnas en pantallas pequeñas.