Compatibilità:

WebSite X5 Evo e Pro

Il nome evoca le lezioni di disegno tecnico e le tavole con cubi, parallelepipedi e piramidi disposti in assonometria isometrica. Ma non ti preoccupare: con l'Oggetto Opzionale Isometric Grid Layout, non dovrai ripescare altro dai cassetti della memoria. Anzi, creare una galleria in cui le tue immagini sono organizzate secondo un ordinato layout a griglia isometrica sarà veramente semplice.


Guarda gli  esempi che abbiamo raccolto nella pagina di Anteprima così ti sarà subito chiaro l'effetto che puoi ottenere e gli ambiti in cui puoi utilizzarlo.         



Proiezione isometrica

Per molti anni il Web è stato un ambiente bidimensionale in cui gli elementi potevano essere posizionati solo lungo l'asse X (orizzontale) e l'asse Y (verticale). Negli anni '90 si è iniziato a cercare un modo per presentare gli oggetti in 3 dimensioni e, data la potenza di calcolo ancora limitata, la soluzione fu sfruttare la proiezione isometrica che prevede un terzo asse, l'asse Z, che rappresenta la profondità.


Nella proiezione isometrica, in particolare, i 3 assi formano tra loro tre angoli uguali cosicché il quadro di proiezione risulta inclinato in egual misura rispetto ai tre i piani principali.

L'impiego della prospettiva isometrica è, tutt'oggi, un metodo valido per dare tridimensionalità agli elementi di una pagina web. 


Rispolverato il meccanismo di base, ti sarà semplice comprendere come procedere con la realizzazione della tua galleria in prospettiva isometrica.


Come creare la galleria di immagini

  • Fai doppio click sull'Oggetto Isometric Grid Gallery inserito per accedere alla finestra con tutte le opzioni.
  • Rimani nella sezione Contenuto e clicca su pulsante Aggiungi per importare il file relativo all'immagine che vuoi inserire. Cliccando sulla freccia del pulsante Aggiungi puoi scegliere se cercare un  File in locale o se utilizzare una  Libreria online (per maggiori informazioni, vedi Come si importa un file?).  
  • Ripeti l'operazione in modo da aggiungere tutte le immagini che ti occorrono. Ricorda che puoi usare le combinazioni CTRL+click e SHIFT+click per effettuare una selezione multipla delle immagini.
  • Tutte le immagini inserite vengono proposte nell'elenco sottostante la barra degli strumenti: usa i pulsanti e  per visualizzare le anteprime piccole o grandi.    
  • Se necessario, utilizza il pulsante per eliminare il file selezionato dall'elenco di quelli già inseriti, e i pulsanti con le frecce per modificare l'ordine delle immagini.
  • Per ciascuna immagine puoi:
    • utilizzare il pulsante per inserire un titolo e un testo alternativo utile ai fini dell'accessibilità oltre che dell'ottimizzazione SEO della pagina (vedi Accessibilità delle immagini: l'importanza del testo alternativo);
    • cliccare sul pulsante  e, attraverso la finestra richiamata, scrivere un breve testo (per esempio, un titolo o una didascalia);
    • cliccare sul pulsante e impostare il link scegliendo l'azione più appropriata.


Come definire lo stile della Griglia  

Ora che hai definito il contenuto vero e proprio della Galleria, puoi occuparti del suo stile grafico:

  • Entra nella sezione Stile: qui trovi tutte le opzioni necessarie per agire sull'aspetto della Galleria che stai costruendo. 
  • Per quanto riguarda la Griglia in cui sono organizzate le immagini, puoi:
    • Impostare il Numero di colonne della griglia in base alla quale verrà organizzata la Galleria.
    • Definire la Proporzione griglia, ovvero il rapporto di proporzione fra la larghezza e l'altezza dell'Oggetto.
    • Definire un Colore di sfondo e, volendo, fare in modo che questo sfumi verso l'alto e verso il basso in un secondo colore o fondendosi con lo sfondo della pagina: in questo secondo caso, scegli 'Trasparente' per la voce Sfumatura superiore ed inferiore.
    • Allineare la Griglia rispetto allo spazio a disposizione nella pagina.
    • Decidere se mantenere tutte le immagini allineate in griglia o se sfalsare le colonne pari o quelle dispari.
    • Modificare l'orientamento della Galleria agendo sulla Rotazione lungo i tre assi X, Y e Z.      
  • Ovviamente puoi intervenire anche sull'aspetto delle singole Celle della griglia di impaginazione usata nella galleria:
    • Per prima cosa imposta le Dimensioni della cella: questo equivale a determinare lo spazio a disposizione dell'Oggetto all'interno della tua pagina.
    • Infine, imposta il Fattore di Smusso, il Colore del Bordo e dell'Ombra, e definisci il Margine esterno.


Come rifinire l'aspetto della Galleria

Per personalizzare ulteriormente l'aspetto della galleria e renderla ancora più interessante puoi completarla definendo lo stile delle descrizioni e attivando degli effetti:

  • Entra nella sezione Opzioni e usa le opzioni di formattazione (Font, Colore del testo e dello sfondo, Allineamento, Margini) disponibili per definire come deve essere visualizzata la descrizione eventualmente associata alle immagini. 
  • Puoi fare il modo che le descrizioni siano sempre visibili oppure vengano visualizzate/nascoste su passaggio del mouse grazie all'opzione Effetto.
  • Puoi impostare un Effetto di comparsa anche sulla galleria intera. Nello specifico, puoi scegliere se l'Oggetto debba entrare nella pagina con un effetto di Movimento o con un effetto Parallasse. 
  • Infine, puoi scegliere un Effetto su passaggio del mouse: per esempio, con l'effetto Zoom In puoi ottenere un leggero ingrandimento dell'immagine quando ci si passa sopra con il mouse.


Impaziente di usarlo nelle pagine del tuo sito? Installa subito l’Oggetto Isometric Grid Layout


Non hai Crediti a sufficienza per acquistare questo Oggetto? Vedi tutti i pacchetti di Crediti