Compatibilità:

WebSite X5 Evo e Pro dalla versione 17

Oggi giorno le pagine Web devono adattarsi brillantemente a situazioni “estreme”: dai piccoli schermi degli smartphone, dove tutto si concentra e linearizza, ai grandi schermi desktop con risoluzioni elevate, dove gli stessi contenuti rischiano di “perdersi” in grandi spazi vuoti. La sfida è trovare soluzioni efficaci perché, in tutte queste situazioni, le pagine funzionino sempre al meglio ed offrano all'utente la miglior esperienza d’uso possibile.


Ci sono diversi modi per “riempire” una pagina ed evitare che, se visualizzata a pieno schermo, risulti vuota. Per esempio puoi:

  • utilizzare un’immagine come sfondo del template, scegliendo come Disposizione la voce Adatta al contenuto della finestra (per la sezione Sfondo della Pagina in Passo 2 - Impostazioni del Modello > Struttura del Modello);
  • fare in modo che l’header e il footer siano sempre larghi quanto la finestra del Browser, attivando l’opzione Estendi alla larghezza della finestra del Browser (per le sezioni Header e Footer in Passo 2 - Impostazioni del Modello > Struttura del Modello);
  • impostare un’immagine o un colore come stile delle righe in modo da creare delle fasce (al Passo 4 - Creazione della Pagina attraverso il comando Stile Righe).


Un'altra alternativa interessante è fare in modo che un oggetto, per esempio una galleria di immagini, occupi sempre tutta la larghezza della finestra del browser anche se questa viene ridimensionata e portata a pieno schermo. Ecco come devi fare per ottenere questo risultato.


Come preparare le immagini

Per creare una galleria, una delle cose più importanti che devi fare è preparare le immagini in modo che abbiano tutte lo stesso formato e dimensioni adeguate.


Dato che il nostro intento è creare una galleria che possa occupare tutta la larghezza della finestra del browser, dobbiamo avere immagini di dimensioni sufficienti a coprire lo spazio intero e, nel contempo, non eccessivamente pesanti. Possiamo, dunque, preparare le immagini con una larghezza di 1920 px, corrispondente alla risoluzione massima più diffusa, e un’altezza di 350 px, adeguata per ottenere una fascia.


#tip - Label delle immagini. Quando prepari l’archivio delle immagini da utilizzare nel tuo progetto, ricordati di rinominare i file: nomi significativi ti permettono di gestire meglio le risorse e sono utili anche lato SEO.


Come impostare una galleria Full Width

Ora che le immagini sono pronte, possiamo occuparci di implementare la galleria nella nostra pagina. WebSite X5 offre diversi tipi di galleria: uno che si presta particolarmente bene è l’Oggetto Galleria.

  • Apri il tuo progetto in WebSite X5 e accedi alla pagina su cui vuoi lavorare.
  • Clicca sull'Oggetto Galleria, trascinalo sulla Griglia di impaginazione e inseriscilo all’interno di una cella della prima riga. È importante che la riga della Griglia non contenga altri Oggetti oltre alla galleria.
  • Fai doppio click sull'Oggetto Galleria inserito (o selezionalo e clicca sul pulsante ) per accedere alla finestra con tutte le opzioni necessarie per configurarlo.
  • Nella sezione Elenco clicca sul pulsante Aggiungi per importare tutte le immagini preparate.
  • Apri la sezione Stile e come Tipo di Galleria scegli SlideShow Classico. Imposta le Dimensioni Massime a 1920 x 350 px (le stesse che hai usato per preparare le immagini).
  • Utilizza le opzioni disponibili per configurare la galleria come più preferisci, quindi conferma per tornare nella finestra Creazione della Pagina.
  • Sulla Griglia di impaginazione, seleziona l’Oggetto Galleria appena creato e clicca sul pulsante  Estendi alla larghezza della finestra del Browser. Come puoi vedere già dalla rappresentazione della Griglia, ora la galleria va oltre la larghezza della Pagina (determinata dal Modello usato) occupando tutta la finestra del Browser.


Come si comporta una galleria Full Width

A questo punto puoi goderti i frutti del tuo lavoro. Clicca sul pulsante Anteprima in modo da aprire la pagina nella finestra di Anteprima in locale e verificare cosa succede ridimensionando la finestra del browser.


La galleria deve essere visualizzata correttamente anche su dispositivi mobile. Per questo, se riduci la finestra del browser al di sotto del breakpoint Desktop, vedrai la galleria ridursi mantenendo la proporzione originale tra larghezza e altezza delle immagini.


Se, invece, provi ad allargare la finestra del browser a risoluzioni superiori a quella impostata per il breakpoint Desktop, noterai che la galleria aumenta le proprie dimensioni per occupare sempre tutto lo spazio disponibile in larghezza. Nel caso dell’Oggetto Galleria, comunque, le immagini non verranno ingrandite oltre le loro dimensioni originali, dunque, nel nostro esempio, oltre i 1920 x 350 px.


In modalità Full Width, però, il comportamento varia da Oggetto a Oggetto. L’Oggetto opzionale Swiper Animated Slider, per esempio, al contrario  dell’Oggetto Galleria, prevede che le immagini siano ingrandite anche oltre le loro dimensioni originali.


Se avessimo usato l’Oggetto Swiper Animated Slider, dunque, avremmo visto che fintanto che l’altezza della galleria è inferiore ai 350 px impostati come dimensione massima dell’Oggetto, l’ingrandimento viene effettuato rispettando il fattore di proporzione originale. Procedendo oltre, la larghezza dell’immagine continua ad aumentare ma non l’altezza che rimane fissa al valore massimo impostato di 350 px: di conseguenza l’immagine inizia ad essere zoomata, tagliata e centrata. Questo comportamento serve per evitare che gli utenti che visualizzano il sito a pieno schermo con monitor a risoluzioni molto elevate siano obbligati a lunghi scroll per poter accedere ai contenuti successivi.