Compatibilità:

WebSite X5 Evo e Pro

Vuoi creare una Pagina composta da grandi blocchi che occupano tutta l’altezza della finestra del Browser e si susseguono durante lo scroll come le schede di una presentazione?


Con la funzione Full Height puoi fare in modo che le Sezioni della Pagina abbiano almeno l’altezza della viewport e, se vuoi, aggiungere uno scorrimento automatico e dei comandi che aiutano il visitatore a passare da una Sezione all’altra.


Lavorando sullo stile delle Righe, grazie alla proprietà Full Height, è più semplice di quel che puoi immaginare. Ecco cosa devi sapere e come devi fare. 

 

Come funziona Full Height

In WebSite X5, normalmente l’altezza di una Sezione dipende dagli Oggetti che contiene. Con Full Height, invece, ogni Sezione utilizzata come scheda occupa almeno tutta l’altezza della finestra del Browser.


In questo modo, durante lo scroll, il visitatore passa da un blocco di contenuti al successivo come se stesse sfogliando una serie di schede.

Full Height non imposta però un’altezza rigida. Se la viewport è ridotta, i contenuti presenti nella riga ne determinano l'altezza minima. Al contrario, se la viewport è molto ampia, i contenuti verranno visualizzati allineati al centro. 


Come preparare le Sezioni della Pagina

Prima di attivare Full Height, organizza la Pagina pensando a una successione di blocchi autonomi: ciascuno diventerà una delle schede visualizzate durante lo scroll.


Procedi in questo modo:

  • Vai al Passo 4 - Pagine e apri la pagina su cui vuoi lavorare.
  • Inserisci nella Griglia di impaginazione tutti gli Oggetti necessari.
  • Organizza in una stessa Sezione le Righe che devono formare un unico blocco.
  • Crea una nuova Sezione ogni volta che deve iniziare la scheda successiva.
  • Ripeti l’operazione fino ad aver suddiviso la Pagina nei blocchi desiderati.

Una Sezione può quindi comprendere una sola Riga oppure più Righe: ciò che conta è che tutti i contenuti che devono essere visualizzati come un’unica scheda appartengano alla stessa Sezione.


#tip - Per maggiori informazioni su come creare e organizzare le Sezioni nella Griglia, vedi Sezioni di pagina. Come creare layout con strutture diverse?


Come attivare Full Height

Dopo aver predisposto le Sezioni:

  • Clicca sul pulsante Stile sezioni.
  • Apri la sezione Full Height.
  • Attiva l'opzione Attiva visualizzazione Full Height per tutte le sezioni di questa Pagina.


Da questo momento le Sezioni della Pagina vengono gestite come blocchi che occupano almeno l’altezza della finestra del Browser.


Come attivare lo scorrimento automatico

Se vuoi rendere più evidente il passaggio da una scheda alla successiva, nella sezione Full Height puoi attivare l’opzione Scorrimento automatico.


Quando, durante lo scroll, inizia a comparire una nuova Sezione, WebSite X5 fa scorrere automaticamente la Pagina fino a portarla completamente in primo piano.


In questo modo il passaggio fra le diverse parti della Pagina risulta più simile allo scorrimento di una presentazione.


Come aggiungere i pulsanti per passare alla Sezione successiva

Puoi facilitare ulteriormente la navigazione aggiungendo un pulsante nella parte inferiore di ciascuna scheda.


Per farlo:

  • nella sezione Full Height attiva l’opzione Mostra Pulsanti di scroll verso il basso;
  • definisci lo stile dei pulsanti scegliendo l’immagine che vuoi utilizzare;
  • scegli se i pulsanti devono essere sempre visibili oppure comparire solo al passaggio del mouse.


Cliccando sul pulsante, il visitatore passa automaticamente alla Sezione successiva.


Come mostrare la posizione nella Pagina

Nella sezione Full Height attiva l’opzione Mostra Indicatore di posizione e utilizza le impostazioni disponibili per:

  • scegliere lo stile dell’indicatore;
  • stabilirne l’allineamento rispetto alla Pagina.


Il visitatore può cliccare direttamente sull’indicatore per portare in primo piano la Sezione desiderata.


Cosa succede se una Sezione contiene molti contenuti

Full Height funziona meglio quando ciascuna scheda contiene una quantità di contenuti compatibile con lo spazio disponibile nella finestra del Browser.


Questo non significa, però, che i contenuti vengano tagliati o compressi per rispettare l’altezza della viewport.


Se testi, immagini o altri Oggetti richiedono più spazio, la Sezione si estende quanto necessario per contenerli. Full Height stabilisce quindi un’altezza minima, non un limite massimo.


Suggerimenti pratici

Per ottenere uno scorrimento a schede efficace:

  • considera ogni Sezione come un blocco di contenuti autonomo;
  • evita di concentrare troppi contenuti in una singola scheda;
  • verifica il risultato utilizzando finestre del Browser con altezze differenti;
  • usa lo Scorrimento automatico quando vuoi accentuare il passaggio da una Sezione alla successiva;
  • aggiungi pulsanti o indicatore di posizione soprattutto nelle Pagine composte da molte schede;
  • controlla sempre il risultato in Anteprima.


#tip - Se vuoi ottenere un effetto ancora più simile a una presentazione a tutto schermo, puoi valutare di nascondere Header e Footer per la Pagina. Questa configurazione permette alle Sezioni Full Height di occupare maggiormente lo spazio disponibile nella finestra del Browser.