Un generatore di header e footer fatto di blocchi reali
Header, footer, barre superiori, mega menu, pannelli laterali, titoli della pagina e hero sono elementi che progetti nell'editor a blocchi e poi assegni all'intero sito o a una singola pagina.
Aggiornato il
Blocchi annidati nel modo che ti aspetti
Un record di header contiene un Header Root. Il root contiene un Container, e un Container contiene delle zone. Una zona è una cella della riga dell'header: il logo in una, il menu nella successiva, un'icona di ricerca e un carrello nell'ultima.
Le zone definiscono il layout
Una zona decide cosa va dove. Spingine una a destra, raggruppa una ricerca e un carrello in un gruppo, oppure lascia una zona semplice quando vuoi tenere il markup in secondo piano.
- Le zone si riordinano per breakpoint, quindi un solo record copre desktop, tablet e smartphone
- Ogni zona può essere limitata a un livello di dispositivo e restare esclusa dal markup sugli altri
- Classi aggiuntive su una zona, quando vuoi richiamarla dal tuo CSS
I 22 blocchi header
Header Root
L'header stesso. Tutto il resto vi è annidato dentro.
Header Container
Un contenitore di larghezza, così l'header può essere racchiuso in un riquadro, a tutta larghezza o in entrambi i modi a breakpoint diversi.
Header Zone
Una cella nella riga dell'header. Le zone contengono gli elementi e ne decidono la posizione.
Header Logo
Il tuo logo, con file separati per gli stati fisso e scuro.
Header Navigation
Il menu principale, con menu a tendina e pannelli del mega menu.
Ricerca nell'header
Un'icona di ricerca che apre un campo, oppure un campo sempre aperto.
Header Cart
Il carrello WooCommerce con il numero di articoli e un riepilogo a discesa.
Header Social
Una riga di icone social dai profili che imposti una sola volta.
Header Button
Un pulsante di invito all'azione con le consuete impostazioni di dimensione, stile e collegamento.
Header Icon Link
Una sola icona che rimanda dove vuoi, per un numero di telefono o una pagina dell'account.
Header Info
Un piccolo blocco con i dati di contatto, un indirizzo o gli orari di apertura.
Ricerca nell'header del negozio
Una ricerca di prodotti per negozi, limitata al tuo catalogo.
Header Topbar
Inserisce un record della barra superiore sopra la riga dell'header.
Mega Menu Column
Una colonna all'interno di un pannello del mega menu, così il pannello può ospitare un layout vero.
7 preset da cui iniziare
Un preset è un insieme di impostazioni del layout che applichi con un clic. Scegli il comportamento che ti serve, poi modifica ciò che vuoi nelle impostazioni del blocco.
Trasparente
Nessuno sfondo: ciò che si trova dietro l'header resta visibile.
Semi-trasparente
Uno sfondo traslucido, così l'immagine dietro resta visibile e il testo rimane leggibile.
Fluttuante
L'header è sospeso all'interno della pagina, con spazio intorno su ogni lato.
Fluttuante semitrasparente
Fluttuante, con anche lo sfondo traslucido.
Piccolo e fluttuante
Un header fluttuante con altezza ridotta.
A tutta larghezza e fisso
Occupa tutta la larghezza del viewport e resta fissato mentre la pagina scorre.
Sticky allo scorrimento verso l'alto
Esce dalla parte superiore quando il visitatore scorre verso il basso e torna quando scorre di nuovo verso l'alto.
Barre superiori, mega menu e pannelli laterali sono anch'essi record
Progettali uno per uno, impostalo come predefinito del sito, poi sovrascrivilo nelle pagine che vogliono qualcosa di diverso.
Barre superiori
Una top bar è un elemento a sé stante con i propri blocchi: un numero di telefono, gli orari di apertura, un selettore della lingua, una promozione. Il blocco Header Topbar la colloca sopra la riga dell'header. Assegnane una a livello globale e sostituiscila pagina per pagina.
Una barra superiore modificabile è presente in 12 su 88 demo.
Pannelli laterali
Un pannello laterale è un record che scorre dal bordo dello schermo, per un menu secondario, un carrello, un modulo di contatto o un insieme di dettagli che affollerebbero l'header.
6 Demo includono un pannello laterale già collegato a un trigger.
Assegnare un record si fa tramite i campi: scegli il pannello laterale predefinito, il bordo da cui si apre, se spinge la pagina o vi si sovrappone, e come appare il trigger. Barre superiori, mega menu e footer si assegnano allo stesso modo.
94 campi, la sezione più grande in Opzioni del tema
Opzioni del tema contiene le impostazioni dell'header valide per tutto il sito, che nessun singolo record dovrebbe gestire da solo. L'importazione di un demo le imposta tutte per te e tu modifichi solo quelle che ti interessano.
- 94 dei 533 campi delle Opzioni del tema fanno parte dell'header
- Imposta la configurazione predefinita dell'header, poi sovrascrivila su qualsiasi pagina
- Comportamento sticky, altezza, spaziatura e breakpoint per mobile
- Ogni campo è documentato negli articoli di riferimento
40 pattern di header da cui partire
Inserisci un pattern e ottieni blocchi normali che puoi riordinare, rinominare ed eliminare. Niente è bloccato e niente è uno screenshot di un layout che non puoi raggiungere.
- 40 pattern di header, più di qualsiasi altra categoria
- 16 pattern per il footer, per l'altra estremità della pagina
- 183 pattern in tutto, classificati in 17 categorie
- Inserito dalla scheda Pattern dell'inseritore che già usi
I footer e le barre del copyright sono elementi separati
Il footer funziona esattamente come l'header. Un record Footer contiene le colonne, mentre un record Copyrights contiene la sottile barra in basso, così puoi cambiare la riga legale su tutto il sito senza toccare il design sopra.
Sei blocchi e 17 opzioni
Footer About per il testo sull'azienda, Footer Contacts per indirizzo e 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 in basso.
- Assegna un footer a livello globale o per singola pagina, come per l'header
- Un record dei copyright separato per la barra sottostante
- 16 pattern per il footer da cui partire
- Visualizzato in anteprima nell'area di modifica mentre crei la pagina
4 stili, oppure progetta il tuo
La fascia sotto l'header è una superficie di design a sé stante, con 57 opzioni e un'impostazione per singola pagina su ogni pagina che pubblichi.
Default, Mini, Template o Custom
Default è la fascia standard. Mini è una versione compatta per le pagine interne. Template sceglie uno dei layout specializzati con nome. Custom visualizza un elemento Titolo della pagina che hai creato tu stesso con i blocchi.
- Page Title, Heading, Subtitle, Breadcrumbs and Buttons blocks
- Un'impostazione predefinita per tutto il sito che ogni singola pagina può sovrascrivere
- Sfondo, altezza, allineamento e breadcrumb sono tutte impostazioni
Inserito nel template da un blocco slot
Hero e slider sono record a sé stanti, come gli header. Un blocco slot si trova nel template dei blocchi e richiama l'hero o lo slider assegnato alla pagina visualizzata.
- Record Hero e record Slider, entrambi creati a partire dai blocchi
- I blocchi Hero Slot e Slider Slot si trovano nel template, non nei tuoi contenuti
- Un solo template serve ogni pagina, ciascuna con la propria introduzione
- 12 delle 88 demo includono uno slider modificabile
Costruisci l'header proprio dove lo vedrai
I blocchi slot proiettano header, barra superiore, titolo della pagina, hero e footer nell'area di modifica, così la pagina appare come una pagina vera e non come un insieme di paragrafi.
Una pagina nell'editor a blocchi, con header e footer disegnati attorno al contenuto dallo stesso codice che li disegna per il visitatore.
Un solo renderer
L'header che vedi nel canvas viene disegnato dallo stesso codice che lo disegna per un visitatore, quindi non c'è un'anteprima separata da tenere allineata.
Globale o per pagina
Imposta un header predefinito, una barra superiore, il titolo della pagina, l'hero e il footer per il sito, poi modifica uno qualsiasi di questi elementi su una singola pagina dalle impostazioni di quella pagina.
Responsive per natura
Le zone si riordinano per breakpoint e possono essere limitate a una categoria di dispositivo, così controlli il layout da telefono nell'editor prima che lo veda chiunque altro.
Informazioni sul generatore di header
Il resto delle risposte si trova nelle FAQ complete e nella documentazione.
Serve un secondo header per il mobile?
Un unico header Canvas di solito copre anche il mobile, perché le zone si riordinano per breakpoint e ciascuna può essere limitata a una fascia di dispositivi. Un solo record di header può spostare il logo al centro su un telefono, eliminare i dati di contatto e portare il menu dietro un pulsante di attivazione. Crea un secondo record solo se vuoi davvero un design diverso, non per risolvere un problema di layout.
Una pagina può usare un header diverso?
Sì, ogni header, top bar, titolo della pagina e footer di Canvas ha un valore predefinito per tutto il sito e una sostituzione per singola pagina, così una landing page può avere un header trasparente e una top bar con solo il logo, mentre il resto del sito mantiene le proprie impostazioni.
L'header è un'area widget o un menu?
Un header di Canvas non è nessuno dei due: è un record che modifichi nell'editor a blocchi, esattamente come una pagina. La navigazione, il logo, la ricerca, il carrello e i pulsanti al suo interno sono blocchi con i propri pannelli delle impostazioni.
Cosa succede al mio header quando la mia licenza scade?
Quando una licenza Canvas scade, l'header e il resto del sito continuano a essere visualizzati esattamente come ora. Si ferma invece il servizio: aggiornamenti, importazioni dei demo, funzioni IA e modifica dei blocchi premium restano sospesi finché non rinnovi. È previsto un periodo di tolleranza di 14 giorni se un controllo della licenza non riesce a raggiungere i nostri server.
Posso ancora usare l'Editor del sito?
Sì, Canvas è costruito su veri template a blocchi, quindi template e parti del template restano dove WordPress li conserva, e un elemento header viene inserito nel template tramite un blocco. Scopri come funziona l'editor.
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.