Compatibilità:

WebSite X5 Evo e Pro

I siti web non sono tutti uguali: oltre a differire per contenuti e grafica, hanno anche strutture diverse, con più o meno pagine a seconda della quantità di informazioni che devono presentare. C’è una tipologia specifica di siti che vengono spesso impiegati proprio per la semplicità e l'immediatezza della loro struttura: sono quelli "one page" o monopagina. 


Si tratta di siti web che, come dice il nome, sono composti da una singola pagina divisa in più sezioni. In questi casi le voci del menu di navigazione non puntano a pagine diverse ma ciascuno a una sezione specifica della stessa pagina. Questa soluzione presenta numerosi vantaggi: innanzitutto le dimensioni ridotte del sito stesso, ma anche la facilità con cui il visitatore riesce a spostarsi da una sezione all’altra, e quindi a trovare in fretta le informazioni desiderate.


Anche con WebSite X5 è possibile creare un sito one page. Noi abbiamo applicato questa struttura in diversi template come, per esempio GeenoPanino, PetsVet o CV Power. Vediamo insieme come organizzare mappa e contenuti per realizzare un perfetto sito one page. 


Organizzazione della mappa

Il primo passo è sicuramente il più semplice:  il nostro sito web, infatti, deve avere una sola pagina. 

  • Apri un nuovo progetto e vai al Passo 3 - Creazione della Mappa: seleziona e cancella tutte le pagine presenti di default tranne la Home.
  • Per predisporre il menu di navigazione devi usare i Livelli. Ipotizza, per esempio, di voler creare un sito one page con 3 sezioni: "Benvenuto", "Servizi" e "Contatti": devi creare un livello per ogni voce. Clicca sul pulsante Nuovo Livello e rinomina il livello inserito come “Benvenuto”, poi fai lo stesso per creare anche le altre due voci.
  • Ora che lo scheletro del sito è pronto, puoi procedere inserendo i contenuti: seleziona la Home Page e clicca su Avanti per accedere al Passo 4 - Creazione della Pagina.


Definizione dei contenuti

Proseguendo con il nostro esempio, devi creare un'unica pagina divisa in 3 sezioni: “Benvenuto” sarà una sezione introduttiva che presenterà brevemente l’attività o l’azienda; “Servizi” parlerà di ciò che puoi offrire ai tuoi clienti e visitatori; “Contatti” fornirà tutti i recapiti per renderti immediatamente e facilmente reperibile.  Sviluppa, quindi, la tua pagina dividendola idealmente in tre sezioni e inserendo gli Oggetti necessari per ognuna. 


Inserisci ora le cosiddette “Ancore”. L'Ancora è un riferimento che serve per identificare un punto specifico all'interno della Pagina: ti servirà per creare un link diretto alla sezione specifica a cui è associata. Devi inserire 3 ancore, una per ogni sezione del sito one-page:

  • Seleziona il primo Oggetto a cui vuoi associare l’Ancora e clicca su Ancora > Inserisci Ancora.
  • Specifica il nome della prima Ancora, ad esempio "Benvenuto".
  • Seleziona adesso il primo Oggetto della seconda sezione del sito a cui associare l’Ancora e ripeti i passi precedentemente descritti. Questa volta, il nome potrebbe essere "Servizi". 
  • Fai lo stesso anche con l’ancora "Contatti" della terza sezione.


A questo punto hai una pagina in cui sono presenti tre Ancore che identificano le diverse sezioni che hai previsto anche nella Mappa al Passo 3. Non ti resta che collegare queste Ancore alle voci del menu, in modo che il sito possa essere facilmente navigabile.


#tip - Puoi scoprire tutto ciò che c'è da sapere sulla creazione e la gestione delle Ancore leggendo la guida Come si imposta il link a un'ancora?


La creazione del menu

Gli ultimi step riguardano, dunque, il collegamento tra le voci del menu e le sezioni della pagina. Farlo è molto semplice:

  • Torna al Passo 3 - Creazione della Mappa, seleziona la voce "Benvenuto" e poi clicca sul pulsante Proprietà.
  • Nella finestra Proprietà di Livello, clicca sull’icona per impostare il Collegamento sul click sulla voce di menu. 
  • Nella finestra Collegamento seleziona la voce Pagina del Sito: la pagina indicata sarà la Home Page.
  • Imposta ora l’Ancora interna alla Pagina selezionando l’Ancora "Benvenuto". Clicca su Ok per confermare.
  • Ripeti le stesse operazioni per collegare le voci "Servizi" e "Contatti" alle Ancore corrispondenti.


Ora il tuo sito one page è pronto: cliccando sulle diverse voci del menu, il visitatore verrà portato automaticamente nel punto corretto della pagina per visitare la sezione corrispondente del sito. Non ti resta che pubblicare online per fare scoprire a tutti i tuoi prodotti o servizi!


#tip - Sticky Bar. Se la tua pagina risulta piuttosto lunga, puoi agevolare ulteriormente la navigazione inserendo il menu anche in una Sticky Bar (vedi: Come si crea una barra menu sempre visibile durante lo scroll?). 


#tip -  Full Height. Puoi creare un accattivante effetto grafico di scorrimento verticale a schede attivando la funzionalità Full Height (vedi: Come si utilizza la proprietà Full Height per creare uno scorrimento a schede della pagina?).