Il tuo sito WordPress è online, ma sembra uguale a centinaia di altri? Lo stesso tema standard, gli stessi font, nessun accenno di personalità. La piattaforma offre tantissime opzioni di personalizzazione; il punto è capire da dove iniziare senza rompere il sito strada facendo.

Cambiare il design di un sito WordPress non significa per forza rifarlo da zero. A volte bastano tre o quattro interventi mirati perché il tuo sito smetta di sembrare generico e inizi a essere memorabile. Ecco una guida passo passo: dalla palette colori alla favicon, con strumenti specifici e senza codice dove puoi farne a meno.

💡 Panoramica rapida:

• Scegli una palette di 3 colori con Adobe Color, Coolors o ColorHexa
• Imposta i font tramite Google Fonts, Use Any Font per caratteri tipografici personalizzati
• Modifica il formato di data e ora con una singola riga di codice o tramite il Personalizza

Scegliere una palette colori

I colori fanno metà dell'impressione. Il visitatore non ha ancora letto il titolo, ma percepisce già se il sito trasmette una sensazione «premium» o «economica», tecnica o creativa, affidabile o discutibile. La palette colori è l'ancora visiva del tuo brand.

L'approccio ottimale prevede tre colori base: primario (sfondo/testo), accento (pulsanti, link, elementi importanti) e di supporto (bordi, divisori, stati hover). Più di tre rischiano di creare rumore visivo; meno è noioso. La regola principale: usa il colore accento con parsimonia, solo dove devi attirare l'attenzione.

Da dove iniziare con la scelta dei colori:

Adobe Color (ex Kuler)

Uno strumento Adobe per creare palette colori basate su regole di armonia: monocromatico, complementare, triade, analogo. Sotto il cofano c'è un cerchio cromatico dove imposti la tonalità base e il sistema seleziona automaticamente le altre. Puoi estrarre una palette da un'immagine caricata, comodo se hai un riferimento. Disponibile gratuitamente su color.adobe.com.

Coolors

Un generatore di palette pensato per la velocità. Premi la barra spaziatrice, ottieni una nuova combinazione di cinque colori. Puoi bloccare qualsiasi colore e far girare gli altri. Il risultato sono codici HEX pronti all'uso. C'è un plugin per Chrome/Firefox e un'app iOS. Funziona su coolors.co.

ColorHexa

ColorHexa non è solo un contagocce ma un'enciclopedia del colore. Inserisci un HEX, RGB o nome e ottieni una pagina con tonalità complementari, gradienti, triadi, composizione percentuale e anteprima per daltonici (come il colore appare a persone con diversi tipi di daltonismo). Miscelatore di colori: inserisci #ff0000+#0000ff+#ff00ff, ottieni il risultante #aa00aa con una scomposizione completa. colorhexa.com.

Palette HTML già pronte

Se non vuoi partire da zero, prendi palette già pronte. htmlcolorcodes.com offre 216 colori web-safe con codici HEX, compatibili con CSS, Photoshop e qualsiasi software di grafica. Il servizio Paletton (ex Color Scheme Designer) fornisce schemi colore con un'anteprima su un mockup di sito.

Generatore di gradienti CSS

I gradienti stanno tornando, e ora non sono le band del 2012 ma transizioni morbide su sfondi di sezioni e pulsanti. ColorZilla Gradient Editor è un editor simile a Photoshop: imposti punti di ancoraggio con colori e trasparenza, sposti il punto medio, copi il CSS finito. Supporta gradienti lineari, radiali e ripetuti. C'è un plugin per Chrome e Firefox con un contagocce direttamente nel browser.

Scegliere e configurare i font

I colori attirano l'attenzione; il testo la mantiene. Il font incide sulla leggibilità e sulla percezione del tono: un serif rigoroso comunica un senso di qualità editoriale, mentre un sans-serif pulito trasmette un'aria tech.

Il problema con i web font è che i visitatori vedranno solo quelli installati sul proprio computer, a meno che non si usino font incorporati (web). Quindi per una stilizzazione personalizzata, solo font esterni.

Regola base: non più di due font per pagina. Uno per i titoli (grande, distintivo), un secondo per il corpo del testo (massima leggibilità). Un terzo solo se serve un monospace per il codice.

Google Fonts, la fonte primaria

Un catalogo gratuito di oltre 1.500 famiglie su fonts.google.com. Il collegamento richiede due righe. Il metodo classico è tramite il file header.php del tema:

1
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

Oppure nel file style.css:

1
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

Dopo l'importazione, il font è disponibile in qualsiasi regola CSS:

1
body { font-family: 'Roboto', sans-serif; }
2
h1, h2, h3 { font-family: 'Montserrat', sans-serif; }

GDPR nuance: Google Fonts loaded directly from Google servers transmit visitors' IP addresses. Since 2022, EU courts have recognized this as a violation. The solution is the Local Google Fonts plugin, which downloads fonts to your server and serves them locally. An alternative for those who don't want to deal with plugins is an article on locally loading Google Fonts on our blog.

Custom fonts via plugin

If you need a brand font that isn't in Google Fonts, try Use Any Font. Upload a ttf, otf, or woff file, and the plugin converts it to woff2 and adds it to the admin panel. The free version allows uploading one font; Pro removes the limit.

Manual connection via @font-face

If you prefer code over plugins, place the font file in /wp-content/themes/your-theme/fonts/ and add to style.css:

1
@font-face {
2
    font-family: 'Museo300';
3
    src: url('fonts/museo300-regular.ttf') format('truetype');
4
    font-weight: normal;
5
}

Usage:

1
#menu { font-family: 'Museo300', sans-serif; }

Formatting date and time

The standard date format doesn't always fit the design. Fortunately, WordPress lets you change it without plugins.

Method 1: via Customizer (no code)

Go to Appearance → Customize → General Settings. The time format is changed there as well. Works for most classic themes.

Method 2: via single.php (precise control)

Open Appearance → Theme Editor → single.php. Find the the_time() or the_date() function:

1
<?php the_time('F Y'); ?>

Format symbols:

• l, full day name (lowercase L)
• F, month as word
• j, day of month as number
• Y, year as four digits
• y, year as two digits

Combination examples:

('l, j F Y') → domenica, 14 giugno 2026. ('j F, Y') → 14 giugno, 2026.

Non toccare gli apici singoli all'interno delle parentesi, modifica solo i simboli tra di essi. Se il tema utilizza the_date() invece di the_time(), il formato si cambia più facilmente: Impostazioni → Generali → Formato data.

Usare le immagini

Aggiungere immagini in WordPress si fa tramite il pulsante «Aggiungi media» nell'editor degli articoli. Posiziona il cursore dove vuoi inserirla → Aggiungi media → seleziona un'immagine dalla libreria media o caricala ex novo.

Sulla destra trovi il pannello delle impostazioni dell'allegato: titolo, testo alternativo (importante per SEO e accessibilità), dimensione, allineamento, link. Per la velocità del sito, carica immagini già compresse (TinyPNG o ShortPixel prima del caricamento). Maggiori dettagli nella nostra guida alla libreria media di WordPress.

Aggiungere una favicon

La favicon è quel quadratino nella scheda del browser e nei segnalibri. Un piccolo dettaglio che costruisce riconoscibilità: quando un utente ha 20 schede aperte, la favicon è l'unico elemento che distingue visivamente il tuo sito dagli altri.

Come creare una favicon

Il servizio più affidabile è RealFaviconGenerator. Carica un'immagine quadrata (almeno 260×260) e ottieni un pacchetto di icone per tutte le piattaforme: iOS, Android, tile di Windows, scheda fissata di Safari. Più il codice HTML pronto per l'inserimento.

Se ti serve un semplice file.ico a 16×16, qualsiasi editor grafico che salvi in.ico va bene (GIMP è gratuito). Oppure usa il servizio online Favicon.io.

Come installarla su WordPress

Il metodo più semplice è l'Icona del sito integrata. Da WordPress 4.3 è disponibile nel Personalizza:

Aspetto → Personalizza → Identità del sito → Icona del sito. Carica un'immagine quadrata e WordPress la ritaglierà automaticamente nelle dimensioni necessarie per tutte le piattaforme. Nessun plugin, nessun FTP, nessun header.php.

Il metodo con plugin è All In One Favicon, che offre più controllo: icone separate per amministrazione, frontend e diverse per dispositivi differenti. Ma per il 95% dei siti, l'Icona del sito integrata è sufficiente.

Metodo manuale (da aggiungere a header.php):

1
<link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico">

Posiziona il file favicon.ico nella root della cartella del tema. Non dimenticare di duplicarlo in public_html così la favicon si apre a yoursite.com/favicon.ico.

⁉️🤔 Domande frequenti

Posso cambiare il design del sito senza perdere i contenuti?

Sì, cambiare tema WordPress non influisce su articoli, pagine e file media. Sono archiviati nel database separatamente dal tema. L'unica cosa che potrebbe "rompersi" è il layout e il posizionamento degli elementi, specialmente se il vecchio tema usava custom post type o shortcode. Prima di cambiare, fai un backup completo (hosting + database). Per test in sicurezza, usa un sito di staging; molti host (SiteGround, Kinsta, WP Engine) lo offrono con un clic.

Quanti font sono ottimali per un sito?

Due: uno per i titoli, uno per il corpo del testo. Un terzo (monospace) per il codice, se presente sul sito. Ogni font aggiuntivo aumenta il tempo di caricamento di 200-400 ms e crea rumore visivo. Google Fonts ti permette di selezionare solo i pesi necessari (regular + bold = 2 file invece di 9), e il plugin Local Google Fonts li memorizza ulteriormente in cache sul tuo server.

È necessario mettere mano al codice per personalizzare?

No. Il Personalizza di WordPress (Aspetto → Personalizza) copre la maggior parte delle esigenze: colori, font, logo, favicon, immagini di sfondo, CSS. I temi a blocchi (da WP 5.9) offrono l'Editor del sito, un metodo ancora più visuale senza codice. Il codice serve quando hai bisogno di regolazioni fini: formato data in single.php, @font-face personalizzati, CSS specifici per un determinato plugin.

Cosa fare se il sito si è rotto dopo aver cambiato tema?

Primo: niente panico, i tuoi contenuti non sono andati da nessuna parte. Secondo: se il pannello di amministrazione è accessibile, torna al vecchio tema (Aspetto → Temi → Attiva). Se il pannello di amministrazione non è accessibile, accedi via FTP a /wp-content/themes/, rinomina la cartella del nuovo tema (aggiungi _disabled) e WordPress passerà automaticamente al tema predefinito. Dopo il ripristino, attiva WP_DEBUG in wp-config.php per vedere gli errori.

Come verificare se la favicon funziona?

Apri yoursite.com/favicon.ico; se l'icona viene visualizzata, il file è al suo posto. Nel browser la favicon non appare subito: viene messa in cache in modo aggressivo. Per verificare, apri il sito in modalità incognito o forza l'aggiornamento della cache (Ctrl+Shift+R). RealFaviconGenerator fornisce uno strumento di controllo favicon tramite URL.

Rifacimento del sito WordPress: cosa fare prima

L'ordine delle operazioni per la personalizzazione da zero: schema colori → font → logo e favicon → formato data → layout di widget e menu. In questa esatta sequenza: colori e tipografia sono le fondamenta su cui si costruisce tutto il resto.

Se il sito è già attivo e porta traffico, non fare il rifacimento sul dominio live. Copia di staging + test → migrazione. Le modifiche percepibili dai motori di ricerca (cambiamenti nella struttura HTML, titoli, URL) vanno fatte con consapevolezza: un rifacimento improvviso senza redirect può far calare il posizionamento.

Per chi vuole approfondire l'argomento: guida ai font personalizzati sul nostro blog, articolo sulla libreria media di WordPress per lavorare con le immagini, e un'analisi dettagliata del caricamento locale dei Google Fonts con un test prima/dopo su GTmetrix.

Inizia con tre colori e due font; il resto verrà da sé.