Lección 3.2 – La Fila y los Tipos de Columnas
Imagina que tu página web es una casa. La Sección es una habitación completa. Dentro de esa habitación puedes poner un mueble largo — eso es la Fila. Y ese mueble tiene cajones — eso son las Columnas. Dentro de cada cajón guardas cosas — eso son los Módulos.
¿Qué es la Fila?
La Fila vive dentro de una Sección. Es el segundo nivel de la jerarquía de Divi. Su trabajo es uno solo: dividir el espacio horizontal de la Sección en columnas.
Cómo insertar una Fila
Cuando tienes una Sección en el lienzo y haces clic en el botón + verde que aparece dentro de ella, se abre el diálogo «Insertar Fila».
1 Haz clic en el + verde dentro de la Sección
Ese botón verde aparece cuando pasas el mouse sobre el área interior de la Sección. Si ya hay filas, también aparece entre ellas para insertar una nueva en medio.
2 Se abre el diálogo «Insertar Fila»
Verás dos pestañas en la parte superior:
- Nueva Fila — elige la distribución de columnas que quieres
- Añadir Desde La Biblioteca — usa una fila que guardaste antes
Por ahora siempre usarás Nueva Fila.
3 Elige la distribución de columnas
Haz clic en el diseño que necesitas y la fila aparece en el lienzo lista para recibir módulos.
Los tres grupos de distribución
El diálogo muestra los diseños organizados en tres grupos. Cada grupo tiene el sello [Flex] — eso significa que usan el sistema moderno de diseño flexible de CSS. No necesitas entender qué es Flex para usarlo — Divi lo maneja por ti.
Grupo 1 — Columnas Iguales
Todas las columnas tienen el mismo ancho. Son perfectas cuando el contenido es simétrico — todos los elementos tienen la misma importancia visual.
1 columna — 100%
2 columnas — 50% + 50%
3 columnas — 33% + 33% + 33%
4 columnas — 25% cada una
5 columnas — 20% cada una
| Distribución | Cuándo usarla en CPS |
|---|---|
| 1 columna — 100% | Títulos de sección, banners, texto centrado. La más usada. |
| 2 columnas — 50% / 50% | Imagen + texto, dos servicios lado a lado |
| 3 columnas — 33% cada una | 3 servicios, 3 doctores, 3 beneficios. Segunda más usada. |
| 4 columnas — 25% cada una | 4 especialidades, 4 estadísticas, íconos pequeños |
| 5 columnas | Redes sociales, logos de clientes, íconos |
Grupo 2 — Columnas Desplazadas
Las columnas tienen anchos diferentes. Se usan cuando el contenido no es simétrico — cuando un lado necesita más espacio que el otro.
2/3 + 1/3 — el lado izquierdo domina
1/3 + 2/3 — el lado derecho domina
3/4 + 1/4 — barra lateral estrecha
1/4 + 1/2 + 1/4 — contenido centrado
Grupo 3 — Multifila
Una cuadrícula de varias filas y columnas en un solo bloque. Todos los elementos quedan alineados entre sí automáticamente, como una tabla pero flexible.
Cuadrícula 2×2 — 4 elementos
Cuadrícula 3×2 — 6 servicios (ideal para CPS)
La pestaña «Añadir Desde La Biblioteca»
Esta pestaña muestra las filas que guardaste previamente en tu Biblioteca Divi. Si acabas de instalar Divi, dirá «Sin Resultados» — es completamente normal. Cuando empieces a guardar filas, aquí aparecerán con su nombre y miniatura para reutilizarlas en cualquier página.
Guía rápida para la clínica CPS
| Sección de la web | Fila recomendada | Motivo |
|---|---|---|
| Menú de navegación | 1 columna | El menú ocupa todo el ancho |
| Título «Nuestros Servicios» | 1 columna | Título centrado con todo el espacio |
| Tarjetas de servicios | 3 columnas iguales | Cardiología / Odontología / Pediatría |
| Sección «Nosotros» | 2/3 + 1/3 | Texto largo de historia + foto pequeña |
| Perfil de doctor | 1/3 + 2/3 | Foto circular + nombre y especialidad |
| Galería de instalaciones | Multifila 3×2 | 6 fotos en cuadrícula ordenada |
- La Fila es el segundo nivel — vive dentro de la Sección
- Su único trabajo es dividir el espacio horizontal en columnas
- Hay tres grupos: Columnas Iguales, Desplazadas y Multifila
- El sello [Flex] significa diseño moderno y flexible — Divi lo maneja solo
- Las distribuciones más usadas en clínicas: 1 columna y 3 columnas iguales
- La Multifila mantiene los elementos alineados automáticamente
- Siempre diseña primero en escritorio, luego ajusta para móvil