L'intestazione è la parte del sito che contiene il logo e la navigazione. Esistono molti modi diversi per controllare lo stile dell'intestazione per aiutarti a creare un'intestazione accattivante per il tuo sito
In Editor 2.0, l'intestazione predefinita offre layout predefiniti, riducendo al minimo il rischio di modifiche accidentali. Gli utenti possono scegliere layout con azioni limitate, garantendo un'esperienza di progettazione mirata ed efficiente. È disponibile anche un'opzione di modifica avanzata per gli utenti che desiderano una maggiore personalizzazione, ad esempio l'aggiunta di widget o elementi aggiuntivi, l'aggiunta di sezioni vuote o predefinite e il salvataggio di sezioni di intestazione per il riutilizzo. Per ulteriori informazioni, consulta Modifica avanzata delle intestazioni.
Suggerimento
Prendi il nostro Configura l'intestazione del sito Corso Duda Academy per conoscere i tipi di header e come usarli.
Per nascondere un'intestazione:
-
Passa il mouse sopra la parte inferiore dell'intestazione e fai clic su Intestazione.
-
Fare clic Nascondi l'intestazione della pagina sue seleziona il dispositivo su cui desideri nascondere l'intestazione.
Per mostrare l'intestazione:
-
Nel pannello laterale, fai clic su Mostra elementi (
) icona.
-
Fai clic su Nascondiicona a piè di pagina e seleziona Sìper mostrare l'intestazione.
Puoi nascondere l'intestazione per tutte le pagine o solo per pagine specifiche.
Per nascondere l'intestazione:
-
Fai clic con il pulsante destro del mouse sull'intestazione per aprire il menu contestuale.
-
Seleziona Nascondi su questo dispositivo, quindi seleziona uno dei Solo da questa pagina o Da tutte le pagine.
Per mostrare l'intestazione:
-
Individua l'intestazione nel pannello, quindi fai clic sull'icona a forma di occhio barrato accanto ad essa.
Nota
Queste informazioni sono specifiche dell'Editor 2.0, precedentemente noto come All-Flex Editor. Per identificare la versione attuale dell'editor vediCome identificare la versione dell'editor utilizzata dal tuo sito .
La flessibilità di nascondere o mostrare gli elementi all'interno dell'intestazione offre un controllo granulare sui componenti visivi su schermi di diverse dimensioni, sia che si desideri semplificare il design o enfatizzare determinati elementi per dispositivi specifici.
Punti importanti da tenere a mente:
-
Qualsiasi elemento dell'intestazione, inclusa l'intestazione stessa, può essere nascosto su qualsiasi dimensione dello schermo. Questa operazione può essere eseguita sulla tela o nel pannello Livelli
-
Anche gli elementi inclusi nell'opzione di intestazione predefinita possono essere nascosti.
-
Gli elementi nascosti verranno visualizzati come disattivati con l'icona Nascondi elemento (
-
Il pannello dei livelli indicherà solo gli elementi nascosti per le dimensioni dello schermo in cui ti trovi attualmente. Ad esempio, se sei sul desktop, indicherà solo gli elementi nascosti sul desktop.
Per nascondere gli elementi dell'intestazione dal pannello Livelli:
-
Nella barra degli strumenti in alto, fai clic sulla dimensione dello schermo desiderata su cui desideri nascondere l'elemento.
-
Fai clic sull'elemento che desideri nascondere.
-
Fai clic sull'icona Nascondi elemento (
Per mostrare gli elementi dell'intestazione dal pannello Livelli:
-
Nella barra degli strumenti in alto, fai clic sulla dimensione dello schermo desiderata su cui desideri nascondere l'elemento.
-
Fai clic sull'elemento che desideri mostrare (verrà visualizzato disabilitato con l'icona a forma di occhio barrato prima di essere selezionato).
-
Fai clic sull'icona Nascondi elemento (
Lo Shrinking Header è una versione ridotta dell'intestazione del sito, che consente di mantenere fisse importanti informazioni di navigazione senza distrarre gli utenti mentre scorrono una pagina e senza occupare troppo spazio. Funziona come una funzione di intestazione permanente ma riduce le dimensioni dei loghi e le dimensioni generali dell'intestazione. È particolarmente utile nei siti con intestazioni di grandi dimensioni e nei siti progettati per uno scorrimento prolungato
Nota
L'intestazione ridotta è disponibile sul desktop e solo per tablet quando viene utilizzato il layout dell'intestazione della barra superiore.
Per abilitare un'intestazione rimpicciolita in Classic Editor:
-
Passa il mouse sopra l'intestazione, fai clic Intestazione, quindi fai clic su Modifica design.
-
Nella scheda Shrinking Header, fai clic su Abilita la riduzione dell'intestazione attiva o disattiva. Sono disponibili le seguenti opzioni:
-
Mostra solo la riga di navigazione. Visualizza la riga con navigazione solo quando l'intestazione si restringe. Questa funzionalità è applicabile solo se nell'intestazione è presente più di una riga
-
Colore dello sfondo. Cambia il colore di sfondo dell'intestazione che si restringe. Nota che il colore di sfondo della riga sostituisce il colore di sfondo dell'intestazione
-
Altri colori dell'intestazione sullo scorrimento. Specifica i colori per il testo, il link selezionato e il passaggio del mouse, le icone, il testo del pulsante e altro ancora
-
Dimensioni del logo. Cambia le dimensioni a cui il logo o l'immagine si riduce quando l'intestazione si riduce (l'
-
Cambia il logo sullo scorrimento. Seleziona un logo da visualizzare sullo scroll.
-
Spaziatura tra le intestazioni. Regola il riempimento superiore e inferiore dell'intestazione che si restringe. Puoi modificare la spaziatura dell'intestazione
-
Una volta abilitata la riduzione dell'intestazione, si verifica quanto segue:
-
La spaziatura dell'intestazione modifica la spaziatura interna superiore/inferiore e il margine a 0. Ciò non si applica alle righe all'interno dell'intestazione.
-
Le immagini nell'intestazione si riducono alla percentuale nella barra delle dimensioni del logo (l'impostazione predefinita è 66%).
-
Per gestire i modelli con un valore minimo di altezza nell'intestazione, l'altezza minima dell'intestazione è impostata su auto.
-
Se sono presenti righe vuote con colonne, le colonne occupano l'intero spazio della riga.
-
Le proprietà di progettazione hanno la precedenza sulle proprietà di riduzione dell'intestazione. Ad esempio, se imposti uno sfondo di riga nell'intestazione, lo sfondo della riga viene visualizzato sopra lo sfondo dell'intestazione
-
Le righe vuote vengono visualizzate nell'intestazione ridotta.
-
Se non riesci a vedere l'intestazione ridotta, potrebbe essere perché non hai abbastanza righe sul sito per poter scorrere verso il basso sul sito e attivare l'intestazione ridotta. Se hai solo una riga nella pagina, il sito
Nota
Queste informazioni sono specifiche dell'Editor 2.0, precedentemente noto come All-Flex Editor. Per identificare la versione attuale dell'editor vediCome identificare la versione dell'editor utilizzata dal tuo sito .
La funzione Scroll on Header mantiene gli elementi di navigazione essenziali come il logo e il menu visibili nella parte superiore dello schermo mentre gli utenti scorrono la pagina verso il basso. Riduce i loghi e le dimensioni generali dell'intestazione per risparmiare spazio e garantire un facile accesso alla navigazione senza essere invadente. Ideale per siti con intestazioni di grandi dimensioni o progettati per uno scorrimento prolungato, migliora l'esperienza dell'utente mantenendo l'accessibilità alle principali opzioni di navigazione
È importante notare che l'intestazione permanente deve essere già abilitata prima che lo scorrimento sull'intestazione possa essere abilitato.
Per abilitare lo scorrimento sull'intestazione:
-
Passa il mouse sopra l'intestazione e fai clic su Intestazione.
-
Fare clic Modifica design. Apparirà il pannello Header Design
-
Espandi il Posizionesezione e abilita Imposta come intestazione permanente attiva se non è già abilitato.
-
Abilita il Cambia l'intestazione durante lo scorrimento attiva o disattiva.
-
Configura le seguenti opzioni di progettazione:
-
Imbottitura. Imposta i valori iniziali padding-top e padding-bottom delle intestazioni (questa opzione non è specifica
-
BG su scroll. Seleziona il colore e l'opacità dello sfondo. Le modifiche apportate su qualsiasi dimensione dello schermo influiranno sulle altre
-
Spaziatura sullo scorrimento. Definire la spaziatura interna superiore e inferiore in px,%, vh o vw. Se desideri sovrascrivere le impostazioni delle dimensioni dello schermo del desktop, puoi apportare modifiche
-
Dimensioni del logo. Usa il cursore o la casella di testo per specificare le dimensioni a cui il logo si riduce quando l'intestazione si riduce durante lo scorrimento. L'impostazione predefinita è il 66%. Le modifiche devono essere apportate alle singole dimensioni dello schermo.
-
Mostra solo la sezione di navigazione sullo scroll. Nella sezione Posizione, abilita Mostra solo la sezione di navigazione sullo scroll attiva questa opzione per mantenere visibile solo la navigazione durante lo scorrimento. Tutte le altre sezioni dell'intestazione scompariranno
Nota che questa opzione è disponibile solo per le intestazioni avanzate.
-
Le modifiche apportate nella sezione Layout del pannello di progettazione dell'intestazione non influiscono sulle impostazioni di posizione.
Hai la flessibilità di impostare l'intestazione in modo che si sovrapponga al contenuto della prima riga della pagina. Questo può creare un effetto visivamente accattivante in cui l'intestazione si integra perfettamente con il contenuto. Se lo desideri, puoi impostare l'intestazione in modo che si sovrapponga alla prima riga. Questa opzione deve essere abilitata per pagina.
Per abilitare la sovrapposizione dell'intestazione con la prima riga:
-
Passa il mouse sopra l'intestazione e fai clic su Intestazione.
-
Fare clic Modifica design. Apparirà il pannello Header Design
-
Espandi il Posizionesezione e abilita l'interruttore per Sovrapponi la prima sezione della pagina.
-
(Facoltativo) Configura un colore di sfondo che verrà applicato a tutte le dimensioni dello schermo.
Non tutti i widget sono compatibili e vengono visualizzati nell'intestazione che si restringe. Se nell'intestazione è presente un widget che non è compatibile con l'intestazione ridotta, al posto del widget viene visualizzata una colonna vuota. Non è possibile modificare i widget quando
I seguenti widget sono compatibili e verranno visualizzati in un'intestazione rimpicciolita sia per Classic Editor che per Editor 2.0:
-
Navigazione
-
Multilingue
-
Icone sociali
-
Fai clic sul pulsante Chiama
-
Tasto OpenTable
-
Fai clic sul pulsante Email
-
vcita
-
pulsante PayPal
-
Pulsante Mi piace di Facebook
-
Immagini e loghi
-
Carrello del negozio
-
Widget di paragrafo
-
Widget del titolo
-
Bottoni
Un'intestazione permanente diventa statica e rimane al suo posto quando scorri le pagine del tuo sito.
Nota
In Classic Editor, Per impostazione predefinita, le intestazioni per dispositivi mobili sono sempre permanenti. In Editor 2.0, hai la possibilità di attivare o disattivare un'intestazione permanente per tutte le dimensioni dello schermo.
Per abilitare un'intestazione permanente:
-
Passa il mouse sopra l'intestazione, fai clic Intestazione, quindi fai clic su Modifica design.
-
Sul Contenuto scheda, seleziona Imposta come intestazione permanente. Se l'opzione Sticky Header non è disponibile, devi disattivare l'opzione Shrinking Header nella scheda Shrinking Header
È possibile scegliere tra diversi layout di intestazione flessibili predefiniti. Se passi a uno dei layout di intestazione flessibili predefiniti, non puoi tornare a un'intestazione fissa, puoi solo passare da un altro layout di intestazione flessibile. Il cambio di layout rimuove anche il contenuto esistente dalla sezione dell'intestazione. Ti consigliamo di creare un backup prima
Per modificare il layout dell'intestazione:
-
Passa il mouse sopra l'intestazione e fai clic Intestazione.
-
Sul Design scheda, seleziona un nuovo layout di intestazione. Se stai passando a un'intestazione permanente, devi prima disattivare l'interruttore per Riduzione dell'intestazione nella scheda Shrinking Header.
Nota
Queste informazioni sono specifiche dell'Editor 2.0, precedentemente noto come All-Flex Editor. Per identificare la versione attuale dell'editor vediCome identificare la versione dell'editor utilizzata dal tuo sito .
Puoi abilitare il layout di un sito di hamburger sul desktop. Per impostazione predefinita, tablet e dispositivi mobili utilizzano il layout a forma di hamburger
Per abilitare il layout del sito Hamburger:
-
Fai clic sull'etichetta dell'intestazione e seleziona Cambia preimpostazione nel menu mobile. Nota che è lo stesso sia che tu abbia un'intestazione Basic o Advanced
-
Nel pannello di progettazione, Preimpostazioni aprirà la sezione. Seleziona il Hamburger icona accanto a Sfoglia i preset del menu. Nota che nessuna modifica si rifletterà ancora sulla tela.
-
Seleziona il layout dell'hamburger desiderato. Il layout selezionato verrà visualizzato sulla tela
-
Quando sei soddisfatto del layout, esci dal popup Preset.
Nota che quando si modificano i preset, alcune personalizzazioni potrebbero essere ripristinate. Il colore di sfondo e il logo rimarranno invariati
Per accedere al menu di progettazione dell'intestazione in Classic Editor, passa il mouse sopra l'intestazione, fai clic Intestazione, quindi fai clic su Design scheda.
Per accedere al menu di progettazione dell'intestazione in Editor 2.0, passa il mouse sopra l'intestazione, fai clic Intestazione, quindi fai clic su Modifica design. Il pannello di progettazione si aprirà sul lato della tela. Contiene le seguenti opzioni di progettazione:
-
Disposizione: Esplora le opzioni di layout che abbinano in modo coerente i principali stili di navigazione e hamburger a seconda delle dimensioni dello schermo. Sebbene i layout predefiniti abbiano funzionalità limitate, un'opzione di modifica avanzata migliora
-
Spaziatura: imposta margini e spaziatura interna, con modifiche sul desktop che influiscono su altre dimensioni dello schermo se la spaziatura rimane inalterata.
-
Sfondo: scegli il colore o l'immagine di sfondo, aggiungi bordi o ombre e osserva le modifiche riflesse senza soluzione di continuità su tutte le dimensioni dello schermo.
-
Posizione: abilita un'intestazione permanente con modifiche basate sullo scorrimento. L'attivazione dell'intestazione permanente su schermi di qualsiasi dimensione
Se l'intestazione contiene un'immagine, il logo del sito verrà mantenuto quando ci si sposta tra i layout dell'intestazione. Nel caso in cui sia presente più di un'immagine o il logo sia testuale, l'immagine del logo viene mantenuta come nel layout. È importante notare che le intestazioni tra i dispositivi non sono collegate, quindi se aggiungi un logo sul desktop non viene aggiunto automaticamente agli altri tipi di dispositivi. L'unica eccezione è che se il layout dell'intestazione della barra superiore viene utilizzato sul tablet, erediterà tutte le modifiche al logo apportate
Se elimini il logo, aggiungi nuovamente l'immagine trascinando nuovamente l'elemento dell'immagine nell'intestazione e imposta il link per tornare alla home page.
Nota
Queste informazioni sono specifiche per l'Editor classico e non sono rilevanti per l'Editor 2.0 (precedentemente noto come All-Flex Editor). Per identificare la versione corrente dell'editor vediCome identificare la versione dell'editor utilizzata dal tuo sito .
Puoi aggiungere un menu espandibile sui tuoi siti desktop e tablet, semplificando la creazione di siti moderni con una grande flessibilità di progettazione. Scegli tra diversi layout di menu espandibili e personalizzali come preferisci, aggiungendo widget, righe
Il layout del menu espandibile per dispositivi mobili offre una maggiore personalizzazione e un modo per visualizzare i widget nell'intestazione e un menu sempre visibile.
È possibile modificare il layout dell'intestazione in un layout predefinito che includa pulsanti, fare clic per chiamare, carrello del negozio, icone social e altro ancora. Puoi aggiungere qualsiasi widget al menu espandibile dal pannello dei widget
Per selezionare e configurare un'intestazione e un layout di menu espandibile per desktop e tablet:
-
Fare clic Layout del sito.
-
Nel Desktopsezione, seleziona Menu espandibile layout.
-
Nel Tabletsezione, seleziona Menu espandibile layout.
-
Dopo aver selezionato il layout del menu espandibile, nell'intestazione del sito viene visualizzata un'icona a forma di hamburger. Fai clic sull'hamburger (
) icona per visualizzare il menu espandibile.
-
Sul Layoutscheda, fai clic sul layout esistente per selezionare un layout di menu.
-
Nella scheda Stile sono disponibili le seguenti opzioni:
-
Entra da. In alto o Lato.
-
Effetto d'ingresso. Copertina o Spingi.
-
larghezza. Sposta il cursore per impostare la larghezza del menu espandibile quando espanso. La larghezza del menu è definita in percentuale per adattarsi a
-
Sfondo. Configura il colore o l'immagine di sfondo.
-
Chiudi il colore dell'icona. Seleziona un colore per l'icona di chiusura e il colore di sfondo dell'icona di chiusura.
-
-
Sul Spaziatura scheda, modifica il padding.
Il menu espandibile può avere fino a 3 righe e ognuna è completamente personalizzata. Se Desktop e Tablet hanno lo stesso layout del sito (entrambi espandibili o entrambe le barre superiori), tutte le personalizzazioni sono uguali per entrambi. Nel caso in cui siano diversi, ciascun dispositivo deve essere definito separatamente
Per modificare la posizione del menu espandibile nell'intestazione:
-
Passa il mouse sopra l'intestazione, fai clic Intestazione, quindi seleziona Modifica design.
-
Nel Layout sezione, fai clic Sinistrao Giusto.
Per selezionare e configurare un'intestazione e un layout di menu espandibile per dispositivi mobili:
-
Passa il mouse sopra l'intestazione, fai clic su Intestazioneetichetta, quindi seleziona Modifica design.
-
Sul Layout scheda, fai clic sul layout esistente per selezionare un layout di menu. L'intestazione mobile offre layout che mostrano widget come link social, numeri di telefono e altro. I layout dell'intestazione sono fissi, quindi non puoi aggiungere nuovi widget, ma puoi modificarli Quando aggiungi un negozio o utilizzi la funzionalità multilingue, sono disponibili più opzioni di layout che includono le icone per il carrello di spedizione del negozio e la funzionalità multilingue. Se non hai abilitato il negozio o la modalità multilingue, questi layout
-
Fare clic Sinistrao Giustoper la posizione dell'icona del menu.
-
Se non lo hai già fatto, apri il menu nella visualizzazione mobile. Ciò consente all'editor di menu di aprirsi in modo da poter modificare il menu espandibile
-
Sul Layoutscheda, fai clic sul layout esistente per selezionare un layout di menu. Il menu espandibile offre diversi layout in grado di visualizzare i link social, le informazioni di contatto e altro ancora. Puoi aggiungere qualsiasi widget al menu espandibile, aggiungere colonne, ordinare le colonne in modo che siano una accanto all'altra o una sopra l'altra. Tuttavia, quando si passa da un layout all'altro, vengono eliminati tutti i contenuti aggiunti al menu, occupando solo i widget nel
-
Sul Stile scheda, sono disponibili le seguenti opzioni:
-
Entra da. In altoo Lato. Quando è selezionato Top, sposta il cursore dell'altezza. Quando è selezionato Lato, sposta il cursore della larghezza
-
Effetto d'ingresso. Copertinao Spingere.
-
Nota
Non è possibile aggiungere widget aggiuntivi all'intestazione mobile.
Nota
Queste informazioni sono specifiche per l'Editor classico e non sono rilevanti per l'Editor 2.0 (precedentemente noto come All-Flex Editor). Per identificare la versione corrente dell'editor vediCome identificare la versione dell'editor utilizzata dal tuo sito .
Per visualizzare gli elementi dell'intestazione sopra le immagini degli eroi, passa il mouse sopra l'intestazione, fai clic Intestazione, fai clic su Design scheda, quindi fai clic Sovrapponi la prima riga. Questo dà maggiore visibilità alle immagini dei tuoi eroi e semplifica la progettazione di siti belli e alla moda
Tieni presente quanto segue:
-
Per l'intestazione.Imposta il colore di sfondo su trasparente o su un colore con opacità.
-
Per la prima fila. Usa un padding superiore uguale o simile all'altezza dell'intestazione.
Nota
Per una maggiore flessibilità, questa impostazione si applica solo alla pagina corrente. Per abilitarla su altre pagine, accedi a ciascuna pagina e segui i passaggi precedenti.
Nota
Queste informazioni sono specifiche dell'Editor 2.0, precedentemente noto come All-Flex Editor. Per identificare la versione attuale dell'editor vediCome identificare la versione dell'editor utilizzata dal tuo sito .
modifica avanzata consente di personalizzare ulteriormente l'intestazione, ad esempio aggiungendo widget, elementi e sezioni vuote o predefinite. Puoi anche salvare singole sezioni dell'intestazione
Nota
-
La modifica del layout dell'intestazione (nel pannello Design dell'intestazione) ripristinerà tutte le modifiche apportate e disabiliterà la modifica avanzata.
-
Poiché le intestazioni si sincronizzano su tutte le dimensioni dello schermo, si consiglia di controllare tutte le dimensioni dello schermo quando si utilizza l'opzione di modifica avanzata.
Quando si utilizza la modifica avanzata, si consiglia di controllare tutte le dimensioni dello schermo a causa della sincronizzazione dell'intestazione.
Per abilitare la modifica avanzata:
-
Clicca sul Intestazione scheda.
-
Fare clic Modifica design.
-
Nella sezione Layout, fai clic su Abilita la modifica avanzata.
Se prevedi di visualizzare diversi elementi su desktop e dispositivi mobili (ad esempio, un pulsante sul desktop e un'icona sul dispositivo mobile), utilizza la funzione nascondi/mostra per transizioni senza interruzioni. Per saperne di più, consulta Nascondere o mostrare gli elementi nell'intestazione (Editor 2.0).
Per disattivare la modifica avanzata e ripristinare l'intestazione, seleziona un layout diverso:
-
Fai clic su Intestazione scheda.
-
Fare clic Modifica design.
-
Nella sezione Layout, fai clic sulla freccia per accedere alle opzioni di layout.
-
Seleziona un layout diverso per disattivare la modifica avanzata e reimpostare l'intestazione. Qualsiasi modifica apportata utilizzando la modifica avanzata verrà annullata e non salvata