Compatibilità:

WebSite X5 Evo | Pro | Agency

Un sito web non deve necessariamente essere composto da molte pagine. In alcuni casi, una struttura semplice, immediata e pensata per accompagnare il visitatore lungo un unico percorso può risultare molto più efficace.


I siti One Page o monopagina nascono proprio con questo obiettivo: raccogliere tutti i contenuti principali in un’unica pagina organizzata in Sezioni facilmente raggiungibili tramite il menu di navigazione.


Questa soluzione è particolarmente adatta per:

  • siti vetrina semplici;
  • landing page;
  • portfolio;
  • presentazioni aziendali;
  • eventi;
  • attività locali;
  • professionisti e freelance.


Grazie alla navigazione a scorrimento, il visitatore può passare rapidamente da una Sezione all’altra senza cambiare pagina, migliorando fluidità e immediatezza della consultazione.


Con WebSite X5 puoi creare facilmente un sito One Page organizzando i contenuti in Sezioni, assegnando a ciascuna un’Ancora e collegando le voci del menu alle rispettive Ancore.


I passaggi fondamentali sono:


#tip - Un sito One Page può essere una soluzione molto efficace quando vuoi presentare poche informazioni in modo chiaro, rapido e facilmente consultabile anche da smartphone.


Come creare un sito One Page passo dopo passo

Il primo passo è preparare una struttura adatta a un sito monopagina. 


In questo tipo di progetto esiste una sola pagina reale: la Home Page. Le voci del menu servono invece per spostarsi tra le diverse Sezioni della stessa Pagina.


Per impostare la struttura:

  • Apri un nuovo progetto e vai al Passo 3 - Creazione della Mappa.
  • Elimina tutte le pagine presenti di default lasciando soltanto la Home Page.
  • Utilizza i Livelli per creare le voci del menu di navigazione.


Per esempio, puoi creare un sito con queste sezioni:

  • Benvenuto
  • Servizi
  • Contatti


Per farlo:

  • Clicca sul pulsante Nuovo Livello.
  • Rinomina il Livello con il nome della prima voce, per esempio “Benvenuto”.
  • Ripeti l'operazione per “Servizi” e “Contatti”.

In questo modo costruisci la struttura di navigazione del sito One Page.


Una volta terminata la struttura:

  • Seleziona la Home Page.
  • Clicca su Avanti per passare al Passo 4 - Creazione della Pagina.


#tip - Nei siti one page è consigliabile mantenere il menu semplice e con poche voci, così da rendere la navigazione più immediata.


2. Crea le Sezioni della Pagina

A questo punto puoi costruire i contenuti della Home Page e organizzarli nelle diverse Sezioni del sito.


Nel nostro esempio: 

  • “Benvenuto” sarà la Sezione introduttiva; 
  • “Servizi” presenterà ciò che offri; 
  • “Contatti” raccoglierà recapiti e modulo di contatto.  


Per organizzare la Pagina:

  • Inserisci nella prima Sezione gli Oggetti necessari per i contenuti di “Benvenuto”.
  • Al termine di questi contenuti, utilizza il comando Nuova sezione per iniziare la Sezione “Servizi”.
  • Inserisci gli Oggetti dedicati ai tuoi servizi.
  • Crea allo stesso modo una nuova Sezione per “Contatti” e inserisci i relativi contenuti.


Ogni Sezione può avere una propria struttura di righe e colonne. Puoi quindi scegliere il layout più adatto ai contenuti che deve ospitare senza condizionare la struttura delle altre Sezioni.


#tip - Per maggiori informazioni, vedi Sezioni di pagina. Come creare layout con strutture diverse?


3. Assegna un’Ancora a ogni Sezione

Per permettere al menu di raggiungere direttamente ciascuna Sezione devi creare le relative Ancore.


Le Ancore sono riferimenti che identificano punti specifici della Pagina e possono essere utilizzati come destinazione di un collegamento.


Nel caso di un sito One Page, assegna l’Ancora a un Oggetto della prima Riga della Sezione che vuoi raggiungere.


Per esempio:

  • Seleziona un Oggetto della prima Riga della Sezione “Benvenuto”;
  • Clicca su Ancora > Inserisci Ancora.
  • Assegna all'Ancora un nome riconoscibile, per esempio "Benvenuto".
  • Ripeti la stessa operazione nella prima Riga delle Sezioni “Servizi” e “Contatti”, utilizzando nomi diversi.


Quando l’Oggetto a cui è associata l’Ancora si trova nella prima Riga della Sezione, il collegamento porta all’inizio della Sezione stessa. In questo modo, cliccando su una voce del menu, il visitatore raggiunge correttamente l’inizio dell’area corrispondente.


#tip - Per maggiori informazioni, vedi Ancore. Come creare collegamenti a punti specifici di una pagina?


Ora devi collegare le voci del menu alle rispettive Ancore.


Questo passaggio permette al menu di portare automaticamente il visitatore nella sezione corretta della pagina.


Per collegare, per esempio, la voce “Benvenuto”:

  • Torna al Passo 3 - Creazione della Mappa.
  • Seleziona il Livello "Benvenuto".
  • Clicca sul pulsante Proprietà.
  • Nella finestra Proprietà di Livello, clicca su Collegamento. 
  • Nella finestra Collegamento seleziona la voce Pagina del Sito.
  • Scegli la Home Page.
  • Nel campo Ancora interna alla Pagina, seleziona l'Ancora “Benvenuto”.
  • Conferma cliccando su Ok.

Ripeti le stesse operazioni per collegare anche i Livelli "Servizi" e "Contatti" alle Ancore corrispondenti.


Ora il tuo sito one page è pronto. Quando il visitatore cliccherà una voce del menu, la pagina scorrerà automaticamente e verrà subito raggiunta la Sezione corretta.


#tip - Sticky Bar. Se il sito è particolarmente lungo, puoi migliorare ulteriormente l'esperienza di navigazione utilizzando una Sticky Bar per mantenere sempre visibile il menu durante lo scroll. Per maggiori informazioni, vedi: Sticky Bar. Come creare una barra di navigazione sempre visibile durante lo scroll? 


#tip - Full Height. Se vuoi ottenere una navigazione a schede, puoi utilizzare anche la funzione Full Height. Per maggiori informazioni, vedi: Full Height. Come creare uno scorrimento a schede della pagina?).


Suggerimenti pratici

Un sito one page funziona bene quando i contenuti sono organizzati in modo chiaro, sintetico e facilmente consultabile.


Per ottenere risultati migliori:

  • limita il numero delle Sezioni;
  • utilizza titoli brevi e facilmente riconoscibili;
  • organizza i contenuti seguendo una sequenza logica;
  • mantieni il menu semplice;
  • inserisci call to action ben visibili;
  • usa immagini leggere e ottimizzate;
  • crea una buona separazione visiva tra le diverse Sezioni;
  • verifica sempre il comportamento da smartphone.


In generale, il sito One Page è particolarmente efficace quando il visitatore deve raggiungere rapidamente un obiettivo preciso, come:

  • contattarti;
  • richiedere informazioni;
  • prenotare un servizio;
  • scoprire un’attività o un prodotto.


In sintesi

Con WebSite X5 puoi creare facilmente un sito One Page utilizzando una sola Home Page organizzata in Sezioni e collegando il menu alle diverse aree attraverso le Ancore.


Ogni Sezione può avere una struttura adatta ai propri contenuti e il visitatore può raggiungerla direttamente attraverso le relative voci di navigazione.


In questo modo puoi costruire un sito semplice da esplorare e particolarmente adatto a progetti che devono presentare un numero contenuto di informazioni lungo un unico percorso.