Costruire un header per WordPress senza plugin
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.
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 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.
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.
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.
Fonti
Quando questa guida descrive qualcosa che va oltre Canvas, qui trovi le pagine ufficiali che lo documentano.
- Schermata Menu di Aspettowordpress.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)w3.org · Perché le aree toccabili devono avere una dimensione minima di 24 per 24 pixel CSS
Prossimi passi
Due guide su perché l'header determina la questione più ampia, e sul generatore di header stesso.
Domande frequenti
La FAQ completa risponde al resto, e la documentazione 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.
Crea il tuo prossimo sito web con Canvas
Che tu sia un principiante, un freelance o un'agenzia, ottieni gli stessi blocchi e gli stessi demo. Inizia con un sito e creane quanti ti servono con la stessa licenza.