Antes de poner el primer ladrillo, debemos hablar de la realidad: Divi, tal como viene de fábrica, tiene «vicios».
Si dejas los preajustes estándar, tu web se verá como «una web de Divi más». Estará llena de sombras pesadas, distancias que no cuadran y colores que ensucian tu mensaje. Para que nuestro sistema de variables funcione con la suavidad de un reloj suizo, tenemos que limpiar la mesa.
- Los inconvenientes de lo «Estándar»
Los ajustes que trae Divi por defecto están diseñados para ser «llamativos», pero no necesariamente «funcionales» o «profesionales».
Márgenes caprichosos: Divi suele poner espacios donde no los pediste.
Tipografías sin jerarquía: Los tamaños de letra saltan sin una lógica matemática.
Estilos heredados: A veces, un ajuste en un sitio rompe algo en otro.
- Tu Kit de Herramientas: Los Scripts de Universo Divi
Para ahorrarte horas de frustración y peleas con el ratón, he preparado una serie de scripts y códigos personalizados que vamos a instalar ahora mismo.
¿Qué hacen estos scripts por ti?
Resetean la estructura: Eliminan esos espacios «fantasma» que Divi pone por defecto.
Activan el Sistema Paramétrico: Preparan a Divi para que entienda nuestras 9 variables (XXS a XXL) de forma nativa.
Suavizan la experiencia: Hacen que el constructor responda más rápido y que el diseño final se vea limpio y profesional desde el primer clic.
- Instalación: Preparando el ADN de tu Sitio
No te preocupes por el código; yo ya hice el trabajo duro. Solo tendrás que seguir estos pasos:
- Importar el JSON de Configuración: Iremos a la Portabilidad de las Opciones del Tema y cargaremos el archivo que te he facilitado.
- Inyectar el CSS Maestro: Pegaremos nuestro script en el cuadro de "CSS Personalizado". Este es el "sistema nervioso" que controlará la luz y el tamaño en toda tu web.
El Resultado: Un lienzo obediente
Una vez instalados estos scripts, notarás que Divi ya no se siente como un programa rebelde. Se siente como una extensión de tu mano.
Seteo del Motor de Limpieza
Para que el Sistema Maestro de 9 variables funcione con precisión de relojero, primero debemos anular las interferencias de Divi. Este código se inserta en el "núcleo" de tu sitio.
Instrucciones de Instalación:
- Copia el bloque de código que ves a continuación.
- Ve a tu panel de WordPress y navega a: Divi > Opciones del Tema.
- En la pestaña General, baja hasta el final donde dice "CSS Personalizado".
- Pega el código y haz clic en Guardar cambios.
/* 1. RESET DE VARIABLES DE DISTANCIA (EL MÉTODO SEGURO) */
/* No forzamos display, solo cambiamos los valores de las variables de Divi 5 */
:root {
--et_pb_module_margin_bottom: 0px !important;
--et_pb_module_margin_top: 0px !important;
--et_pb_column_gap: 0px !important; /* Mata el espacio vertical entre módulos */
--et_pb_row_gutter_width: 0px !important; /* Mata el espacio horizontal entre columnas */
}
/* 2. RESET VERTICAL (Módulos pegados) */
.et_pb_column {
display: flex !important;
flex-direction: column !important;
gap: 0px !important; /* Mantiene el "pegado" vertical que queremos */
row-gap: 0px !important;
}
/* 3. LIBERACIÓN HORIZONTAL (Filas con Gap funcional) */
.et_pb_row {
display: flex !important;
flex-direction: row !important; /* Asegura que las columnas estén una al lado de otra */
/* NO ponemos gap: 0 !important aquí para que tus variables funcionen */
}
/* 3. LIMPIEZA DE MÁRGENES DE MÓDULOS */
.et_pb_module {
margin-top: 0px !important;
margin-bottom: 0px !important;
padding-top: 0px !important;
padding-bottom: 0px !important;
}
/* 4. RESET DE PÁRRAFOS (EL SALTO DE TEXTO) */
.et_pb_text_inner p,
.et_pb_text_inner p:last-child {
margin-bottom: 1rem !important;
padding-bottom: 0px !important;
}
/* 5. RESET DE IMÁGENES (ESPACIO BASE) */
.et_pb_image_wrap img {
display: block !important;
}
/* 8. RESET TOTAL DE MÓDULOS DE GRUPO */
.et_pb_group {
padding: 0 !important;
margin: 0 !important;
}
/* Forzar que los hijos (Texto, Icono, etc.) no hereden espacios */
.et_pb_group .et_pb_module {
margin-left: 0px !important;
margin-right: 0px !important;
margin-top: 0px !important;
margin-bottom: 0px !important;
}
No dejes la perfección al azar. Al configurar estos Presets por Defecto, has programado tu entorno de trabajo para que respete el vacío desde el primer clic. Ahora, cada vez que añadas una Sección, Fila o Módulo, nacerán puras, sin los escombros de márgenes y rellenos heredados. Has transformado Divi en una extensión de tu mente: un sistema donde el orden no se construye, simplemente es. Prepárate, porque sobre esta limpieza absoluta, vamos a inyectar el ADN de nuestras 9 Variables.
Con este reset aplicado, has silenciado el caos visual que Divi impone por defecto. Tu lienzo ahora es verdaderamente puro: un espacio de orden absoluto donde cada píxel espera tu mandato. No estás decorando una web; estás preparando la estructura ósea de una obra maestra. Respira este orden, porque en la próxima lección, empezaremos a dar vida a este vacío inyectando el ADN del Sistema de 9 Variables."
