Introduzione: Coerenza Visiva con un Design System
Un sito web professionale non è un insieme casuale di pagine: è un’esperienza coerente dove colori, font, spaziature e stili seguono regole precise. Questo insieme di regole si chiama Design System, e Elementor offre tutti gli strumenti per crearne uno solido senza scrivere una riga di codice.
In questa guida imparerai a configurare colori globali, font globali e le Site Settings di Elementor per garantire coerenza in tutto il sito. Una volta impostato il design system, ogni nuova pagina erediterà automaticamente gli stili corretti, risparmiandoti tempo e prevenendo incoerenze.
Accedere alle Site Settings
Le Site Settings sono il centro di controllo del design system di Elementor. Per accedervi:
- Apri qualsiasi pagina con Elementor
- Fai clic sull’icona del menu hamburger in alto a sinistra nel pannello
- Seleziona Impostazioni del sito (Site Settings)
Qui troverai tutte le opzioni globali organizzate in sezioni: Design System, Stile del tema e Impostazioni.
Colori Globali
I colori globali sono la palette cromatica del tuo sito. Ogni colore definito come globale può essere utilizzato in qualsiasi widget, e quando lo modifichi, il cambiamento si propaga automaticamente a tutti gli elementi che lo usano.
I 4 Colori Predefiniti
Elementor include 4 colori globali predefiniti:
- Primario — il colore principale del brand, usato per intestazioni e elementi di rilievo
- Secondario — un colore complementare per elementi secondari
- Testo — il colore del corpo del testo (solitamente grigio scuro o nero)
- Accento — il colore per pulsanti, link e call-to-action
Aggiungere Colori Personalizzati
Oltre ai 4 predefiniti, puoi aggiungere quanti colori globali vuoi:
- Nelle Site Settings, vai su Colori globali
- Fai clic su Aggiungi colore
- Scegli il colore con il picker e assegna un nome descrittivo (es. “Sfondo sezioni”, “Bordo card”, “Testo chiaro”)
Consiglio: crea una palette di 8-12 colori che copra tutti i casi d’uso del tuo sito. Includi almeno: colore primario, secondario, di accento, sfondo, testo principale, testo secondario, colore dei bordi, colore di successo (verde), colore di errore (rosso).
Come Usare i Colori Globali nei Widget
Quando modifichi il colore di un qualsiasi widget, accanto al picker apparirà un’icona a forma di globo. Facendo clic su di essa, vedrai la lista dei colori globali disponibili. Selezionandone uno, il widget utilizzerà quel colore globale, e ogni modifica futura al colore si rifletterà automaticamente.
Font Globali (Tipografia Globale)
Come per i colori, Elementor permette di definire font globali (o tipografie globali) che puoi riutilizzare in tutto il sito.
Le 4 Tipografie Predefinite
- Primaria — solitamente per H1 e intestazioni principali
- Secondaria — per H2, H3 e sottotitoli
- Testo — per il corpo del testo (paragrafi)
- Accento — per elementi speciali (pulsanti, badge, etichette)
Configurare una Tipografia Globale
Per ogni tipografia globale puoi impostare:
- Font Family — il font (Google Fonts, Adobe Fonts, sistema)
- Dimensione — in px, em, rem o vw (con valori responsive)
- Peso — da 100 (Thin) a 900 (Black)
- Trasformazione — maiuscolo, minuscolo, capitalizzato
- Stile — normale o corsivo
- Decorazione — sottolineato, barrato, sopralineato
- Interlinea (Line Height) — lo spazio tra le righe
- Spaziatura lettere (Letter Spacing) — lo spazio tra i caratteri
- Spaziatura parole (Word Spacing) — lo spazio tra le parole
Scelta dei Font: Best Practice
- Massimo 2-3 font: uno per i titoli, uno per il corpo del testo, eventualmente uno per elementi speciali
- Pesi limitati: ogni peso aggiunto è un file in più da scaricare. Usa al massimo 3-4 pesi per font (es. 400, 500, 600, 700)
- Google Fonts: Elementor li carica direttamente dai server di Google. Se preferisci caricarli localmente (per GDPR compliance), attiva l’opzione nelle impostazioni di performance
- Combinazioni classiche: Montserrat + Open Sans, Playfair Display + Roboto, Raleway + Lato sono combinazioni affidabili e leggibili
Stile del Tema (Theme Style)
Nella sezione Theme Style delle Site Settings, puoi definire gli stili predefiniti per gli elementi HTML di base, indipendentemente da Elementor:
Tipografia
Imposta gli stili predefiniti per tutti i tag HTML: Body, H1, H2, H3, H4, H5, H6, Link. Questi stili si applicano anche ai contenuti fuori da Elementor (ad esempio gli articoli del blog).
Pulsanti
Definisci lo stile predefinito per tutti i pulsanti: colori normali e hover, tipografia, padding, border-radius e transizioni. Ogni pulsante Elementor erediterà questi stili come base.
Immagini
Imposta border-radius, bordi e ombre predefinite per tutte le immagini del sito.
Form Fields
Se usi Elementor Pro con i widget Form, puoi definire gli stili globali per i campi di input: bordi, sfondi, tipografia, padding e stili di focus.
CSS Custom Properties (Variabili CSS)
Per gli utenti più avanzati, Elementor genera automaticamente variabili CSS per i colori e le tipografie globali. Puoi utilizzarle nel CSS personalizzato per mantenere la coerenza:
Ad esempio, i colori globali generano variabili come --e-global-color-primary, --e-global-color-secondary, ecc. Le tipografie globali generano variabili per font-family, font-size, font-weight e line-height. Puoi usarle nel CSS personalizzato per estendere il design system a elementi non gestiti da Elementor.
Applicare il Design System a Tutto il Sito
Una volta configurato il design system:
- Usa sempre i colori globali: quando imposti un colore, seleziona quello globale (icona del globo) invece di scegliere un colore personalizzato
- Usa sempre le tipografie globali: per le intestazioni e il testo, seleziona la tipografia globale corrispondente
- Documenta il design system: crea una pagina interna (non pubblica) con tutti i colori, font e stili usati nel sito, come riferimento
- Revisiona periodicamente: controlla che i nuovi contenuti rispettino il design system
Benefici di un Design System
- Coerenza: ogni pagina ha lo stesso aspetto e sensazione
- Velocità: le modifiche globali si propagano ovunque in un clic
- Scalabilità: aggiungere nuove pagine è più veloce quando gli stili sono predefiniti
- Professionalità: un sito coerente trasmette affidabilità e cura
- Manutenibilità: un unico punto di controllo per aggiornare l’aspetto dell’intero sito
Come Creare una Palette Colori Professionale
Scegliere i colori giusti per un sito web non è questione di gusto personale: è una decisione strategica che influenza la percezione del brand, la leggibilità e le conversioni. Ecco un metodo pratico per creare una palette efficace.
Parti dal Colore del Brand
Il punto di partenza è sempre il colore primario del brand. Se il cliente ha già un logo con colori definiti, quelli sono la base. Se stai creando un brand da zero, scegli un colore primario che trasmetta i valori desiderati: il blu comunica fiducia e professionalità, il verde evoca natura e crescita, il rosso esprime energia e urgenza, il viola suggerisce creatività e lusso.
Genera i Colori Complementari
A partire dal colore primario, utilizza strumenti come Coolors.co, Adobe Color o Paletton per generare una palette armoniosa. Le tecniche più comuni sono:
- Monocromatica: variazioni di luminosità e saturazione dello stesso colore. Elegante e sicura.
- Complementare: il colore opposto sulla ruota cromatica. Alto contrasto, ideale per CTA.
- Analoga: colori adiacenti sulla ruota. Armoniosa e rilassante.
- Triadica: tre colori equidistanti sulla ruota. Vivace e bilanciata.
Definisci i Colori Funzionali
Oltre ai colori estetici, ogni sito ha bisogno di colori funzionali:
- Sfondo principale: bianco o grigio molto chiaro (#F8F9FA) per la massima leggibilità
- Sfondo alternato: un grigio leggermente più scuro (#F1F3F5) per separare visivamente le sezioni
- Testo principale: mai nero puro (#000000). Usa un grigio molto scuro (#1A1A2E o #2D3436) per ridurre l’affaticamento visivo
- Testo secondario: un grigio medio (#6C757D) per didascalie, date e metadati
- Successo: verde (#28A745) per messaggi di conferma
- Errore: rosso (#DC3545) per messaggi di errore e validazione
- Avviso: arancione (#FFC107) per notifiche e avvertimenti
Inserisci tutti questi colori come colori globali in Elementor per averli sempre a portata di mano in ogni widget.
Google Fonts vs Font Personalizzati in Elementor
La scelta del metodo di caricamento dei font influisce su prestazioni, privacy e flessibilità. Elementor supporta entrambe le opzioni.
Google Fonts: Semplicità e Varietà
Elementor include accesso diretto a oltre 1.400 Google Fonts. I vantaggi sono evidenti: installazione zero, enorme varietà, aggiornamenti automatici. Tuttavia, ci sono aspetti da considerare:
- Privacy (GDPR): per impostazione predefinita, i Google Fonts vengono caricati dai server di Google, che registra l’indirizzo IP dei visitatori. In Europa, questo può rappresentare un problema di conformità GDPR.
- Dipendenza esterna: se i server di Google sono lenti o irraggiungibili, il caricamento dei font rallenta il sito.
- Soluzione: Elementor (dalla versione 3.x) offre l’opzione di caricare i Google Fonts localmente. Vai su Elementor → Impostazioni → Avanzate e attiva “Carica Google Fonts localmente”. I font verranno scaricati sul tuo server e serviti da lì, risolvendo sia il problema GDPR che quello delle prestazioni.
Font Personalizzati (Custom Fonts)
Con Elementor Pro puoi caricare font personalizzati in formato WOFF2, WOFF, TTF o OTF. Questa opzione è necessaria quando:
- Il brand ha un font proprietario non disponibile su Google Fonts
- Vuoi usare un font acquistato da fonderie come MyFonts, FontSquirrel o Adobe Fonts
- Hai bisogno di prestazioni ottimali con un font specifico ottimizzato per il web
Per caricare un font personalizzato: vai su Elementor → Font personalizzati, carica i file del font nei formati richiesti e assegna un nome. Il font apparirà nel selettore tipografico di Elementor accanto ai Google Fonts.
Quale Scegliere?
Per la maggior parte dei progetti, Google Fonts caricati localmente rappresentano il miglior compromesso tra varietà, semplicità e conformità. Usa font personalizzati solo quando il brand lo richiede specificamente.
Design System: Best Practice per Agenzie
Se gestisci più siti per diversi clienti, un approccio sistematico al design system ti farà risparmiare decine di ore ogni mese. Ecco le best practice adottate dalle agenzie più efficienti.
Crea un Template di Design System
Sviluppa un sito base (starter site) con un design system generico già configurato: colori globali neutri, tipografie professionali, stili dei pulsanti, spaziature coerenti. Per ogni nuovo progetto, clona questo sito e personalizza solo i colori e i font del brand. Risparmierai ore di configurazione iniziale.
Documenta Ogni Progetto
Per ogni sito, crea una pagina interna non pubblica (impostata come “bozza”) che mostri tutti gli elementi del design system: la palette colori con i codici esadecimali, i font con le dimensioni per ogni livello di heading, i pulsanti nelle diverse varianti, le card, i form. Questa pagina diventa il riferimento per chiunque debba aggiungere contenuti al sito in futuro.
Usa le Classi CSS Globali
Elementor Pro permette di aggiungere CSS personalizzato globale dalle Site Settings. Definisci classi riutilizzabili per pattern comuni: .section-padding per spaziature coerenti, .card-shadow per ombre uniformi, .text-gradient per effetti di testo. Queste classi garantiscono coerenza anche quando diversi membri del team lavorano sullo stesso sito.
Standardizza le Spaziature
Le spaziature incoerenti sono il segnale più evidente di un sito non professionale. Definisci una scala di spaziature e rispettala in tutto il sito. Una scala comune è: 8px, 16px, 24px, 32px, 48px, 64px, 96px. Usa sempre multipli di 8 per padding e margin: il risultato sarà visivamente armonioso e ordinato.
Revisione di Qualità
Prima di consegnare un sito al cliente, effettua una revisione del design system: verifica che tutti i colori siano globali (nessun colore “hardcoded”), che tutte le tipografie siano globali, che le spaziature siano coerenti e che il sito sia perfettamente responsive su tutti i dispositivi. Questa revisione finale richiede 30-60 minuti ma evita ore di correzioni successive.
Conclusione
Un design system ben configurato è l’investimento iniziale che ripaga in ogni pagina futura. Con i colori globali, le tipografie globali e le Site Settings di Elementor, hai a disposizione tutto il necessario per creare un sito web coerente e professionale.
Per il prossimo passo, scopri come aggiungere animazioni ed effetti motion per dare vita al tuo design. Per assistenza nella creazione del tuo design system, il team di G Tech Group è a disposizione. Contattaci per una consulenza.
Guide Correlate della Serie Elementor
Continua a esplorare Elementor con le nostre guide: