Lección 3.3 — Filas anidadas (una fila dentro de otra)
Imagina un archivero de oficina. Tiene cajones grandes — esas son las Filas normales. Pero dentro de uno de esos cajones puedes meter un organizador pequeño con sus propios compartimentos — eso es una Fila anidada. Misma idea, diferente escala.
Primero — ¿qué es una Fila anidada?
Una Fila anidada es simplemente una Fila que vive dentro de una Columna, en lugar de vivir directamente dentro de la Sección. En Divi normal una Fila va así:
Con filas anidadas se ve así:
¿Para qué sirve una Fila anidada?
Sirve para crear diseños complejos que no son posibles con una sola Fila. Por ejemplo: imagina que tienes una sección con dos columnas — a la izquierda una foto grande, y a la derecha necesitas poner un título arriba y debajo de ese título tres íconos en fila. Esos tres íconos necesitan su propia distribución de columnas dentro de la columna derecha. Ahí es donde entra la Fila anidada.
Ejemplo real — perfil de doctor en CPS
Foto del doctor
(Módulo Imagen)
Lo que viste en tus capturas — dos filas vs fila anidada
En tus capturas había dos filas separadas dentro de la misma Sección. Eso es diferente a una Fila anidada. Mira la diferencia:
| Dos filas separadas | Fila anidada |
|---|---|
| Cada Fila ocupa todo el ancho de la Sección | La Fila anidada ocupa solo el ancho de su Columna |
| Se apilan una debajo de la otra | Vive dentro de otra Fila, en un espacio más pequeño |
| Más fácil de manejar — recomendada para principiantes | Más control — para diseños más complejos |
| El breadcrumb dice: Sección → Fila | El breadcrumb dice: Sección → Fila → Columna → Fila |
Esta tabla muestra la diferencia clave. El breadcrumb — esa ruta que aparece arriba del panel derecho — es tu mejor aliado para saber exactamente dónde estás en la jerarquía.
Cómo insertar una Fila anidada — paso a paso
1 Ten una Fila con al menos una Columna en el lienzo
Necesitas una Fila que ya exista con sus columnas visibles. En tus capturas viste una Fila con dos columnas — eso es el punto de partida.
2 Pasa el mouse sobre la Columna donde quieres anidar
La columna se ilumina con un borde verde. Dentro de ella aparece el botón + negro. Ese botón sirve para insertar un Módulo. Pero hay otro botón justo en el centro entre las dos columnas — el + verde — ese es el que abre el diálogo para insertar una Fila anidada.
+ Módulo
+ Módulo
3 Se abre el diálogo «Insertar Fila»
Es el mismo diálogo que ya conoces de la Lección 3.2 — con los tres grupos de distribución. Eliges cuántas columnas quieres para la Fila anidada y listo. Esa nueva Fila aparece dentro de la Columna de la Fila principal.
4 Verifica el breadcrumb
Haz clic en la Fila anidada. Mira arriba del panel derecho. Debería decir:
›
›
›
›
Si ves ese recorrido en el breadcrumb, lo hiciste bien.
¿Cuándo SÍ usar filas anidadas?
| Situación | ¿Fila anidada o filas separadas? |
|---|---|
| Foto + texto al lado en una sección | Filas separadas — más simple |
| Dentro de una columna necesitas subdividir el espacio | Fila anidada — es el caso exacto para esto |
| 3 tarjetas de servicios lado a lado | Fila de 3 columnas — sin anidar |
| Perfil de doctor: foto a la izq, y a la der título + 3 íconos | Fila anidada dentro de la columna derecha |
| Galería de 6 fotos | Multifila — sin anidar |
El panel de ajustes de la Fila — lo que viste en tus capturas
En tu primera captura tenías seleccionada una Fila y en el panel derecho viste la pestaña Contenido con estos grupos:
| Grupo | Para qué sirve | ¿Lo usarás seguido? |
|---|---|---|
| Elementos | Lista las Columnas de la Fila — puedes agregar, duplicar o eliminar columnas desde aquí. También está el botón «Aplicar Plantilla De Estructura» para cambiar la distribución de columnas sin borrar el contenido. | Sí — muy útil |
| Enlace | Convierte toda la Fila en un enlace clicable | Raramente |
| Fondo | Color, imagen o degradado detrás de la Fila — independiente del fondo de la Sección | A veces |
| 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 Fila | Raramente |
- Una Fila anidada es una Fila que vive dentro de una Columna de otra Fila
- El breadcrumb muestra: Sección → Fila → Columna → Fila (anidada)
- El botón verde
+entre columnas abre el diálogo para insertar la Fila anidada - No anidar si puedes resolverlo con filas normales — más simple en móvil
- El botón «Aplicar Plantilla De Estructura» cambia la distribución sin borrar contenido
- El grupo Elementos del panel de la Fila lista y gestiona sus Columnas