# Costruire un header per WordPress senza plugin URL: https://canvaswp.com/it/guides/build-a-wordpress-header-without-a-plugin/ Updated: 2026-11-03 Guida Un header è l'unica parte di un sito che ogni visitatore vede, e spesso i temi la nascondono dietro una schermata delle impostazioni con nove opzioni. In Canvas un header è un elemento che costruisci con i blocchi nell'editor, quindi questa guida è un percorso di costruzione, non un giro tra le caselle di spunta. Pubblicato il 5 settembre 2026 Aggiornato il 3 novembre 2026 Scritto dal team di Canvas presso SemiColonWeb ## Passo 1: Cos'è un header in Canvas Un header è un record, elencato nell'admin di WordPress come una pagina e modificato nello stesso editor a blocchi. Questa sola decisione è ciò che elimina il plugin per l'header dal tuo stack. Altri temi creano l'header in un altro punto. Blocksy e Astra tengono i generatori di header nel Customizer, un pannello di impostazioni accanto al sito, lontano dall'editor in cui scrivi le pagine. [Il nostro confronto con Blocksy](https://canvaswp.com/it/compare/blocksy/) mette a confronto i due approcci fianco a fianco. ### L'annidamento Un record di header contiene un **Header Root**. Il root contiene un **Header Container**, che decide se l'header è in un riquadro o a larghezza piena, e può cambiare da un breakpoint all'altro. Il container contiene le **Header Zones**, e una zona è una cella della riga dell'header. Il logo va in una, la navigazione nella successiva, un'icona di ricerca e un carrello nell'ultima. Ci sono 22 blocchi nella famiglia degli header in tutto, e su un sito tipico ne userai quattro o cinque. Tutto il resto serve per il giorno in cui ti servirà una ricerca nel negozio, un link alla lingua o un blocco con gli orari di apertura nell'angolo. Non è un editor separato. Se modifichi le pagine in WordPress, puoi modificare anche un header, e valgono gli stessi annulla, impostazioni dei blocchi e scorciatoie da tastiera. ## Passaggio 2: Crea il record dell'header Apri l'elenco Headers nel menu di Canvas e aggiungi una nuova voce. Hai due punti di partenza onesti. ### Parti da un pattern Inserisci un pattern di header e ottieni blocchi standard, già disposti per te e pronti da riordinare, rinominare o eliminare. Gli header sono la categoria di pattern più numerosa del prodotto, su 183 pattern in totale, quindi di solito c'è qualcosa di vicino alla forma che cerchi. Questa è la strada più veloce, quella giusta per una prima costruzione. ### Parti da una demo Se hai importato uno dei 88 siti Demo, il suo header è già un record sul tuo sito. Aprilo e modificalo, oppure duplicalo e sperimenta sulla copia. Modificare un header funzionante ti insegna la struttura più in fretta di quanto faccia una tela vuota. Assegna alla scheda un nome che indichi a cosa serve, ad esempio Header principale o Header della landing page. Ne avrai tre entro un mese, e i nomi sono l'unico modo per distinguerli. ## Passo 3: Disponi le zone Le zone gestiscono il layout, quindi non dovrai quasi mai occuparti delle classi di allineamento. - **Spingi una zona fino al bordo.** Una zona a sinistra per il logo, una al centro per il menu e una a destra per le azioni è la disposizione che la maggior parte dei siti finisce per adottare. - **Raggruppa gli elementi che appartengono insieme.** Un'icona di ricerca, un carrello e un pulsante in una stessa zona restano un gruppo, spaziati come un'unica unità. - **Riordina per breakpoint.** La zona che su desktop è terza può essere prima su telefono, senza un secondo record dell'header. - **Limita una zona a una fascia di dispositivi.** Indica a una zona di saltare i dispositivi che non hanno spazio per lei, così non serve nascondere nulla con CSS a posteriori. - **Aggiungi classi personalizzate** a una zona quando vuoi richiamarla da un foglio di stile tuo. Costruisci prima la disposizione per desktop e non toccarla finché non sono inseriti tutti gli elementi. Le decisioni sul layout sono molto più facili quando il contenuto reale è già nella riga. **Un header nell'editor.** Le zone contengono le parti; ogni parte è un blocco con il proprio pannello delle impostazioni. ## Passaggio 4: Aggiungi i componenti Ora riempi le zone. Ognuna è un blocco e ha un pannello delle impostazioni con le opzioni che quel blocco riconosce. - **Logo dell'header.** Il tuo logo, con file separati per lo stato sticky e per lo stato scuro, così un header trasparente sopra una foto scura non richiede una soluzione alternativa. - **Header Navigation.** Il menu principale, con menu a tendina e pannelli del mega menu. Visualizza un menu di WordPress, quindi il menu stesso si gestisce dove ti aspetti. - **Header Search.** Un'icona che apre un campo, oppure un campo sempre aperto, a seconda di ciò che si adatta meglio al design. - **Header Button.** La call to action, con le solite impostazioni di dimensione, stile e link. Una è efficace, tre sono solo rumore. - **Header Cart.** Il carrello WooCommerce con il numero di articoli e un riepilogo a discesa, per i negozi. - **Header Icon Link, Header Social e Header Info.** Un numero di telefono, una riga di profili social, un piccolo blocco con i recapiti, un indirizzo o gli orari di apertura. ### Mega menu, quando un elenco non basta Un mega menu è un record a sé, progettato come blocchi e reso dal blocco Mega menu, quindi una voce di menu apre un pannello a larghezza piena di colonne, immagini e pulsanti. Mega Menu Column mantiene il pannello su una griglia. Usalo quando una categoria ha davvero una struttura, non per far sembrare occupato un sito piccolo. ## Passo 5: Fisso, trasparente e preset di layout Il comportamento deriva dai preset, pacchetti di impostazioni di layout che applichi con un clic e poi personalizzi. Scegli il comportamento che vuoi e modifica in seguito ciò che preferisci. - **Trasparente.** Nessuno sfondo, quindi ciò che sta dietro l'header si vede attraverso. Abbinalo alla variante del logo scuro o chiaro così il logotipo resta leggibile. - **Semi-trasparente.** Uno sfondo traslucido, che mantiene visibile l'immagine dietro e il testo leggibile. Di solito è la scelta più sicura rispetto a una foto ricca di dettagli. - **Fluttuante,** e **fluttuante semitrasparente** o **fluttuante piccolo**, dove l'header si trova all'interno della pagina con spazio intorno, lontano dai bordi della finestra. - **A tutta larghezza, fisso.** Si estende su tutta la finestra e resta bloccato mentre la pagina scorre. - **Fisso allo scorrimento verso l'alto.** Lascia la parte superiore quando il visitatore scorre verso il basso e torna quando risale, restituendo spazio alle pagine lunghe. ### Le impostazioni dell'intero sito che ne sono alla base Le opzioni dell'header sono la sezione più ampia di Opzioni del tema, con 94 dei 533 campi, e riguardano ciò che nessun singolo record dovrebbe gestire: l'header predefinito, il comportamento sticky, altezza, spaziatura e il breakpoint mobile. Un'importazione del demo le compila tutte, e tu modifichi solo quelle che ti interessano. **Opzioni del tema, Header.** Le impostazioni predefinite a livello di sito alla base di ogni voce di header. ## Passo 6: L'header per il telefono La maggior parte del traffico arriva dal telefono, quindi controlla questo prima di tutto il resto. La buona notizia è che si tratta dello stesso record. - **Riordina invece di ricostruire.** Sposta il logo al centro, metti il toggle a sinistra e un pulsante di chiamata a destra, tutto con l'ordinamento delle zone. - **Elimina ciò che non ci sta.** Limita i dati di contatto o la riga dei social agli schermi più grandi. Comprimerli su un telefono non serve a nessuno. - **Tieni grandi le aree di tocco.** Un pulsante del menu e un'icona del telefono sono le due cose che le persone toccano mentre camminano. - **Imposta il breakpoint con attenzione.** La larghezza alla quale il menu si comprime è un'impostazione, quindi un menu lungo può comprimersi prima di uno corto. - **Valuta un pannello laterale** per il menu mobile. Un pannello laterale è un record che scorre dal bordo, con spazio per un menu vero, un campo di ricerca e un pulsante. Controllalo nell'editor, prima di pubblicare. Canvas visualizza l'header nell'area di modifica con lo stesso codice che lo mostra ai visitatori, quindi la versione per telefono si vede già mentre costruisci. ## Passaggio 7: Assegnalo a tutto il sito o a singole pagine Un record non fa nulla finché qualcosa non vi fa riferimento. Ci sono due livelli, e funzionano allo stesso modo per ogni elemento della struttura del sito. ### Il predefinito per l'intero sito Imposta l'header predefinito in Opzioni del tema e ogni pagina lo userà. Fai lo stesso per la barra superiore, lo stile del Titolo della pagina e il footer. È l'impostazione che fa sì che una nuova pagina abbia l'aspetto giusto nel momento in cui la pubblichi. ### L'override per singola pagina Ogni singola pagina può sovrascrivere qualsiasi impostazione dalle proprie impostazioni. Una landing page di campagna adotta un header trasparente e nessuna barra superiore; la pagina dei contatti mantiene quella standard. Non c'è nulla da duplicare per ottenerlo e nulla da ricordare in seguito, perché la sovrascrittura vive nella pagina che interessa. ### Barre superiori La barra superiore è un elemento a sé stante, con propri blocchi: un numero di telefono, gli orari di apertura, un selettore di lingua, un annuncio. Il blocco Header Topbar la posiziona sopra la riga dell'header. Poiché è separata, un messaggio per le festività cambia in tutto il sito senza dover aprire affatto l'header. ## Passo 8: E il footer allo stesso modo Il footer è lo stesso sistema applicato all'altra estremità della pagina, quindi tutto ciò che hai visto negli ultimi sette passaggi si trasferisce. ### Due record, non uno Un record Footer contiene le colonne, mentre un record Copyrights separato contiene la sottile barra sottostante. Organizzato così, una riga legale o un anno si aggiorna in tutto il sito senza toccare il design sopra. ### I blocchi Footer About per la breve descrizione dell'azienda, Footer Contacts per indirizzo e numero di telefono, Footer Instagram per un feed, Footer Widget Area per tutto ciò che può fare un widget, Widget Links per una colonna ordinata di link e Copyrights per la barra inferiore. I pattern del footer offrono una disposizione di partenza, e dietro il footer ci sono opzioni proprie valide per tutto il sito. ### Cosa inserirci Il footer è il posto in cui le persone cercano conferme e l'indirizzo. Dati di contatto, orari di apertura, pagine legali, una riga su chi sei e i link che non meritavano un posto nell'header. Assegna il footer globalmente, sostituiscilo nelle pagine che richiedono qualcosa di più discreto, e per il progetto avrai completato la gestione degli elementi strutturali comuni del sito. [Ogni blocco e opzione del generatore](https://canvaswp.com/it/header-builder/) ## Fonti Quando questa guida descrive qualcosa che va oltre Canvas, qui trovi le pagine ufficiali che lo documentano. - [Schermata Menu di Aspetto](https://wordpress.org/documentation/article/appearance-menus-screen/) wordpress.org · Dove si creano e si assegnano i menu di WordPress alle posizioni che offre un tema - [Comprensione del criterio di successo 2.5.8: dimensione del bersaglio (minimo)](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html) w3.org · Perché le aree toccabili devono avere una dimensione minima di 24 per 24 pixel CSS Cosa fare dopo ## Prossimi passi Due guide su perché l'header determina la questione più ampia, e sul generatore di header stesso. [Guida **Block theme o page builder** Perché di solito è l'header a decidere l'intera questione.](https://canvaswp.com/it/guides/block-theme-vs-page-builder/) [Guida **Importa un sito demo di WordPress** Il modo più veloce per vedere dall'interno un sito finito costruito con i blocchi.](https://canvaswp.com/it/guides/import-a-wordpress-demo-website/) [Prodotto **Il generatore di header** Zone, righe e header per singola pagina, con le schermate che li mostrano.](https://canvaswp.com/it/header-builder/) Domande ## Domande frequenti La [FAQ completa](https://canvaswp.com/it/faq/) risponde al resto, e la [documentazione](https://docs.canvaswp.com/) copre ogni impostazione nel dettaglio. **Serve un secondo header per il mobile?** Di solito no, perché una singola configurazione dell'header di Canvas si adatta da sola a un telefono. Le zone si riordinano per breakpoint e ciascuna può essere limitata a una fascia di dispositivi, così una sola configurazione può centrare il logo su un telefono, nascondere i dati di contatto e spostare il menu dietro un pulsante di apertura. Crea una seconda configurazione solo se vuoi davvero un design diverso, non per correggere un layout. **Una pagina può avere un header diverso?** Sì, ogni pagina Canvas può avere un proprio header. Header, barre superiori, titoli della pagina e footer hanno ciascuno un valore predefinito per l'intero sito e una sostituzione per singola pagina, così una landing page di una campagna può mostrare un header trasparente sopra una fotografia mentre tutte le altre pagine mantengono quello standard. **Si tratta di un'area widget o di un menu?** Un header Canvas non è nessuno dei due: è un record che modifichi nell'editor a blocchi, esattamente come una pagina, e il logo, la navigazione, la ricerca, il carrello e i pulsanti al suo interno sono blocchi con i propri pannelli delle impostazioni. I menu di WordPress restano menu di WordPress; il blocco Header Navigation ne mostra uno. **Cosa succede al mio header quando la mia licenza scade?** Il sito continua a funzionare esattamente come oggi. A essere sospeso è il servizio: aggiornamenti, importazione dei demo, CanvasAI Engine e modifica dei blocchi premium si fermano finché non rinnovi, e c'è un periodo di tolleranza di 14 giorni se una verifica della licenza non riesce a raggiungere i nostri server.