2.3Colores y fuentes globales (Site Settings)
Lo esencial en 30 segundos
- Los ajustes del sitio (Site Settings) definen colores y fuentes globales aplicados en todas partes.
- Definir una paleta (principal, secundario, texto, acento) y estilos de texto tipo (título, cuerpo).
- Definir pronto, aplicar en todas partes: cambiar la guía de estilo se hace en un solo lugar.
Hilo conductor — Nadia establece la guía de estilo
Hasta ahora Nadia ajustaba los colores caso por caso — y se colaron por todas partes matices de rosa ligeramente distintos. Lo rehace todo mediante los ajustes del sitio: una paleta limpia, dos estilos de texto. A partir de ahora, cuando el carpintero quiera ajustar "su" rosa, será un solo ajuste, propagado a todo el sitio.
Continúa 1.4 (vistazo a lo global) — aquí, la implementación completa.
1. La guía de estilo global
Los ajustes del sitio (Site Settings) — accesibles desde el menú del editor — centralizan el diseño global. Allí se define una paleta de colores (principal, secundario, texto, acento) y estilos de texto globales (título principal, subtítulo, cuerpo…). Esos valores se vuelven reutilizables: en lugar de teclear un código de color, se elige "Color principal".
Nadia crea su paleta (rosa de marca, gris oscuro para el texto, un acento) y dos estilos de texto. Todo el sitio comparte entonces la misma identidad.
2. Coherencia y mantenimiento
El interés es doble: coherencia (todo el sitio armonizado) y mantenimiento centralizado (un cambio de paleta se propaga por todas partes automáticamente). La buena práctica: definir la guía de estilo desde el principio, luego aplicar los colores/estilos globales sobre cada elemento — nunca valores "fijos".
Así, cuando el cliente duda sobre "su" rosa, Nadia modifica el color principal una vez, y botones, títulos y enlaces se actualizan de golpe.
🔎 Ejemplo concreto — Establecer y aplicar la guía de estilo (caso Nadia)
Site Settings → Colores globales:
Principal = #b4005a (rosa) · Texto = #333 · Acento = #e0218a
Site Settings → Estilos de texto:
Título = fuente A, 2.2rem · Cuerpo = fuente B, 1rem, interlineado 1.6
→ Aplicar "Color principal" en los botones (no un código fijo).
→ El cliente cambia de idea sobre el rosa: 1 ajuste, todo se actualiza.Resultado: identidad coherente, modificable en un clic.
Lección: aplicar lo global, nunca valores fijos.
Vocabulario de la sección
- Ajustes del sitio (Site Settings)
- Los ajustes globales aplicados a todo el sitio (desde el menú del editor).
Ejemplo sencillo: Nadia define allí paleta y estilos de texto.
Lo que no es: ajustar cada página por separado.
Reflejo: la identidad global se pilota aquí.
- Colores globales
- Una paleta definida a nivel del sitio (principal, secundario, texto, acento).
Ejemplo sencillo: elegir "Color principal" en vez de un código de color.
Lo que no es: teclear un código de color distinto en cada botón.
Reflejo: aplicar un color global, nunca fijo.
- Estilos de texto globales
- Tipografías tipo definidas globalmente (título, subtítulo, cuerpo).
Ejemplo sencillo: un estilo "Título" reutilizado en todas partes.
Lo que no es: ajustar la fuente de cada título a mano.
Reflejo: un estilo de texto global por rol.
- Coherencia / mantenimiento
- Todo el sitio comparte la misma guía de estilo; un cambio se propaga por todas partes.
Ejemplo sencillo: cambiar el rosa una vez actualiza todo el sitio.
Lo que no es: matices divergentes por falta de guía de estilo.
Reflejo: coherencia = guía de estilo centralizada.
- Definir pronto y aplicar en todas partes
- Establecer la guía de estilo desde el principio, luego aplicarla sobre cada elemento.
Ejemplo sencillo: guía de estilo creada antes de construir las páginas.
Lo que no es: inventar los colores sobre la marcha.
Reflejo: guía de estilo primero, construcción después.
En la práctica — Implementar una guía de estilo global
- Abre los ajustes del sitio (Site Settings).
- Define una paleta: principal, secundario, texto, acento.
- Define 2-3 estilos de texto globales (título, cuerpo).
- Aplica esos colores/estilos globales en tus botones y títulos (sin código fijo).
Guion listo para decir — vender la coherencia al cliente (20 s)
"He creado una guía de estilo para su sitio: sus colores y sus fuentes, definidos de una vez por todas. Resultado: todo es armonioso, y si quiere ajustar su rosa o cambiar de fuente, lo hago en un solo ajuste, propagado por todas partes. Sin retoques página por página."
La guía de estilo = coherencia visual + capacidad de respuesta a las peticiones.
Plantilla para copiar y pegar — guía de estilo del sitio
COLORES GLOBALES:
Principal #______ Secundario #______ Texto #______ Acento #______
ESTILOS DE TEXTO:
Título: fuente ______ tamaño ______
Cuerpo: fuente ______ tamaño ______ interlineado ______
APLICADOS EN GLOBAL (no fijos): sí / no
GUÍA DE ESTILO DEFINIDA ANTES DE CONSTRUIR: sí / noSitio nuevo
Guía de estilo desde el principio: se construye directamente con los colores/estilos globales.
Sitio a armonizar
Retomar los elementos "fijos" para vincularlos a la guía de estilo global.
Cliente indeciso
Guía de estilo global = se cambia "su" rosa en un clic, tantas veces como quiera.
Equipo
Una guía de estilo compartida evita que cada uno invente sus propios colores.
✓ Buenas prácticas
- Definir la guía de estilo antes de construir.
- Aplicar colores/estilos globales, nunca fijos.
- Mantener pocos colores y estilos, coherentes.
✗ Errores frecuentes
- Ajustar los colores caso por caso (matices divergentes).
- Olvidar aplicar lo global (valores fijos).
- Multiplicar colores y fuentes.
Puntos clave
- Site Settings = guía de estilo global del sitio.
- Paleta + estilos de texto reutilizables en todas partes.
- Cambio propagado desde un solo lugar.
- Definir pronto, aplicar en todas partes.
Reto 48h — aplica mañana
Crea una paleta (4 colores) y 2 estilos de texto en los ajustes del sitio, luego aplícalos en tus botones y títulos. Cambia el color principal y observa la actualización global. 20 minutos.
- He definido una paleta y estilos de texto globales.
- Los aplico en todas partes (sin valores fijos).
- Sé cambiar la guía de estilo en un solo lugar.
Preguntas frecuentes
¿Dónde se definen los colores globales?
En los ajustes del sitio (Site Settings), accesibles desde el menú del editor. Allí se crea una paleta (principal, secundario, texto, acento) reutilizable en todas partes.
¿Qué se gana con una guía de estilo global?
La coherencia (todo el sitio armonizado) y el mantenimiento centralizado: un cambio de color o de fuente se propaga por todas partes automáticamente, sin retocar cada página.
¿Puedo aún poner un color 'fijo' puntualmente?
Es posible pero desaconsejado: crea incoherencias y complica los cambios. Prefiere siempre aplicar un color global.
El carpintero probablemente cambiará de idea varias veces sobre "su" rosa. ¿Cómo se organiza Nadia?