Los módulos son los elementos que permiten añadir contenido y funcionalidades a una página creada con Divi 5. Mientras que las secciones, filas y columnas se encargan principalmente de organizar la estructura, los módulos son los que contienen el contenido que finalmente verá e interactuará el usuario.
Textos, imágenes, botones, vídeos, formularios, galerías y muchos otros elementos se incorporan a una página mediante módulos. Por eso, aprender a utilizarlos correctamente es uno de los pasos fundamentales para dominar Divi 5.
Un módulo es un componente que puedes colocar dentro de una columna para añadir un determinado tipo de contenido o funcionalidad.
Por ejemplo, si quieres añadir un título a una página utilizarás un módulo adecuado para el contenido de texto. Si quieres mostrar una fotografía, utilizarás un módulo de imagen. Para crear un botón o un formulario utilizarás los módulos correspondientes.
La estructura básica de Divi puede representarse así:
Sección
└── Fila
└── Columna
├── Módulo
├── Módulo
└── MóduloEsta estructura permite separar claramente la organización de la página del contenido que contiene.
Divi 5 incluye una amplia variedad de módulos diseñados para cubrir diferentes necesidades de diseño y contenido.
Entre los más habituales encontramos:
La disponibilidad exacta de módulos dependerá de las funcionalidades incluidas en la instalación y de los elementos que quieras incorporar al proyecto.
Para añadir un módulo debes disponer de una estructura que incluya una columna. Al seleccionar el espacio correspondiente podrás elegir el módulo que quieres insertar.
El proceso básico consiste en:
Una vez añadido, el módulo puede desplazarse, duplicarse, copiarse o eliminarse según las necesidades del diseño.
Una de las características importantes de Divi es la separación entre el contenido y el diseño del módulo.
Por un lado puedes introducir el contenido que quieres mostrar. Por otro, puedes configurar aspectos visuales como:
Esta separación permite modificar la apariencia de un elemento sin tener que cambiar necesariamente su contenido.
Cada módulo dispone de sus propias opciones. Un módulo de imagen tendrá configuraciones relacionadas con la imagen, mientras que un botón tendrá opciones específicas para el texto, el enlace y su apariencia.
Aunque las opciones pueden variar según el módulo, normalmente encontrarás diferentes grupos de configuración destinados a:
La organización exacta de estas opciones puede variar en Divi 5 respecto a versiones anteriores, pero el concepto fundamental sigue siendo el mismo: primero se define qué debe mostrar el módulo y después cómo debe mostrarse.
No todos los módulos tienen el mismo nivel de complejidad.
Un módulo de imagen, por ejemplo, puede tener una función muy concreta: mostrar una imagen determinada.
Otros módulos permiten combinar diferentes tipos de contenido dentro de un mismo elemento. Esto puede ser útil para crear bloques completos de información sin necesidad de utilizar numerosos módulos independientes.
La elección dependerá del diseño que quieras conseguir y de cómo quieras organizar internamente el contenido.
El orden de los módulos dentro de una columna determina en gran medida la estructura visual del contenido.
Por ejemplo:
Columna
├── Título
├── Texto
├── Imagen
└── Botónpuede producir una experiencia diferente a:
Columna
├── Imagen
├── Título
├── Texto
└── BotónLa decisión debe responder a una lógica de contenido. En una página de servicios, por ejemplo, puede ser conveniente presentar primero el título y la descripción antes de mostrar la llamada a la acción.
Cuando un módulo está correctamente configurado, no siempre es necesario crear otro desde cero.
Divi permite duplicar elementos para reutilizar su estructura y configuración. Esto resulta especialmente útil cuando estás creando bloques repetitivos.
Por ejemplo, si tienes tres tarjetas de servicios con la misma estructura, puedes crear la primera correctamente y después duplicarla para modificar únicamente el contenido.
Este sistema permite ahorrar tiempo y mantener una mayor coherencia visual.
Una de las características especialmente importantes para el flujo de trabajo profesional es la posibilidad de utilizar presets.
Un preset permite definir un conjunto de estilos que puede reutilizarse en diferentes instancias de un módulo.
Por ejemplo, puedes crear un estilo común para todos los botones de una web y utilizarlo en diferentes páginas.
Esto evita tener que configurar manualmente cada botón y facilita realizar cambios globales posteriormente.
Los presets se estudiarán con mayor profundidad en el bloque dedicado al sistema de diseño global de Divi 5.
Cada módulo debe funcionar correctamente en diferentes tamaños de pantalla. Divi permite realizar ajustes específicos para escritorio, tablet y móvil cuando sea necesario.
Algunos ejemplos de ajustes responsive son:
No obstante, no conviene crear valores diferentes para todos los dispositivos sin una razón concreta. Lo ideal es utilizar un diseño flexible y realizar únicamente los ajustes necesarios.
Los módulos también desempeñan un papel importante en la accesibilidad de una página.
Por ejemplo, las imágenes deben disponer de textos alternativos adecuados cuando sean necesarios, los botones deben utilizar textos descriptivos y los encabezados deben respetar una jerarquía lógica.
No se debe utilizar un módulo únicamente porque permita conseguir determinado efecto visual. También hay que valorar cómo será interpretado por los usuarios y por las tecnologías de asistencia.
Los módulos de Divi pueden utilizar opciones avanzadas para añadir clases CSS, identificadores y otros ajustes técnicos.
Esto resulta útil cuando necesitas aplicar estilos personalizados o utilizar CSS específico para determinados elementos.
Por ejemplo, puedes asignar una clase común a diferentes módulos para aplicarles un comportamiento específico.
Sin embargo, es recomendable utilizar estas opciones de forma organizada. Añadir CSS personalizado sin una estructura clara puede complicar el mantenimiento del proyecto.
Divi permite construir páginas optimizadas para buscadores, pero el módulo utilizado no garantiza por sí mismo un buen posicionamiento.
Para conseguir una estructura adecuada es importante utilizar correctamente:
Por ejemplo, los encabezados deben utilizarse para organizar el contenido y no simplemente para conseguir un determinado tamaño de letra.
Uno de los errores más frecuentes al trabajar con Divi es utilizar módulos innecesarios para conseguir efectos que podrían resolverse mediante las opciones de diseño existentes.
Otros problemas habituales son:
Imagina que quieres crear una tarjeta para presentar un servicio.
Una columna podría contener:
Columna
├── Imagen o icono
├── Título
├── Descripción
└── BotónUna vez creada la primera tarjeta, puedes duplicar la estructura para crear las demás.
Después puedes utilizar presets para garantizar que los títulos, botones y otros elementos mantienen el mismo estilo en todas las tarjetas.
De esta manera, una estructura sencilla puede convertirse en un componente reutilizable dentro del proyecto.
En proyectos pequeños puede parecer innecesario prestar demasiada atención a la organización interna de los módulos. Sin embargo, esta decisión adquiere mucha importancia cuando una web comienza a crecer.
Una estructura ordenada permite identificar rápidamente qué elemento debes modificar y reduce el riesgo de alterar accidentalmente otras partes del diseño.
Es recomendable mantener una lógica coherente en la construcción de cada sección y evitar añadir elementos sin una función concreta.
En un proyecto profesional, los módulos forman parte de un sistema mucho más amplio. No se trata simplemente de colocar elementos hasta conseguir un diseño visualmente atractivo.
La estructura debería estar pensada para facilitar:
Esta forma de trabajar permite aprovechar realmente las posibilidades de Divi 5 y evita convertir cada página en una estructura completamente independiente.
Los módulos de Divi 5 son los componentes que contienen el contenido y las funcionalidades de una página. Se colocan dentro de las columnas y permiten construir prácticamente cualquier tipo de composición visual.
Dominar los módulos implica mucho más que conocer qué hace cada uno. También es importante saber cuándo utilizar cada elemento, cómo organizarlo dentro de la estructura, cómo adaptarlo a dispositivos móviles y cómo reutilizar sus estilos.
Una vez comprendida la relación entre secciones, filas, columnas y módulos, ya dispones de la base estructural necesaria para comenzar a trabajar con los diferentes módulos de contenido que ofrece Divi 5.
Rellena la mayor cantidad de datos posibles y acepta las políticas de privacidad para obtener más información de nuestros servicios:
© 2009-2025 webkamy diseño de páginas web y seo
