Añade una sección.
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.
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.
- 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.
- Pasa el cursor sobre la sección, abre Más y elige Ajustes.
- 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.
- Haz clic en + en la sección para añadir contenido directamente, o añade una Fila para dividirla en columnas.
- 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 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.
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 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: divide una sección en columnas.
- Fondos: efectos de parallax, degradado y vídeo para secciones.
- Diseños de ancho completo: cuándo dejar que las filas lleguen de borde a borde.