Uno de los grandes avances que trae Divi 5 y que estaba muy esperado por la comunidad, es la funcionalidad de filas anidadas o Nested Rows, una característica que eleva el diseño dentro de Divi a otro nivel. Como diseñador web con experiencia en Divi, puedo decir que esta novedad representa un salto cualitativo en la forma en que podemos construir estructuras complejas, flexibles y responsivas sin necesidad de complicaciones extras ni hacks.

En este post te explicaré qué son las filas anidadas en Divi 5, cómo funcionan, te daré ejemplos prácticos y recomendaciones para que las apliques en tus proyectos y consigas diseños mucho más limpios, ordenados y profesionales.

¿Quieres ver como funciona esta funcionalidad en profundidad? Mira la clase de nuestro curso de Divi 5 en fase de desarrollo donde explicamos como crear estructuras anidadas con esta funcionalidad.

¿Qué son las filas anidadas en Divi 5?

Las filas anidadas son, como su nombre lo indica, filas que se pueden colocar dentro de otras filas. Es decir, ahora dentro de una columna podemos insertar otra fila con varias columnas, y dentro de esas columnas nuevas incluso otra fila más, y así sucesivamente. Esto hace que la creación de diseños complejos sea mucho más flexible y similar al modelo que ofrecen sistemas modernos como Flexbox o CSS Grid.

En Divi 4 y anteriores, la estructura estaba más limitada. Teníamos secciones que contenían filas, y filas que contenían columnas, pero no podíamos anidar filas dentro de columnas, lo que muchas veces obligaba a soluciones con secciones especiales o trucos que complicaban el diseño.

Ahora, con esta funcionalidad que llamamos Nested Rows o filas anidadas, podemos crear estructuras profundas con múltiples niveles que facilitan el orden visual y la responsividad.

¿Por qué es importante usar filas anidadas?

Este cambio no es solo una cuestión técnica, sino una mejora radical para el proceso creativo y para el resultado final. Al poder anidar filas, ganamos:

• Flexibilidad total en el diseño: Puedes crear columnas dentro de columnas para agrupar elementos relacionados.
• Diseños responsivos y adaptables: Permite un mejor control para adaptar el contenido a diferentes dispositivos.
• Mayor limpieza en el código: Menos secciones especiales y menos complicaciones que afectan la velocidad y estabilidad.
• Organización clara: Mejor gestión del contenido en el constructor visual.

Consejo UXDivi

Un consejo que siempre doy a los diseñadores que trabajan con Divi es: usa las filas anidadas para crear bloques de contenido modulares. Por ejemplo, una fila principal con dos columnas, donde una columna contiene un texto y otra una imagen, y dentro de la columna de texto anidas otra fila con columnas para dividir el texto en partes bien definidas y con estilos propios. Esto mejora la legibilidad y facilita los ajustes.

Cómo funcionan las filas anidadas: paso a paso

Vamos a verlo con un ejemplo práctico para entender mejor cómo crear estas estructuras.

Paso 1: Crear una fila principal

Primero, creas una fila con, por ejemplo, dos columnas (50% – 50%). Esta será la fila base dentro de tu sección.

Paso 2: Insertar una fila anidada dentro de una columna

Dentro de la primera columna, en lugar de agregar módulos directamente, ahora puedes insertar otra fila. Esta fila anidada puede tener su propia estructura de columnas, por ejemplo tres columnas iguales (33% cada una).

Paso 3: Añadir módulos dentro de la fila anidada

Ahora puedes añadir módulos individuales (texto, imágenes, botones, etc.) dentro de cada columna de la fila anidada. Esto te permite segmentar el contenido de manera más organizada y visualmente atractiva.

Paso 4: Crear más niveles de anidamiento

Si lo necesitas, dentro de las columnas de la fila anidada puedes insertar otra fila más. Esto es especialmente útil cuando necesitas una estructura muy detallada y personalizada, como en páginas de servicios o portfolios complejos.

Paso 5: Ajustar responsividad y estilos

Con la flexibilidad que ofrecen las filas anidadas, puedes ajustar tamaños, espacios, y comportamientos responsivos para cada nivel, haciendo que el diseño funcione perfecto en móviles, tablets y escritorios.

Ejemplo práctico real

En uno de los proyectos que estoy desarrollando con Divi 5, usé filas anidadas para crear una sección de testimonios con tres columnas, y dentro de la primera columna anidé otra fila con dos columnas para incluir foto y datos personales. Esto permitió que el diseño fuera compacto, ordenado y estético, y que además fuera muy fácil de ajustar para dispositivos móviles.

Recomendaciones para usar filas anidadas en Divi 5

• No abuses del anidamiento: Aunque puedes crear filas dentro de filas infinitamente, es recomendable mantener una estructura equilibrada para no complicar la gestión ni afectar la velocidad de carga.
• Organiza visualmente tus filas: Usa nombres descriptivos para filas y columnas en el constructor visual para identificar fácilmente cada bloque.
• Aprovecha para mejorar la experiencia móvil: Las filas anidadas permiten controlar mejor la distribución del contenido en pantallas pequeñas, evitando que los textos o imágenes se vean apretados.
• Usa estilos globales y presets: Para mantener uniformidad en tus filas anidadas, combina esta funcionalidad con variables globales y presets para un diseño consistente en todo el sitio.

¿Qué diferencias hay con la “sección especial” de Divi 4?

En Divi 4, para crear diseños complejos con columnas dentro de columnas, se utilizaba la “sección especial”. Esta solución era funcional, pero limitada y poco intuitiva para quienes diseñan. Las filas anidadas en Divi 5 son un reemplazo directo y mucho más poderoso y versátil que permite la misma estructura, pero con mejor integración y manejo.

Cómo prepararte para usar filas anidadas en Divi 5

Para sacarle el máximo provecho a esta funcionalidad, te recomiendo seguir nuestro curso Divi 5 en fase de desarrollo, donde abordamos en profundidad cómo funcionan las filas anidadas, ejemplos de uso, tips de diseño y ajustes avanzados.

Si quieres dominar Divi 5 y estar al día con todas sus novedades, suscríbete a UXDivi y accede a nuestros tutoriales y cursos especializados que te llevarán de cero a experto.

Otros recursos recomendados en UXDivi

Además de la clase específica de filas anidadas, estos cursos te ayudarán a potenciar tus habilidades en Divi y WooCommerce:

Curso Avanzado Divi 5: Explora todas las nuevas funcionalidades y trucos para diseños modernos.

Conclusión

Las filas anidadas en Divi 5 son una revolución para el diseño web con Divi. Permiten estructuras más complejas y flexibles, optimizan el proceso creativo y mejoran la experiencia del usuario en dispositivos móviles y escritorio. Su uso adecuado puede transformar radicalmente la calidad visual y funcional de tus proyectos.

Como diseñador, te invito a que experimentes con esta funcionalidad y la combines con otras herramientas de Divi como variables globales, presets y custom breakpoints para crear sitios únicos y profesionales.

No olvides seguir aprendiendo con nuestros cursos y tutoriales en UXDivi, donde continuamente publicamos material actualizado sobre Divi 5 y otras herramientas que harán que tu trabajo sea más eficiente y de alta calidad.

¡Nos vemos en la próxima píldora de Divi 5!