Intestazioni e piè di pagina

L’intestazione del sito web è la sezione superiore di una pagina web e in genere include elementi quali il logo, il menu di navigazione , la barra di ricerca e il pulsante per accedere o l’account cliente. Il piè di pagina viene visualizzato nella parte inferiore di una pagina web e solitamente contiene dettagli di contatto, link, note legali e altre informazioni utili. Entrambi possono essere personalizzati secondo necessità.

Contenuto dell’intestazione

L’intestazione include informazioni sull’azienda, pulsanti di accesso rapido e menu del sito web per aiutare gli utenti a navigare efficacemente nel sito web. intestazioni e menu ben strutturati e intuitivi svolgono inoltre un ruolo importante nel migliorare il posizionamento nei motori di ricerca.

Editor menu

L’editor di menu consente di modificare l’intestazione del sito web e di aggiungere voci di menu e megamenu.

Per aprire l’editor del menu, segui il percorso Sito web ‣ Sito ‣ Editor menu. Da qui:

• rinomina una voce di menu o modificane l’URL utilizzando l’icona (Modifica voce menu;

• elimina una voce di menu utilizzando l’icona (Elimina voce menu);

• sposta una voce di menu, grazie alla funzione drag and drop, nella posizione desiderata del menu;

• crea un menu a discesa standard trascinando e rilasciando le voci del sottomenu a destra, sotto la voce di menu principale.

Suggerimento

È inoltre possibile accedere all’editor dei menu dall’editor del sito web. Per farlo:

• seleziona una voce qualsiasi del menu e fai clic su Modifica menu oppure

  

• Apri la scheda Stile e fai clic su Modifica menu accanto al titolo della sezione Intestazione.

Aggiungere voci di menu

Per impostazione predefinita, le pagine vengono aggiunte al menu come voci di menu a discesa quando vengono create. Per aggiungere una nuova voce di menu, procedi come segue:

1. nell’editor del menu, fai clic su Aggiungi elemento menu;

2. nella finestra a comparsa, inserisci il titolo che apparirà nel menu;

3. nel campo URL o e-mail, digita / per cercare una pagina esistente sul sito web oppure # per cercare un ancoraggio personalizzato esistente.

   Nota

   Per aggiungere una voce di menu per una pagina che non esiste ancora, inserisci il nuovo URL o l’ancoraggio e clicca su Crea pagina nel pop-up Modifica menu. Se aggiungi la voce di menu senza creare la pagina corrispondente, il link porta a una pagina di errore 404.

4. Fai clic su Continua.

5. se necessario, sistema la struttura del menu;

6. fai clic su Salva.

Design delle voci di menu

Per modificare il design delle voci di menu, fai clic su Modifica nell’angolo in alto a destra e seleziona l’intestazione. Successivamente, vai alla scheda Stile e passa alla sezione Navigazione. Sono disponibili le seguenti opzioni:

• sistema l’allineamento del Menu desktop per dispositivi desktop;

• sistema l’allineamento e la posizione del Menu per dispositivi mobili;

• scegli se i menu secondari si aprono al passaggio del mouse oppure al clic;

• seleziona uno stile di link per evidenziare la pagina corrente nel menu.

Nota

Le opzioni disponibili nella sezione Navigazione possono variare a seconda del modello selezionato.

Nascondere una voce di menu dinamica per gli utenti non autenticati

Per nascondere la voce di menu Negozio per gli utenti che non hanno effettuato l’accesso, limita l’accesso all’e-commerce agli utenti autenticati.

Per nascondere agli utenti non registrati le voci di menu relative alle pagine dinamiche (ovvero una voce di menu generata automaticamente da Odoo, ad esempio durante l’installazione di un’app o di un modulo, come Eventi, Corsi, ecc.), segui questi passaggi:

1. Attivare la modalità sviluppatore.

2. Vai su Sito web ‣ Configurazione ‣ Menu.

3. se necessario, espandi l’elenco dei menu del sito web in questione;

4. seleziona la voce di menu che vuoi nascondere;

5. nella sezione Gruppi visibili, fai clic su :guilabel:`Aggiungi riga;

6. cerca il nome del gruppo Ruolo/Portale e selezionalo;

7. Salva.

Suggerimento

È possibile personalizzare ulteriormente le voci di questo modulo. Ad esempio:

• seleziona la casella Nuova finestra per aprire la pagina in una nuova scheda al clic;

• aggiungi una pagina correlata o una pagina del modello correlato;

• assegna un menu principale e/o menu secondari per creare una gerarchia.

Vedi anche

Gestire la visibilità di pagine statiche

Mega menu

I mega menu sono simili ai menu a tendina ma invece di visualizzare un semplice elenco di sottomenu, mostrano un pannello suddiviso in gruppi di opzioni di navigazione. Sono particolarmente utili per i siti web con grandi quantità di contenuti o i siti di e-commerce, poiché consentono di includere tutte le pagine web o le categorie di e-commerce nel menu, mantenendo visibili contemporaneamente tutte le voci del menu.

Segui questi passaggi per creare un mega menu:

1. nell’editor del menu fai clic su Aggiungi voce megamenu <website/header_footer/open-menu-editor>;

2. nella finestra pop-up, inserisci il titolo del megamenu;

3. Fai clic su Continua.

4. se necessario, sistema la struttura del menu;

5. fai clic su Salva.

I megamenu vengono creati utilizzando blocchi di costruzione predefiniti, il che significa che ogni componente deve essere personalizzato singolarmente. Per farlo, fai clic su Modifica nell’angolo in alto a destra per poi selezionare il megamenu. Successivamente:

• modifica il testo direttamente nel blocco di costruzione;

• modifica l’URL dell’elemento del menu selezionando l’elemento del megamenu per poi fare clic sul pulsante Modifica;

  

• Sposta una voce di menu trascinando e rilasciando il blocco correlato nella posizione desiderata nel mega menu.

• elimina un elemento del menu facendo clic sull’icona (Elimina`) del blocco corrispondente.

Design megamenu

Per personalizzare il layout generale del megamenu e i singoli blocchi di costruzione, apri l’editor del sito web e apri la scheda Stile per poi accedere alla sezione del megamenu. Sono disponibili le seguenti opzioni:

• Scegli un Modello.

• Seleziona la Dimensione: Larghezza completa o Stretto.

• attiva o disattiva le categorie e-commerce se applicabile.

Design intestazione e piè di pagina

Per modificare il design dell’intestazione o del piè di pagina, fai clic su Modifica nell’angolo in altro a destra e seleziona l’intestazione o il piè di pagina corrispondente. In seguito, apri la scheda Stile e accedi alla sezione Intestazione o Piè di pagina. Sono disponibili le seguenti opzioni:

• Scegli un Modello dal menu a discesa.

• seleziona un colore di sfondo con uno stile del tema, un’opzione di colore personalizzato oppure un gradiente;

• configura la Larghezza contenuto;

• aggiungi un contorno al piè di pagina e personalizzane le dimensioni, lo stile e il colore;

• Adatta gli Angoli arrotondati per adattarli al design.

• Aggiungi un”Ombra e definiscine Colore, Offset, Sfocatura e Diffusione.

Header-specific design optionsFooter-specific design options

Per personalizzare ulteriormente l’intestazione del sito web, utilizza le seguenti opzioni di design specifiche per le intestazioni nella sezione Intestazione:

• aggiungi un effetto di scorrimento per determinare il comportamento dell’intestazione durante lo scorrimento della pagina. Passa il mouse su un effetto per visualizzarne l’anteprima;

• scegli la posizione dell’intestazione per la pagina selezionata: “ Regolare, Nascosta o Sul contenuto. Se selezioni Sul contenuto, è anche possibile personalizzare lo sfondo e il colore del testo;

  Suggerimento

  • Per nascondere l’intestazione su tutte le pagine, vai alla scheda Tema dell’editor del sito web. Scorri verso il basso fino alla sezione Avanzate e disattiva l’opzione Mostra intestazione.

  • Gli elementi Nascosti, compresa l’intestazione quando possibile, sono disponibili nella sezione Elementi invisibili.

• modifica il colore principale predefinito nel colore Primario o:guilabel:Secondario per distinguere visivamente i pulsanti a tendina nell’intestazione;

• scegli un font;

• indica le dimensioni del formato e aggiungi un colore se necessario.

Per controllare la visibilità di elementi specifici, accedi alla sezione Mostra/Nascondi elementi della scheda Stile e fai clic sull’opzione relativa all’elemento che desideri mostrare o nascondere. È possibile mostrare o nascondere:

• elementi visivi come il logo aziendale, gli elementi di testo (ad es. un numero di telefono) e link ai social media per collegare tutti gli account ai social media;

• azioni, come la barra di ricerca , il selettore di lingua , il pulsante di accesso e il pulsante nell’intestazione (il pulsante Contattaci predefinito);

• elementi specifici dell’e-commerce: i pulsanti Aggiungi al carrello e Aggiungi alla lista dei desideri;

• puoi abilitare uno sfondo per le icone di navigazione, come l’icona della lista dei desideri o della barra di ricerca.

Suggerimento

È inoltre possibile aggiungere blocchi di contenuto interno all’intestazione o al piè di pagina per un’ulteriore personalizzazione, come ad esempio le opzioni di piè di pagina specifiche per l’e-commerce.