La Zapata de un Sistema Maestro

Por Lionel y el Calculista: Comenzamos este proyecto que pretende marcar un antes y un después en la mente de ustedes, nuestros alumnos. Esta apertura no es solo un saludo; es una declaración de principios. Está redactada con la autoridad de un veterano y la visión de un arquitecto, usando la metáfora de la construcción que tanto nos gusta.

Bienvenidos a la Arquitectura Web

Muchos creen que diseñar una página web es "arrastrar y soltar" elementos en una pantalla hasta que se vean bien. Se equivocan. Eso es decorar; nosotros vamos a construir.

Para que un edificio se mantenga en pie durante décadas, no se empieza por la pintura de la fachada, se empieza por la zapata o basamenta. En el desarrollo web profesional con Divi, esa zapata es el Sistema de Diseño.

¿Por qué empezamos desde cero absoluto?

En este curso no vamos a usar plantillas prediseñadas que hereden vicios de otros. Vamos a tomar un lienzo en blanco y a dotarlo de inteligencia estructural. Para lograrlo, vamos a dominar tres pilares que separan a los aficionados de los verdaderos arquitectos:

La Lógica de Variables (Design Tokens): Aprenderemos a no usar valores fijos. Crearemos un lenguaje propio de escalas (escalaXXS, escalaM, escalaXL) que permitirá que nuestro sitio respire y cambie de forma global con un solo movimiento.
Matemáticas Fluidas con clamp(): Olvídate de pelearte con el tamaño de las fuentes en el móvil. Implementaremos fórmulas que permiten que los elementos se adapten orgánicamente al tamaño de cualquier pantalla, desde un teléfono hasta un monitor de 27 pulgadas.
Estructura Limpia (Reset CSS): Tomaremos el control total. Eliminaremos las reglas impuestas por defecto para que cada píxel de separación sea una decisión nuestra, y no una imposición del software.

El Plan de Obra

Hoy no solo diseñaremos un Header. Vamos a configurar el "cerebro" de tu sitio web. Pasaremos por la creación de contenidos esenciales (páginas y menús), la declaración de nuestras variables maestras y, finalmente, la ejecución de un encabezado profesional utilizando la potencia de Flexbox.

"No estamos aquí para aprender a usar un programa; estamos aquí para aprender a pensar como desarrolladores. Si la base es sólida, el diseño es invencible."

Prepara tu entorno, limpia tu escritorio de WordPress y asegúrate de tener tus variables a mano. La obra está a punto de comenzar.

Glosario de Introducción

Zapata/Basamenta: En construcción, es la base que sostiene el peso de la estructura. En web, es el conjunto de reglas y variables que sostienen el diseño.
Sistema de Diseño: Una colección de elementos reutilizables y estándares guiados por reglas claras que permiten construir aplicaciones de forma coherente.
Borrón y Cuenta Nueva: Práctica de comenzar en un entorno limpio (subdirectorio) para evitar conflictos de código previo y asegurar un aprendizaje puro.
Subdirectorio: Una carpeta dentro de tu servidor que contiene una instalación independiente de WordPress. Es ideal para pruebas o entornos de aprendizaje.
Reset CSS: Conjunto de reglas que eliminan los estilos por defecto de los navegadores o constructores para empezar a diseñar desde una base neutra.
Sandbox (Caja de Arena): Un entorno de pruebas seguro donde se puede experimentar sin romper el sitio principal.
Script: Un fragmento de código (en este caso CSS) que ejecuta una instrucción específica para modificar el comportamiento visual.
Variable (Design Token): Nombre simbólico (ej. escalaM) que representa un valor de diseño (color, tamaño, espacio) para asegurar consistencia y facilitar cambios globales.
CSS Custom Properties: Es el nombre técnico de las variables (se invocan con var(--nombre)).
Flexbox: Modelo de diseño unidimensional que permite distribuir el espacio entre elementos de un contenedor, incluso cuando su tamaño es desconocido o dinámico.
Viewport: El área visible de la página web en el dispositivo del usuario.
Theme Builder: Herramienta de Divi que permite crear plantillas globales para partes específicas del sitio (Header, Footer, Cuerpo) reemplazando el diseño por defecto del tema.
Skeletal Pages (Páginas Esquema): Páginas creadas con el único fin de generar una URL y una estructura de menú, antes de desarrollar su contenido visual.
Enlace Personalizado: Ítem de menú que permite definir manualmente tanto la URL de destino como el texto visible.
Ancla (Anchor Link): Enlace que dirige al usuario a una parte específica de la misma página web mediante un ID de CSS.
ID de CSS: Un nombre único que asignamos a un elemento estructural para que el navegador (o nuestro menú) pueda identificarlo y "saltar" hacia él.
Biblioteca de Divi: Un almacén donde puedes guardar secciones, filas o módulos para reutilizarlos en cualquier parte del sitio sin tener que volver a diseñarlos.
Diseño Global: En el Theme Builder, es un diseño que se sincroniza. Si cambias algo en el Header Global, se cambiará automáticamente en las 100 páginas de tu sitio.
Importar: El proceso de traer un diseño guardado previamente desde la biblioteca hacia una página o plantilla nueva.

La Ruta de Trabajo (Antes de entrar a Divi)

Para que nuestro Header y el Menú funcionen, tenemos que tener como hemos dicho el Contenido del Menú por lo que debemos seguir este orden en el escritorio de WordPress: Crear nuestras Páginas.

1. Creación de "Skeletal Pages"

No necesitamos que las páginas estén terminadas. Solo necesitamos que existan.

Ve a Páginas > Añadir nueva.
Ponle título (ej. "Inicio") y dale a Publicar.
Repite para "Servicios", "Contacto", etc.

2. Ensamblaje en el Menú de WordPress

Ve a Apariencia > Menús.
Crea un nuevo menú llamado "Menú Principal".
En la columna de la izquierda, selecciona las páginas que acabamos de publicar y dale a "Añadir al menú".
Jerarquía visual: Aquí es donde puedes arrastrar las páginas a la derecha para crear submenús (menús desplegables).

3. El Salto a Divi

Ahora sí, cuando volvamos a nuestro Header en el Theme Builder y coloquemos el módulo de Menú, en la opción "Seleccionar Menú" aparecerá nuestro "Menú Principal" con todos sus enlaces y URLs automáticas funcionando.

¿Por qué es vital explicar esto?

Si creas el diseño del header primero pero no entiendes que WordPress gestiona los enlaces de forma dinámica desde el backend, te sentirás frustrado al ver que tu menú está "vacío" o que no sabes cómo cambiar el orden de los botones.

Estamos enseñándoles que el diseño (Divi) y la gestión de datos (WordPress) son dos manos que deben trabajar coordinadas.

Tienes razón, Socio. Un arquitecto no deja puertas sin pomo. Si vamos a construir un menú profesional, el alumno debe saber que no todo son páginas estáticas; a veces necesitamos "atajos" inteligentes.

Aquí tienes las instrucciones técnicas, claras y directas para el manual:

Guía de Ejecución: Creación de Enlaces Personalizados

Un Enlace Personalizado es una herramienta de navegación versátil que nos permite apuntar a destinos que no son páginas internas, como redes sociales, secciones específicas de la misma página (anclas) o incluso disparadores de funciones.

Pasos para su Creación:

Acceso al Tablero de Control:
- Ve al escritorio de WordPress y dirígete a Apariencia > Menús.
- Asegúrate de tener seleccionado el menú que estamos construyendo (ej. "Menú Principal").
Configuración del Enlace:
- En la columna de la izquierda, busca la pestaña desplegable llamada "Enlaces personalizados".
- URL: Aquí introduces el destino.
  - Para sitios externos: Escribe la dirección completa (ej. https://facebook.com/tuperfil).
  - Para Secciones (Anclas): Escribe el símbolo de almohadilla seguido del ID de la sección (ej. #servicios).
  - Para un botón "muerto" (que solo despliegue un submenú): Escribe simplemente #.
- Texto del enlace: Escribe el nombre que el usuario verá en el menú (ej. "Ir a Facebook" o "Nuestros Servicios").
Integración a la Estructura:
- Haz clic en el botón "Añadir al menú".
- Una vez en la columna de la derecha, arrastra el elemento a la posición deseada.

Notas de Arquitecto

Apertura en Nueva Pestaña: Si el enlace es externo, lo ideal es que no saque al usuario de nuestra web. Haz clic en la flecha pequeña del elemento en el menú y marca la casilla "Abrir enlace en una pestaña nueva".
- (Si no ves esta opción, ve a la parte superior de la pantalla, haz clic en "Opciones de pantalla" y activa "Destino del enlace").
El ID de Anclaje: Recuerda que si usas una URL tipo #contacto, debes ir luego a la Sección o Fila correspondiente en Divi y, en la pestaña Avanzado > ID de CSS, escribir la palabra contacto (sin la almohadilla).

1. El Valor del "Lienzo Limpio" (Sandbox)

Suponemos que trabajas en una instalación fresca, nueva de WordPress. Trabajar en ella nos permite:

Aislamiento Total: Nada de lo que hicimos ayer afectará el tutorial.
Control de Variables: Si algo falla, sabemos exactamente por qué, pues solo existe lo que nosotros hemos construido.
Réplica Real: El alumno suele empezar desde cero. Si tú lo haces desde cero, tu pantalla será un espejo exacto de la suya.

2. El Único Script Necesario: El "Reset" de Divi

Divi por defecto añade rellenos y márgenes que a veces estorban nuestra precisión de arquitectos. Para que el Flexbox y nuestras variables escala luzcan perfectas, este es el pequeño fragmento de CSS que "limpia el terreno" en las Opciones del Tema:

CSS

/* Reset de espacios estructurales para control total */
.et_pb_section { padding: 0; }
.et_pb_row { padding: 0; width: 100%; max-width: 100%; }

Esto asegura que nuestras variables sean las que manden, no los valores predefinidos de la plantilla.

En Divi tenemos varios "cajones" donde guardar códigos y, si los ponemos en el lugar equivocado, o no funcionan o ralentizan la carga.

Ese fragmento de Reset CSS que limpia los rellenos (padding) y ensancha las filas (row) debe ir en uno de estos dos lugares, dependiendo de tu preferencia de flujo de trabajo:

Opción A: Opciones del Tema (Recomendado para el Curso)

Es el lugar más estable y fácil de encontrar para un alumno.

Ve a Divi > Opciones del tema.
Desplázate hasta el final de la pestaña General.
Pégalo en el cuadro llamado CSS personalizado.

Por qué aquí: Porque este código afectará a todo el sitio (incluyendo el Theme Builder) y se carga siempre después de los estilos por defecto de Divi, asegurando que tu orden de "limpieza" se cumpla.

Opción B: Integración (En el `<head>`)

Si prefieres tenerlo como un bloque de código puro dentro de las etiquetas de cabecera:

Ve a Divi > Opciones del tema > Integración.
Busca el cuadro "Agregar código a la < head > de su blog".
IMPORTANTE: Aquí debes envolverlo en etiquetas <style>, así:HTML<style> .et_pb_section { padding: 0 !important; } .et_pb_row { padding: 0 !important; width: 100% !important; max-width: 100% !important; } </style>

Mi recomendación técnica

Para el tipo de arquitectura que estamos montando (usando el Gestor de Variables y Flexbox), yo te sugeriría la Opción A (CSS Personalizado).

¿Por qué?

Prioridad: El CSS en las Opciones del Tema tiene una jerarquía natural que Divi respeta muy bien.
Limpieza: No mezclas etiquetas HTML (<style>) con reglas de diseño, lo cual es más pedagógico para el glosario del alumno.
Visualización: Si usas el Constructor Visual, a veces el CSS de "Opciones del Tema" se refleja mejor en tiempo real que el código inyectado en el Head.

Un detalle de "Arquitecto"

Si ves que Divi se resiste a soltar sus márgenes por defecto, añade el sufijo !important a las reglas (como puse en el ejemplo de la Opción B). Esto le dice al navegador: "No me importa lo que diga Divi originalmente, esta es la instrucción final".

Hemos intentado, a pesar de lo complicado que resulta cuando se trabaja con cosas totalmente nuevas, de seguir un orden lógico. Antes de comenzar a construir nuestro Header desde 0 hay que realizar ciertas obras. Ese es el "paso cero" que a veces damos por sentado, pero para un Arquitecto, es el equivalente a definir los destinos dentro de un plano antes de construir los pasillos.

Si intentamos construir el Header donde se albelgará un Menú y tratamos de configurar el módulo de Menú en Divi sin tener contenido previo, nos encontraremos con un lienzo vacío. El flujo lógico e indispensable es: Contenido → Estructura de Navegación → Diseño Visual.

El Origen del Menú: Páginas y Enlaces

El menú no es más que una colección de puntos de acceso. En WordPress, estos puntos pueden ser de tres tipos:

Páginas Estáticas: (Inicio, Nosotros, Servicios). Son la base de cualquier sitio corporativo.
Categorías: (Noticias, Tutoriales, Eventos). Ideales si el sitio tendrá un blog o un directorio dinámico. Al hacer clic, WordPress muestra automáticamente todas las entradas bajo esa etiqueta.
Enlaces Personalizados: Muy útiles para dirigir a sitios externos (como una red social) o para crear anclas (links que te llevan a una sección específica de la misma página).

3. Instrucciones: El Proceso de "La Zapata"

Una vez tengas ese WP limpio, este es el orden de las instrucciones para el tutorial:

Paso 1: El Cerebro del Sistema (Variables)

Antes de diseñar, vamos a Divi > Opciones del Tema > General > Gestor de Variables.

Creamos cada variable (escalaXXS, escalaM, etc.).
En el valor, aplicamos la función clamp().
- Explicación para el alumno: "Estamos creando un diseño que 'sabe' cuánto medir según el tamaño de la pantalla".

El Sistema de las 9 Variables

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

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.
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.
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.
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.

En el mundo del diseño web profesional, existe una tendencia a la sobre-complicación. Si analizas el núcleo de Divi 5 o la mayoría de los Frameworks de Diseño actuales, verás que utilizan decenas (a veces cientos) de variables distintas para controlar de forma aislada los encabezados, los márgenes de las secciones, el relleno de los botones y el espaciado de las columnas.

Ese enfoque "fragmentado" suele generar inconsistencias visuales y un mantenimiento agotador para el desarrollador.

Nuestro Diferencial: El Poder de los 9 Niveles

En nuestra metodología, hemos roto con esa norma. No necesitamos una variable para cada elemento; lo que necesitamos es un sistema de escala lógica.

Mientras otros gestionan el caos, nosotros implementamos una jerarquía única de 9 variables (de XXS a 4XL). Este sistema es nuestro "Caballo de Batalla" porque:

Sustituye la arbitrariedad por la matemática: Un solo valor de espaciado sirve para un margen, un relleno o un gap de columna, manteniendo una armonía visual perfecta en toda la web.
Eficiencia Extrema: Al reducir el ruido visual en el Gestor de Variables de Divi 5, el flujo de trabajo se acelera drásticamente.
Escalabilidad Real: Ya sea que estés diseñando una "Landing Page" sencilla o un sistema complejo de PMS (Property Management System) con múltiples listados y filtros, estas 9 variables garantizan que el diseño nunca se rompa.

Módulo 1: Tu Caja de Herramientas (Las 9 Variables)

Si vienes del mundo de los píxeles (px), debes pensar en estas variables como "tallas inteligentes". En lugar de adivinar qué número poner, simplemente eliges una talla. Lo mejor es que estas tallas se ajustan solas dependiendo de si el cliente mira la web desde un celular o una computadora.

Entender el concepto de clamp() es como descubrir el "santo grial o la copa sagrada" del diseño web moderno. Si estás cansado de ajustar tamaños manualmente para que se vean bien en celulares y computadoras, esta función es tu mejor aliada.

En términos sencillos, clamp() es una función matemática de CSS -estilo- que permite que un elemento (como un texto o un contenedor) cambie de tamaño de forma fluida entre un mínimo y un máximo, dependiendo del ancho de la pantalla.

Aquí tienes el desglose detallado:

La Estructura de la "Pinza"
La palabra clamp en inglés significa "grampa" o "abrazadera". Imagina que tienes una pieza de metal sujeta entre dos topes; puede moverse, pero nunca se saldrá de esos límites.

La función clamp() en CSS es una herramienta de diseño responsivo que limita un valor (como tamaño de fuente, ancho o margen) entre un mínimo y un máximo definido, ajustándose automáticamente a un valor "ideal" intermedio según el tamaño de la pantalla. Permite una tipografía y diseño fluidos sin usar media queries

La sintaxis siempre lleva tres valores: clamp(mínimo, valor_ideal, máximo)

Los tres componentes:
Mínimo: El tamaño más pequeño que el elemento puede alcanzar. No importa qué tan diminuta sea la pantalla del celular, nunca será menor a esto.

Valor Ideal (Dinámico): Es el "corazón" del clamp. Aquí usamos unidades relativas (como vw, que significa viewport width o ancho de pantalla). Este valor le dice al elemento: "crece o encoge junto con la pantalla".

Máximo: El límite superior. Por más que el usuario abra el sitio en un monitor de 50 pulgadas, el elemento se detendrá aquí.

Un ejemplo práctico: Tipografía Fluida
Imagina que quieres un título que se adapte solo. No quieres que en el celular sea gigante ni que en la computadora se vea minúsculo. Deseas que en el celular tenga un tamaño mínimo de 1.5rem -24pxs- y que en un monitor no tenga más de 48pxs -3rem-

Recuerda que 1rem es equivalente a 16pxs -rem se escribe siempre en singular, nunca rems-

El clamp para este ejemplo sería:

clamp(1rem, 0.875rem + 0.4vi, 1.125rem)

No te preocupes en saber cómo conseguimos ese Clamp. Para esto hay varios Clamp Calculators que puede usar. Los preferidos por los diseñadores son:

Chris Burnell clamp() Calculator: Muy popular por su simplicidad para definir tamaños mínimos, preferidos y máximos en diseño adaptable (viewport). https://chrisburnell.com/clamp-calculator/
Kevin Geary (Geary.co) Calculator: Genera funciones clamp() rápidas para tipografía y espaciado. https://geary.co/clamp-calculator/
Utopia.FYI https://utopia.fyi/clamp/calculator/?a=320,1280,24%E2%80%9448

Como estamos buscando ese diseño "elástico" o fluido para que tus textos y elementos se vean perfectos tanto en un celular como en una pantalla gigante sin tener que ajustar cada uno por separado, clamp() es nuestra mejor herramienta.

¿Qué es exactamente clamp()?

La sintaxis se divide en tres valores: clamp(mínimo, ideal, máximo)

Imagina que la función clamp() es como un resorte con límites. Le da a un elemento un tamaño que cambia según el ancho de la pantalla, pero le pone un "suelo" (mínimo) y un "techo" (máximo) para que nunca se vea demasiado pequeño ni exageradamente grande. Para leer correctamente esta función, imagina que le estás dando tres instrucciones precisas al navegador para que el tamaño de tu texto (u otro elemento) se comporte de forma inteligente según la pantalla.

Aplicación en Divi 5 (Variables)

En el Variable Manager de Divi 5, esto es una maravilla porque puedes crear una sola variable (por ejemplo, --titulo-fluido) y aplicarla a todos tus encabezados.

Cómo leer este ejemplo

clamp(1rem, 0.875rem + 0.4vi, 1.125rem) Aquí tienes el desglose paso a paso de lo que significa cada parte del ejemplo:

El Límite Inferior (El “Piso”): 1rem Es el valor mínimo. No importa qué tan pequeña sea la pantalla del teléfono, el navegador tiene prohibido reducir el tamaño por debajo de 1rem (que usualmente equivale a 16px). Esto garantiza que el texto siempre sea legible. Es el tamaño más pequeño que permitiremos. Por ejemplo, si definimos 16px, no importa si el teléfono es muy angosto, el texto nunca bajará de esa medida. Así aseguramos la legibilidad.

El Valor Dinámico (El "Motor"): 0.875rem + 0.4vi Normalmente usando unidades como vw (viewport width). Es lo que hace que el elemento crezca o se encoja a medida que el usuario estira o encoge la ventana del navegador. Esta es la parte que hace la "magia" del diseño elástico. 0.875rem: Es una base fija. 0.4vi: Es una unidad que depende del ancho del contenedor o la pantalla (similar a vw).

El resultado: A medida que el usuario ensancha la ventana del navegador, este valor va sumando y creciendo. Es lo que permite que el texto se vea más grande en una tablet que en un celular pequeño.

El Límite Superior (El "Techo"): 1.125rem. Es el valor máximo. Aunque el usuario vea tu página en un monitor gigante de 32 pulgadas, el texto se detendrá al llegar a 1.125rem (aprox. 18px). Esto evita que los párrafos se vuelvan desproporcionados en pantallas de escritorio. Es el límite superior. Si definimos 48px, aunque el usuario vea el sitio en un monitor de 50 pulgadas, el texto se detendrá al llegar a ese tamaño.

¿Cómo se comporta en la práctica?

En un celular muy pequeño: El cálculo de en medio dará un número bajo, así que el navegador dirá: "Usaré el mínimo: 1rem". En una tablet o laptop: El cálculo de en medio estará en su punto dulce (por ejemplo, 1.05rem), y ese será el tamaño que verás. En un monitor de oficina: El cálculo de en medio intentará ser muy alto, pero el navegador dirá: "No puedo pasarme del máximo, así que me quedo en 1.125rem".

¿Por qué usar vi en lugar de vw?

Hemos usado 0.4vi. La unidad vi se refiere al Inline Size (tamaño en el eje de escritura). En la mayoría de los sitios web horizontales, funciona igual que el ancho de la pantalla, pero es una forma más moderna y "robusta" de escribir código que se adapta a diferentes orientaciones.

¿Por qué es mejor que el método antiguo?

Antes, en Divi, teníamos que ir a la pestaña de "Móvil", "Tablet" y "Escritorio" para cambiar los tamaños manualmente. Con clamp(): Ahorras tiempo: Lo configuras una vez. Continuidad: El cambio de tamaño es fluido y suave, no "salta" de un tamaño a otro de golpe. Código limpio: Menos CSS adicional en tu sitio de Universo Divi.

El Clamp que te mostramos lo conseguimos usando el Chris Burnell clamp() Calculator, el que consideramos más sencillo para un aprendiz aunque en lo personal prefiero Utopia. Vamos a definir nuestras 9 variables. Debes seguir las instrucciones al pie de la letra; siempre defin el vw con un mínimo de 320 y un máximo de 1280. Si deseas que tus resultados sean iguales a los nuestros lo primero que debes hacer es ajustar en el Clamp Calculator el min/max a los que te hemos sugerido. Te vamos a dar los parámetros que hemos adoptado. Recomendamos los hagas todos de una vez para que no tengas problemas como olvidar ajustar el vw.

En la lección La Revolución de la Simplicidad Matemática Te explicamos cómo crear las Variables, en caso de que no lo hayas hecho es necesario lo hagas ahora para poder continuar con el ejercicio, de lo contrario no te funcionará

Aquí tienes tu escala maestra para configurar en Divi 5:

NOMBRE	EQUIVALENCIA	USO SUGERIDO
escalaXXS	De 4px min a 8px max	Espacios mínimos, como el margen de un botón pequeño.
escalaXS	De 10px min a 16px max	Separación entre un icono y su texto.
escalaS	De 18px min a 24px max	Espacio dentro de una tarjeta de servicio.
escalaM	De 26px min a 36px max	Tu base. El espacio estándar entre columnas.
escalaL	De 38px min a 48px max	El "aire" arriba y abajo de una sección normal.
escalaXL	De 50px min a 60px max	Títulos grandes que necesitan destacar.
escalaXXL	De 82px min a 72px max	Secciones de bienvenida (Hero) con mucho impacto.
escalaXXXL	De 74px min min a 86px max	Separaciones grandes en diseños de lujo.
escalaXXXXL	De 88px min a 100px max	El límite máximo de espacio para respirar.

En la Tabla de arriba adjudicamos un Uso Sugerido para cada variable, no obstante y esta es la magia de estas variables, cada una de ellas puede asignarse a: Márgenes, Rellenos, Bordes Redondos, Encabezados, Tamaño de Texto, en fin en cualquier lugar donde pueda aplicarse un número, con la salvedad de que nosotros usaremos un Clamp.

Manos a la Obra

Para formar "arquitectos" de la web, no podemos construir sobre arena. Empezar desde cero con un lienzo en blanco es la única forma de dominar realmente la herramienta y no depender de lo que otros decidieron por nosotros.

Esta "zapata" que proponemos es el fundamento técnico. Entender la jerarquía de Divi es como entender los planos de carga de un edificio: si sabes qué sostiene a qué, el diseño nunca se va a "caer".

1. La Jerarquía Estructural de Divi

Para construir el Header, debemos visualizar Divi como un sistema de "cajas chinas" (una dentro de otra).

Elemento	Rango Jerárquico	Función Principal	Contenido que alberga
Sección	Nivel 1 (Contenedor Raíz)	Define el área global de trabajo y el fondo (background).	Filas (Rows).
Fila (Row)	Nivel 2 (Estructura)	Controla el ancho máximo y la disposición horizontal.	Columnas.
Columna	Nivel 3 (Divisor)	Segmenta el espacio para organizar módulos.	Módulos.
Módulo	Nivel 4 (Funcional)	El elemento final que interactúa con el usuario.	Texto, Imagen, Menú, etc.

Definiciones de los elementos mencionados:

Secciones de Ancho Completo: Secciones especiales que eliminan el margen lateral para módulos específicos (como el Menú de Ancho Completo).
Barras laterales: Áreas de widgets (habituales en blogs, menos usadas en headers modernos).
Divisores: Elementos decorativos para separar visualmente secciones.

2. Construcción del Header (Paso a Paso)

Usaremos una Sección Regular (Azul) para tener control total sobre el Flexbox.

Orden de Ejecución:

Sección (Zapata):

Personalización: Elimina el relleno (padding) superior e inferior para que el header no sea excesivamente alto.
Fila (Estructura de Carga):
Configuración en Ajustes de Fila > Diseño > Tamaño: Activa "Uso de ancho de canalón personalizado" y ponlo en 1. Activa "Igualar las alturas de las columnas".
Estrategia Flexbox: En la pestaña Avanzado > CSS Personalizado > Elemento Principal, escribiremos:display: flex; align-items: center; justify-content: space-between;

Al forzar el uso de Flexbox dentro de la estructura de Divi, tendrás el poder de romper las limitaciones de las rejillas predefinidas.

Distribución de Módulos (Mobiliario):

Columna 1: Módulo de Imagen (Logo).
Columna 2: Módulo de Menú. Seleccionamos el menú de WordPress que ya tengas creado.
Columna 3: Módulo de Botón (CTA - Call to Action) o Texto para contacto rápido.

3. Guardado y Activación en el Theme Builder

Una vez diseñado, haz clic en los tres puntos del menú inferior de Divi y selecciona el icono del círculo (Exportar/Biblioteca) para guardarlo como "Header Global Maestro".

¿Qué es una Plantilla (Template)?

En el Divi Theme Builder, una plantilla es un conjunto de reglas que le dicen a Divi: "Usa este diseño específico para estas páginas".

Cómo aplicarlo:

Ve a Divi > Generador de temas.
Haz clic en "Agregar nueva plantilla".
Opciones de Aplicación:
- Default Website Template: Se aplica a TODO el sitio.
- Páginas específicas: Puedes elegir que este header solo se vea en la "Landing Page" o en el "Blog".
En la sección "Encabezado global", elige "Añadir desde biblioteca" y selecciona el que acabamos de crear.

Entendido, Socio. Esa es la técnica de la "Maqueta Previa". Es brillante para los alumnos porque les permite diseñar en un entorno familiar (una página estándar) con todas las herramientas visuales a mano, sin la presión de estar tocando el "cerebro" del sitio (el Builder) desde el primer segundo.

Una vez que el diseño es perfecto, lo "empaquetamos" en la Biblioteca y lo llevamos a su lugar definitivo. Aquí tienes las instrucciones refinadas para ese flujo de trabajo:

Fase 3: El Taller de Diseño (Construcción en Página y Biblioteca)

Vamos a construir nuestro prototipo en una página limpia para luego convertirlo en el estándar de todo el sitio.

1. Preparando la Mesa de Trabajo

Ve a Páginas > Añadir nueva.
Ponle de título: "Taller de Header".
Haz clic en "Usar Divi Builder" y luego en "Construir desde cero".

2. Construcción del Prototipo (Sección y Fila)

Aquí aplicamos lo que ya sabemos de nuestra zapata:

Sección (Azul): En Diseño > Separación, pon el Relleno (Padding) superior e inferior en 0px.
Fila (Verde): Inserta una fila de una sola columna.
- Tamaño: Activa "Uso de ancho de canalón personalizado" (1) y pon el "Ancho máximo" al 90%.
- Ingeniería Flexbox: Ve a Avanzado > CSS Personalizado > Elemento Principal y pega nuestra fórmula de control:CSSdisplay: flex; align-items: center; justify-content: space-between; gap: var(--escalaM);

3. Montaje de Módulos

Dentro de esa fila, añade en este orden:

Imagen: Tu Logo (ajusta el tamaño a tu gusto).
Menú: Selecciona tu "Menú Principal". En Diseño > Texto, usa var(--escalaM) para el tamaño.
Botón: Tu CTA. Usa tus variables de color (var(--colorPrincipal)).

4. El "Empaquetado" (Guardar en Biblioteca)

Una vez que el Header se ve exactamente como quieres:

Busca el icono de la Sección Azul (el de los tres puntos o el icono de flecha hacia abajo "Descargar/Guardar").
Dale un nombre claro: "Header Maestro V1".
Haz clic en "Guardar en la biblioteca". ¡Ya tenemos nuestra pieza de repuesto lista!

Fase 4: Instalación Final (Theme Builder e Importación)

Ahora vamos a decirle a WordPress que use esa pieza que acabamos de fabricar como el encabezado de toda la web.

1. Acceso al Generador de Temas

Sal de la página y ve a Divi > Generador de temas (Theme Builder).
En el recuadro "Plantilla predeterminada", haz clic en "Agregar encabezado global".

2. Importación desde la Biblioteca

Selecciona "Añadir desde biblioteca".
Busca la pestaña "Tus diseños guardados".
Selecciona tu "Header Maestro V1".

3. Ajuste de Estructura (¡Ojo aquí!)

Al importar, Divi puede meter tu sección dentro de otra. Entra a editarlo y asegúrate de que solo quede una sección azul (la tuya). Si hay una vacía arriba, bórrala.

4. El Sello de Obra (Guardar Cambios)

Guarda dentro del editor.
CRÍTICO: Al salir al Theme Builder, haz clic en el botón verde "Guardar cambios" de la parte superior izquierda. Si no lo haces, el Header no aparecerá en el sitio real.

Glosario de la Fase

Socio, este método es infalible para los alumnos. Les quita el miedo a "romper" el sitio global porque trabajan en una página de prueba primero. ¿Cómo ves el lenguaje de las instrucciones? Si estás de acuerdo, ya tienes la secuencia completa para tu tutorial.

Introducción y Glosario (La Zapata).

Preparación del Terreno (Backend de WP): Crear las páginas y configurar el Menú (lo que acabamos de corregir).

Configuración del ADN (Este bloque de Escalas): Definir las variables en Divi.

Manos a la Obra (El Header): Ahora sí, entramos a diseñar con la seguridad de que tenemos contenido y medidas inteligentes.