Lección 3.1 — ¿Qué es una Sección? Tipos disponibles
Imagina que tu página web es un edificio de varios pisos. Cada piso es una Sección. Puedes tener el piso de la entrada, el piso de los servicios, el piso del equipo médico, el piso del contacto. Cada uno es independiente, tiene su propio diseño, su propio color, su propia altura. Eso es exactamente lo que hace la Sección en Divi.
¿Qué es una Sección?
La Sección es el nivel más grande dentro del Visual Builder de Divi. Es el primer contenedor — la capa que envuelve todo lo demás. Dentro de una Sección van las Filas, y dentro de las Filas van los Módulos.
¿Cómo se ve una Sección en el lienzo?
Cuando tienes el Visual Builder abierto y pasas el mouse sobre una Sección, aparece un borde azul claro rodeándola y una barra de íconos en la esquina superior izquierda.
← íconos de la Sección
(filas y módulos adentro)
| Ícono | Qué hace |
|---|---|
⚙ |
Abre el panel de ajustes de la Sección en el lado derecho |
❐ |
Duplica la Sección completa — una copia exacta aparece debajo |
🗑 |
Elimina la Sección y todo lo que tiene adentro. Sin confirmación — usa Ctrl+Z si te equivocas |
⋮ |
Más opciones: bloquear, guardar en biblioteca, copiar atributos |
Los tres tipos de Sección
Cuando haces clic en el botón + azul para agregar una nueva Sección, Divi te pregunta qué tipo quieres. Hay exactamente tres opciones:
Tipo 1 — Sección Estándar
Es la Sección normal, la que usarás el 95% del tiempo. El contenido tiene un ancho máximo centrado (por defecto 1080px). Los bordes pueden tener el color que quieras, pero el contenido siempre queda centrado.
Cuándo la usas: para todo — servicios, equipo, testimonios, contacto, footer. Es la sección por defecto.
Tipo 2 — Sección de Pantalla Completa (Fullwidth)
El contenido se extiende de borde a borde de la pantalla, sin márgenes laterales. Ocupa el 100% del ancho disponible.
Cuándo la usas: banners hero a pantalla completa, mapas, galerías enormes, o cuando quieres impacto visual máximo sin límites.
Tipo 3 — Sección Especial
Tiene dos columnas predefinidas que no se pueden cambiar — una columna principal y una barra lateral.
Cuándo la usas: páginas de blog o artículos con barra lateral. Para sitios de clínicas es poco frecuente.
El panel de ajustes de la Sección
Cuando haces clic en el ícono ⚙ de la Sección, se abre el panel derecho con tres pestañas: Contenido, Diseño y Avanzado.
Pestaña Contenido — lo más importante
| Grupo | Para qué sirve | ¿Lo usarás seguido? |
|---|---|---|
| Fondo | El color, imagen o degradado detrás de toda la Sección. El más importante. | Sí — siempre |
| Elementos | Las Filas que tiene adentro esta Sección | A veces |
| Enlace | Convierte toda la Sección en un elemento clicable | Raramente |
| Bucle | Para mostrar contenido dinámico de WordPress | Función avanzada |
| Orden | Cambia el orden de las columnas en móvil | Al ajustar móvil |
| Metadatos | ID único de la Sección — información interna | Raramente |
El Fondo de la Sección — los 5 tipos
| Tipo | Qué es | Ejemplo en la clínica CPS |
|---|---|---|
| Color sólido | Un color plano y uniforme | Sección servicios con fondo gris claro (#f8f8f8) |
| Degradado | Transición suave entre dos colores | Hero con degradado de azul oscuro a azul medio |
| Imagen | Una foto como fondo | Sección citas con foto de la clínica semitransparente |
| Video | Video que se reproduce solo en el fondo | Hero con video corto del equipo trabajando |
| Patrón | Diseño repetitivo tipo textura | Sección testimonios con patrón geométrico sutil |
Pestaña Diseño
| Grupo | Para qué sirve |
|---|---|
| Diseño | Cómo se organizan las Filas adentro (sistema Flex) |
| Separadores | Formas decorativas en los bordes de la Sección — ondas, triángulos, curvas |
| Tamaño | Ancho máximo del contenido y altura de la Sección |
| Espaciado | El aire alrededor del contenido — padding y margin |
| Borde | Líneas de borde y esquinas redondeadas |
| Sombra De Caja | Sombra debajo o alrededor de la Sección |
| Filtros | Brillo, saturación, contraste — como filtros de foto |
| Transformación | Rotar, escalar o inclinar toda la Sección |
| Animación | Cómo aparece la Sección al hacer scroll |
Son formas decorativas que Divi dibuja en el borde superior o inferior de la Sección. En lugar de que dos secciones se toquen con una línea recta, puedes poner una onda, un triángulo o una curva. Se ve muy profesional sin escribir una sola línea de código.
Pestaña Avanzado
| Grupo | Para qué sirve — en palabras simples |
|---|---|
| Atributos | El ID y la clase CSS de la Sección para usarla en código |
| CSS | Código CSS que afecta solo a esta Sección |
| HTML | La etiqueta HTML que envuelve la Sección |
| Condiciones | Reglas de cuándo se muestra — solo usuarios registrados, ciertas fechas… |
| Interacciones | Efectos que se activan con clic, hover o scroll |
| Visibilidad | Mostrar u ocultar la Sección en escritorio, tablet o móvil |
| Transiciones | La velocidad del cambio visual al hacer hover |
| Posición | Estático, fijo, pegajoso (sticky)… |
| Efectos De Desplazamiento | Parallax y movimientos al hacer scroll |
- La Sección es el contenedor más grande de Divi — el primer nivel
- Hay tres tipos: Estándar, Pantalla Completa y Especial
- La Estándar es la que usarás siempre
- El Fondo está en la pestaña Contenido, no en Diseño
- Hay 5 tipos de fondo: color, degradado, imagen, video y patrón
- Los Separadores crean formas decorativas entre secciones sin código
- Visibilidad permite ocultar secciones por dispositivo