Variables

Glosario Técnico de la Lección

• «Diseño Paramétrico»: Método de diseño basado en reglas y variables en lugar de valores fijos.
• «Variable Maestra»: Un contenedor de información (como escalaXXS) que define un valor central para ser reutilizado en todo el proyecto.
• «Función Clamp()»: Una fórmula de CSS que establece un tamaño fluido (mínimo, preferido y máximo), permitiendo que el diseño se adapte al tamaño de la pantalla sin cortes.
• «Viewport» (Ventana Gráfica): El área visible del usuario en su dispositivo (móvil, tablet o monitor).
• «Escalabilidad»: La capacidad de un diseño para crecer o encogerse de forma proporcional sin perder su jerarquía visual.
• «Variable de Espaciado» (Padding/Margin Variable): Es el uso de una variable numérica (como tu 4XL) para definir los huecos o separaciones entre elementos, asegurando que el «aire» del diseño sea constante en todo el sitio.
• «Herencia Paramétrica»: El fenómeno por el cual, al aplicar una variable a una Sección, Fila o Módulo, estos «heredan» el comportamiento de escalado automático definido en el Gestor de Variables.
• «Puntos de Control de Relleno»: Los iconos de «discos» o bases de datos en la interfaz de Divi 5 que permiten conectar un campo numérico con una variable del sistema.
• «Sincronización Global»: La capacidad del sistema para actualizar múltiples instancias de diseño (Secciones, Filas, Encabezados) de forma simultánea al modificar un solo valor maestro.
• «Diseño Fluido»: Resultado de aplicar variables basadas en clamp(), donde el espaciado no es un valor fijo, sino que se expande o contrae suavemente según el tamaño de la pantalla del usuario.
• «Estado Cero Auténtico» (True Zero State): Configuración inicial donde todos los márgenes y rellenos manuales están desactivados por defecto. Esto garantiza que el diseño comience como un «lienzo limpio», libre de las restricciones o estilos predefinidos del software.
• «Inyección de Variable»: El acto de sustituir el valor «0» predeterminado por una Variable Maestra (como la 4XL). Es el momento en que el elemento pasa de ser estático a ser gobernado por el sistema paramétrico.
• «Consistencia de Bloque»: La práctica de aplicar la misma variable a diferentes niveles (Sección, Fila y Módulo) para crear una jerarquía visual armoniosa y proporcional sin esfuerzo manual.
• «Arquitectura de Capas Limpias»: Estructura de diseño donde no existen valores «fantasma» o residuos de espaciado manual que puedan corromper la escalabilidad del sitio en diferentes dispositivos.

---

Vamos a comenzar nuestro tutorial sobre cómo crear nuestras variables y el mismo va a estar acompañado de Tomas de Pantalla y una explicación de esta, de modo que se te haga mucho más fácil el aprender a hacer lo que es nuevo. Tal vez tú sepas cómo hacerlo pero partimos de la premisa de que eres totalmente nuevo en esto y queremos llevarte paso a paso para que no tengas temor en ningún momento y hagas todo todo lo que se te indica con seguridad y precisión

El Manifiesto Paramétrico. Bienvenidos a la Nueva Era del Diseño con Divi 5 En Universo Divi, no venimos a enseñarte a «mover cajas» en una pantalla. Venimos a enseñarte a gobernar sistemas. Antes de tocar una sola línea de código o abrir el escritorio de WordPress, debemos resetear nuestra mente. Debemos pasar del diseño estático al Diseño Paramétrico.

¿Qué es el Diseño Paramétrico?

El Corazón de la Metodología: ¿Qué es el Diseño Paramétrico?. Antes de entrar en el escritorio de WordPress, debemos entender el motor que impulsa este sistema. En Universo Divi, no diseñamos elementos estáticos; creamos sistemas inteligentes. El «Diseño Paramétrico» es un método donde los elementos y los resultados visuales no se definen por valores fijos (como «20px»), sino mediante parámetros y variables.

La Comparativa: Diseño Tradicional vs. Diseño Paramétrico

La Magia del Ajuste Automático. Imagina que has diseñado todo un ecosistema con 50 páginas. En el diseño tradicional, si decides que los títulos deben ser un poco más grandes, tendrías que editarlos uno por uno. Con el Diseño Paramétrico: Modificas la Variable Maestra (el parámetro) en un solo lugar.

Automáticamente, como por arte de magia, cada sección, fila y titular que use esa variable se ajusta y escala de forma proporcional. «No estamos remodelando elementos; estamos gobernando el sistema a través de sus variables».

• Proceso: Tienes que abrir cada una de las 50 páginas.
• Acción: Seleccionar cada titular y cambiar manualmente su tamaño (ej. de 32px a 36px).
• Resultado: Horas de trabajo tedioso y un alto riesgo de cometer errores u olvidar algún elemento. Estás remodelando constantemente.

La Magia del Diseño Paramétrico (Valores Variables)

• Proceso: Abres el panel de configuración central de Divi 5.
• Acción: Modificas una sola variable maestra (ej. la Variable «XL» que controla los titulares).
• Resultado: En un segundo, las 50 páginas se actualizan automáticamente. El cambio se propaga por todo el ecosistema de forma proporcional y perfecta. Estás gobernando el sistema.

«En Universo Divi, creamos una vez y gobernamos siempre».

En este módulo, aprenderás a acceder a tu Web, acceder a tu Panel de Control de WordPress, a crear tu primera página y tu primera variable paramétrica (la «XXXXL»). Pero ahora ya sabes por qué es tan importante: no es solo un valor corto; es el ADN que controlará la escala de todo tu sitio web.

1. Primeramente vas a escribir la dirección de tu sitio web lo que se conoce como el «url» lo vas a escribir seguido de un / «guión inclinado» donde vas a escribir wp-admin. Esto te va a llevar a la página de entrada del panel de control de tu wordpress.
2. Ahí va a escribir el Nombre tuyo de Usuario y la Contraseña que utilizaste cuando creaste el sitio y le vas a dar a Acceder.
3. A mano izquierda cuando entras en el escritorio te vas a encontrar con el menú. Presiona Página y en la parte de arriba Añadir página.
4. En la ventana que se te abre vas a escribirle el Título de la Página que en este caso nosotros recomendamos que le pongas Variable ya que vamos a comenzar a crear las variables para nuestro sitio.
5. Una vez escribas el título vas a ir a mano derecha y le vas a dar a Publicar dos veces para que la página salga ya al aire.

Ya creaste tu Primera Página,

Tomas de Pantalla para crear la Página

Rumbo al Gestor de Variables

1. Ve donde dice Editar con Divi. Eso te va a llevar al constructor de Divi.
2. A mano izquierda en el menú vas a encontrar el panel de herramientas de Divi vas a presionar el que dice Gestor de Variables. Vas a notar que según pasas el cursor por sobre los Iconos te va poniendo el nombre de cada icono y la función que va a realizar. Vas a presionar como te indiqué Gestor de Variables.
3. Ahí te va a aparecer el menú del Gestor de Variables, Colores, Fuentes Imágenes, Enlaces, Números y Textos. Vamos a comenzar trabajando en números. Le das click a Números y a Añadir Número. En la ventana que se abre a mano izquierda vas a escribir el Nombre de la Variable en el caso nuestro vas a escribir XXXXL o sea 4XL.
4. Vas a ir entonces al menú arriba del navegador y vas a añadir una pestaña nueva y ahí vas a escribir el URL del Gestor de Clamps que escogiste en el caso nuestro para este tutorial escogimos a Chris Burnnel Clamp Calculator cuando llegas a esa pantalla vas a encontrar que tiene varias opciones. Entre ellas Tamaño Mínimo, Tamaño Máximo, Mínimo del Ancho de Pantalla, Máximo del Ancho de Pantalla, La base de nuestra escala es el valor 16px (1rem), que es el estándar universal de los navegadores y la unidad relativa que es «vi», luego tiene Calcular y Reset. En Tamaño Mínimo vamos a escribir el valor que va a tener nuestra variable o sea el tamaño más pequeño que va a tener la Fuente «54px» y en el Tamaño Máximo vamos a escribir el tamaño máximo que va a tener nuestra Fuente «96px»; en el mínimo del viewport vas a escribir 320 que es el tamaño mínimo que tiene un celular en este caso un iPhone y en el tamaño máximo vamos a escribir 1280 que es el tamaño máximo que tiene un monitor promedio en un ordenador de escritorio; el tamaño de la raíz y la unidad relativa lo vamos a dejar siempre en el default del calculador. Luego ahí vamos a dar calcular y en el Resultado vamos a obtener el Clamp que vamos a utilizar para esa variable lo vas a copiar.
5. Volvemos entonces a nuestra página donde estábamos estableciendo la variable y en el Valor, ahí vamos a pegar el Clamp que acabamos de crear.
6. En el menú abajo vamos a oprimir Aplicar Cambios y luego Continuar Editando.
7. Una vez que hagamos eso vamos a mano derecha arriba en el menú y le damos a Guardar y una vez que se ha guardado vamos a mano izquierda y vamos a Recargar la Página, o sea vamos a darle un refrescar o un Refresh a la página eso hará que las variables aparezcan en nuestro menú de variables a mano derecha más tarde.

Tomas de Pantalla para crear la Variable

Tomas de Pantalla para crear la Página

1. Primeramente vas a seleccionar la Sección, vas a ir a Diseño/Espaciado y vas a escribir «0» en todos los encasillados de Margen y Relleno.
2. Luego vamos a escoger el relleno y vamos a pasar el cursor por encima del encasillado y vamos a ver que aparece un icono como de tres discos uno encima del otro ahí lo oprimimos y va a aparecer nuestra escalas recién creada. La escogemos y presionamos abajo donde dice superior e inferior para que sea a ambos lados. Si observas la sección verás ahora que la sección tiene un relleno en la parte de arriba y en la parte de abajo.
3. Seleccionas la fila, el botón verde que aparece y escoges una de las columnas la primera ahí escoges el icono de un encabezado y tenemos que nos dice: Aquí va tu título. Escogemos la Fila y vamos de nuevo a diseño y le damos Espaciado y hacemos exactamente lo mismo, buscamos y le damos a nuestra Variable 4XL. Vas a ver inmediatamente que la fila adquiere relleno en la parte superior y en la parte inferior.
4. Selecciona el Módulo de Encabezado y repites exactamente lo mismo buscas la variable y se la aplicas. Vas a ver que el título adquiere relleno arriba y abajo.

Esto te prueba que con una sola variable aplicada donde quiera que puedas poner un valor numérico vas a crear Diseño Paramétrico y vas a aplicarlo de manera global y universal. Si en un futuro tuvieses que cambiar esa medida en lugar de ir página por página cambiando, vamos a las variables cambias los valores de la variable y automáticamente se va a actualizar nuestro sitio.

Tomas de Pantalla para aplicar la vaariable

Esto te prueba que con una sola variable aplicada donde quiera que puedas poner un valor numérico vas a crear Diseño Paramétrico y vas a aplicarlo de manera global y universal. Si en un futuro tuvieses que cambiar esa medida en lugar de ir página por página cambiando, vamos a las variables cambias los valores de la variable y automáticamente se va a actualizar nuestro sitio.

Ya aprendiste cómo crear y aplicar tu Variable ahora vas a crear todas las demás Variables sigguiendo las instrucciones de la Tabla «La Matriz de Oro de Universo Divi». Una vez las crees tienes las nueve variables que van a gobernar tu sitio.

Estás a un paso de la Matriz Completa

Has visto cómo la variable 4XL (80px) ancla tu diseño. Pero un sistema profesional no vive de una sola medida; vive de la proporción áurea entre sus 9 niveles.

En el nivel «Ingeniero», desbloquearás:

• La tabla completa de variables (XS a 4XL) lista para copiar.
• La lógica de escalado paramétrico para que tu web sea perfecta en móviles y 4K.