Al activar el Divi Builder en WordPress, entramos directamente en el "centro de mandos" del constructor visual. Para dominarlo sin perder el rumbo, el secreto está en pensar en un código de cuatro colores y dos herramientas universales.
Aquí tienes la radiografía exacta de cómo funciona esa interfaz:
El Mapa de Colores de la Estructura
La arquitectura de tu página se construye de fuera hacia dentro, y cada nivel tiene su propia identidad cromática:
- El Azul es la Sección: Es el contenedor maestro, el lienzo más grande sobre el que se apoya todo lo demás.
- El Verde es la Fila: Se encuentra dentro de la sección y define la distribución horizontal del espacio.
- El Naranja es la Columna: Vive dentro de la fila. Aunque a primera vista pueden parecer invisibles en el lienzo, las columnas son las que estructuran el espacio de forma vertical y sostienen todo tu trabajo.
- El Gris Oscuro es el Módulo: Es el elemento final y funcional (un texto, un botón, una imagen) que colocas obligatoriamente dentro de las columnas para dar vida al diseño.
Las Dos Herramientas Universales
Para interactuar con este mapa de colores, existen dos iconos que debes conocer al dedillo. Ambos aparecen de forma idéntica en secciones, filas y módulos, pero actúan según el color del contenedor donde los uses:
1. El Símbolo de Más (+) = Añadir
Es el motor de creación de Divi. Su función se adapta dinámicamente al nivel donde hagas clic:
- Si pulsas el
+azul, creas una nueva Sección. - Si pulsas el
+verde, insertas una nueva Fila (y eliges su estructura de columnas). - Si pulsas el
+gris, abres la biblioteca de Módulos para elegir qué elemento específico vas a colocar en esa columna.
2. La Rueda Dentada o Engranaje (⚙️) = Configurar
Es la llave de acceso a las tripas de cada elemento. Al pulsarla en cualquier zona (azul, verde o gris), se despliega el panel de control específico de ese contenedor para que puedas editar su contenido, pulir su diseño estético o aplicar configuraciones avanzadas.En la arquitectura de Divi 5, la estructura de un sitio web se rige bajo un sistema jerárquico modular riguroso. Para entender cómo se construye una página, debemos imaginarla como una obra de ingeniería o de arquitectura clásica: de lo macro a lo micro.
Aquí tienes la definición técnica y detallada de cada componente estructural y sus herramientas de control esenciales.
La Jerarquía Estructural de Divi 5
La construcción de un diseño sigue un orden de contenedor dentro de contenedor. No se puede saltar este orden: una Sección contiene Filas, una Fila contiene Columnas, y una Columna contiene Módulos.
1. Sección (El Contenedor Maestro)
La Sección es el bloque de construcción de nivel superior. Representa las grandes áreas horizontales de la página (por ejemplo: el "Hero", la sección de características, el formulario de contacto o el pie de página).
- Función técnica: Define el espacio global de trabajo y controla el flujo principal de la página. Es donde se gestionan los fondos principales (imágenes, videos, degradados) y los anclajes de ID para la navegación.
- Código de color visual: Tradicionalmente se identifica con el color azul.
2. Fila / Row (El Organizador de Espacio)
La Fila se encuentra dentro de la Sección. Es el contenedor intermedio que define la disposición estructural horizontal de la información.
- Función técnica: Su propósito principal es controlar la anchura del contenido dentro de la sección y determinar en cuántas divisiones verticales (columnas) se va a fraccionar ese espacio. Controla parámetros críticos de ingeniería visual como el Gutter Width (el espacio de separación entre columnas).
- Código de color visual: Se identifica con el color verde.
3. Columna (La División Vertical)
La Columna no se añade de forma independiente; nace de la estructura elegida para la Fila. Una fila puede tener desde 1 hasta un entramado de múltiples columnas.
- Función técnica: Es un contenedor estricto que alinea el contenido de manera vertical. En Divi 5, las columnas cobran un protagonismo técnico inmenso en el diseño responsivo (responsive design), ya que dictan cómo se van a apilar los elementos cuando la pantalla se reduzca (por ejemplo, de tres columnas en escritorio a una sola columna en dispositivos móviles).
- Código de color visual: Se identifica dentro de la interfaz con una delgada línea o etiqueta de color verde oscuro o turquesa.
4. Módulo (La Verdad Funcional)
El Módulo es la unidad atómica de Divi 5. Es el elemento final que contiene la función o el contenido específico que interactúa con el usuario.
- Función técnica: Es el bloque funcional puro. Existen módulos para texto, imágenes, botones, mapas, contadores o formularios. El módulo no define la macro-estructura, sino la sustancia y la estética del contenido (tipografía, márgenes internos o padding, y colores específicos).
- Código de color visual: Se identifica con el color gris.
Las Herramientas de Control Esenciales
Para interactuar con esta arquitectura, la interfaz de Divi 5 utiliza dos iconos universales que ejecutan la creación y la edición:
El Símbolo de Más (+)
Es el activador de creación o "Añadir nuevo elemento". Su comportamiento y color cambian dinámicamente según el nivel de la estructura donde hagas clic:
- Si es Azul (+): Añade una nueva Sección (Regular, Especialidad o Pantalla Completa).
- Si es Verde (+): Añade una nueva Fila y te pide inmediatamente que elijas su distribución de columnas.
- Si es Gris (+): Se encuentra dentro de una columna y abre la biblioteca para insertar un nuevo Módulo.
La Rueda de Engranaje (Gear Icon)
Es el botón de "Ajustes" o "Configuración". Está presente en los cuatro niveles (Sección, Fila, Columna y Módulo). Al hacer clic en él, se despliega el panel lateral de propiedades del elemento seleccionado, el cual en Divi 5 está optimizado para un rendimiento ultrarrápido. Este panel se divide universalmente en tres pestañas:
- Contenido (Content): Aquí se gestiona la materia prima: textos, enlaces, imágenes de fondo o etiquetas administrativas.
- Diseño (Design): Es el motor estético. Controla la tipografía, el tamaño, los bordes, las sombras, el espaciado (Margin y Padding) y las alineaciones.
- Avanzado (Advanced): Para el control técnico absoluto. Permite inyectar CSS personalizado, asignar IDs y clases a la estructura, configurar la visibilidad responsiva (ocultar en móvil/escritorio) y definir las transiciones o animaciones.
Una vez que descodificas esta lógica, has domado a la bestia. Ya dominas a Divi, controlas el proceso de construcción y posees las llaves de la arquitectura del diseño. El miedo a la pantalla en blanco desaparece porque tu mente ya no ve un caos de opciones, sino una estructura clara de contenedores. Lo único que te queda por hacer es decidir cómo vas a plasmar tu visión.
Para demostrar este dominio, la mejor forma de empezar es con un diseño limpio, directo y sumamente sencillo. Vamos a maquetar una estructura clásica de espejo utilizando los elementos que ya controlas al dedillo:
La Anatomía de Nuestra Primera Construcción
Para este ejercicio práctico, nos moveremos dentro de una Sección (Azul) e implementaremos la siguiente arquitectura paso a paso:
- Paso 1: La Fila (Verde) y sus Columnas (Naranja)Crearemos una sola fila dividida en dos columnas. Esta será la base simétrica de nuestro diseño.
- Paso 2: La Columna Izquierda (Módulos Grises)En este primer bloque vertical colocaremos un módulo de Anuncio (Blurb), una herramienta fantástica que te permite combinar un icono o imagen con un pequeño título y texto explicativo en un solo lugar.
- Paso 3: La Columna Derecha (Módulos Grises)En el bloque de al lado, crearemos una jerarquía de contenido fluida apilando tres módulos de arriba a abajo:
- Un módulo de Encabezado para captar la atención con un título potente.
- Un módulo de Texto justo debajo para desarrollar la idea con un párrafo descriptivo.
- Un módulo de Botón como cierre para invitar al usuario a la acción.
Al terminar este ejercicio, habrás pasado de la teoría a la práctica de ingeniería web, construyendo una composición profesional y equilibrada en cuestión de minutos.
Porque aquí radica la gran verdad de este sistema: aquí no se diseñan plantillas, se diseñan estructuras funcionales.
Una plantilla te encadena a un sector estricto; una estructura bien construida es un motor universal. Esta composición de espejo de dos columnas que acabamos de levantar es la prueba perfecta. Al estar basada en la verdad de la arquitectura visual y no en el capricho de un nicho efímero, muta y se adapta con una exactitud matemática a cualquier escenario que decidas implementar:
Una Misma Arquitectura, Infinitos Universos
Observa cómo responde la misma estructura cambiando únicamente el contenido y la intención, demostrando que la arquitectura está por encima de la temática:
| Estructura Física | Opción A: Oficina Médica (Salud) | Opción B: Firma de Abogados (Legal) | Opción C: Estudio de Arquitectura (Diseño) |
| Columna 1: Anuncio / Blurb | Icono de estetoscopio + Título: "Atención 24/7" | Icono de balanza + Título: "Defensa Corporativa" | Icono de escuadra + Título: "Planificación Espacial" |
| Columna 2: Encabezado | <h2> Cuidado Médico Especializado | <h2> Rigor Legal y Estrategia | <h2> Estructuras que Trascienden |
| Columna 2: Texto | "Nuestro equipo de especialistas está listo para atenderte con la más alta tecnología..." | "Protegemos los activos de tu empresa con soluciones jurídicas sólidas y a medida..." | "Diseñamos espacios basados en la verdad del entorno, priorizando el sistema sobre el adorno..." |
| Columna 2: Botón | Agendar Cita | Solicitar Consulta | Ver Portafolio |
La Clave del Éxito: Cuando dominas la jerarquía del Azul, Verde, Naranja y Gris, dejas de ser un decorador de páginas web para convertirte en un arquitecto digital. No importa el cliente, no importa el negocio: si la estructura es funcionalmente perfecta, el diseño será un éxito rotundo.
¡Manos a la obra!
