In questa guida imparerai a configurare colori globali<\/strong>, font globali<\/strong> e le Site Settings<\/strong> di Elementor per garantire coerenza in tutto il sito. Una volta impostato il design system, ogni nuova pagina erediter\u00e0 automaticamente gli stili corretti, risparmiandoti tempo e prevenendo incoerenze.<\/p>\n Le Site Settings sono il centro di controllo del design system di Elementor. Per accedervi:<\/p>\n Qui troverai tutte le opzioni globali organizzate in sezioni: Design System, Stile del tema e Impostazioni.<\/p>\n I colori globali sono la palette cromatica del tuo sito. Ogni colore definito come globale pu\u00f2 essere utilizzato in qualsiasi widget, e quando lo modifichi, il cambiamento si propaga automaticamente a tutti gli elementi che lo usano.<\/p>\n Elementor include 4 colori globali predefiniti:<\/p>\n Oltre ai 4 predefiniti, puoi aggiungere quanti colori globali vuoi:<\/p>\n 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).<\/p>\n Quando modifichi il colore di un qualsiasi widget, accanto al picker apparir\u00e0 un’icona a forma di globo. Facendo clic su di essa, vedrai la lista dei colori globali disponibili. Selezionandone uno, il widget utilizzer\u00e0 quel colore globale, e ogni modifica futura al colore si rifletter\u00e0 automaticamente.<\/p>\n Come per i colori, Elementor permette di definire font globali<\/strong> (o tipografie globali) che puoi riutilizzare in tutto il sito.<\/p>\n Per ogni tipografia globale puoi impostare:<\/p>\n Nella sezione Theme Style delle Site Settings, puoi definire gli stili predefiniti per gli elementi HTML di base, indipendentemente da Elementor:<\/p>\n 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).<\/p>\n Definisci lo stile predefinito per tutti i pulsanti: colori normali e hover, tipografia, padding, border-radius e transizioni. Ogni pulsante Elementor erediter\u00e0 questi stili come base.<\/p>\n Imposta border-radius, bordi e ombre predefinite per tutte le immagini del sito.<\/p>\n 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.<\/p>\n Per gli utenti pi\u00f9 avanzati, Elementor genera automaticamente variabili CSS per i colori e le tipografie globali. Puoi utilizzarle nel CSS personalizzato per mantenere la coerenza:<\/p>\n Ad esempio, i colori globali generano variabili come Una volta configurato il design system:<\/p>\n Scegliere i colori giusti per un sito web non \u00e8 questione di gusto personale: \u00e8 una decisione strategica che influenza la percezione del brand, la leggibilit\u00e0 e le conversioni. Ecco un metodo pratico per creare una palette efficace.<\/p>\n Il punto di partenza \u00e8 sempre il colore primario del brand<\/strong>. Se il cliente ha gi\u00e0 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<\/strong> comunica fiducia e professionalit\u00e0, il verde<\/strong> evoca natura e crescita, il rosso<\/strong> esprime energia e urgenza, il viola<\/strong> suggerisce creativit\u00e0 e lusso.<\/p>\n A partire dal colore primario, utilizza strumenti come Coolors.co<\/strong>, Adobe Color<\/strong> o Paletton<\/strong> per generare una palette armoniosa. Le tecniche pi\u00f9 comuni sono:<\/p>\n Oltre ai colori estetici, ogni sito ha bisogno di colori funzionali:<\/p>\n Inserisci tutti questi colori come colori globali in Elementor<\/strong> per averli sempre a portata di mano in ogni widget.<\/p>\n La scelta del metodo di caricamento dei font influisce su prestazioni, privacy e flessibilit\u00e0. Elementor supporta entrambe le opzioni.<\/p>\n Elementor include accesso diretto a oltre 1.400 Google Fonts<\/strong>. I vantaggi sono evidenti: installazione zero, enorme variet\u00e0, aggiornamenti automatici. Tuttavia, ci sono aspetti da considerare:<\/p>\n Con Elementor Pro<\/strong> puoi caricare font personalizzati in formato WOFF2, WOFF, TTF o OTF. Questa opzione \u00e8 necessaria quando:<\/p>\n Per caricare un font personalizzato: vai su Elementor \u2192 Font personalizzati<\/strong>, carica i file del font nei formati richiesti e assegna un nome. Il font apparir\u00e0 nel selettore tipografico di Elementor accanto ai Google Fonts.<\/p>\n Per la maggior parte dei progetti, Google Fonts caricati localmente<\/strong> rappresentano il miglior compromesso tra variet\u00e0, semplicit\u00e0 e conformit\u00e0. Usa font personalizzati solo quando il brand lo richiede specificamente.<\/p>\n Se gestisci pi\u00f9 siti per diversi clienti, un approccio sistematico al design system ti far\u00e0 risparmiare decine di ore ogni mese. Ecco le best practice adottate dalle agenzie pi\u00f9 efficienti.<\/p>\n Sviluppa un sito base<\/strong> (starter site) con un design system generico gi\u00e0 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.<\/p>\n Per ogni sito, crea una pagina interna non pubblica<\/strong> (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.<\/p>\n Elementor Pro permette di aggiungere CSS personalizzato globale<\/strong> dalle Site Settings. Definisci classi riutilizzabili per pattern comuni: Le spaziature incoerenti sono il segnale pi\u00f9 evidente di un sito non professionale. Definisci una scala di spaziature<\/strong> e rispettala in tutto il sito. Una scala comune \u00e8: 8px, 16px, 24px, 32px, 48px, 64px, 96px. Usa sempre multipli di 8 per padding e margin: il risultato sar\u00e0 visivamente armonioso e ordinato.<\/p>\n Prima di consegnare un sito al cliente, effettua una revisione del design system<\/strong>: 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.<\/p>\n Un design system ben configurato \u00e8 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.<\/p>\n Per il prossimo passo, scopri come aggiungere animazioni ed effetti motion<\/a> per dare vita al tuo design. Per assistenza nella creazione del tuo design system, il team di G Tech Group<\/a> \u00e8 a disposizione. Contattaci<\/a> per una consulenza.<\/p>\n Continua a esplorare Elementor con le nostre guide:<\/p>\n Introduzione: Coerenza Visiva con un Design System Un sito web professionale non \u00e8 un insieme casuale di pagine: \u00e8 un’esperienza coerente dove colori, font, spaziature…<\/p>\n","protected":false},"author":2,"featured_media":166401,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_seopress_robots_primary_cat":"","_seopress_titles_title":"Elementor: Tipografia, Colori e Design System","_seopress_titles_desc":"Come creare un design system in Elementor con colori globali, font globali, Site Settings e variabili CSS per un sito coerente e professionale.","_seopress_robots_index":"","footnotes":""},"categories":[61],"tags":[2550,2553,2521,2552,2551],"class_list":["post-166419","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress","tag-colori-elementor","tag-design-system","tag-guida-elementor","tag-stili-globali","tag-tipografia-elementor"],"_links":{"self":[{"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/posts\/166419","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/comments?post=166419"}],"version-history":[{"count":3,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/posts\/166419\/revisions"}],"predecessor-version":[{"id":166488,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/posts\/166419\/revisions\/166488"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/media\/166401"}],"wp:attachment":[{"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/media?parent=166419"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/categories?post=166419"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/tags?post=166419"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Accedere alle Site Settings<\/h2>\n
![\"Impostazioni](\"https:\/\/gtechgroup.it\/blog\/wp-content\/uploads\/2026\/05\/settings-general.png\")
<\/p>\n\n
![\"Le](\"https:\/\/gtechgroup.it\/blog\/wp-content\/uploads\/2026\/05\/03-settings.png\")
<\/p>\nColori Globali<\/h2>\n
I 4 Colori Predefiniti<\/h3>\n
\n
Aggiungere Colori Personalizzati<\/h3>\n
\n
Come Usare i Colori Globali nei Widget<\/h3>\n
Font Globali (Tipografia Globale)<\/h2>\n
Le 4 Tipografie Predefinite<\/h3>\n
\n
Configurare una Tipografia Globale<\/h3>\n
\n
Scelta dei Font: Best Practice<\/h3>\n
\n
Stile del Tema (Theme Style)<\/h2>\n
![\"Customizer](\"https:\/\/gtechgroup.it\/blog\/wp-content\/uploads\/2026\/05\/customizer.png\")
<\/p>\nTipografia<\/h3>\n
Pulsanti<\/h3>\n
Immagini<\/h3>\n
Form Fields<\/h3>\n
CSS Custom Properties (Variabili CSS)<\/h2>\n
--e-global-color-primary<\/code>, --e-global-color-secondary<\/code>, ecc. Le tipografie globali generano variabili per font-family, font-size, font-weight e line-height. Puoi usarle nel CSS personalizzato<\/a> per estendere il design system a elementi non gestiti da Elementor.<\/p>\nApplicare il Design System a Tutto il Sito<\/h2>\n
\n
Benefici di un Design System<\/h2>\n
\n
Come Creare una Palette Colori Professionale<\/h2>\n
Parti dal Colore del Brand<\/h3>\n
Genera i Colori Complementari<\/h3>\n
\n
Definisci i Colori Funzionali<\/h3>\n
\n
Google Fonts vs Font Personalizzati in Elementor<\/h2>\n
Google Fonts: Semplicit\u00e0 e Variet\u00e0<\/h3>\n
\n
Font Personalizzati (Custom Fonts)<\/h3>\n
\n
Quale Scegliere?<\/h3>\n
Design System: Best Practice per Agenzie<\/h2>\n
Crea un Template di Design System<\/h3>\n
Documenta Ogni Progetto<\/h3>\n
Usa le Classi CSS Globali<\/h3>\n
.section-padding<\/code> per spaziature coerenti, .card-shadow<\/code> per ombre uniformi, .text-gradient<\/code> per effetti di testo. Queste classi garantiscono coerenza anche quando diversi membri del team lavorano sullo stesso sito.<\/p>\nStandardizza le Spaziature<\/h3>\n
Revisione di Qualit\u00e0<\/h3>\n
Conclusione<\/h2>\n
Guide Correlate della Serie Elementor<\/h2>\n
\n