Lightbox - Aiuto Webflow
Usa l'elemento lightbox per visualizzare immagini o video in una finestra modale a schermo intero.
Come creare un lightbox
Un lightbox è una miniatura cliccabile annidata in un blocco di collegamento. Quando i visitatori del sito cliccano all'interno dei confini del collegamento sul sito live, il lightbox si apre per visualizzare il media collegato. Puoi aggiungere un lightbox da Pannello Aggiungi > Avanzato.
Come funziona l'immagine segnaposto della miniatura del lightbox
Il lightbox contiene un elemento immagine che si comporta come qualsiasi altro elemento immagine. Puoi ridimensionarlo, fare doppio clic per sostituire l'immagine segnaposto della miniatura e aggiungere testo alternativo. Scopri di più sugli elementi immagine.
Puoi usare la stessa immagine per la miniatura del lightbox e la finestra modale più grande del lightbox. Webflow crea automaticamente varianti reattive per tutte le immagini inline. Scopri di più sulle immagini reattive.
Come sostituire la miniatura del lightbox con altri contenuti
Sostituisci l'elemento immagine segnaposto e trascina e rilascia altri contenuti (ad esempio, un'intestazione o qualsiasi altro elemento non di collegamento) all'interno del collegamento lightbox.
Puoi anche usare un blocco div e applicare un'immagine di sfondo per creare miniature di immagini di dimensioni uguali.
Come stilizzare il lightbox
Puoi stilizzare sia il link della lightbox che il suo contenuto. Ad esempio, se annidi elementi di testo nel tuo link della lightbox, puoi stilizzare la tipografia dell'elemento link della lightbox.
Come aggiungere media alla lightbox
Per aggiungere un'immagine e una didascalia alla finestra modale della lightbox:
- Seleziona il link della lightbox sulla tela
- Vai a Pannello impostazioni elemento > Impostazioni link lightbox > Media
- Clicca sull'icona “Aggiungi elemento alla lista”
- Scegli "Immagine" come Tipo
- Clicca su Sostituisci immagine
- Seleziona un'immagine dal Pannello risorse
- Aggiungi una Didascalia se necessario
Puoi aggiungere quante immagini vuoi a un link della lightbox. Queste immagini verranno visualizzate come una presentazione all'interno della finestra modale della lightbox.
Per aggiungere un video alla finestra modale della lightbox:
- Seleziona il link della lightbox sulla tela
- Vai a Pannello impostazioni elemento > Impostazioni link lightbox > Media
- Clicca sull'icona “Aggiungi elemento alla lista”
- Scegli "Video" come Tipo
- Aggiungi l'URL del video nel campo URL
- Aggiungi un Titolo se necessario
Lightbox per immagini e video - Tutorial di web design
Come creare lightbox dinamiche dai media dei campi Collection
Puoi creare lightbox dinamiche estraendo l'immagine in miniatura e/o i media della lightbox dai campi media delle Collection (cioè, un campo immagine, campo multi-immagine o campo video) nel tuo CMS o nelle Collection di Ecommerce.
Per collegare un campo Collection dinamico alla miniatura della lightbox:
- Aggiungi una lightbox a una lista Collection connessa dinamicamente o a una pagina Collection CMS
- Seleziona l'immagine segnaposto della miniatura
- Vai a Impostazioni elemento > Impostazioni immagine
- Clicca sull'icona "punto viola" nel campo Immagine
- Seleziona un campo immagine Collection
Poi, puoi collegare la lightbox al campo della Collezione, in modo che le immagini dinamiche della Collezione siano disponibili nella lightbox. Per collegare un campo dinamico della Collezione ai media della lightbox:
- Seleziona il link della lightbox
- Vai a Impostazioni elemento > Impostazioni link lightbox
- Clicca sull'icona del "punto viola" nel campo Media
- Seleziona un campo media della Collezione
Per collegare una lightbox a un campo multi-immagine:
- Aggiungi un elenco della Collezione a una pagina della Collezione
- Collega l'elenco della Collezione al campo multi-immagine cliccando sul menu a tendina Fonte e selezionando il campo multi-immagine
- Aggiungi una lightbox all'elenco della Collezione
- Seleziona l'elemento immagine nella lightbox
- Vai a Impostazioni elemento > Impostazioni immagine
- Clicca sull'icona del "punto viola" nel campo Immagine
- Seleziona il campo multi-immagine
- Seleziona il link della lightbox sulla tela
- Vai a Impostazioni elemento > Impostazioni link lightbox
- Clicca sull'icona del "punto viola" nel campo Media
- Seleziona il campo multi-immagine
Puoi anche collegare una lightbox a un campo multi-immagine quando la lightbox è aggiunta a elenchi di Collezioni o pagine di Collezioni.
Come collegare le lightbox usando i gruppi di lightbox
Puoi collegare più lightbox insieme per creare una galleria di diapositive. Quando un visitatore del sito clicca su una lightbox collegata, la lightbox aprirà tutti i media associati al gruppo collegato.
Come creare un gruppo di lightbox
- Seleziona qualsiasi elemento in una lightbox
- Vai a Impostazioni elemento > Impostazioni lightbox
- Inserisci un nome di gruppo nel campo Abbina o crea un nome di gruppo
Le lightbox che utilizzano lo stesso nome di gruppo sono collegate in un gruppo.
Per le lightbox negli elenchi di Collezioni, creare e collegare una lightbox in un elemento della Collezione collega automaticamente tutte le lightbox nell'elenco della Collezione.
Crea più gruppi di lightbox su una pagina
Se ci sono più lightbox sulla stessa pagina, puoi separarli assegnando a ciascun gruppo di lightbox un Nome gruppo diverso.