Lección 3.4 — ¿Qué es un Módulo? Lista completa
🧱 La analogía del LEGO
Si la Sección es la base y la Fila divide el espacio, los Módulos son las piezas de LEGO que pones adentro. Cada pieza tiene una forma y función diferente — una es para texto, otra para imágenes, otra para videos. Tú eliges qué piezas usar y dónde ponerlas. Esa libertad es la magia de Divi.
Si la Sección es la base y la Fila divide el espacio, los Módulos son las piezas de LEGO que pones adentro. Cada pieza tiene una forma y función diferente — una es para texto, otra para imágenes, otra para videos. Tú eliges qué piezas usar y dónde ponerlas. Esa libertad es la magia de Divi.
¿Qué es un Módulo?
Un Módulo es el elemento más pequeño de la jerarquía de Divi. Es el contenido real — lo que el visitante de tu web realmente ve y usa. Todo lo demás — Secciones, Filas, Columnas — existe únicamente para darle estructura y posición a los Módulos.
SECCIÓN — contiene todo
FILA — divide el espacio
Columna
Columna
MÓDULO ← el contenido real
MÓDULO ← el contenido real
Cómo se insertan los módulos
Haces clic en el botón + negro dentro de una Columna y se abre el diálogo «Insertar Módulo O Fila». Ese diálogo tiene tres pestañas:
| Pestaña | Para qué sirve |
|---|---|
| Nuevo Módulo | Muestra todos los módulos disponibles. Aquí eliges cuál insertar. |
| Nueva Fila | Inserta una Fila anidada dentro de la Columna actual |
| Añadir Desde La Biblioteca | Usa un módulo que guardaste antes en tu biblioteca personal |
Los 46 módulos de tu Divi
En tu instalación tienes exactamente estos módulos. Los organicé por categorías para que sea más fácil encontrar el que necesitas según la situación:
Texto y contenido escrito
| Módulo | Para qué sirve | Cuándo usarlo en CPS |
|---|---|---|
| Texto | Párrafos, títulos, listas — contenido escrito libre | Descripción de servicios, historia de la clínica, cualquier texto largo |
| Texto Destacado | Título + subtítulo + imagen o ícono juntos en un bloque | Tarjetas de especialidades médicas con ícono arriba |
| Encabezado | Título grande con subtítulo y separador decorativo | Título de sección como «Nuestros Servicios» o «El Equipo» |
| Acordeón | Preguntas y respuestas que se abren y cierran | Preguntas frecuentes de pacientes — ¿Aceptan seguros? ¿Cuál es el horario? |
| Desplegable | Similar al acordeón pero con estilo diferente | Información de servicios que se expande al hacer clic |
| Pestañas | Contenido organizado en pestañas clicables | Servicios divididos por especialidad — Cardiología / Odontología / Pediatría |
| Testimonio | Cita de una persona con nombre, cargo y foto | Opiniones de pacientes satisfechos con foto y nombre |
| Código | Pega código HTML personalizado directamente | Insertar widget externo, código de reserva de citas, mapa personalizado |
Imágenes y multimedia
| Módulo | Para qué sirve | Cuándo usarlo en CPS |
|---|---|---|
| Imagen | Una sola imagen con enlace y texto alternativo | Foto del doctor, foto de la clínica, logo de certificación |
| Galería | Varias imágenes en cuadrícula con lightbox | Galería de instalaciones, fotos del equipo médico |
| Slider | Imágenes que rotan automáticamente con texto encima | Banner principal de la página de inicio con los servicios destacados |
| Slider De Video | Videos que rotan como un carrusel | Videos de procedimientos o presentaciones del equipo |
| Slider De Entradas | Artículos del blog en formato carrusel | Últimas publicaciones del blog de salud en la página de inicio |
| Imagen Antes/Después | Comparación de dos imágenes con un deslizador | Resultados de tratamientos — antes y después |
| Video | Video de YouTube, Vimeo o archivo propio | Video de bienvenida del director médico |
| Lottie | Animaciones vectoriales ligeras en formato Lottie | Íconos animados de servicios — corazón latiendo, diente brillando |
Navegación e interacción
| Módulo | Para qué sirve | Cuándo usarlo en CPS |
|---|---|---|
| Menú | El menú de navegación del sitio | El menú principal con Inicio, Servicios, Equipo, Citas, Contacto |
| Botón | Un botón clicable con enlace | Botón «Agendar Cita», «Ver Servicios», «Llámanos» |
| Enlace | Texto clicable que lleva a otra página o sección | Enlace a la política de privacidad, términos y condiciones |
| Llamada A La Acción | Bloque de texto + botón juntos — diseñado para captar atención | Sección «¿Listo para tu consulta? — Agenda hoy» con botón |
| Paginación | Botones de navegación entre páginas del blog | Al final de la lista de artículos del blog |
| Iniciar Sesión | Formulario de acceso para usuarios registrados | Portal de pacientes o área de miembros |
Formularios y contacto
| Módulo | Para qué sirve | Cuándo usarlo en CPS |
|---|---|---|
| Formulario De Contacto | Formulario con campos personalizables que envía al email | Formulario de contacto y solicitud de citas |
| Suscripción Por Email | Campo para capturar emails de suscriptores | Newsletter de consejos de salud mensuales |
| Comentarios | Sección de comentarios de WordPress | Al final de los artículos del blog de salud |
Personas, perfiles y redes
| Módulo | Para qué sirve | Cuándo usarlo en CPS |
|---|---|---|
| Persona | Perfil con foto, nombre, cargo y redes sociales | Tarjeta de cada doctor con foto, especialidad y contacto |
| Seguir En Redes Sociales | Íconos de redes sociales con enlaces | Footer con Facebook, Instagram y WhatsApp de la clínica |
| Icono | Un solo ícono de la biblioteca de íconos de Divi | Ícono de teléfono, email o ubicación en la sección de contacto |
| Lista De Iconos | Lista de ítems con ícono al lado de cada uno | Beneficios de la clínica — ✓ Atención personalizada ✓ Médicos certificados |
Estadísticas y números
| Módulo | Para qué sirve | Cuándo usarlo en CPS |
|---|---|---|
| Contador Numérico | Número que cuenta animado al hacer scroll | +5000 pacientes atendidos — +15 años de experiencia |
| Contador Circular | Porcentaje en círculo animado | 98% de satisfacción de pacientes — 95% de éxito en tratamientos |
| Contadores De Barra | Barras de progreso horizontal animadas | Nivel de experiencia por especialidad |
| Temporizador De Cuenta Atrás | Cuenta regresiva hacia una fecha | Cuenta regresiva para jornada de salud o evento especial |
Contenido dinámico del blog
| Módulo | Para qué sirve | Cuándo usarlo en CPS |
|---|---|---|
| Blog | Lista de artículos en cuadrícula o lista | Sección de artículos de salud en la página de inicio |
| Carrusel De Entradas | Artículos en formato carrusel horizontal | Últimas noticias de salud deslizables |
| Título De La Entrada | Muestra el título del artículo actual — solo para plantillas de blog | En la plantilla del artículo individual del blog |
| Portafolio | Cuadrícula de proyectos con filtros por categoría | Galería de casos de éxito o procedimientos por especialidad |
| Portafolio Filtrable | Igual que Portafolio pero con botones de filtro visibles | Casos clínicos filtrados por: Cardiología / Odontología / Pediatría |
Mapas y ubicación
| Módulo | Para qué sirve | Cuándo usarlo en CPS |
|---|---|---|
| Mapa | Mapa de Google Maps incrustado con marcador | Ubicación exacta de la clínica en la página de Contacto |
Estructura y navegación avanzada
| Módulo | Para qué sirve | Cuándo usarlo en CPS |
|---|---|---|
| Separador | Línea divisoria decorativa entre secciones de contenido | Separar visualmente bloques de texto dentro de una columna |
| Conmutador | Alterna entre dos bloques de contenido con un interruptor | Cambiar entre vista de precios mensual y anual |
| Tablas De Precios | Tabla comparativa de planes o paquetes | Paquetes de chequeo médico — Básico, Estándar, Completo |
| Barra Lateral | Muestra los widgets de WordPress en el área de contenido | Barra lateral del blog con categorías y entradas recientes |
| Buscar | Caja de búsqueda del sitio | Buscador en el encabezado o barra lateral del blog |
| Hero | Sección de presentación grande con imagen de fondo, título y botón | La sección principal de la página de inicio — «Tu salud, nuestra prioridad» |
| Grupo | Agrupa varios módulos para moverlos o darles estilo juntos | Agrupar logo + slogan para moverlos como una sola pieza |
| Carrusel De Grupos | Grupos de módulos que rotan en carrusel | Tarjetas de doctores que se deslizan horizontalmente |
| Portal del Lienzo | Abre un canvas especial — popup, menú lateral, cajón | Menú lateral que se abre desde la derecha en móvil |
⚠️ Los módulos del blog tienen una regla importante: Módulos como Título De La Entrada, Blog y Carrusel De Entradas muestran contenido dinámico de WordPress. Para que funcionen correctamente necesitas tener artículos publicados en tu WordPress. Si los insertas en una página normal y no ves nada, es porque aún no tienes entradas publicadas — no es un error.
Los grupos del diálogo «Nueva Fila»
Cuando abres el diálogo y cambias a la pestaña Nueva Fila, viste más grupos de los que habíamos visto antes. Tu Divi tiene en realidad cinco grupos de distribución — no solo tres:
| Sello | Grupo | Qué significa |
|---|---|---|
| Flex | Columnas Iguales | Columnas del mismo ancho — el sistema que ya conoces |
| Flex | Columnas Desplazadas | Columnas de anchos diferentes — también ya lo viste |
| Flex | Multifila | Cuadrículas de varias filas con Flexbox |
| Flex | Multicolumna | Nuevo en tu versión — columnas tipo periódico, el texto fluye de una columna a la siguiente automáticamente |
| Cuadrícula | Multifila | CSS Grid — más preciso que Flex para cuadrículas complejas. El sello naranja indica que usa Grid en vez de Flexbox |
| Cuadrícula | Masonry | Diseño tipo Pinterest — los elementos se acomodan solos rellenando el espacio disponible sin huecos |
| Cuadrícula | Barra Lateral | Columna principal + barra lateral fija — con Grid |
No te preocupes por entender Flex vs Grid ahora mismo. Lo único que necesitas saber hoy es esto: sello azul = Flex (el sistema clásico), sello naranja = Grid (más moderno y preciso para cuadrículas). Ambos funcionan excelente — la diferencia la notarás cuando empieces a diseñar páginas más complejas.
✅ Lo que aprendiste en esta lección
- El Módulo es el contenido real — lo que el visitante ve y usa
- Tu Divi tiene 46 módulos organizados por tipo de función
- El diálogo tiene tres pestañas: Nuevo Módulo, Nueva Fila y Biblioteca
- Los módulos del blog necesitan entradas publicadas para mostrar contenido
- Sello azul [Flex] = sistema flexible — sello naranja [Cuadrícula] = CSS Grid
- La Biblioteca empieza vacía — se llena cuando tú guardas módulos
- Los módulos más usados en clínicas: Texto, Imagen, Botón, Persona, Formulario, Mapa y Hero