EverWeb offre quattro modi per mostrare le foto una dopo l'altra. Per una presentazione che scorre da sola lungo la pagina, usa il widget Cursore dell'immagine (Image Slider). Per diapositive che combinano foto, testo, pulsanti o video in una pagina Responsive, usa il widget Carosello. Per far cambiare le foto dietro al testo o dentro un riquadro qualsiasi, usa un Riempimento presentazione di diapositive. Se i visitatori devono vedere tutte le foto come miniature e fare clic su una per aprire una presentazione a schermo intero, usa una galleria.
Quando usarlo
- Un hotel vuole che la home page mostri a rotazione le foto delle sue camere, ognuna con un link alla pagina di quella camera: Image Slider.
- Un bar vuole una fila di schede, ognuna con una foto, una riga di testo e un pulsante Ordina, che i visitatori possono scorrere: Carosello.
- Un pittore che arriva da iWeb vuole ogni serie su una pagina a sé, con una presentazione che parte quando qualcuno fa clic su un dipinto: una galleria.
Quale usare
| Image Slider | Carosello | Riempimento presentazione di diapositive | Galleria di immagini reattive / Galleria immagini | |
|---|---|---|---|---|
| Come appare | Una foto alla volta, con miniature facoltative sotto | Diapositive con qualsiasi contenuto: foto, testo, pulsanti, video. Può mostrarne diverse insieme | Foto che cambiano dietro una Casella di Testo, una forma, un'immagine o un Contenitore | Una griglia di miniature. Facendo clic su una si apre una grande presentazione sopra la pagina |
| Tipo di pagina | Responsive e Layout centrato | Pensato per le pagine Responsive | Responsive e Layout centrato | Galleria di immagini reattive per le pagine Responsive, Galleria immagini per il Layout centrato |
| Didascalie | Una Didascalia per ogni foto | Aggiungi una Casella di Testo alla diapositiva | Il testo che scrivi resta sopra ogni foto | Una Didascalia per ogni foto |
| Un link su ogni diapositiva | Sì, URL: per ogni foto | Sì, ogni oggetto può avere il proprio link | No, il riquadro cambia le foto, non i link | No, un clic apre la foto grande |
| Scorre da solo | Sì, attivo di partenza | Solo se spunti Riproduzione automatica | Sì, con Cambia diapositive automaticamente | Una volta aperta la presentazione |
| Sui telefoni | Si riduce per adattarsi se impostato su Larghezza piena | Si riduce per adattarsi se impostato su Larghezza piena | Segue le dimensioni del riquadro | Le colonne si riorganizzano per adattarsi (Galleria di immagini reattive) |
Aggiungere un Image Slider
- Fai clic sulla scheda Widget e trascina Cursore dell'immagine sulla pagina. In una pagina Responsive, mettilo direttamente sulla pagina o in un Contenitore, non in una Riga dinamica.
- Per farlo andare da un bordo all'altro, vai in Ispettore > Metriche e spunta Larghezza piena.
- Vai in Ispettore > Impostazioni widget e aggiungi le foto con Scegli….
- Seleziona ogni foto nell'elenco per scriverne la Didascalia, il Testo ALT (una descrizione per i motori di ricerca e gli screen reader) e, se vuoi, un URL: a cui collegarla.
- In Opzioni presentazione, lascia spuntato Riproduzione automatica della presentazione e imposta Velocità presentazione: in millesimi di secondo (4000 corrisponde a 4 secondi). Scegli una Transizione:, ad esempio dissolvenza o scorrimento.
- In Aspetto, togli la spunta da Mostra miniature per un banner pulito e scegli un'opzione in Ritaglia immagine:. Fill (riempi) riempie la cornice e può tagliare i bordi. Fit (adatta) mostra la foto intera.
- In Comportamento, spunta Pausa al passaggio del mouse o Clicca per ingrandire l'immagine se ti servono.
Aggiungere un Carosello
- Trascina Carosello dalla scheda Widget su una pagina Responsive.
- Trascinaci dentro foto, Caselle di Testo o Contenitori. Ognuno di questi è una diapositiva. Per una foto con testo e un pulsante, mettili prima in una Colonna contenitore.
- In Ispettore > Impostazioni widget, in Opzioni slider, imposta Slide per vista (con 0 decide il Carosello), un'Animazione slide come Dissolvenza, Coverflow o Schede, e Loop.
- In Impostazioni riproduzione automatica, spunta Riproduzione automatica, imposta Velocità (3000 corrisponde a 3 secondi) e spunta Stop on mouseover (ferma al passaggio del mouse) se vuoi che si metta in pausa.
Usare un Riempimento presentazione di diapositive
- Seleziona una Casella di Testo, una forma rettangolare, un'immagine o un Contenitore.
- Vai in Ispettore > Opzioni forma e nel menu Riempimento scegli Presentazione diapositive.
- Fai clic su Scegli… e seleziona le foto. Su un'immagine, aggiungi all'elenco anche la foto originale.
- Imposta Animazione, Velocità della presentazione diapositive (ms) e Cambia diapositive automaticamente. Mentre lavori, lascia Mostra frecce su Sempre, così puoi passare da una diapositiva all'altra. Quando hai finito, impostalo su Mai se non vuoi le frecce.
Gallerie
Trascina Galleria di immagini reattive (pagine Responsive) o Galleria immagini (pagine con Layout centrato) sulla pagina e aggiungi le foto. Facendo clic su una miniatura si apre una presentazione che può scorrere da sola, come "Play Slideshow" di iWeb. Vedi Come faccio ad aprire una finestra popup o ingrandire una foto quando qualcuno fa clic?
Preparare le foto
- Falle tutte della stessa forma e dimensione, ad esempio tutte di 1600 x 900 pixel. Foto di forme diverse lasciano spazi bianchi o fanno cambiare altezza alla presentazione.
- Tieni ognuna sotto i 500KB, altrimenti sui telefoni la presentazione si carica lentamente. Uno strumento gratuito come squoosh.app può ridurle.
- Spunta Esportare immagini ottimizzate in File > Modificare le impostazioni di pubblicazione, così EverWeb pubblica copie WebP più leggere.
Problemi comuni
| Cosa vedi | Cosa fare |
|---|---|
| Le foto cambiano dimensione o lasciano spazi bianchi | Rendile tutte della stessa dimensione in pixel. In un Image Slider, imposta Ritaglia immagine: su Fill |
| Una fila di piccole foto sotto lo slider | Togli la spunta da Mostra miniature |
| Il Carosello non si muove da solo | Riproduzione automatica è disattivata di partenza. Spuntala in Impostazioni riproduzione automatica |
| Vuoi che le foto scorrano senza fermarsi | Nessuna delle presentazioni integrate lo fa: ognuna si ferma su ogni diapositiva |
| In una galleria si vedono altre foto dietro la foto grande | Usa la Galleria di immagini reattive e imposta Colore di sfondo (lo sfondo della presentazione) |
| Troppo largo sul telefono | Spunta Larghezza piena in Ispettore > Metriche e toglilo da qualsiasi Riga dinamica |
Articoli correlati
- Come faccio ad aprire una finestra popup o ingrandire una foto quando qualcuno fa clic?
- Crea un sito web portfolio di fotografia o arte con EverWeb
- Crea una pagina responsive con i Contenitori, in modo che sul telefono si impili in modo ordinato
- Rendi leggibile il testo sopra una foto: sovrapposizioni, maschere e opzioni di riempimento immagine