En un tema clásico cambiabas los colores en el personalizador. Un tema de bloques no tiene ahí una sección Colores: todo está en el editor del sitio, en Estilos. Puedes cambiar todo el aspecto con un clic, sustituir solo la paleta, modificar un color de la paleta o dar otro color a un solo bloque.
Estas opciones se parecen, pero no funcionan igual. Si las usas en el orden equivocado, pierdes tus cambios. Si a un bloque le pones un color personalizado en lugar de uno de la paleta, el siguiente cambio de paleta lo pasa por alto. Abajo explico qué hace cada opción y cuándo usarla.
Todo lo que cuento aquí lo comprobé en WordPress 7.1.4 con mis temas Makani Pro y Kanoa Pro. Algunos paneles cambiaron de sitio en WordPress 7, así que las guías antiguas pueden mandarte a botones que ya no existen.
La respuesta corta
- Un aspecto nuevo con un clic: Apariencia → Editor → Estilos → Ver estilos. Elige un estilo arriba o una paleta en Variaciones de color y guarda.
- Tus propios colores: Estilos → Colores → Editar paleta. Haz clic en un color de Temas, escribe un código hex nuevo y guarda. Todo lo que usa ese color cambia con él.
- Un solo bloque: selecciónalo y, en la pestaña Bloque de la barra lateral, abre Tipografía → Color para el texto o Fondo → Color para el fondo. Elige un color de la paleta del tema.
Estilos, paletas y conjuntos de fuentes: en qué se diferencian
Un tema de bloques puede traer variaciones de su diseño ya preparadas. Cada una es un pequeño archivo JSON en la carpeta styles del tema, y WordPress las ordena según lo que cambian:
| Qué eliges | Dónde está | Qué cambia | Ejemplo |
|---|---|---|---|
| Estilo | Ver estilos, fila superior | Colores, fuentes y todo lo demás que definió el autor del tema, como el espaciado o los estilos de bloque | Makani Pro: Ink |
| Paleta (variación de color) | Ver estilos → Variaciones de color; Colores → Editar paleta → Paletas | Solo los colores | Makani Pro: 9 paletas, Kanoa Pro: 19 |
| Conjunto de fuentes (variación tipográfica) | Ver estilos → Tipografía; Tipografía → Conjuntos de fuentes | Solo las fuentes | Makani Pro: Mono y Regular |
Esto último confunde a mucha gente. La página de un tema puede prometer «20 estilos», pero si todos solo cambian los colores, WordPress los muestra como paletas y la fila superior de estilos queda vacía. Es lo que pasa con mi Kanoa Pro: sus 20 estilos son paletas. No falta nada, están una sección más abajo.
1. Elegir un estilo o una paleta del tema
- Ve a Apariencia → Editor y haz clic en Estilos.
- Haz clic en Ver estilos.
- Haz clic en un estilo de la fila superior para cambiar todo el aspecto, o en una paleta de Variaciones de color para cambiar solo los colores. La vista previa de la derecha cambia al instante.
- Aún no se ha guardado nada. Haz clic en Revisar 1 cambio… abajo a la izquierda y luego en Guardar.
Primero el estilo, después la paleta
Comprobé qué conserva cada clic y qué reemplaza:
- Un estilo reemplaza todo lo que ajustaste en Estilos: la paleta, las fuentes, los colores de los enlaces y los botones. Solo se queda tu CSS adicional.
- Una paleta reemplaza solo los colores: la paleta y los colores que pusiste a enlaces, botones y encabezados. Las fuentes se quedan, también las del estilo que elegiste antes.
- Por defecto, en la fila superior, devuelve el diseño propio del tema y descarta tus cambios igual que un estilo.
Así que trabaja en este orden: estilo, luego paleta, luego tus propios cambios. Si cambias cosas primero, el siguiente clic en un estilo o una paleta las borra. Mientras no guardes, aún puedes salir del editor sin guardar. Después de guardar, la versión anterior queda en Revisiones. Más sobre esto en cómo restablecer los estilos de un tema de bloques.
2. Cambiar un color de la paleta
La paleta de un tema de bloques es una lista corta de colores con nombre. Makani Pro tiene seis: Background, Surface, Primary, Secondary, Line y Accent. Las plantillas y los patrones del tema no contienen códigos de color, apuntan a esos nombres. Cambia Accent una vez y cambiará con él cada botón que use Accent.
- Ve a Estilos → Colores y haz clic en Editar paleta.
- En Temas, el grupo de colores del tema, haz clic en uno. Para saber qué color es cuál, abre ⋮ junto a Temas y elige Mostrar detalles: verás los nombres y los códigos hex.
- Escribe el código nuevo en el campo Hex o arrastra el selector. Con el menú junto a Hex pasas a RGB o HSL.
- Haz clic en Revisar 1 cambio… y en Guardar.
Debajo de los colores del tema está Personalizado, con un botón +. Los colores que añadas ahí aparecen en todos los selectores de color, pero no cambian el diseño hasta que los eliges para un bloque. Más abajo, en Paletas, están las paletas del tema, las mismas que en Ver estilos. Si eliges una, reemplaza los colores que acabas de editar.
3. Texto, fondo, enlaces y botones
Muchas guías todavía te mandan a Colores para el color del texto y del fondo. En WordPress 7.1 están en otros paneles:
- Fondo del sitio: Estilos → Fondo → Color.
- Texto principal: Estilos → Tipografía → Texto → Color.
- Enlaces, leyendas, botones y encabezados: Estilos → Colores, en Elementos. Los encabezados pueden tener un color para todos los niveles o colores distintos de H1 a H6.
- Un tipo de bloque en todo el sitio, por ejemplo todas las citas: Estilos → Bloques, elige el bloque y luego sus colores.
En todos ellos, elige un color de la paleta, no uno personalizado. La sección 5 explica por qué.
4. Cambiar el color de un solo bloque
Para cambiar el color de una sección, por ejemplo un grupo con una oferta, selecciónala y abre la pestaña Bloque de la barra lateral. En WordPress 7.1 los colores del bloque también están repartidos:
- el color del texto está en Tipografía → Color;
- el color de fondo está en Fondo → Color, junto a Imagen y Degradado.
Haz clic en Color y verás la paleta del tema. La muestra con una marca de verificación es el color actual. La muestra grande de arriba abre un selector para cualquier otro color.
5. Por qué los colores de la paleta son mejores que los personalizados
Cuando eliges una muestra de la paleta, WordPress no guarda el color en sí. Guarda el nombre, por ejemplo «Surface». Cuando eliges un color personalizado, guarda el código, por ejemplo #F3E3D3. La diferencia se nota el día que cambias la paleta.
En la página de prueba de abajo, la primera sección usa Surface y Accent; la segunda, un beis personalizado. Con la paleta por defecto las dos se ven bien. Luego cambié a la paleta oscura Midnight. La primera sección se adaptó. La segunda mantuvo su fondo beis, pero recibió el nuevo color de texto claro, y el texto casi desapareció.
Así que dentro de los bloques, quédate con la paleta. Si un bloque de verdad necesita un color extra, un color personalizado está bien; solo revisa ese bloque después de cada cambio de paleta. Para arreglar un bloque que ya tiene un color personalizado, selecciónalo, abre su color y haz clic en una muestra.
Por qué una actualización del tema no cambió tu paleta
Cuando eliges un estilo o una paleta del tema, WordPress copia sus colores en los estilos de tu sitio. Lo comprobé: tras un clic en la paleta Ocean en Makani Pro, los estilos guardados tenían los seis códigos de color, no un enlace a Ocean. Si el autor del tema ajusta Ocean en una actualización, tu sitio se queda con la versión antigua. Para tener la nueva, abre Ver estilos, haz clic otra vez en la paleta y guarda.
Añadir tu propia paleta (para desarrolladores)
Una paleta es un archivo JSON en la carpeta styles del tema. Si solo contiene colores, WordPress la muestra en Variaciones de color. Incluye todos los colores de la paleta del tema con los mismos slugs: una paleta reemplaza la paleta del tema entera, y el slug que omitas pierde su color en todas partes.
{
"$schema": "https://schemas.wp.org/wp/7.1/theme.json",
"version": 3,
"title": "Harbor",
"settings": {
"color": {
"palette": [
{ "slug": "background", "name": "Background", "color": "#F4F7F9" },
{ "slug": "surface", "name": "Surface", "color": "#E6EDF2" },
{ "slug": "primary", "name": "Primary", "color": "#13212C" },
{ "slug": "secondary", "name": "Secondary", "color": "#5A6B78" },
{ "slug": "line", "name": "Line", "color": "#D5DEE5" },
{ "slug": "accent", "name": "Accent", "color": "#0F6E8C" }
]
}
}
}Pon el archivo en un tema hijo o en tu propio tema. Un archivo añadido al tema de otra persona desaparece con la siguiente actualización. Si prefieres no escribir JSON, el plugin Create Block Theme puede convertir tus estilos actuales en una nueva variación de estilo.
Preguntas
¿Dónde está la sección Colores del personalizador?
Los temas de bloques no la tienen. Con ellos, WordPress quita Personalizar del menú Apariencia, salvo que algún plugin aún lo use. Los colores están en Apariencia → Editor → Estilos.
¿Por qué no aparece Ver estilos?
El tema no trae estilos, paletas ni conjuntos de fuentes. Aun así puedes cambiar cada color de su paleta en Colores → Editar paleta.
¿Una paleta nueva cambiará mis entradas?
Solo sus colores, y solo donde usan colores de la paleta. El texto, las imágenes y la maquetación se quedan como están. Los bloques con colores personalizados los conservan.
¿Una actualización del tema restablecerá mis colores?
No. Tus colores se guardan en la base de datos, aparte de los archivos del tema. Aquí explico dónde están y cómo restablecerlos.
Temas con muchas paletas
Si te gusta probar colores, empieza con un tema que tenga muchos. Makani Pro tiene nueve paletas, el estilo Ink y dos conjuntos de fuentes. Kanoa Pro tiene 20 paletas, de Arctic Frost a Warm Sunset. Lei PRO es oscuro por defecto y tiene 11 paletas más, de Warm Ivory a Midnight. Para ver más diseños oscuros, lee 5 temas oscuros de bloques para un portfolio en WordPress. Y si quieres una paleta hecha para tu marca, puedo configurarla por ti.
