In un tema classico cambiavi i colori nel Customizer. Un tema a blocchi lì non ha una sezione Colori: tutto si trova nell’editor del sito, in Stili. Puoi cambiare l’intero aspetto con un clic, sostituire solo la tavolozza, modificare un colore della tavolozza o dare un altro colore a un solo blocco.
Queste opzioni si somigliano, ma funzionano in modo diverso. Se le usi nell’ordine sbagliato, perdi le tue modifiche. Se dai a un blocco un colore personalizzato invece di un colore della tavolozza, il cambio di tavolozza successivo lo ignora. Qui sotto trovi cosa fa ciascuna opzione e quando usarla.
Ho verificato tutto in WordPress 7.1.4 con i miei temi Makani Pro e Kanoa Pro. In WordPress 7 alcuni pannelli si sono spostati, quindi le guide più vecchie possono mandarti a pulsanti che non ci sono più.
La risposta breve
- Un design nuovo con un clic: Aspetto → Editor → Stili → Cerca stili. Scegli uno stile in alto o una tavolozza in Variazioni di colore, poi salva.
- I tuoi colori: Stili → Colori → Modifica tavolozza. Fai clic su un colore in Tema, digita un nuovo codice hex e salva. Tutto ciò che usa quel colore cambia di conseguenza.
- Un solo blocco: selezionalo, poi nella scheda Blocco della barra laterale apri Tipografia → Colore per il testo o Sfondo → Colore per lo sfondo. Scegli un colore dalla tavolozza del tema.
Stili, tavolozze e combinazioni di font: qual è la differenza
Un tema a blocchi può includere variazioni già pronte del suo design. Ognuna è un piccolo file JSON nella cartella styles del tema, e WordPress le divide in base a ciò che cambiano:
| Cosa scegli | Dove lo trovi | Cosa cambia | Esempio |
|---|---|---|---|
| Stile | Cerca stili, riga in alto | Colori, font e tutto ciò che l’autore del tema ha impostato, come le spaziature o gli stili dei blocchi | Makani Pro: Ink |
| Tavolozza (variazione di colore) | Cerca stili → Variazioni di colore; Colori → Modifica tavolozza → Tavolozze | Solo i colori | Makani Pro: 9 tavolozze, Kanoa Pro: 19 |
| Combinazione di font (variazione tipografica) | Cerca stili → Tipografia; Tipografia → Combinazioni di font | Solo i font | Makani Pro: Mono e Regular |
Quest’ultimo punto confonde molti. La pagina di un tema può promettere «20 stili», ma se tutti cambiano solo i colori, WordPress li mostra come tavolozze e la riga degli stili in alto resta vuota. È il caso del mio Kanoa Pro: tutti i suoi 20 stili sono tavolozze. Non manca niente, sono una sezione più in basso.
1. Passare a uno stile o a una tavolozza già pronti
- Vai su Aspetto → Editor e fai clic su Stili.
- Fai clic su Cerca stili.
- Fai clic su uno stile nella riga in alto per un aspetto completamente nuovo, oppure su una tavolozza in Variazioni di colore per cambiare solo i colori. L’anteprima a destra cambia subito.
- Non è ancora salvato nulla. Fai clic su Rivedi 1 modifica… in basso a sinistra e poi su Salva.
Prima lo stile, poi la tavolozza
Ho controllato cosa mantiene e cosa sostituisce ogni clic:
- Uno stile sostituisce tutto ciò che hai impostato in Stili: la tavolozza, i font, i colori di link e pulsanti. Resta solo il tuo CSS aggiuntivo.
- Una tavolozza sostituisce solo i colori: la tavolozza e i colori che hai impostato per link, pulsanti e titoli. I font restano, compresi quelli dello stile scelto prima.
- Predefinito nella riga in alto riporta il design originale del tema e cancella le tue modifiche, proprio come uno stile.
Quindi lavora in quest’ordine: stile, poi tavolozza, poi le tue modifiche. Se cambi qualcosa prima, il clic successivo su uno stile o su una tavolozza lo cancella. Finché non salvi, puoi ancora uscire dall’editor senza salvare. Dopo il salvataggio, la versione precedente resta nelle Revisioni. Ne parlo nell’articolo su come reimpostare gli stili di un tema a blocchi.
2. Cambiare un colore della tavolozza
La tavolozza di un tema a blocchi è un breve elenco di colori con un nome. Makani Pro ne ha sei: Background, Surface, Primary, Secondary, Line e Accent. I template e i pattern del tema non contengono codici colore, rimandano a questi nomi. Cambi Accent una volta sola e cambiano tutti i pulsanti che lo usano.
- Vai su Stili → Colori e fai clic su Modifica tavolozza.
- In Tema, fai clic su un colore. Per capire quale colore è quale, apri ⋮ accanto a Tema e scegli Mostra dettagli: vedrai i nomi e i codici hex.
- Digita il nuovo codice nel campo Hex o trascina il selettore. Il menu accanto a Hex passa a RGB o HSL.
- Fai clic su Rivedi 1 modifica… e su Salva.
Sotto i colori del tema c’è Personalizzato, con un pulsante +. I colori che aggiungi lì compaiono in ogni selettore colore, ma non cambiano il design finché non li scegli per un blocco. Più in basso, in Tavolozze, ci sono le tavolozze già pronte del tema, le stesse di Cerca stili. Se ne scegli una, sostituisce i colori che hai appena modificato.
3. Testo, sfondo, link e pulsanti
Molte guide ti mandano ancora in Colori per il colore del testo e dello sfondo. In WordPress 7.1 si trovano in altri pannelli:
- Sfondo del sito: Stili → Sfondo → Colore.
- Testo principale: Stili → Tipografia → Testo → Colore.
- Link, didascalie, pulsanti e titoli: Stili → Colori, in Elementi. In Titolo puoi dare un solo colore a tutti i livelli o colori diversi da H1 a H6.
- Un tipo di blocco in tutto il sito, per esempio tutte le citazioni: Stili → Blocchi, scegli il blocco, poi i suoi colori.
In ognuno di questi pannelli scegli un colore dalla tavolozza, non uno personalizzato. La sezione 5 spiega perché.
4. Cambiare il colore di un solo blocco
Per cambiare colore a una sola sezione, per esempio un gruppo con un’offerta, selezionala e apri la scheda Blocco della barra laterale. In WordPress 7.1 anche i colori del blocco sono divisi:
- il colore del testo è in Tipografia → Colore;
- il colore di sfondo è in Sfondo → Colore, accanto a Immagine e Gradiente.
Fai clic su Colore e vedrai la tavolozza del tema. Il campione con il segno di spunta è il colore attuale. Il campione grande in alto apre un selettore per qualsiasi altro colore.
5. Perché i colori della tavolozza sono meglio di quelli personalizzati
Quando scegli un campione dalla tavolozza, WordPress non salva il colore in sé. Salva il nome, per esempio «Surface». Quando scegli un colore personalizzato, salva il codice, per esempio #F3E3D3. La differenza la vedi il giorno in cui cambi tavolozza.
Nella pagina di prova qui sotto, la prima sezione usa Surface e Accent, la seconda un beige personalizzato. Con la tavolozza predefinita stanno bene tutte e due. Poi sono passato alla tavolozza scura Midnight. La prima sezione si è adeguata. La seconda ha mantenuto lo sfondo beige, ma ha preso il nuovo colore chiaro del testo, e il testo è quasi sparito.
Quindi, dentro i blocchi, resta sulla tavolozza. Se un blocco ha davvero bisogno di un colore in più, un colore personalizzato va bene: basta controllare quel blocco dopo ogni cambio di tavolozza. Per correggere un blocco che ha già un colore personalizzato, selezionalo, apri il suo colore e fai clic su un campione.
Perché un aggiornamento del tema non ha cambiato la tua tavolozza
Quando scegli uno stile o una tavolozza già pronti, WordPress copia i loro colori negli stili del tuo sito. L’ho verificato: dopo un clic sulla tavolozza Ocean in Makani Pro, gli stili salvati contenevano tutti e sei i codici colore, non un riferimento a Ocean. Se l’autore del tema modifica Ocean in un aggiornamento, il tuo sito tiene la vecchia versione. Per avere quella nuova, apri Cerca stili, fai di nuovo clic sulla tavolozza e salva.
Aggiungere una tua tavolozza (per sviluppatori)
Una tavolozza è un file JSON nella cartella styles del tema. Se contiene solo colori, WordPress la mostra in Variazioni di colore. Elenca tutti i colori della tavolozza del tema con gli stessi slug: una tavolozza sostituisce quella del tema per intero, e uno slug che ometti perde il suo colore ovunque.
{
"$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" }
]
}
}
}Metti il file in un tema child o in un tuo tema. Un file aggiunto al tema di qualcun altro sparisce con l’aggiornamento successivo. Se preferisci non scrivere JSON, il plugin Create Block Theme può trasformare i tuoi stili attuali in una nuova variazione di stile.
Domande
Dov’è la sezione Colori del Customizer?
I temi a blocchi non ce l’hanno. Con questi temi WordPress toglie Personalizza dal menu Aspetto, a meno che un plugin non lo usi ancora. I colori sono in Aspetto → Editor → Stili.
Perché non vedo Cerca stili?
Il tema non include stili, tavolozze né combinazioni di font. Puoi comunque cambiare ogni colore della sua tavolozza in Colori → Modifica tavolozza.
Una nuova tavolozza cambierà i miei articoli?
Solo i loro colori, e solo dove usano i colori della tavolozza. Testi, immagini e layout restano come sono. I blocchi con colori personalizzati li mantengono.
Un aggiornamento del tema reimposterà i miei colori?
No. I tuoi colori sono salvati nel database, separati dai file del tema. Ecco dove si trovano e come reimpostarli.
Temi con tante tavolozze
Se ti piace provare i colori, parti da un tema che ne ha tanti. Makani Pro ha nove tavolozze, lo stile Ink e due combinazioni di font. Kanoa Pro ha 20 tavolozze, da Arctic Frost a Warm Sunset. Lei PRO è scuro di serie e ha altre 11 tavolozze, da Warm Ivory a Midnight. Per altri design scuri, leggi 5 temi WordPress a blocchi scuri per un portfolio. E se vuoi una tavolozza fatta per il tuo brand, posso configurarla io per te.
