L’header<\/strong> (intestazione) \u00e8 la prima cosa che i visitatori vedono sul tuo sito WordPress<\/a>. 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\u00e0 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.<\/p>\n La maggior parte dei temi WordPress permette di personalizzare l’header attraverso il Customizer<\/strong> (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 \u00e8 il punto di partenza per qualsiasi modifica all’header, indipendentemente dal tema che usi.<\/p>\n Per accedere alle impostazioni dell’header, vai su Aspetto > Personalizza<\/strong> e cerca la sezione “Header” o “Intestazione”. Ogni tema organizza le opzioni in modo diverso, ma le funzionalit\u00e0 di base sono simili: logo, menu, colori e layout.<\/p>\n Il logo \u00e8 l’elemento pi\u00f9 importante dell’header. Per caricarlo, vai nel Customizer alla sezione “Identit\u00e0 del sito” e clicca su “Seleziona logo”. Carica un’immagine in formato PNG<\/strong> 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.<\/p>\n 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\u00e0, approfitta per usare una versione semplificata del logo sui dispositivi mobili, dove lo spazio \u00e8 limitato.<\/p>\n Il menu \u00e8 la componente funzionale dell’header. Per configurarlo, vai su Aspetto > Menu<\/strong> 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.<\/p>\n 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.<\/p>\n Se usi un tema a blocchi (come Twenty Twenty-Five o altri temi compatibili con il Full Site Editor), hai un controllo molto pi\u00f9 granulare sull’header. Vai su Aspetto > Editor<\/strong> 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.<\/p>\n 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\u00f9 completo per le pagine interne. La flessibilit\u00e0 \u00e8 totale e non richiede conoscenze di programmazione.<\/p>\n Un header sticky<\/strong> resta visibile in cima alla pagina mentre il visitatore scorre verso il basso. \u00c8 utile per siti con contenuti lunghi perch\u00e9 il menu di navigazione \u00e8 sempre accessibile. Molti temi includono questa opzione nelle impostazioni del Customizer, generalmente sotto “Header > Comportamento” o “Header > Sticky”.<\/p>\n 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\u00e0 sticky senza modificare il codice del tema. Assicurati che l’header sticky non sia troppo alto su mobile, dove lo spazio verticale \u00e8 prezioso: idealmente non dovrebbe occupare pi\u00f9 del 10-15% dello schermo.<\/p>\n Un pulsante di call to action<\/strong> (CTA) nell’header aumenta le conversioni perch\u00e9 \u00e8 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<\/strong>, aggiungi un “Link personalizzato” con l’URL desiderato e nelle opzioni avanzate (attiva “Classi CSS” nelle Opzioni schermata) aggiungi la classe menu-cta-button<\/span> o quella indicata dal tuo tema.<\/p>\n 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\u00e0: testo scuro su sfondo chiaro o viceversa. Evita combinazioni a basso contrasto che rendono il menu difficile da leggere.<\/p>\n 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.<\/p>\n Se vuoi un header professionale e personalizzato per il tuo sito WordPress, il team di SoccorsoWP<\/a><\/strong> pu\u00f2 progettarlo e configurarlo per te. Apri un ticket<\/a> e dai al tuo sito un’intestazione che cattura l’attenzione.<\/p>\n","protected":false},"excerpt":{"rendered":" Come personalizzare l’header di WordPress senza programmare L’header (intestazione) \u00e8 la prima cosa che i visitatori vedono sul tuo sito WordPress. Contiene il logo, il…<\/p>\n","protected":false},"author":1,"featured_media":25790,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_seopress_titles_title":"Come personalizzare l'header di WordPress senza codice","_seopress_titles_desc":"Guida completa per personalizzare l'header di WordPress: logo, menu, colori, header sticky e pulsante CTA senza toccare il codice.","_seopress_robots_index":"","_seopress_robots_follow":"","_seopress_robots_imageindex":"","_seopress_robots_snippet":"","_seopress_robots_primary_cat":"","_seopress_robots_breadcrumbs":"","_seopress_robots_freeze_modified_date":"","_seopress_robots_custom_modified_date":"","_seopress_robots_canonical":"","_seopress_social_fb_title":"","_seopress_social_fb_desc":"","_seopress_social_fb_img":"","_seopress_social_fb_img_attachment_id":0,"_seopress_social_fb_img_width":0,"_seopress_social_fb_img_height":0,"_seopress_social_twitter_title":"","_seopress_social_twitter_desc":"","_seopress_social_twitter_img":"","_seopress_social_twitter_img_attachment_id":0,"_seopress_social_twitter_img_width":0,"_seopress_social_twitter_img_height":0,"_seopress_redirections_value":"","_seopress_redirections_enabled":"","_seopress_redirections_enabled_regex":"","_seopress_redirections_logged_status":"","_seopress_redirections_param":"","_seopress_redirections_type":0,"_seopress_analysis_target_kw":"","footnotes":""},"categories":[742],"tags":[],"class_list":["post-25789","post","type-post","status-publish","format-standard","has-post-thumbnail","category-temi"],"_links":{"self":[{"href":"https:\/\/soccorsowp.it\/blog\/wp-json\/wp\/v2\/posts\/25789","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/soccorsowp.it\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/soccorsowp.it\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/soccorsowp.it\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/soccorsowp.it\/blog\/wp-json\/wp\/v2\/comments?post=25789"}],"version-history":[{"count":0,"href":"https:\/\/soccorsowp.it\/blog\/wp-json\/wp\/v2\/posts\/25789\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/soccorsowp.it\/blog\/wp-json\/wp\/v2\/media\/25790"}],"wp:attachment":[{"href":"https:\/\/soccorsowp.it\/blog\/wp-json\/wp\/v2\/media?parent=25789"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/soccorsowp.it\/blog\/wp-json\/wp\/v2\/categories?post=25789"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/soccorsowp.it\/blog\/wp-json\/wp\/v2\/tags?post=25789"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}L’header nel Customizer di WordPress<\/h2>\n
Caricare e ottimizzare il logo<\/h2>\n
Configurare il menu di navigazione<\/h2>\n
Personalizzare l’header con il Full Site Editor<\/h2>\n
Header sticky: menu fisso durante lo scroll<\/h2>\n
Aggiungere un pulsante CTA nell’header<\/h2>\n
Personalizzare i colori dell’header<\/h2>\n
Testare l’header su mobile<\/h2>\n
Serve aiuto con il design del sito?<\/h2>\n