Introduzione
Usare Sitely
Elementi
Come fare
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 home page del sito. Man mano che nuove pagine vengono aggiunte al sito, il menu si amplia per includerle quando 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. Se, però, viene aggiunto un GRUPPO DI PAGINE al sito, il link diventerà un link del GRUPPO DI PAGINE e le pagine aggiunte al GRUPPO DI PAGINE diventeranno voci di sottomenu del link del GRUPPO DI PAGINE. Ecco un esempio di un menu con una home page e un GRUPPO DI PAGINE con due pagine all'interno del Gruppo di pagine.
Quando aggiungi gruppi di pagine a un sito web, il link del gruppo di pagine non porterà effettivamente a una pagina fisica quando viene cliccato. Invece, aprirà il menu a discesa per visualizzare le pagine all'interno di quel gruppo. Per fare un esempio pratico, supponiamo di voler un sito semplice composto da una pagina Home, una pagina Chi Siamo, un gruppo Prodotti con due pagine - una per Smartphone e una per Dispositivi Tablet. Potremmo anche volere una pagina Contattaci. Per fare in modo che Sitely crei automaticamente questo menu per noi, tutto ciò che dobbiamo fare è aggiungere le pagine e i gruppi 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 ad Aggiungi pagina.
Per aggiungere un nuovo GRUPPO DI PAGINE, fai clic sul pulsante Aggiungi Gruppo di pagine. Questo creerà un nuovo gruppo di pagine senza pagine. Una volta creato un gruppo di pagine, puoi rinominarlo nel pannello Pagine a sinistra dello schermo - basta fare clic sul nome del gruppo e rinominarlo, 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 selettore a discesa accanto al pulsante Aggiungi pagina. Puoi rinominare le pagine nello stesso modo in cui hai rinominato il gruppo: fai clic sul nome della pagina e cambialo con quello desiderato. In alternativa, puoi selezionare le pagine una per una e impostare il nome nella scheda Pagine sulla destra dello schermo.
Con le tue pagine e i gruppi di pagine correttamente nominati, 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 dei tuoi gruppo e creare il menu per te. Inoltre, se in seguito crei pagine e/o gruppi aggiuntivi, questi possono essere aggiunti automaticamente al menu man mano che costruisci il tuo sito. Assicurati solo che la casella "Aggiungi automaticamente pagine" sia selezionata nel pannello di stile. L'opzione diventa visibile nel pannello di stile quando selezioni il menu sull'area di lavoro.
Il pannello di stile ti offre anche alcune opzioni aggiuntive. Ad esempio, puoi riordinare il menu semplicemente trascinando gli elementi verso l'alto o il basso nell'elenco. Per esempio, per posizionare il gruppo Prodotti PRIMA della pagina Contattaci, basta trascinare l'etichetta Prodotti verso l'alto nell'elenco. Cliccando sulla piccola freccia accanto all'elemento Prodotti verranno visualizzate le due pagine di prodotto nell'elenco. Puoi anche passare da un menu orizzontale a un menu verticale semplicemente cliccando il pulsante appropriato. Inoltre, potresti voler avere un menu compatto, o hamburger (in particolare per le pagine mobile). Ti basta cliccare sull'icona hamburger per modificare il menu.
Questo è il menu verticale
quando è compresso
Questo è il menu verticale
quando è espanso
Questa è l'opzione del menu compatto. Le voci vengono rivelate quando si clicca sull'icona
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 nella pagina corrente, su tutte le pagine all'interno dell'attuale gruppo di pagine, o su tutte le pagine del sito. Hai anche l'opzione di far muovere il menu 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.
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.
Se non desideri creare le tue pagine e i gruppi di pagine 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" nel pannello di stile. Sarai quindi libero di aggiungere pagine e gruppi 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 un menu a discesa, prima aggiungi un nuovo elemento di primo livello al menu da utilizzare come link del menu a discesa. Con quell'elemento selezionato, fai clic sull'icona Cartella. Questo creerà una pagina sotto il menu a discesa e posizionerà una piccola freccia accanto al nome del link del menu a discesa. Il tuo link del menu a discesa diventerà ora un link per aprire un menu a discesa di link di pagina. Per aggiungere più pagine al menu a discesa, fai clic su una delle pagine contenute 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.
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 bordo
inferiore evidenziato 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.
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.
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.
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 gli elementi di primo livello 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 in un Pop-up 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 menu a discesa con un gran numero di voci, 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 viene attivato.
Segnalaci difetti di questa documentazione e li risolveremo al più presto!
Aggiornato per Sitely 6
Questo sito web fa uso di cookie.
Per maggiori dettagli, consulta la nostra informativa sulla privacy.
