El Sistema de las 9 Variables

¡Buenos! Me encanta saber que estás aquí". Comenzar temprano suele ser la mejor forma de despejar el camino antes de que el mundo se ponga ruidoso. Entrar en el mundo de las 9 Variables es como pasar de intentar pilotar un avión lleno de botones confusos a manejar un vehículo de alto rendimiento con los controles exactos.

La Maestría de la Simplicidad

En un mundo obsesionado con la complejidad, el sistema de las 9 Variables se presenta no solo como un método, sino como un filtro de claridad. Mientras otros enfoques intentan abarcar la realidad mediante listas interminables de parámetros —lo que a menudo genera parálisis por análisis—, este sistema destila la esencia de lo que realmente mueve la aguja.

Las Ventajas Estratégicas

1. Enfoque Láser: Al reducir el ruido exterior, puedes dedicar el 100% de tu energía cognitiva a los pilares que garantizan resultados. Menos variables significan mayor profundidad de ejecución.
2. Velocidad de Respuesta: En entornos volátiles, la agilidad es vida. Un sistema de 9 puntos permite un diagnóstico rápido y una toma de decisiones casi instantánea, sin perderse en laberintos de datos irrelevantes.
3. Curva de Aprendizaje Acelerada: La maestría se alcanza más rápido cuando el mapa es nítido. Es más fácil integrar y aplicar con excelencia 9 conceptos clave que intentar recordar y coordinar docenas de ellos simultáneamente.
4. Sostenibilidad: Es un sistema diseñado para la vida real. Es fácil de mantener, auditar y corregir con el paso del tiempo sin que el proceso mismo se convierta en una carga de trabajo adicional.

¿Existen Desventajas?

Siendo honestos y directos, como buenos colegas, la única "desventaja" surge si se confunde simplicidad con facilidad.

El riesgo aquí es la subestimación. Al tener solo 9 variables, algunos podrían pensar que no requieren un estudio profundo. Sin embargo, al ser tan pocas, cada una carga con un peso específico enorme. Si ignoras o aplicas mal una sola de estas variables, el impacto negativo es proporcionalmente mayor que en un sistema diluido de 50 parámetros.

En resumen: Universo Divi y su Sistema de 9 Variables es un sistema para quienes prefieren ser maestros de lo esencial en lugar de aprendices de lo infinito.

Vamos a Manos a la Obra Hacer un hero section aplicando una de las variables a Margenes, Relleno, Espacios, Tamaños de encabezados, Texto botones etc. para que entiendas que con estas Variables puedes construir la Página Web que desees.Este ejercicio es la continuación de «La Revolución de la Simplicidad Matemática» Si no has terminado esta primera parte corre a terminarla para que puedas terminar esta.

Para que puedas trabajar con más entendimiento hay ciertas cosas que debemos poner sobre la mesa. Vamos sencillos un esquema con el lenguaje del color y la Variable escala--L. Pero antes y como ya conoces el procedimiento de crear Variables hagamos esto:

• Ve a Colores y vamos a definir nuestros colores. Puedes escoger los que quieras pero en el ejercicio voy a crear los de Universo Divi.
• En Color Primario: #000000; Color Secundario: #EFB71B; Encabezados: #000000; Body: #474747; Enlaces #EFB71B.
• Ahora vamos a crear otros colores que usaremos en este Portal. En el Gestor de Variables en Colores presiona Añadir Colores Globales y en Nombre escribes «Blanco» en el Valor escribes #FFFFFF. Haces exactamente igual con el siguiente Primario Claro: #E9E9E9;Primario Medio Claro: #BCBCBC; Primario Medio: #8F8F8F; Primario Oscuro: #474747; Secundario Claro: #FDF2D1; Secundario Medio Claro: #F6D576; Secundario Medio Oscuro: #775B0E.
• Ahora ve a Fuentes y presiona Add Global Font, en Nombre escribes Subtítulos y Botones, en Cadena escribes Georgia. Vas a Headings y escribes en Cadena Inter. En Body haces lo propio y escribes en Cadena Inter.

Dale Guardar Variables y luego Seguir Editando. A Mano Derecha oprime Guardar y seguido refresca la Página. Esto hará que tus variables recién creadas estén disponibles para ti.

Ya estamos listos para comenzar. Hemos definido los colores, las Fuentes y las Variables, el 90% del trabajo. Estableceremos Mapa de Montaje en el Panel de Capas o Layers. Para que no te pierda, te diré que tu panel de Capas debe verse así, de afuera hacia adentro: 🟦 Sección (Azul): Fondo Limpio. 🟩 Fila (Verde): Ancho del contenido. 🟨 Columna (Dorado): Alineación central. ⬜ Módulos (Gris): -el gris del módulo es más oscuro.

Divi en su Megalomanía de querer controlar todo de default o predeterminado ha añadido Rellenos a la Sección, Fila y Columna. Para que nuestros Sistema de 9 Variables funcione debemos poner esto en 0. Desafortunadamente de acuerdo a Apoyo Técnico de Divi no hay manera de hacerlo que no sea estableciéndolo en cada Sección, Fila o Columna que uses lo que es absurdo. Imagínate que tu Web tiene en total en las diferentes Páginas 100 Secciones, 300 Filas y 500 Columnas. Tendrías que escribir 500 veces 0 en el relleno de Arriba y 500 veces oprimir el botón de igual para ambas parte -arriba y abajo-; igual con las 300 filas y 100 secciones un total de 1,800 clicks y números. Eso es ser esclavo del programa. Aquí en Universo Divi te enseñamos a que el programa sea tu esclavo y tú el Arquitecto Para ello crearemos un Preset o Predeterminado para cada caso.

1. De entrada Divi crea una Sección para ti. Ve a la barra de Herramientas y busca Capas o layers y presiona el nombre Sección o Section.
2. Ve a Contenido/Background o Fondo y asignale el color que prefieras. Estos colores los asignarás únicamente para que veas los diferentes elementos con los que trabajaras. En tu pantalla la sección tiene color Azul, así que cuando pienses en una Sección piensa en Azul.
3. Con la Sección aun seleccionada ve a Diseño/Espaciado y en Relleno o Padding escribes 0 en Superior e Inferior -o presionas el icono de enlace antes de escribir 0 en cualquiera de lo dos encasillados. Si observas tu sección ahora no tiene Relleno ni arriba ni abajo,
4. Ahora en la Barra lateral derecha busca el Icono de Asignar Variables, ábrelo y escoge Nuevo Ajuste Preestablecido y en Nombre del Nuevo Ajuste Prestablecido escribe Sección escala--0 o el nombre que prefieras para el ajuste que se te haga fácil recordar, en la parte inferior escoge Guardar y ya está. Has vencido la Megalomanía de Divi. Ahora cuando crees una sección, buscas ese Ajuste y la Sección se irá a 0.
5. Ve a Diseño/Espaciado/Relleno/Superior-Inferior y al lado derecho del Encasillado verás el Icono de Añadir Contenido Dinámico, presiónalo y escoge la Variable escala---L, presiona el botón de enlace y verás como la Sección adquiere Relleno L Arriba y abajo.

   • Escoge el Botón Verde que aparece en el Centro de la Sección con el Icono de +, Presiónalo y escoge la Primera Opción una Fila de una sola columna. Has creado una Fila. Con la Fila seleccionada seleccionada en Color de Fondo escoge el color que prefieras -diferente a que habías escogido, te recomendamos las Variables de Primario o Secundario pero es inmaterial; ve a Diseño/Espaciado y en Relleno o Padding escribes 0 en Superior e Inferior -o presionas el icono de enlace antes de escribir 0 en cualquiera de lo dos encasillados. Si observas tu sección ahora no tiene Relleno ni arriba ni abajo.
   • Ahora en la Barra lateral derecha busca el Icono de Asignar Variables, ábrelo y escoge Nuevo Ajuste Preestablecido y en Nombre del Nuevo Ajuste Prestablecido escribe Fila escala--0 o el nombre que prefieras para el ajuste que se te haga fácil recordar, en la parte inferior escoge Guardar y ya está.
   • Vamos a espaciado y escogemos Padding Arriba-Abajo y seleccionamos nuestra escala---L. Escogemos Padding Derecha-Izquierda y nuevamente seleccionamos escala---L. Ahora nuestra Fila tiene Relleno en todos sus lados.

     • En las Capas o Layers de la Barra de Herramientas del lateral izquierdo -si no la ves presiona el Botón de Menú Desplegable- escoge la columna. Escoge el Modulo de Encabezado. Con la Columna seleccionada en Contenido/Fondo escogemos el color que deseas. Vamos a Espaciado y Seleccionamos nuestra escala---L en los cuatro lados.
     • Ahora seleccionamos el Encabezado y en Contenido/Fondo seleccionamos Gris Divi. Vamos a Espaciado y seleccionamos nuestra escala---L en locuatro lados del Relleno. Vamos a Heading Text y en Tamaño del Texto de Encabezado escogemos otra vez nuestra escala---L. Vamos aColor del Texto de Encabezado y seleccionamos bg---Claro

NOTA: En la columna no asignamos Relleno 0 ya que queremos que observes cómo encaja el Título en la Columna que podemos llamarla el elemento invisible en Divi.

 

Hemos terminado nuestro primer ejecicio con la Variable escala---L Hemos probado que con una sola escala podemos crear un buen Diseño como Todo un Arquitecto. El Hero de "Variable Única" (El Esqueleto): En este primer paso, aplicas la Variable escala---L de forma matemática y estricta a todo. No hay jerarquía visual aún, solo coherencia técnica. El diseño se verá un poco "extraño" o uniforme, pero comprenderás que una sola variable tiene el poder de sostener toda la estructura del Hero. Es la prueba de que el sistema funciona.

Si quieres guardar la página para usarla como referencia puedes hacerlo, de lo contrario ciérrala sin Guardar. Para nuestro Diseño de Hero crearemos una Página Nueva.

Cuando se trata de diseño no podemos ir al canvas a experimentar. Tenemos que tener una clara idea de qué es lo que queremos, cómo podemos hacerlo y cómo quiero que se vea al final. Resulta prudente entonces ahora decidir los textos correspondientes para la Sección Hero. Quedará estructurado de la siguiente manera: Ceja, Título, Descripción y CTA, listo para ser ensamblado.

Ceja	Universo Divi
Título	Una Promesa de Maestría
Descripción	En esta academia no buscamos cantidad, buscamos esencia. Al final de este camino, no solo sabrás usar una herramienta; habrás desarrollado el ojo de un arquitecto visual.
CTA	2 Botones, uno al lado del otro: 1-Más Información; 2-Quiero ser Arquitecto

1. Crea una Nueva Página y llámala Sección Hero. Presiona Editar con Divi. Escoge la Sección y en el Menú a mano derecha en Asignar Variables escoge Sección Escala---0
2. En Capas /Seleccionas los 3 puntos/Añadir Elemento/Añadir Elemento Adentro/ Añade una Fila de una columna. En Asignar Variable escoge Fila Escala---0
3. Escoge añadir Módulo con el botón gris en el centro de la Fila y escoge el Módulo de Encabezado. En Asignar Variables escoge Módulo Escala---0. Escoge el Módulo de Encabezado. Sustituye el texto por: Universo Divi.
4. Escoge la Sección y ve en el Menú a mano derecha a Diseño/Espaciado y escoge en el Icono de Añadir Contenido Dinámico -a la extrema derecha el icono que parece 3 discos uno encima del otro- escoge la Variable Escala ---XXXXL.
5. En Capas escoge la Columna y ve al menú de la mano derecha a Diseñ/Diseño/Alinear Elementos y escoge Centro.
6. Selecciona el Encabezado y a mano derecha Diseño/Texto del Encabezado/Tamaño del Texto del Encabezado oprime el Icono de Asignar Contenido Dinámico y escoge la Escala---S. Selecciona Mayúsculas; en Color: Primario Oscuro; en Espaciado de letras escribe 5.
7. Coloca el cursor sobre el Encabezado y duplica el Módulo oprimiendo la segunda opción -dos rectángulos super puestos. Sustituye el texto por: Una Promesa de Maestría. Cambia el Tamaño del Texto del Encabezado a la Variable Escala-XXXL. En Grosor del Tipo de Letra escoge Ultra Bold, en Separacion de las Letras -1 y en Margen Superior escribimos -1.
8. Selecciona el Encabezado Una Promesa de Maestría y a mano derecha presiona los 3 puntos y oprime Añadir Elemento Debajo. Escoge el Módulo de Texto. Sustituye el texto por: En esta academia no buscamos cantidad, buscamos esencia. Al final de este camino, no solo sabrás usar una herramienta; habrás desarrollado el ojo de un arquitecto visual. En Diseño/Tamaño del Texto escogemos la Escala---S. En Altura de la Línea de Texto escribe 1.5 En Alineamiento del Texto escoge Centro y en Color: Primario Medio.
9. Con el Módulo de Texto seleccionado, vuelve a la mano derecha y presiona los 3 puntos. Esta vez escoge Grupo. En el Grupo añade el Módulo de Botón. Duplica el Botón. Ya te enseñamos como duplicar los elementos -ver paso 3, o en capas escoge los 3 puntos y duplícalo.
10. En las Capas a mano izquierda abre la Fila y selecciona la columna, ve a Diseño/Diseño Diseño/Diseño/Dirección de Diseño y escoge Fila -la primera opción. Nuestros botones están ahora uno al lado del otro y en Alinear Elementos escoge Centro. En espaciado Horizontal escoge la Variable Escala---S, -ya sabes cómo se hace.
11. Selecciona el Grupo y en Espaciado escoge Margen Superior la Escala---L.
12. Escoge la Sección en Diseño/Tamaño/Altura escribe 100vh. En Diseño/Diseño/Justificar Contenido escoge Centro

Unicamente nos falta algo que muchos diseñadores pasan por alto. El ancho de la Fila de textos. En CSS, la unidad ch representa el ancho del glifo "0" (cero) en la fuente actual. Para una legibilidad óptima de bloques de texto, se recomienda un ancho de fila de entre 45 y 75 ch (caracteres), siendo 60-70 ch el estándar ideal para evitar líneas demasiado largas que cansen la vista, según buenas prácticas generales de diseño web. 70 es el ancho considerado normal. Es mi opinión personal que no debe ser mayor de 90. Así que próximamente estaremos estableciendo varios Predeterminados de Variables para aligerar más nuestro trabajo. Por ahora nuestro propósitos era que aprendieras a ensuciarte las manos en el proceso.

• Por ahora ve a Diseño/Tamaño/Ancho Máximo 100%; Ancho: 90ch
• Diseño/Texto de Encabezado/Alineamiento Texto Encabezado/: Centro

Has completado tu Hero. Lo mejor es que puedes guardarlo y reutlizar la sección. Guardar la sección en la Biblioteca de Divi es el paso final perfecto para asegurar que todo este sistema de variables sea reutilizable en cualquier parte del sitio sin tener que recrearlo de cero.

Aquí tienes el paso a paso detallado para hacerlo correctamente:

Pasos para guardar la sección en la Biblioteca

1. Localiza la sección: Pasa el cursor sobre la sección que contiene tus variables y el diseño del tutorial hasta que aparezca la barra de ajustes flotante de color azul.
2. Haz clic en el icono de la Biblioteca: Busca el icono que parece un círculo con una flecha apuntando hacia abajo (es el penúltimo icono en la barra azul, justo antes de los tres puntos).
3. Configura el nombre: Se abrirá una ventana emergente. Asígnale un nombre descriptivo, por ejemplo: Sección Modelo - Sistema 9 Variables.
4. ¿Elemento Global? (Importante): * Si marcas la casilla "Guardar como global", cualquier cambio que hagas en el futuro en esta sección se replicará automáticamente en todas las páginas donde la hayas usado.

   • Si la dejas desmarcada, funcionará como una plantilla independiente cada vez que la insertes. Para un sistema de variables, suele ser útil que sea Global.

5. Asigna una categoría (Opcional): Puedes crear una categoría llamada "Sistemas de Diseño" para mantener tu biblioteca organizada.
6. Finaliza: Haz clic en el botón azul "Guardar en la biblioteca".

---

Cómo usarla después

Cuando quieras llevar este sistema a una nueva página:

• Haz clic en el icono "+" azul para añadir una nueva sección.
• Selecciona la pestaña "Añadir desde biblioteca".
• Busca el nombre que le asignaste y ¡listo! Se cargará con todas tus configuraciones de CSS y funciones clamp intactas.