Variables CSS
Personalizá toda la plantilla en minutos
Imaginate que tenés un sitio web y el color azul aparece en 200 lugares distintos. Un día el cliente dice: «quiero cambiarlo a verde». Sin variables CSS, tendrías que buscar y cambiar esos 200 lugares uno por uno. Con variables CSS, cambiás una sola línea y todo el sitio se actualiza solo.
En esta lección vas a aprender dos formas de cambiar los colores del sitio, y por qué usamos las dos juntas:
🖱️ Método 1 — Divi Customizer
- Sin tocar código
- Visual y rápido
- Controla los elementos de Divi
- Ideal para empezar
💻 Método 2 — variables.css
- Editás un archivo de texto
- Controla LearnPress también
- Tiene más colores configurables
- La «base» del sistema
¿Qué es una variable CSS?
| Parte | Ejemplo | ¿Qué significa? |
|---|---|---|
| Nombre | --color-primary |
Siempre empieza con dos guiones -- |
| Valor | #2563eb |
El color, tamaño o cualquier valor CSS |
| Dónde se declara | :root { } |
En el elemento raíz = disponible en TODO el sitio |
| Cómo se usa | var(--color-primary) |
La función var() llama al valor guardado |
Método 1 — Cambiar colores desde el Customizer de Divi
Esta es la forma más fácil para principiantes. Sin tocar ningún archivo, podés cambiar los colores principales desde el panel de administración de WordPress.
1 Ir al Customizer de Divi
En el panel de WordPress, hacé clic en Divi → Theme Customizer. También podés entrar por Apariencia → Personalizar.
2 Abrir la sección de colores
En el menú de la izquierda, hacé clic en General Settings → Layout Settings. Vas a ver dos selectores de color:
- Primary Color — El color principal del sitio (botones, links, destacados)
- Secondary Color — El color secundario (acentos, variaciones)
3 Elegir el color y publicar
Hacé clic en el cuadrado de color, elegí el que querés con el selector visual, y luego hacé clic en el botón azul «Publicar» (arriba a la izquierda del Customizer).
Método 2 — Editar variables.css directamente
wp-content/themes/divi-lms-child/assets/css/variables.css
Este archivo es el corazón del sistema de diseño. Guarda todos los colores, tipografías, espaciados y efectos del sitio. Las primeras 4 líneas son las más importantes:
📄 variables.css — Los 4 colores que controlan todo
:root {
/* ★ Cambiá solo estos 4 y toda la paleta cambia ★ */
--color-primary: #2563eb; /* Azul — botones, links */
--color-secondary: #7c3aed; /* Púrpura — acentos */
--color-accent: #f59e0b; /* Amarillo — destacados */
--color-dark: #1e293b; /* Oscuro — header, footer */
}Para cambiar la paleta, simplemente reemplazá los códigos de color (los #xxxxxx) por los que querés usar.
Cómo los conectamos: el «puente» en functions.php
Acá es donde la magia ocurre. Agregamos una función en functions.php que:
1 Lee los colores que pusiste en el Customizer
La función llama a WordPress y le pregunta: «¿qué colores tiene configurado el usuario en Divi?»
2 Los inyecta como variables CSS en la página
Los colores del Customizer sobreescriben las variables de variables.css automáticamente, sin que el usuario tenga que tocar ningún archivo.
wp-content/themes/divi-lms-child/functions.php
📄 functions.php — La función «puente»
function divi_lms_sincronizar_colores_customizer() {
// Leer los colores de Divi guardados en la base de datos
$opciones = get_option( 'et_divi', array() );
$color_primary = isset( $opciones['accent_color'] )
? sanitize_hex_color( $opciones['accent_color'] )
: '#2563eb'; // valor por defecto si no hay nada
$color_secondary = isset( $opciones['secondary_accent_color'] )
? sanitize_hex_color( $opciones['secondary_accent_color'] )
: '#7c3aed';
// Inyectar en el <head> de la página como variables CSS
echo '<style id="divi-lms-colores-customizer">
:root {
--color-primary: ' . $color_primary . ';
--color-secondary: ' . $color_secondary . ';
}
</style>';
}
add_action( 'wp_head', 'divi_lms_sincronizar_colores_customizer', 99 );
1. Primero carga variables.css → define todos los valores
2. Luego, la función inyecta el <style> con los colores del Customizer
3. Como el <style> viene después en el HTML, gana → sobreescribe
Diagrama completo del sistema
:root { --color-primary: ... }
del builder
barra progreso
del child theme
¿Qué hay en variables.css?
Además de los 4 colores principales, el archivo tiene todo el sistema de diseño organizado por secciones:
1 Colores principales y sus variantes
--color-primary, --color-primary-hover, --color-primary-light y sus equivalentes para secondary, accent y dark.
2 Colores de texto y fondo
--color-text, --color-heading, --color-bg, --color-bg-alt, etc.
3 Colores de estado
--color-success (verde), --color-error (rojo), --color-warning (naranja), --color-info (celeste).
4 Tipografía, espaciado y efectos
Variables para tamaños de texto, fuentes, márgenes, sombras y transiciones.
Vista previa del resultado final
Mismo sitio, diferente Primary Color:
functions.php lo leyó, actualizó --color-primary en todo el sitio, y el botón de LearnPress también cambió solo.
Activar el child theme en WordPress
Para que todo esto funcione, el child theme debe estar activo:
1 Ir a Apariencia → Temas
En el menú de WordPress, hacé clic en Apariencia → Temas.
2 Activar «Divi LMS Child»
Pasá el mouse por encima del tema hijo y hacé clic en Activar.
✅ Cómo verificar que todo funciona — Paso a paso
1 Verificar que el child theme está activo
Andá a Apariencia → Temas. El tema activo debería ser «Divi LMS Child» y debería mostrar «Tema hijo de: Divi» debajo del nombre.
2 Verificar las variables en el inspector del navegador
Abrí tu sitio, presioná F12 para abrir las herramientas del navegador. Hacé clic en el ícono del cursor (inspector de elementos) y luego hacé clic en cualquier parte de la página. En el panel de Styles, buscá el elemento <html>. Deberías ver:
- Un bloque
:root { }devariables.csscon todos los colores - Un bloque
:root { }delstyle#divi-lms-colores-customizercon Primary y Secondary
3 Hacer la prueba definitiva del Customizer
Andá a Divi → Theme Customizer → General Settings → Layout Settings. Cambiá el Primary Color a un color muy diferente (por ejemplo rojo #dc2626). Hacé clic en Publicar. Volvé a tu sitio y recargá la página. Los botones de LearnPress y los elementos con var(--color-primary) deberían haber cambiado de color.
:root {
–color-primary: #2563eb;
–color-secondary: #7c3aed;
–color-accent: #f59e0b;
/* … más variables … */
}
/* Bloque 2: functions.php — sobreescribe con el Customizer */
#divi-lms-colores-customizer → :root {
–color-primary: #dc2626; ← ¡el color del Customizer!
–color-secondary: #7c3aed;
}
🎯 Resumen de la lección
- Variables CSS guardan valores con nombre para reutilizarlos en todo el sitio
- Divi Customizer (sin código) controla Primary y Secondary Color de los módulos Divi
- variables.css define todos los colores del sistema, incluyendo los de LearnPress
- functions.php conecta ambos mundos: lee el Customizer y actualiza las variables CSS
- Resultado: cambiás un color en un solo lugar → se actualiza en TODO el sitio