--- url: 'https://dxpr.com/es/hc/documentacion/aprender-dxpr-builder/maquetacion/secciones' title: 'Añade una sección | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T00:56:12+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: 'Una sección es una banda de tu página, como un hero arriba o una banda gris de funciones debajo. Le das a cada sección su propio fondo, color de texto, espaciado y alto, y la rellenas con filas o contenido. Lee esta página para añadir y configurar secciones; para dividir una en columnas, lee Filas y columnas.' tags: - Layout image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T17:19:22+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Añade una sección' description: 'Una sección es una banda de tu página, como un hero arriba o una banda gris de funciones debajo. Le das a cada sección su propio fondo, color de texto, espaciado y alto, y la rellenas con filas o contenido. Lee esta página para añadir y configurar secciones; para dividir una en columnas, lee Filas y columnas.' image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T00:56:12+0000' dateModified: '2026-10-24T17:19:22+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/documentacion/aprender-dxpr-builder/maquetacion/secciones' articleSection: Maquetación - '@type': WebPage '@id': 'https://dxpr.com/es/hc/documentacion/aprender-dxpr-builder/maquetacion/secciones' description: 'Una sección es una banda de tu página, como un hero arriba o una banda gris de funciones debajo. Le das a cada sección su propio fondo, color de texto, espaciado y alto, y la rellenas con filas o contenido. Lee esta página para añadir y configurar secciones; para dividir una en columnas, lee Filas y columnas.' 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 --- [Centro de ayuda](/es/hc)/[Documentación](/es/hc/documentacion) /[Aprende DXPR Builder](/es/hc/documentation/learn-dxpr-builder) /[Crear páginas](/es/hc/documentation/learn-dxpr-builder/build) /[Añadir contenido](/es/hc/documentation/learn-dxpr-builder/elements) /[Maquetación](/es/hc/documentation/learn-dxpr-builder/layout/overview) # Añade una sección. Aprende DXPR BuilderCrear páginasAñadir contenidoMaquetación ## En esta guía Guías relacionadas - [Añade una fila](/es/hc/documentacion/aprender-dxpr-builder/maquetacion/filas-columnas) - [Dale a una sección un fondo de color, foto o degradado](/es/hc/documentacion/aprender-dxpr-builder/diseno/fondos) - [Ejecuta una sección de borde a borde](/es/hc/documentacion/aprender-dxpr-builder/diseno/disenos-ancho-completo) Una sección es una banda de tu página, como un hero arriba o una banda gris de funciones debajo. Le das a cada sección su propio fondo, color de texto, espaciado y alto, y la rellenas con filas o contenido. Lee esta página para añadir y configurar secciones; para dividir una en columnas, lee [Filas y columnas](/es/hc/documentacion/aprender-dxpr-builder/maquetacion/filas-columnas). ## Añade una sección El ejemplo crea una sección hero azul marino para una clínica. Debajo sigue una sección gris clara con tres columnas. 1. Haz clic en **Añadir elementos** en una página vacía y elige **Sección** en la pestaña **Diseño**. Debajo de una sección existente, haz clic en **Añadir sección debajo**, el signo más redondo que hay debajo. 2. Pasa el cursor sobre la sección, abre **Más** y elige **Ajustes**. 3. Configura toda la sección: aquí **Centrar texto** en **Clases HTML**, un **Fondo** azul marino y un **Color de fuente** blanco. Haz clic en **Guardar**. 4. Haz clic en **+** en la sección para añadir contenido directamente, o añade una **Fila** para dividirla en columnas. 5. Haz clic en **Guardar** en la barra de herramientas para guardar la página. **Fondo** y **Color de fuente** están en el panel **Estilo** del diálogo. Los elementos nuevos caen arriba de la sección, así que añade primero el más bajo: en el vídeo, el botón entra antes que el encabezado. ## Lo que ves La banda azul marino llena la ventana de borde a borde. Su encabezado y su botón quedan en un cuadro centrado, el contenedor interior de la sección. La sección gris empieza justo debajo, con sus tres columnas de funciones en el mismo cuadro centrado. Cada sección nueva ya trae la clase **Tamaño de relleno vertical 5 (py-5)**en **Clases HTML**. Esa clase le da el espacio encima y debajo de su contenido. ## Configura tu sección El diálogo de ajustes tiene cinco paneles: **General**, **Efectos de fondo**, **Animación**, **Estilo** y **Estilo al pasar el cursor**. Solo las secciones tienen **Efectos de fondo**. | Ajuste | Panel | Efecto | Valor por defecto | |---|---|---|---| | **Ancho completo** | General | Las filas van de borde a borde en lugar de dentro del contenedor centrado | Desactivado | | **100% de alto** | General | La sección es al menos tan alta como la ventana del navegador | Desactivado | | **Centrado vertical** | General | El contenido queda en el centro vertical de una sección más alta que él | Desactivado | | **ID de HTML** | General | Un nombre de ancla, para que un enlace a `#name` salte a esta sección | Vacío | | **Clases HTML** | General | Clases de utilidad, como **Centrar texto** o un tamaño de relleno | **Tamaño de relleno vertical 5 (py-5)** | | **Efecto de fondo** | Efectos de fondo | **Imagen simple**, **Imagen fija**, **Imagen parallax**, **Degradado** o **Vídeo de YouTube** | **Imagen simple** | | **Fondo**, **Color de fuente** | Estilo | El color detrás de la sección y el color de su texto | Ninguno: lo decide el tema | El fondo siempre cubre toda la sección, diga lo que diga **Ancho completo**. Los efectos de imagen mueven la **imagen de fondo** que eliges en el panel **Estilo**; [Fondos](/es/hc/documentacion/aprender-dxpr-builder/diseno/fondos) muestra cada efecto. Para más o menos espacio, cambia **Tamaño de relleno vertical 5 (py-5)** por un tamaño menor o por **Sin relleno vertical (py-0)**. Para píxeles exactos, usa el cuadro del modelo de caja en el panel **Estilo**, como explica [Espaciado](/es/hc/documentacion/aprender-dxpr-builder/ajustes-elemento/espaciado). ## Recetas de secciones | Sección | Ajustes que la crean | |---|---| | Hero | **100% de alto** y **Centrado vertical** activados, un efecto de **imagen parallax**, un encabezado y un botón | | Funciones | Un **Fondo** claro, un encabezado y luego una fila de tres columnas | | Llamada a la acción | Un **Fondo** fuerte, **Centrar texto**, una línea corta y un botón | | Testimonios | Un **Fondo** claro y una fila de tres columnas, cada una con una **cita en bloque** | [Diseña una sección hero](/es/hc/documentacion/aprender-dxpr-builder/tutoriales/seccion-hero) crea la primera paso a paso. ## Si no lo ves - **La página vacía no tiene botón Añadir elementos.** El asistente de creación de páginas está desactivado, así que la página vacía solo ofrece **Elegir una plantilla**. Haz clic en el área vacía para abrir el selector de elementos, o activa **Activar asistente de creación de páginas** en `/admin/dxpr_studio/dxpr_builder/ai_settings`. - **No hay botón Añadir sección debajo.** Solo las secciones puestas directamente en la página lo tienen, no una sección dentro de una columna o una pestaña. Haz clic en **+** en la columna en su lugar. - **El centrado vertical no cambia nada.** La sección solo es tan alta como su contenido, así que no hay espacio donde centrar. Activa también **100% de alto**. - **Ancho completo parece no hacer nada.** El fondo ya cubre toda la sección; **Ancho completo** solo mueve las filas hasta sus bordes. Con texto corto en una columna, el cambio cuesta verlo. - **Apareció una sección que no añadiste.** Elegiste una **Fila** o un elemento de contenido en una página vacía, y cada elemento necesita una sección alrededor. DXPR Builder añadió una por ti; abre sus ajustes como los de cualquier otra. ## ¿Qué sigue? - [Filas y columnas](/es/hc/documentacion/aprender-dxpr-builder/maquetacion/filas-columnas): divide una sección en columnas. - [Fondos](/es/hc/documentacion/aprender-dxpr-builder/diseno/fondos): efectos de parallax, degradado y vídeo para secciones. - [Diseños de ancho completo](/es/hc/documentacion/aprender-dxpr-builder/diseno/disenos-ancho-completo): cuándo dejar que las filas lleguen de borde a borde.