C'è un momento che in quasi ogni progetto di sito si ripete puntualmente: quel blu deve diventare un po' più scuro. Ciò che in un sito impostato con criterio richiede un minuto, in un sito cresciuto alla rinfusa diventa una caccia su quaranta pagine. La differenza nasce proprio all'inizio.
Dove stanno le impostazioni centrali
Nell'editor di Elementor clicchi in alto a sinistra sul menu a panino e scelga Impostazioni del sito. Lì trova fra le altre cose Colori globali e Caratteri globali.
Quello che imposta qui compare poi in ogni selettore di colore e in ogni impostazione tipografica come valore predefinito con un nome. Se in un widget sceglie questo valore predefinito invece di un valore fisso, il widget resta collegato a esso in modo permanente. Se poi cambia il valore predefinito, cambia anche il widget.
Tutto qui. E ciononostante il passaggio viene quasi sempre saltato, perché all'inizio è più rapido digitare semplicemente un valore di colore.
Quanti colori hanno senso
Elementor crea quattro colori standard. Nei miei progetti lavoro con sei-otto — di più non serve quasi mai, di meno diventa stretto.
Una ripartizione che ha dato buoni risultati:
- Primario — il suo colore principale, per pulsanti ed elementi in evidenza.
- Secondario — il secondo colore del marchio, usato con parsimonia.
- Testo — il colore del testo corrente. Di rado nero puro; un grigio molto scuro è più piacevole da leggere.
- Titolo — spesso uguale al testo, a volte un tono più scuro.
- Sfondo — lo sfondo della pagina.
- Superficie — un tono leggermente staccato per schede e aree in evidenza.
- Bordo — per linee e separatori.
- Accento — per avvisi o segnalazioni, se servono.
Dia nomi parlanti. «Primario» e «Superficie chiara» fra un anno le diranno qualcosa; «Colore 5» no.
Una parola sul contrasto
Verifichi che il colore del testo abbia contrasto sufficiente rispetto al colore di sfondo prima di fissarlo. Per il testo normale si considera come soglia minima un rapporto di almeno 4,5 a 1. Esistono strumenti di verifica gratuiti che richiedono pochi secondi.
Non è una formalità. Un testo grigio chiaro su fondo bianco sul suo monitor calibrato sembra elegante e su un telefono alla luce del sole è semplicemente illeggibile. E dato che i requisiti di accessibilità per i siti web stanno diventando sempre più vincolanti, è anche la parte dalla quale conviene stare.
Definire la tipografia a livello centrale
In Caratteri globali definisce famiglia, dimensione, stile, altezza di riga e spaziatura per i ruoli di testo ricorrenti — primario, secondario, testo, accento — e in Stile del tema anche i valori predefiniti per H1 fino a H6 e per il testo corrente.
Due raccomandazioni dalla pratica:
Due famiglie di caratteri bastano. Una per i titoli, una per il testo corrente. Ogni ulteriore famiglia costa tempo di caricamento e rende l'immagine irrequieta. Spesso basta addirittura un'unica famiglia in due stili.
Non dimentichi l'altezza di riga. Per il testo corrente un valore intorno a 1,6 di solito va bene; i titoli sopportano molto meno, circa 1,2. L'interlinea incide sulla leggibilità più della dimensione del carattere — nel dettaglio: Impostare correttamente l'interlinea in Elementor.
L'errore più frequente
Si presenta così: qualcuno imposta i colori globali — e poi nel widget digita comunque il valore del colore a mano, perché il selettore era già aperto.
Il colore è giusto, il risultato appare identico e il collegamento manca. Al prossimo cambio di colore proprio quel widget resta indietro.
Faccia attenzione a scegliere nel selettore il valore globale, riconoscibile dal piccolo simbolo del globo, e non il valore libero accanto. La stessa distinzione vale per la tipografia.
Se il sito è già in piedi
Convertire a posteriori è lavoro di pazienza, ma ne vale la pena. Non proceda pagina per pagina, bensì per tipo di elemento: prima tutti i pulsanti, poi tutti i titoli, poi le superfici. Così lo sguardo resta sullo stesso schema e avanza molto più in fretta.
Ne approfitti per fare pulizia. Di solito emerge che un sito con presunti quattro colori contiene in realtà undici tonalità di blu leggermente diverse.
Elementor Pro: colori e caratteri globali ci sono in entrambe le versioni. Pro li estende a intestazione, footer, popup e layout degli articoli — anche lì valgono poi le stesse impostazioni. Scopri Elementor Pro
Perché lo sforzo conviene
Un'ora all'inizio le risparmia giorni in seguito. Ho ripreso in mano progetti di clienti in cui un cambio di colore avrebbe richiesto tre giorni, perché ogni colore era incollato a ogni singolo widget. In un progetto impostato con criterio lo stesso cambio è una modifica in un punto solo.
Come strutturare un sito fin dall'inizio in modo che resti modificabile è uno dei punti centrali del mio corso Elementor.
Tag