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.
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 una riduzione dell'intestazione:
-
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:
-
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
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, hover sopra l'intestazione, fai clic su Intestazione, quindi fai clic sulla scheda 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.
È 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.
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.
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.