Compatibilità:

WebSite X5 Evo e Pro dalla versione 2019.2

Forse non sono ancora così diffusi ma sono già numerosi i siti in rete in cui si sperimenta una modalità alternativa di scroll della pagina: non più un flusso unico di contenuti, magari spezzato da fasce a tutta larghezza, ma una serie di blocchi, ognuno alto quanto la finestra del browser, che si susseguono come se fossero delle schede autonome messe in sequenza. Ti sarà tutto più chiaro guardando le home page di CV Power o di Blossom Corner, alcuni dei template che abbiamo realizzato seguendo questo approccio.


Curioso di scoprire come ottenere questo genere di scroll della pagina per impiegarlo nel tuo prossimo progetto?


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. 

 

Premessa 

Come sappiamo, in WebSite X5 viene utilizzato il concetto di "Griglia di impaginazione": la pagina viene rappresentata, appunto, come una griglia divisa in righe e colonne e i contenuti vengono inseriti all'interno delle celle (vedi, Come si imposta la Griglia di impaginazione?).


Di default:

  • la larghezza della pagina è definita dal Template scelto;
  • la larghezza delle colonne è ottenuta dividendo la larghezza della pagina per il numero di colonne;
  • l'altezza delle righe è determinata da quella dell'Oggetto più alto fra quelli inseriti nelle celle della riga stessa.  


Utilizzando la proprietà Full Height puoi fare in modo, però, che tutte le righe di una pagina assumano automaticamente un'altezza pari alla viewport, ovvero alla finestra del browser del visitatore del tuo sito. In questo modo lo scroll della pagina porterà alla visualizzazione di una riga per volta, come se ogni riga fosse un blocco o una scheda a se stante.

Utilizzando il Ful Height, dunque, l'altezza delle righe non è più fissa ma diventa variabile. 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. 


Predisporre le righe

Ragiona come se la tua pagina fosse composta da una successione di blocchi: ogni blocco deve essere autonomo dato che l'utente salterà da uno all'altro come tra le slide di una presentazione.


Ora che ti è chiaro questo concetto procedi in questo modo:

  • Apri al Passo 4 - Creazione della Pagina la pagina su cui vuoi lavorare e inserisci tutti i contenuti necessari.
  • Clicca sul pulsante per richiamare la finestra Stile delle Righe.
  • Nella sezione Generale, se necessario, unisci fra loro le righe che devono comporre uno stesso blocco. Per farlo clicca sull'icona del lucchetto che compare posizionando il mouse lungo la linea che idealmente unisce due dei pallini a fianco delle righe stesse (vedi, Come si lavora sulle righe della griglia di impaginazione?).


Attivare il Full Height

  • Vai in Stile delle Righe > Full Height.
  • Attiva l'opzione Attiva visualizzazione Full Height per tutte le Righe.
  • Se attivi l'opzione Scorrimento automatico delle righe, durante lo scroll, non appena viene visualizzato l'inizio di un blocco, questo viene rapidamente portato in primo piano, occupando l'intera viewport.  
  • Puoi anche attivare l'opzione Mostra Pulsanti di scroll verso il basso: in questo modo viene visualizzato al fondo di ciascun blocco un pulsante che consente di far scorrere automaticamente la pagina, portando alla visualizzazione del blocco successivo. Puoi decidere se questo pulsante deve essere sempre visibile o comparire solo su passaggio del mouse e, attraverso la voce File immagine, definire il suo aspetto.
  • Infine, puoi attivare l'opzione Mostra Indicatore di posizione definendo lo stile e l'allineamento rispetto alla pagina di questa piccola pulsantiera utile al visitatore per spostarsi tra i blocchi della pagina.