Come personalizzare l’header di WordPress senza programmare
L’header (intestazione) è la prima cosa che i visitatori vedono sul tuo sito WordPress. Contiene il logo, il menu di navigazione e spesso un numero di telefono o un pulsante di contatto. Un header ben progettato guida i visitatori verso le pagine importanti e comunica immediatamente l’identità del tuo brand. In questa guida ti spiego come personalizzare l’header di WordPress usando gli strumenti integrati nel tema, senza scrivere una riga di codice.
L’header nel Customizer di WordPress
La maggior parte dei temi WordPress permette di personalizzare l’header attraverso il Customizer (Aspetto > Personalizza). Qui trovi le opzioni per caricare il logo del sito, modificare il titolo e lo slogan, scegliere il layout dell’header e personalizzare i colori. Le modifiche appaiono in anteprima in tempo reale prima di pubblicarle. Il Customizer è il punto di partenza per qualsiasi modifica all’header, indipendentemente dal tema che usi.
Per accedere alle impostazioni dell’header, vai su Aspetto > Personalizza e cerca la sezione “Header” o “Intestazione”. Ogni tema organizza le opzioni in modo diverso, ma le funzionalità di base sono simili: logo, menu, colori e layout.
Caricare e ottimizzare il logo
Il logo è l’elemento più importante dell’header. Per caricarlo, vai nel Customizer alla sezione “Identità del sito” e clicca su “Seleziona logo”. Carica un’immagine in formato PNG con sfondo trasparente per il miglior risultato. Le dimensioni consigliate sono tra 200 e 400 pixel di larghezza, a seconda del layout del tema. Un logo troppo grande spinge il menu verso il basso, uno troppo piccolo risulta illeggibile.
Alcuni temi permettono di caricare un logo diverso per la versione mobile o per l’header sticky (quello che resta fisso durante lo scroll). Se il tuo tema supporta questa funzionalità, approfitta per usare una versione semplificata del logo sui dispositivi mobili, dove lo spazio è limitato.
Configurare il menu di navigazione
Il menu è la componente funzionale dell’header. Per configurarlo, vai su Aspetto > Menu nella bacheca di WordPress. Crea un nuovo menu, aggiungi le pagine desiderate e assegnalo alla posizione “Menu principale” o “Header”. Organizza le voci con il drag and drop: trascina una voce sotto un’altra e spostala leggermente a destra per creare un sottomenu a tendina.
Per un header efficace, limita le voci del menu principale a 5-7 elementi. Troppe voci confondono i visitatori e rendono il menu difficile da usare su mobile. Raggruppa le pagine secondarie nei sottomenu e usa etichette brevi e chiare come “Servizi”, “Chi siamo”, “Contatti” invece di frasi lunghe.
Personalizzare l’header con il Full Site Editor
Se usi un tema a blocchi (come Twenty Twenty-Five o altri temi compatibili con il Full Site Editor), hai un controllo molto più granulare sull’header. Vai su Aspetto > Editor e seleziona la sezione “Header” dal menu template parts. Qui puoi modificare l’header come qualsiasi altra parte del sito, usando i blocchi di Gutenberg.
Con il Full Site Editor puoi aggiungere blocchi personalizzati all’header: un numero di telefono, icone social, un banner promozionale, un campo di ricerca o qualsiasi altro elemento. Puoi anche creare header diversi per pagine diverse. Ad esempio, un header minimale per la homepage e uno più completo per le pagine interne. La flessibilità è totale e non richiede conoscenze di programmazione.
Header sticky: menu fisso durante lo scroll
Un header sticky resta visibile in cima alla pagina mentre il visitatore scorre verso il basso. È utile per siti con contenuti lunghi perché il menu di navigazione è sempre accessibile. Molti temi includono questa opzione nelle impostazioni del Customizer, generalmente sotto “Header > Comportamento” o “Header > Sticky”.
Se il tuo tema non supporta l’header sticky nativamente, puoi ottenerlo con un plugin leggero come Jetsticky o myStickymenu. Questi plugin aggiungono la funzionalità sticky senza modificare il codice del tema. Assicurati che l’header sticky non sia troppo alto su mobile, dove lo spazio verticale è prezioso: idealmente non dovrebbe occupare più del 10-15% dello schermo.
Aggiungere un pulsante CTA nell’header
Un pulsante di call to action (CTA) nell’header aumenta le conversioni perché è visibile su ogni pagina. Per aggiungerlo, molti temi offrono un’opzione “Pulsante header” nelle impostazioni del Customizer. In alternativa, puoi aggiungere un link personalizzato nel menu con una classe CSS che lo trasformi in pulsante. Vai su Aspetto > Menu, aggiungi un “Link personalizzato” con l’URL desiderato e nelle opzioni avanzate (attiva “Classi CSS” nelle Opzioni schermata) aggiungi la classe menu-cta-button o quella indicata dal tuo tema.
Personalizzare i colori dell’header
I colori dell’header devono essere coerenti con il brand del sito. Nel Customizer, cerca le opzioni di colore nella sezione Header o Colori. Le impostazioni tipiche includono il colore di sfondo, il colore del testo del menu, il colore al passaggio del mouse (hover) e il colore dell’header sticky. Usa un contrasto sufficiente tra sfondo e testo per garantire la leggibilità: testo scuro su sfondo chiaro o viceversa. Evita combinazioni a basso contrasto che rendono il menu difficile da leggere.
Testare l’header su mobile
Oltre il 60% del traffico web arriva da dispositivi mobili. Dopo ogni modifica all’header, verifica come appare su smartphone. Nel Customizer, usa le icone in basso per passare alla vista tablet e mobile. Controlla che il menu hamburger funzioni correttamente, che il logo sia leggibile e che i pulsanti CTA siano facilmente cliccabili con il pollice. Un header perfetto su desktop ma inutilizzabile su mobile danneggia l’esperienza della maggior parte dei visitatori.
Serve aiuto con il design del sito?
Se vuoi un header professionale e personalizzato per il tuo sito WordPress, il team di SoccorsoWP può progettarlo e configurarlo per te. Apri un ticket e dai al tuo sito un’intestazione che cattura l’attenzione.
