Sistema de colores
Creá paletas profesionales
Un sitio web que se ve profesional no usa colores al azar. Tiene una paleta definida donde cada color tiene un propósito claro. En esta lección vas a aprender a crear y aplicar una paleta de colores coherente usando las herramientas del panel de WordPress — sin escribir código.
Paso 1 — Elegí tu paleta con una herramienta gratuita
Antes de entrar al panel de WordPress, lo primero es decidir qué colores querés usar. Para eso existe una herramienta web gratuita que genera paletas profesionales en segundos:
🛠️ Herramienta gratuita: coolors.co
El generador de paletas más popular del mundo. Gratuito, en español, funciona en el navegador.
- Abrí tu navegador y buscá coolors.co
- Hacé clic en «Start the generator»
- Presioná la barra espaciadora para generar nuevas paletas
- Cuando encuentres una que te guste, hacé clic en el color → copiá el código
#xxxxxx
Paso 2 — Aplicar los colores desde el Personalizador de WordPress
Los dos colores más importantes (Color Primario y Color Secundario) se cambian directamente desde el panel de WordPress, sin tocar ningún archivo.
1 Abrí el Personalizador
En el menú de WordPress hacé clic en Divi → Theme Customizer. Se abre el Personalizador con una vista previa del sitio a la derecha.
2 Hacé clic en «Ajustes Generales»
En el panel izquierdo vas a ver el menú exactamente como en esta imagen:
3 Dentro de Ajustes Generales → Ajustes de Diseño
Hacé clic en Ajustes Generales y luego en Ajustes de Diseño. Vas a ver los selectores de color:
4 Publicar los cambios
Una vez que elegiste los colores, hacé clic en el botón «Publicada» (arriba a la derecha del panel). Tus nuevos colores se aplican en todo el sitio de inmediato.
Paso 3 — Aplicar Accent y Dark (2 líneas en un archivo)
Los colores Accent (el llamativo) y Dark (el oscuro del header/footer) no están en el Personalizador. Los cambiamos en el archivo variables.css, pero lo hacemos desde el propio WordPress:
1 Apariencia → Editor de archivos de tema
En el menú de WordPress andá a Apariencia → Editor de archivos de tema.
2 Seleccionar el archivo correcto
A la derecha vas a ver la lista de archivos del tema. Buscá y hacé clic en: assets → css → variables.css
3 Cambiar solo 2 líneas
Buscá estas líneas y reemplazá el código de color por el que elegiste en Coolors:
📄 variables.css — Las 2 líneas a cambiar
--color-accent: #f59e0b; /* ← Cambiá este color */
--color-dark: #1e293b; /* ← Cambiá este color */4 Guardar el archivo
Hacé clic en el botón «Actualizar archivo» (abajo del editor). ¡Listo!
variables.css son sobreescritos automáticamente por el Personalizador. Así que para esos dos colores, siempre usá el Personalizador. Para Accent y Dark, usá el editor de archivos.
3 paletas listas para usar — copiá y pegá
¿No sabés qué colores elegir? Acá hay 3 paletas coordinadas pensadas para sitios de cursos online:
✅ Verificación — ¿Cómo sé que mi paleta quedó bien?
1 Abrí tu sitio y revisá estos 3 puntos
- Los botones tienen el Color Primario que elegiste
- Los links y títulos también muestran ese color
- No hay colores que «chocan» entre sí — todo se ve coordinado
2 Hacé el «test del extraño»
Mostráselo a alguien que no lo vio antes. Si dice «se ve profesional» o «combina bien» → tu paleta funciona. Si dice «hay demasiados colores» → simplificá.
🎯 Resumen de la lección
- Usá coolors.co para elegir colores coordinados y profesionales
- Color Primario y Secundario → Divi → Theme Customizer → Ajustes Generales → Ajustes de Diseño
- Color Accent y Dark → Apariencia → Editor de archivos de tema → variables.css (2 líneas)
- 4 colores con roles claros = paleta profesional lista