L'intestazione è la parte del tuo sito che contiene il logo e il menu di navigazione. Esistono vari modi diversi di controllare lo stile dell'intestazione per crearne una attraente per il tuo sito.
Nell'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, consentendo l'aggiunta di widget o elementi extra oltre ai layout predefiniti. Per ulteriori informazioni, vedere Modifica avanzata delle intestazioni.
La riduzione dell'intestazione è una versione più piccola dell'intestazione del sito, che consente di mantenere fisse le informazioni di navigazione importanti senza distrarre gli utenti mentre scorrono una pagina verso il basso e senza occupare troppo spazio. Agisce come una funzione di intestazione adesiva ma condensa la dimensione dei loghi e la dimensione generale dell'intestazione. È particolarmente utile nei siti con intestazioni di grandi dimensioni e nei siti progettati per lo scorrimento lungo.
Nota
L'intestazione ridotta è disponibile su desktop e solo per tablet quando viene usato il layout dell'intestazione della barra superiore.
Per abilitare la riduzione dell'intestazione nell'editor classico:
-
hover sopra l'intestazione, fare clic su Intestazione, quindi su Modifica design.
-
Nella scheda Riduzione dell'intestazione, fare clic sull'interruttore Abilita riduzione dell'intestazione . Sono disponibili le seguenti opzioni:
-
Mostra solo la riga di navigazione. Visualizza la riga con la navigazione solo quando l'intestazione si restringe. Questa funzione è applicabile solo se nell'intestazione è presente più di una riga.
-
Colore di sfondo. Modificare il colore di sfondo dell'intestazione di compattazione. Si noti che il colore di sfondo della riga sostituisce il colore di sfondo dell'intestazione che si riduce.
-
Altri colori dell'intestazione sullo scorrimento. Specifica i colori per il testo, il collegamento e il hoverselezionati, le icone, il testo dei pulsanti e altro ancora.
-
Dimensione del logo. Modificare le dimensioni a cui si riduce il logo o l'immagine quando l'intestazione si riduce (il valore predefinito è 66%).
-
Cambia il logo sullo scorrimento. Seleziona un logo da visualizzare sullo scorrimento.
-
Spaziatura dell'intestazione. Regolare la spaziatura interna superiore e inferiore della testata di restringimento. È possibile modificare la spaziatura dell'intestazione per dispositivo.
-
Una volta abilitata l'intestazione di compattazione, si verifica quanto segue:
-
La spaziatura dell'intestazione modifica la spaziatura interna superiore/inferiore e il margine a 0. Questo non si applica alle righe all'interno dell'intestazione.
-
Le immagini nell'intestazione si riducono alla percentuale nella barra delle dimensioni del logo (il valore predefinito è 66%).
-
Per gestire i modelli con un valore minimo dell'altezza nell'intestazione, l'altezza minima dell'intestazione viene 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 su quelle dell'intestazione ridotta. Ad esempio, se imposti uno sfondo per la riga dell'intestazione, questo viene visualizzato in primo piano rispetto allo sfondo dell'intestazione ridotta.
-
Le righe vuote vengono visualizzate nell'intestazione ridotta.
-
Se non riesci a vedere l'intestazione ridotta, è possibile che il sito non disponga di righe sufficienti per poter scorrere verso il basso e attivare l'intestazione ridotta. Se la pagina presenta una sola riga, il sito non scorrerà.
Non tutti i widget sono compatibili e vengono visualizzati nell'intestazione che si restringe. Se nell'intestazione è presente un widget che non è compatibile con la riduzione dell'intestazione, al posto del widget viene visualizzata una colonna vuota. Non è possibile modificare i widget quando l'intestazione è ridotta.
I seguenti widget sono compatibili e verranno visualizzati in un'intestazione ridotta sia per l'editor classico che per l'editor 2.0:
-
Navigazione
-
Multilingue
-
Icone dei social media
-
Pulsante Chiamata con un clic
-
Pulsante OpenTable
-
Pulsante Email con un clic
-
vCita
-
Pulsante PayPal
-
Pulsante Mi piace di Facebook
-
Immagini e loghi
-
Carrello negozio
-
Paragrafo widget
-
Titolo widget
-
Pulsanti
Nota
Queste informazioni sono specifiche per l'Editor 2.0, precedentemente noto come All-Flex Editor. Per identificare la versione corrente dell'editor, vedere Come identificare la versione dell'editor utilizzata dal sito.
La funzione Scorri sull'intestazione nell'Editor 2.0 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. Condensa i loghi e le dimensioni generali dell'intestazione per risparmiare spazio e garantire un facile accesso alla navigazione senza essere invadente. Ideale per i siti con intestazioni di grandi dimensioni o progettati per lo scorrimento esteso, migliora l'esperienza dell'utente mantenendo l'accessibilità alle opzioni di navigazione chiave.
È importante notare che l'intestazione adesiva deve essere già abilitata prima che lo scorrimento sull'intestazione possa essere abilitato.
Per abilitare lo scorrimento sull'intestazione:
-
hover sopra l'intestazione e fai clic su Intestazione.
-
Fai clic su Modifica design. Apparirà il pannello Design intestazione.
-
Espandi la sezione Posizione e abilita l'interruttore Imposta come intestazione fissa se non è già abilitato.
-
Abilita l'interruttore Modifica intestazione allo scorrimento .
-
Configurare le seguenti opzioni di progettazione:
-
Spaziatura interna. Imposta i valori iniziali delle intestazioni Spaziatura interna-top e Spaziatura interna-bottom (questo non è specifico per l'opzione sticky header).
-
BG su scorrimento. Seleziona il colore di sfondo e l'opacità. Le modifiche apportate a qualsiasi dimensione dello schermo influenzeranno le altre.
-
Spaziatura sullo scorrimento. Definite 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 su tablet e dispositivi mobili.
-
Dimensione del logo. Utilizza il dispositivo di scorrimento o la casella di testo per specificare le dimensioni del logo quando l'intestazione si restringe durante lo scorrimento. Il valore predefinito è 66%. Le modifiche devono essere apportate alle dimensioni dello schermo individuali.
-
Le modifiche apportate nella sezione Layout del pannello Struttura intestazione non influiscono sulle impostazioni di Posizione.
Nell'Editor 2.0, hai la flessibilità di impostare l'intestazione in modo che si sovrapponga al contenuto della prima pagina. Questo può creare un effetto visivamente accattivante in cui l'intestazione si integra perfettamente con il contenuto. Se lo si desidera, è possibile impostare l'intestazione in modo che si sovrapponga alla prima riga. Questa opzione deve essere abilitata per pagina.
Per abilitare l'intestazione sovrapposta con la prima riga:
-
hover sopra l'intestazione e fai clic su Intestazione.
-
Fai clic su Modifica design. Apparirà il pannello Design intestazione.
-
Espandi la sezione Posizione e abilita l'interruttore per Sovrapponi 1a sezione sulla pagina.
-
(Facoltativo) Configura un colore di sfondo che si applicherà a tutte le dimensioni dello schermo.
Un'intestazione fissa diventa statica e rimane in posizione quando scorri le pagine del tuo sito.
Nota
Le intestazioni mobili sono sempre permanenti per impostazione predefinita.
Per abilitare un'intestazione fissa:
-
hover sopra l'intestazione, fare clic su Intestazione, quindi su Modifica design.
-
Nella scheda Contenuto , seleziona Imposta come intestazione fissa. Se l'opzione per Intestazione fissa non è disponibile, è necessario disabilitare l'interruttore per Riduzione intestazione nella scheda Riduzione intestazione.
È possibile scegliere tra diversi layout di intestazione flessibili predefiniti. Se si passa a uno dei layout di intestazione flessibili predefiniti, non è possibile tornare a un'intestazione fissa, ma è possibile passare solo da un layout di intestazione flessibile all'altro. Il passaggio da un layout all'altro rimuove anche il contenuto esistente dalla sezione dell'intestazione. Si consiglia di creare un backup prima di cambiare layout.
Per modificare il layout dell'intestazione:
-
hover sopra l'intestazione e fare clic su Intestazione.
-
Nella scheda Progettazione selezionare un nuovo layout di intestazione. Se stai passando a un'intestazione fissa, devi prima disabilitare l'interruttore per la riduzione dell'intestazione nella scheda Riduzione dell'intestazione.
Per accedere al menu di progettazione dell'intestazione nell'Editor classico, hover sopra l'intestazione, fai clic su Intestazione, quindi fai clic sulla scheda Progettazione .
Per accedere al menu di progettazione dell'intestazione nell'Editor 2.0, hover sopra l'intestazione, fai clic su Intestazione, quindi fai clic su Modifica design. Il pannello di progettazione si aprirà sul lato dell'area di disegno. Contiene le seguenti opzioni di progettazione:
-
Impaginazione: Esplora le opzioni di layout che abbinano gli stili di navigazione superiore e hamburger in modo coerente in tutte le dimensioni dello schermo. Mentre i layout predefiniti hanno capacità limitate, un'opzione di modifica avanzata migliora la flessibilità.
-
Spaziatura: imposta i margini e la spaziatura interna, con modifiche sul desktop che influiscono su altre dimensioni dello schermo se la loro 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 fissa con modifiche basate sullo scorrimento. L'attivazione dell'intestazione adesiva su qualsiasi dimensione dello schermo influenza il comportamento sugli altri.
Se l'intestazione contiene un'immagine, quando si passa da un layout all'altro il logo del sito verrà mantenuto. In presenza di più immagini o di un logo di tipo testuale, l'immagine del logo viene mantenuta così com'è nel layout. È importante notare che le intestazioni tra i dispositivi non sono collegate, quindi se aggiungi un logo sul PC desktop non sarà aggiunto automaticamente agli altri tipi di dispositivi. L'unica eccezione è che se il layout dell'intestazione della barra superiore viene utilizzato su tablet, erediterà le modifiche del logo effettuate su PC desktop.
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. Per ulteriori informazioni, vedere widget: Immagine.
Nota
Queste informazioni sono specifiche dell'editor classico e non sono rilevanti per l'editor 2.0 (precedentemente noto come All-Flex Editor). Per identificare la versione attuale dell'editor, veda Come identificare la versione dell'editor utilizzata dal suo sito.
È possibile aggiungere un menu espandibile ai 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 e colonne.
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 include pulsanti, clic per chiamare, store carrello, icone social e altro ancora. È possibile aggiungere qualsiasi widget al menu espandibile dal pannello widget .
Per selezionare e configurare un'intestazione e un layout di menu espandibile per desktop e tablet:
-
Nel pannello laterale, fai clic su Tema, quindi su Layout del sito.
-
Nella sezione desktop selezionare il layout del menu espandibile.
-
Nella sezione Tablet , selezionare il layout del menu Espandibile .
-
Dopo aver selezionato il layout del menu espandibile, nell'intestazione del sito viene visualizzata un'icona a forma di hamburger. Fare clic sull'icona dell'hamburger (
) per visualizzare il menu espandibile.
-
Nella scheda Layout , fare clic sul layout esistente per selezionare un layout di menu.
-
Nella scheda Stile, sono disponibili le seguenti opzioni:
-
Entra da. Seleziona Superiore o Laterale.
-
Effetto ingresso. Selezionare Coperchio o Push.
-
Larghezza. Spostare il dispositivo di scorrimento per impostare la larghezza del menu espandibile quando viene espanso. La larghezza del menu è definita in percentuali per adattarsi a tutte le dimensioni dello schermo.
-
Sfondo. Configura il colore di sfondo o l'immagine.
-
Chiudi il colore dell'icona. Seleziona un colore per l'icona di chiusura e il colore di sfondo dell'icona di chiusura.
-
-
Nella scheda Spaziatura , modificare la Spaziatura interna.
Il menu espandibile può contenere fino a 3 righe, ciascuna delle quali completamente personalizzata. Se le visualizzazioni su desktop e tablet hanno lo stesso layout del sito, ovvero sono entrambi espandibili o entrambi presentano la barra superiore, le personalizzazioni saranno le stesse per entrambe le visualizzazioni. Qualora differissero, è necessario agire per ciascun dispositivo separatamente.
Per modificarne la posizione all'interno dell'intestazione:
-
hover sopra l'intestazione, fai clic su Intestazione, quindi seleziona Modifica design.
-
Nella sezione Layout , fare clic su Sinistra o Destra.
Per selezionare e configurare un'intestazione e un layout di menu espandibile per dispositivi mobili:
-
hover sopra l'intestazione, fai clic sull'etichetta Intestazione , quindi seleziona Modifica design.
-
Nella scheda Layout , fare clic sul layout esistente per selezionare un layout di menu. L'intestazione mobile offre layout che visualizzano widget come collegamenti social, numeri di telefono e altro ancora. I layout dell'intestazione sono fissi, quindi non è possibile aggiungere nuovi widget, ma è possibile modificarli o rimuoverli. Quando si aggiunge un store o si utilizza la funzione multilingue, sono disponibili altre opzioni di layout che includono le icone per il carrello di spedizione store e la funzione multilingue. Se non è abilitata la store o la multilingue, questi layout non vengono visualizzati.
-
Fare clic su Sinistra o Destra per la posizione dell'icona Menu.
-
Se non lo sei già, apri il menu nella visualizzazione mobile. Ciò consente all'editor di menu di aprirsi in modo da poter modificare il menu espandibile.
-
Nella scheda Layout , fare clic sul layout esistente per selezionare un layout di menu. Il menu espandibile offre più layout in grado di visualizzare i collegamenti 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, prendendo solo i widget nel layout scelto.
-
Nella scheda Stile sono disponibili le opzioni seguenti:
-
Entra da. Seleziona Superiore o Laterale. Quando è selezionata l'opzione Superiore, spostare il dispositivo di scorrimento dell'altezza. Quando è selezionata l'opzione Lato, spostare il dispositivo di scorrimento della larghezza.
-
Effetto ingresso. Selezionare Coperchio o Push.
-
Nota
Non è possibile aggiungere widget aggiuntivi all'intestazione del dispositivo mobile.
Nota
Queste informazioni sono specifiche dell'editor classico e non sono rilevanti per l'editor 2.0 (precedentemente noto come All-Flex Editor). Per identificare la versione attuale dell'editor, veda Come identificare la versione dell'editor utilizzata dal suo sito.
Per visualizzare gli elementi dell'intestazione sopra le immagini dell'eroe, hover sopra l'intestazione, fai clic su Intestazione, fai clic sulla scheda Design , quindi fai clic su Sovrapponi prima riga. Questo dà alle tue immagini principali una maggiore visibilità e rende più facile progettare siti di grande aspetto 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. Utilizzare una spaziatura interna superiore uguale o simile all'altezza dell'intestazione.
Nota
Per una maggiore flessibilità, questa impostazione si applica solo alla pagina corrente. Per abilitarlo su altre pagine, vai a ciascuna pagina e segui i passaggi precedenti.
Nota
Queste informazioni sono specifiche per l'Editor 2.0, precedentemente noto come All-Flex Editor. Per identificare la versione corrente dell'editor, vedere Come identificare la versione dell'editor utilizzata dal sito.
È possibile abilitare la modifica avanzata per l'intestazione per accedere a più opzioni di personalizzazione, come la possibilità di aggiungere più widget ed elementi. La modifica del layout dell'intestazione (nel pannello Design intestazione) ripristinerà tutte le modifiche apportate e disabiliterà la modifica avanzata.
Nota
Poiché le intestazioni si sincronizzano tra una dimensione dello schermo e l'altra, ti consigliamo di controllarle tutte le quando utilizzi l'opzione di modifica avanzata.
Quando si utilizza l'editing avanzato, si consiglia di controllare tutte le dimensioni dello schermo a causa della sincronizzazione dell'intestazione.
Per abilitare la modifica avanzata:
-
Fare clic sulla scheda Intestazione .
-
Fai clic su Modifica design.
-
Nella sezione Layout, fai clic su Abilita modifica avanzata.
Se prevedi di visualizzare elementi diversi su desktop e dispositivi mobili (ad esempio, un pulsante su desktop e un'icona su dispositivi mobili), utilizza la funzione Nascondi/Mostra per transizioni senza interruzioni. Per ulteriori informazioni, vedere Nascondere o mostrare elementi nell'intestazione (Editor 2.0).
Per disabilitare la modifica avanzata e reimpostare l'intestazione, selezionare un layout diverso:
-
Fare clic sulla scheda Intestazione .
-
Fai clic su Modifica design.
-
Nella sezione Layout, fare 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.
Per nascondere un'intestazione su una pagina:
-
hover sopra la parte inferiore dell'intestazione e fare clic su Intestazione.
-
Fare clic su Nascondi intestazione pagina su e selezionare il dispositivo su cui si desidera nascondere l'intestazione. Nell'Editor 2.0, questo nasconde l'intestazione su tutte le pagine.
Per visualizzare l'intestazione:
-
Nel pannello laterale, fai clic sull'icona Mostra elementi (
) in Impostazioni.
-
Fare clic sull'icona Nascondi nel piè di pagina e selezionare Sì per mostrare l'intestazione.
Nota
Queste informazioni sono specifiche per l'Editor 2.0, precedentemente noto come All-Flex Editor. Per identificare la versione corrente dell'editor, vedere Come identificare la versione dell'editor utilizzata dal sito.
Nell'Editor 2.0, 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 presenti:
-
Qualsiasi elemento nell'intestazione, inclusa l'intestazione stessa, può essere nascosto in qualsiasi dimensione dallo schermo. Questo può essere fatto sul canvas o nel pannello Livelli.
-
Anche gli elementi inclusi nell'opzione di intestazione predefinita possono essere nascosti.
-
Gli elementi nascosti verranno visualizzati come disabilitati con un'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 su 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 su cui desideri nascondere l'elemento.
-
Fare clic su Livelli nella barra degli strumenti laterale.
-
Fai clic sull'elemento che desideri nascondere.
-
Fare 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 su cui desideri nascondere l'elemento.
-
Fare clic su Livelli nella barra degli strumenti laterale.
-
Fai clic sull'elemento che desideri mostrare (comparirà come disabilitato, con l'icona a forma di occhio barrato prima di essere selezionato).
-
Fare clic sull'icona Nascondi elemento (
Poiché l'intestazione dell'Editor 2.0 è in continuo sviluppo, alcune funzionalità sono ancora in fase di revisione e/o sviluppo:
-
Accessibilità HTML/CSS: l'accesso a HTML/CSS per l'intestazione è una limitazione permanente a causa della tecnologia utilizzata.