Menu

Un menu, in termini di sito web, è essenzialmente un aiuto alla navigazione che consente agli utenti di trovare informazioni sul tuo sito. I menu si sono evoluti nel tempo e ora sono progettati tenendo molto in considerazione gli elementi di marketing. In alcune settori vengono ora definiti come il "percorso del visitatore" - progettati con cura per incoraggiare gli utenti a seguire un determinato percorso attraverso un sito web per raggiungere un obiettivo. Ma, indipendentemente da come vengono costruiti e qualunque sia il loro scopo, sono fondamentalmente tutti la stessa cosa: una serie di link facilmente accessibili che portano gli utenti da una pagina all'altra. L'elemento menu in Sitely appare in questo modo.

Quando viene aggiunto per la prima volta all'area di lavoro di un nuovo sito vuoto, ha un aspetto predefinito come questo.

È un singolo pulsante con il nome "Home", che indica che è un link alla homepage del sito. Man mano che nuove pagine vengono aggiunte al sito, il menu cresce per includere le nuove pagine man mano che vengono aggiunte - questo è il comportamento predefinito dell'elemento menu. È importante notare che questi sono noti come "link di primo livello" e verrà creato un link per ogni pagina di primo livello aggiunta al sito. Tuttavia, se viene aggiunta una SEZIONE al sito, il link diventerà un link di SEZIONE e le pagine aggiunte alla SEZIONE diventeranno voci di sottomenu del link di SEZIONE. Ecco un esempio di un menu con una homepage e una SEZIONE con due pagine all'interno della Sezione.

Quando aggiungi sezioni a un sito web, il link della sezione non andrà effettivamente a una pagina fisica quando viene cliccato. Invece, si aprirà il menu a discesa per visualizzare le pagine all'interno di quella sezione. Per fare un esempio pratico, supponiamo di voler un sito web semplice composto da una pagina Home, una pagina Chi Siamo, una sezione Prodotti con due pagine - una per Smartphone e una per Tablet. Potremmo anche voler una pagina Contattaci. Per fare in modo che Sitely crei automaticamente questo menu per noi, tutto ciò che dobbiamo fare è aggiungere le pagine e le sezioni nel pannello Pagine a sinistra dell'interfaccia di Sitely. Quando aggiungi pagine di primo livello, fai clic sull'icona ‘+’ in fondo al pannello delle pagine e scegli “Primo livello” dal selettore a discesa accanto a “Aggiungi pagina”.

Per aggiungere una nuova SEZIONE, fai clic sul pulsante Aggiungi Sezione. Questo creerà una nuova sezione senza pagine. Una volta che una sezione è creata, puoi rinominarla nel pannello delle pagine a sinistra dello schermo: basta fare clic sul nome della sezione e rinominarla, nel nostro esempio, "Prodotti".

Ora puoi aggiungere le due pagine prodotto per Smartphone e Tablet facendo clic sull'icona ‘+’ in fondo al pannello delle pagine e scegliendo "Prodotti" nel menu accanto al pulsante Aggiungi pagina. Puoi rinominare le pagine nello stesso modo in cui hai rinominato la sezione, basta fare clic sul nome della pagina e cambiarlo con quello desiderato. In alternativa, puoi selezionare le pagine una per una e impostare il nome della pagina nelle impostazioni Pagina a destra dello schermo.

Con le tue pagine e sezioni correttamente nominate, puoi ora aggiungere l'elemento menu alla tua homepage. Apparirà in questo modo.

Quello che Sitely ha fatto è raccogliere i nomi delle tue pagine e sezioni e creare il menu per te. Inoltre, se in seguito crei pagine e/o sezioni aggiuntive, queste possono essere automaticamente aggiunte al menu man mano che costruisci il tuo sito. Assicurati solo che la casella "Auto-aggiungi pagine" sia selezionata nel pannello di stile. L'opzione diventa visibile nel pannello di stile quando selezioni il menu sull'area di lavoro.

Le impostazioni di stile ti offre anche alcune opzioni aggiuntive. Ad esempio, puoi riordinare il menu semplicemente trascinando gli elementi su o giù nella lista. Per esempio, per posizionare la sezione Prodotti PRIMA della pagina Contattaci, basta trascinare l'etichetta dei prodotti verso l'alto nella lista. Cliccando sulla piccola freccia accanto all'elemento Prodotti verranno visualizzate due pagine prodotto nella lista. Puoi anche cambiare il tuo menu da un menu orizzontale a un menu verticale semplicemente cliccando sul pulsante appropriato. Inoltre, potresti voler avere un menu compatto, o hamburger (particolarmente per le tue pagine mobili). Basta cliccare sull'icona hamburger per cambiare il menu.

This is the vertical menu

when collapsed

This is the vertical menu

when expanded

This is the compact menu option. The items are revealed when the icon is clicked

Visibilità del Menu

Dopo aver creato un menu, Sitely ti consente di decidere dove e su quali dispositivi dovrebbe essere visualizzato. Questo viene fatto tutto nelle impostazioni Organizza. Con il menu selezionato sull'area di lavoro, vai alla scheda Organizza per vedere tutte le opzioni disponibili.

La sezione Posizionamento ti consente di scegliere di mostrare il menu sul dispositivo su cui stai attualmente lavorando. Deselezionando questa opzione, il menu sarà nascosto solo sul dispositivo attuale, ma rimarrà visibile sugli altri dispositivi.

La sezione Visibilità ti consente di scegliere su quali pagine mostrare il menu. Puoi scegliere di mostrarlo solo sulla pagina corrente, su tutte le pagine all'interno della sezione corrente, o su tutte le pagine del sito. Hai anche l'opzione di avere il menu che si sposta con il fondo della pagina. Questa opzione è ideale se hai un menu di link nella sezione footer delle tue pagine web, e desideri mantenerlo attaccato al fondo delle pagine.

Per la maggior parte della navigazione principale del sito, vorresti che il tuo menu fosse disponibile su ogni pagina in modo che gli utenti possano accedervi ovunque si trovino nel tuo sito. Tuttavia, potrebbero esserci situazioni in cui desideri che menu diversi siano disponibili su pagine diverse. Queste opzioni ti danno il controllo completo su questo aspetto del tuo sito web.

Opzioni per Dispositivo

Alcune impostazioni del menu hanno impostazioni "Per dispositivo", come lo stile del menu. Puoi impostare il tuo menu desktop su orizzontale, mentre su smartphone o tablet, può essere impostato come un menu compatto o hamburger. In alcuni casi, potresti voler posizionare un menu compatto su tutte le varianti dei tuoi dispositivi; questa sta diventando un'opzione piuttosto popolare poiché i sistemi operativi desktop e laptop stanno iniziando a sembrare e sentirsi più simili ai loro omologhi tablet/smartphone - sta realmente a te come presentare i tuoi menu, ma qualunque sia la tua scelta, Sitely ti supporta.

Creazione Manuale del Menu

Se non desideri creare le tue pagine e sezioni fin dall'inizio, puoi creare manualmente il tuo menu per avere un maggiore controllo sulla tua struttura di navigazione. Fai questo aggiungendo l'elemento menu all'area di lavoro e deselezionando la casella "Aggiungi automaticamente pagine" nelle opzioni di stile. Sarai quindi libero di aggiungere pagine e sezioni manualmente.

Il link Home viene creato automaticamente per te e punterà alla homepage o alla pagina index.html del tuo sito web. Per aggiungere un nuovo link a una pagina, fai clic sull'icona ‘+’ in fondo alle impostazioni del menu. Questo creerà un nuovo link chiamato "Elemento". Puoi cambiare l'etichetta dell'elemento nella casella Etichetta elemento. Puoi continuare ad aggiungere nuovi elementi di PRIMO LIVELLO nello stesso modo.

Per creare una Sezione, prima aggiungi un nuovo elemento di primo livello al menu da utilizzare come link di Sezione. Con quell'elemento selezionato, fai clic sull'icona Cartella. Questo creerà una pagina sotto il link della Sezione e posizionerà una piccola freccia accanto al nome del link della Sezione. Il tuo link della Sezione diventerà ora un link per aprire un menu a discesa di link di pagina. Per aggiungere più pagine alla Sezione, fai clic su una delle pagine della sezione e fai clic sull'icona ‘+’. Aggiungi tutte le pagine di cui hai bisogno.

Per tornare ad aggiungere elementi di primo livello, assicurati di selezionare uno dei link di primo livello esistenti prima di fare clic sull'icona ‘+’. Quando tutti i tuoi link sono in posizione, puoi iniziare a spostare gli elementi del tuo menu nell'ordine in cui desideri che appaiano nel tuo menu finale. Basta fare clic e trascinarli su o giù nella lista.

Quando crei un menu manualmente, dovrai impostare l'azione Al Clic per ciascun elemento del menu. Tipicamente, per la maggior parte dei menu dei siti web, questa azione sarà "Vai a pagina di questo sito". Tuttavia, hai la libertà di scegliere tra TUTTE le azioni Al Clic che Sitely offre. Quando utilizzi l'opzione "Vai alla pagina in questo sito", potrai scegliere la pagina da un elenco a discesa di tutte le pagine disponibili. Questo presuppone che le pagine siano già state create, quindi potresti voler rimandare l'aggiunta dei link delle pagine fino a dopo aver completato il tuo sito. Facoltativamente, puoi specificare una posizione di scorrimento all'interno della pagina collegata. Nella maggior parte dei casi, il link punterà semplicemente alla parte superiore della pagina come illustrato qui. In alcuni casi, potresti voler che la pagina collegata si apra in una nuova scheda. Questa è una funzione che normalmente utilizzeresti se il link fosse impostato per aprire un link esterno, piuttosto che una pagina all'interno del tuo sito.

Dovresti anche creare manualmente un menu se è destinato a essere un menu supplementare, invece di un menu di navigazione principale del sito web. Ad esempio, potresti avere un menu principale del sito che fornisce link a pagine di atterraggio principali nel tuo sito. Un esempio tipico potrebbe essere una pagina di atterraggio prodotti che evidenzia gli ultimi prodotti da un'ampia gamma di gruppi di prodotti. Tuttavia, potresti voler aggiungere un menu supplementare a quella pagina di atterraggio in cui gli utenti possono selezionare gruppi di prodotti specifici. In un sito di moda, un tale menu potrebbe includere link a Moda Uomo, Moda Donna e Moda Bambino. Ciascuno di quei link porterà gli utenti alla relativa pagina con la loro scelta di articoli di moda.

Quando un menu supplementare viene aggiunto per la prima volta a una pagina, conterrà, di default, un link alla homepage. Chiaramente, questo non sarà necessario poiché hai già un link di questo tipo nella tua navigazione principale. Pertanto, evidenzierai il link home nel pannello menu del pannello di stile e farai clic sull'icona ‘-’ per rimuovere quel link dal menu supplementare. Potresti anche voler fare questo nella tua navigazione principale se, ad esempio, hai un logo nella tua barra di navigazione che verrà utilizzato come link alla homepage. Per rimuovere questi link, dovrai deselezionare la casella "Auto-aggiungi pagine" prima che la cancellazione sia possibile.

Stile del Menu

Proprio come tutto il resto in Sitely, puoi applicare molte opzioni di stile ai tuoi menu. Tutte le opzioni di stile si trovano nel familiare pannello di stile di Sitely. Puoi applicare colori di sfondo, regolare font e dimensioni, aggiungere bordi e arrotondamenti agli angoli, e impostare l'allineamento del testo. Applicando diverse opzioni di stile, puoi creare un menu solo di testo, uno che sembra una serie di pulsanti o schede e applicare effetti di passaggio del mouse. Ecco alcuni esempi.

Testo semplice con evidenziazione del bordo inferiore al passaggio del mouse

Forma a pillola con riempimento di colore

al passaggio del mouse

Stile a scheda con cambio di colore

al passaggio del mouse

Stile pulsante con cambio di colore

al passaggio del mouse

Oltre alle normali opzioni di stile, ci sono alcune opzioni aggiuntive specifiche per i menu. Diamo un'occhiata a queste ora.

La prima opzione è l'opzione Stessa dimensione. Selezionare questa casella renderà tutti i link del menu della stessa dimensione. Se questa opzione è deselezionata, i link saranno dimensionati individualmente in base al loro contenuto testuale. Ecco le differenze.

C'è anche un'opzione di spaziatura degli elementi che imposta la quantità di spazio tra gli elementi nel menu.

Il passo successivo sono le opzioni dei Sottomenu. Queste possono essere impostate in modo diverso per dispositivi diversi. La prima opzione specifica il posizionamento degli elementi del sottomenu in relazione ai link di primo livello. Queste scelte variano a seconda del tipo di menu con cui stai lavorando. Qui vediamo le opzioni per un menu orizzontale. I link del sottomenu possono essere posizionati sopra, sotto, a sinistra o a destra dell'elemento di primo livello. Le piccole icone ti offrono una rappresentazione grafica di ciascuna opzione disponibile. Questa sezione ti consente anche di impostare la spaziatura degli elementi, così come la larghezza e l'altezza degli elementi del sottomenu.

Nota: se intendi utilizzare un'icona, assicurati di eliminare l'etichetta del menu nel pannello di stile per evitare che venga visualizzata sopra o sotto la tua icona.

Le opzioni del menu verticale sono molto simili, ma con diverse opzioni di posizionamento del sottomenu. Ancora una volta, le piccole icone ti offrono una rappresentazione grafica di come sono posizionati rispetto agli elementi di primo livello. Se stai lavorando con un menu compatto, vedrai opzioni simili, con una scelta di posizionamento orizzontale o verticale degli elementi del sottomenu. Nel caso di un menu compatto, l'elemento di primo livello è l'icona che attiva il menu quando viene cliccato.

L'icona stessa può essere cambiata selezionando l'elemento del menu nell'elenco menu nel pannello di stile. Se non vuoi utilizzare un'icona, puoi semplicemente avere un link testuale. Basta dare all'elemento del menu un'etichetta e rimuovere l'icona. Il tuo menu compatto sarà quindi un semplice link testuale come questo. Quando questo link viene cliccato, gli elementi del sottomenu appariranno.

Suggerimenti per creare una navigazione efficace

Quando crei una struttura di navigazione per i tuoi siti web, ci sono alcune cose che dovresti considerare, in particolare se desideri rendere la navigazione del sito un piacere per i tuoi utenti. La prima cosa da considerare è come il tuo menu viene presentato agli utenti. Dovunque sia possibile, cerca di inserire il tuo menu all'interno di un Blocco di Navigazione che includa un logo, uno sfondo e qualsiasi altra informazione generale che desideri presentare agli utenti. Nell'esempio qui sotto, il menu è solo un elemento all'interno di un blocco di navigazione.

Esso comprende un'immagine di logo che ha un'azione al clic per andare alla homepage, un numero di telefono che ha un'azione al clic per chiamare il numero telefonico, un riquadro di sfondo solido e l'elemento menu stesso con tutti i suoi collegamenti di pagina. Questi elementi sono stati raggruppati per formare un singolo elemento che può essere posizionato sulla pagina. Inoltre, come elemento raggruppato, può essere impostato per bloccare lo scorrimento quando raggiunge la parte superiore della pagina, mantenendolo visibile agli utenti mentre scorrono la pagina. Puoi impostarlo selezionando il gruppo sull'area di lavoro e quindi selezionando l'opzione Scorrimento personalizzato nelle impostazioni di stile. Questo rivelerà l'opzione Blocca in testa alla pagina.

Cerca di mantenere i Link di Sezione al minimo. Presentare troppe scelte come opzioni a discesa può scoraggiare gli utenti dal navigare ulteriormente nel tuo sito. Cerca di mantenere i link di primo livello a circa cinque o sei opzioni, e se hai dei menu a discesa, cerca di mantenere il numero delle opzioni non superiore a quattro o cinque. Se devi assolutamente presentare agli utenti un gran numero di opzioni, magari in un sito di e-commerce con molte categorie di prodotti, considera di creare invece un mega menu. Questo può essere creato in un blocco Layout di Sitely o Popup che è impostato per diventare visibile quando viene cliccato un link di menu di primo livello. Vedi menu come questo in molti siti di gruppi di prodotti multipli, come quello illustrato qui sotto.

Quando crei link di sezione con un gran numero di opzioni a discesa, tieni presente che probabilmente dovrai fornire uno sfondo ai link a discesa. Se li lasci trasparenti, potrebbero diventare difficili da leggere per gli utenti poiché il menu a discesa probabilmente coprirà altri elementi della pagina quando attivato.

Gestione delle pagine

Mappe