Una de las nuevas funciones más interesantes que trae Divi 5 es la posibilidad de crear módulos anidados, una característica que muchos usuarios habíamos esperado por años. En esta nueva píldora quiero contarte qué son, cómo funcionan y por qué esta mejora, aunque pueda parecer pequeña a primera vista, representa un paso importante hacia una versión mucho más flexible y poderosa del constructor visual de Elegant Themes.

Como diseñador web que trabaja con Divi a diario, puedo decirte que este tipo de funciones, aunque inicialmente se perciban como “menores”, terminan siendo las que cambian la manera en que construimos estructuras complejas. En este artículo te explico cómo aprovechar los módulos anidados, cuándo te serán más útiles y qué papel jugarán en futuras funciones como el Menu Builder que Elegant Themes ya ha confirmado.

Qué son los módulos anidados en Divi 5

Los módulos anidados (Nested Modules) son una nueva función que permite colocar módulos dentro de otros módulos, algo que antes no era posible de forma nativa en Divi. Hasta ahora, si queríamos lograrlo, era necesario recurrir a plugins externos o insertar código personalizado.

Con Divi 5 esto cambia por completo: ahora puedes abrir un módulo y dentro de él agregar otros módulos sin necesidad de complementos. En pocas palabras, el constructor se vuelve mucho más flexible, similar a cómo funcionan los sistemas de bloques o constructores modernos.

Imagina tener un acordeón de preguntas y respuestas (FAQ) y dentro de una de las pestañas poder insertar un video, una galería o incluso otro acordeón. Antes esto implicaba un proceso complejo con HTML personalizado o plugins adicionales, pero ahora puedes hacerlo con un par de clics dentro del editor visual.

🔥 Consejo profesional: los módulos anidados son especialmente útiles cuando necesitas combinar diferentes tipos de contenido dentro de un mismo elemento visual, sin romper el diseño general ni depender de código.

Diferencia entre módulos agrupados y módulos anidados

Es importante no confundir los módulos anidados con los módulos agrupados (Group Modules), otra función introducida recientemente.

• Los módulos agrupados permiten reunir varios módulos en uno solo para aplicar estilos globales de manera más sencilla.
• Los módulos anidados, en cambio, permiten insertar módulos dentro de otro, pero sin que compartan estilos ni configuración global.

Por ejemplo, con los módulos agrupados puedes tener un conjunto de elementos (texto, botón, imagen) y cambiar su espaciado o color de fondo de forma unificada. En cambio, con los módulos anidados puedes tener un acordeón y dentro de cada pestaña colocar un módulo independiente, como un formulario o un video, que conserva sus propias propiedades y estilos.

🔥 Consejo rápido: usa los módulos agrupados para simplificar el diseño visual general, y los módulos anidados cuando necesites una estructura lógica o funcional más compleja.

Cómo funcionan los módulos anidados paso a paso

Paso 1: Abre tu módulo principal

Abre cualquier módulo que admita contenido interno editable, como un acordeón, un toggle, un blurb, o incluso algunos módulos personalizados.

Paso 2: Agrega un nuevo elemento dentro del módulo

Dentro del contenido de ese módulo, ahora verás la opción de agregar un módulo adicional. Simplemente haz clic en el botón “+” y elige qué tipo de módulo deseas insertar.

Por ejemplo, dentro de un acordeón podrías agregar:

• Un módulo de video para mostrar una explicación visual.
• Un módulo de texto con enlaces o descripciones ampliadas.
• Un botón de llamada a la acción para dirigir al usuario a otra página.

Paso 3: Personaliza el módulo interno

El módulo que agregues dentro de otro funcionará exactamente igual que cualquier otro módulo de Divi. Podrás ajustar colores, márgenes, animaciones y configuraciones de diseño desde el mismo panel habitual.

Paso 4: Guarda y visualiza los cambios

Una vez configurados los módulos internos, guarda los cambios y actualiza la vista. Notarás que los nuevos módulos se comportan perfectamente dentro del módulo principal, conservando su estructura, estilos y comportamiento responsivo.

😊 Consejo extra: prueba combinar módulos anidados con el sistema de columnas y Flexbox para crear estructuras complejas dentro de un solo contenedor. Te permitirá reducir el número de filas y optimizar la carga de tu diseño.

Ejemplo práctico: insertar un video dentro de un acordeón

Supongamos que estás creando una sección de preguntas frecuentes (FAQ) para una academia online. En una de las preguntas, quieres incluir un video explicativo que complemente la respuesta.

1. Crea un módulo Acordeón.
2. Dentro de una de las pestañas del acordeón, haz clic en el botón para agregar un módulo.
3. Elige el módulo Video e inserta el enlace de YouTube o el archivo que quieras mostrar.
4. Ajusta el diseño del video y guarda los cambios.

¡Listo! Ahora el video se reproducirá dentro de la pestaña del acordeón sin romper la estructura del diseño.

Antes de Divi 5, esto era imposible sin recurrir a código o plugins. Con los módulos anidados, todo se hace desde la interfaz visual.

Ventajas de los módulos anidados en Divi 5

1. Mayor libertad creativa: ya no estás limitado por el tipo de contenido que puedes insertar en cada módulo.
2. Reducción del uso de plugins externos: menos dependencias significa sitios más livianos y estables.
3. Diseños más complejos y personalizados: puedes combinar tipos de módulos para crear experiencias más ricas.
4. Facilidad de mantenimiento: todo se gestiona desde el constructor visual sin modificar código fuente.
5. Compatibilidad futura: será una función clave para próximas herramientas como el Menu Builder o los Mega Menús.

Módulos anidados y el futuro Menu Builder

Elegant Themes ya ha adelantado que está trabajando en una nueva herramienta llamada Menu Builder, que permitirá crear menús y mega menús directamente desde el constructor visual de Divi.

Esta función dependerá directamente de los módulos anidados, ya que permitirá colocar módulos dentro de otros elementos de menú. Por ejemplo, podrías crear un mega menú que contenga imágenes, formularios, videos o cualquier otro tipo de módulo Divi.

Por eso, aunque hoy esta función pueda parecer algo básica, en realidad es una pieza fundamental del ecosistema Divi 5. A medida que lleguen nuevas actualizaciones, será el núcleo de muchas de las innovaciones que veremos en la versión final.

Consejo de experto: empieza a familiarizarte con los módulos anidados desde ahora. Practica cómo integrarlos en tus layouts para que, cuando llegue el Menu Builder, puedas aprovecharlo al máximo desde el primer día.

Recomendaciones para sacar el máximo provecho

• Experimenta con diferentes combinaciones: prueba insertar módulos de imagen, texto o video dentro de otros módulos para crear estructuras únicas.
• Cuida el rendimiento: aunque Divi 5 está optimizado, evita abusar de los módulos anidados en exceso para no sobrecargar el DOM.
• Usa clases personalizadas: si planeas aplicar estilos específicos a los módulos internos, añade clases CSS únicas desde la pestaña avanzada.
• Guarda tus combinaciones como plantillas: si encuentras una estructura útil, guarda el layout en tu biblioteca para reutilizarlo en futuros proyectos.

Cursos recomendados en UXDivi

Si quieres aprender a fondo cómo funcionan estas nuevas características y aplicarlas en proyectos reales, te recomiendo los siguientes cursos disponibles en uxdivi.com/cursos:

• Curso Divi 5 en Fase de Desarrollo: donde exploramos paso a paso las nuevas funciones como módulos anidados, CSS Grid, Flexbox y más.

Conclusión

Los módulos anidados en Divi 5 marcan el inicio de una nueva etapa en el desarrollo visual con WordPress. Aunque su uso actual puede parecer limitado, su verdadero potencial está en lo que permitirá construir en el futuro: layouts dinámicos, menús interactivos y estructuras visuales mucho más personalizadas.

Esta funcionalidad demuestra que Elegant Themes está evolucionando Divi hacia un entorno más modular, flexible y profesional, donde cada actualización nos acerca más a una herramienta de diseño web integral.

Si trabajas con Divi de forma profesional, te recomiendo comenzar a usar esta función desde hoy mismo. Dominarla te preparará para aprovechar al máximo las próximas innovaciones que llegarán con el Menu Builder y el nuevo ecosistema de Divi 5.