Introduzione
Usare Sitely
Elementi
Come fare
La galleria di immagini di Sitely non è solo un carosello di immagini: il suo utilizzo va ben oltre la semplice visualizzazione di una galleria di immagini. È una delle funzionalità più recenti di Sitely e rappresenta un grande passo avanti nel modo in cui le informazioni possono essere presentate in una pagina di Sitely. L'elemento galleria di immagini ora supporta sia immagini che PDF. Una delle domande che frequentemente vengono poste dagli utenti è come incorporare un documento PDF in una pagina web di Sitely. Tradizionalmente, la risposta era fare quello che fanno tutte le altre applicazioni di design web: aggiungere del codice alla pagina che consenta di visualizzare il PDF in un iframe. Chiaramente, non era questo ciò che i programmatori avevano in mente quando hanno concepito Sitely come uno strumento di design web senza codice. Bene, tutto ciò è ormai un ricordo del passato. Il nuovo elemento galleria si occupa di incorporare documenti PDF nella tua pagina web con facilità e semplicità, aggiungendo anche alcune rifiniture per rendere la visualizzazione di immagini o pagine PDF un piacere per gli utenti.
Quando l'elemento galleria viene aggiunto per la prima volta a una pagina, appare in questo modo. È un carosello dall'aspetto abbastanza standard che necessita solo di aggiungere contenuto.
Se utilizzato come una galleria di immagini tradizionale, puoi aggiungere immagini jpg o png attraverso la sezione ‘Galleria di Immagini’ del pannello di stile. Appare in questo modo.
Cliccando sul pulsante Modifica verrà visualizzato un pannello di selezione delle immagini dove puoi aggiungere il tuo contenuto. Basta cliccare sul pulsante Aggiungi per cercare le immagini sul tuo disco.
Puoi anche aggiungere pagine PDF. Queste possono essere file PDF a pagina singola o multipagina. Quando aggiungi PDF, Sitely converte ogni pagina in un'immagine di alta qualità che viene incorporata nella galleria. Questo rende facile incorporare presentazioni o brochure nella tua pagina web, rendendo i tuoi documenti completamente indipendenti dai font. Quando combinato con la funzione lightbox della galleria, le pagine verranno ingrandite sullo schermo per facilitare la lettura. Nell'esempio qui sotto, una presentazione Keynote è stata esportata come file PDF e aggiunta alla galleria di immagini.
Ci sono molti modi creativi in cui puoi utilizzare il nuovo elemento galleria di immagini. Ad esempio, potresti creare una semplice galleria con due immagini e farla riprodurre automaticamente come presentazione per creare un invito all'azione accattivante sulla tua pagina. Ecco un esempio.
In questo esempio, potresti impostare diverse azioni al clic per ogni immagine: una per aprire un modulo di registrazione in un popup, l'altra per aprire un diverso popup che spiega l'offerta in maggior dettaglio. Prova a farlo in questo esempio: aspetta che le immagini cambino e poi cliccaci sopra.
Non devi essere un artista grafico per creare semplici banner come questo. Puoi semplicemente utilizzare gli strumenti Apple che hai a disposizione. Questo esempio sopra è stato creato come una presentazione Keynote di due pagine (di dimensioni personalizzate) e poi ogni immagine è stata esportata come immagine. Puoi anche esportare le due immagini come un unico file PDF e usarlo per popolare la galleria di immagini.
Quindi, dopo aver visto cosa può fare la nuova galleria di immagini, diamo un'occhiata a come impostarla e stilizzarla. Come quasi tutti gli elementi in Sitely, tutto viene impostato nel pannello di stile. Abbiamo visto sopra quanto sia semplice aggiungere contenuto, quindi passiamo alla stilizzazione e alle opzioni. La seconda sezione del pannello di stile ti consente di impostare un'azione al clic per ogni immagine individuale. Questa è un'opzione molto flessibile che ti permette di aggiungere diverse azioni a immagini diverse. Qualsiasi azione attualmente supportata in Sitely può essere impostata. L'azione più comune per una galleria sarebbe probabilmente l'opzione ‘Ingrandisci Immagine nella Lightbox’. Questa mostrerà le immagini in una scala più grande su uno sfondo oscurato per dare agli utenti una visione più ampia. Se desideri applicare la stessa azione al clic a tutte le altre immagini, clicca sull'icona delle impostazioni (tre punti in un cerchio). Questo presenterà l'opzione di applicare l'azione a tutte le immagini. Se l'opzione ‘Mostra Etichetta’ è selezionata, la tua immagine sarà sovrapposta da un'etichetta di testo. Questa può essere stilizzata e spostata come desideri, anche sotto o accanto all'immagine, se necessario.
Quando l'opzione lightbox è scelta come azione al clic, il pannello di stile ti presenterà una serie di opzioni aggiuntive. Queste sono mostrate di seguito e sono in gran parte autoesplicative.
Deselezionando la spunta della Presentazione verranno rimosse le frecce a sinistra e a destra, sia nell'area di lavoro, sia quando la presentazione si apre in una lightbox. Tuttavia, una volta aperta la lightbox, le immagini possono ancora essere avanzate utilizzando azioni di trascinamento col dito (swipe). Questa potrebbe essere un'opzione utile se desideri costringere gli utenti ad aprire la galleria in una lightbox prima di poter scorrere le immagini. In pratica, la prima immagine rimarrà statica sulla pagina. Naturalmente, dovrai aggiungere un'azione sovrapposta sull'immagine per far sapere alle persone che può essere ingrandita.
Il set successivo di opzioni ti consente di stilizzare i vari elementi dei pulsanti di navigazione della presentazione, compreso il colore standard delle frecce, così come i colori al passaggio del mouse e al clic del mouse.
Il pulsante di chiusura è l'icona visualizzata in alto a destra della presentazione che consente agli utenti di uscire dalla presentazione e tornare alla pagina. Hai una scelta di stili, ciascuno dei quali può avere colori diversi applicati in base allo stato del pulsante.
L'azione sovrapposta è dove selezioni un'icona da sovrapporre sulle immagini della tua galleria per far sapere alle persone che le immagini sono ingrandibili. Questo elemento sovrapposto può essere impostato su base immagine per immagine e include sia versioni nere che bianche, a seconda del colore di sfondo delle tue immagini. Se tutte le tue immagini hanno uno sfondo simile, come nella nostra presentazione Keynote sopra, puoi applicare un'overlay di azione solo alla prima immagine e poi impostare ‘applica azione a tutte le immagini’ accanto all'opzione ‘ingrandisci immagine in lightbox’.
Le opzioni finali ti danno controllo su come la tua galleria verrà visualizzata. L'opzione letterbox è progettata per consentire l'inclusione di immagini con rapporti di aspetto diversi. Se le tue immagini sono impostate su ‘Adatta’, le loro dimensioni saranno regolate per adattarsi ai confini della galleria. Questo può risultare in un effetto letterbox, sia a sinistra e a destra delle immagini alte, sia sopra e sotto le immagini larghe. Puoi utilizzare questa opzione per impostare un colore di sfondo per quello spazio vuoto intorno alle tue immagini. Se questa opzione è impostata su ‘Riempi’, le tue immagini verranno ingrandite per riempire il riquadro della galleria. Questo può causare il ritaglio di alcune immagini.
L'opzione di Transizione ti consente di impostare la velocità delle transizioni che applichi alla presentazione. Le opzioni consentono anche un effetto di dissolvenza incrociata delle immagini o un effetto di scorrimento. Nota che l'opzione di dissolvenza incrociata funzionerà solo nella versione canvas della galleria: la versione lightbox avrà sempre una transizione di scorrimento.
Selezionando la casella delle Miniature ti verranno offerte opzioni aggiuntive per visualizzare una griglia di miniature sotto o sopra la tua galleria. Questo consentirebbe agli utenti di cliccare sulle miniature per navigare nella tua galleria. In alternativa, potresti scegliere di avere dei punti invece.
La funzione di Presentazione Automatica avanzerà automaticamente la presentazione senza alcuna interazione dell'utente. Le immagini possono essere messe in pausa per un periodo specifico di tempo prima di passare alla successiva. Puoi anche far mettere in pausa la presentazione al passaggio del mouse.
Segnalaci difetti di questa documentazione e li risolveremo al più presto!
Aggiornato per Sitely 5.6
