Impostare le immagini da aprire in una lightbox

Abilita gli effetti lightbox per aprire le immagini in sovrapposizione con uno sfondo oscurato.

Ultimo aggiornamento 30 gennaio 2025

Una lightbox è un effetto di design che permette di cliccare su un'immagine e aprirla in una sovrapposizione centrata, mentre il resto della pagina rimane sfocato. Si può chiudere la lightbox e tornare alla pagina cliccando sulla x nell'angolo superiore. Le lightbox sono un ottimo modo per evidenziare le immagini, e consentono ai visitatori di ingrandirle.

Guarda un video

Prima di iniziare

Cambiare il colore di sfondo della lightbox

Per le sezioni della galleria sulla versione 7.1, puoi creare uno stile della lightbox con qualsiasi colore nell'editor Temi sezione.

Nella maggior parte degli altri casi, è possibile scegliere una sovrapposizione Scura o Chiara per la lightbox nelle impostazioni dei blocchi o negli Stili del sito. Per ulteriori dettagli, vedere le sezioni su Blocchi immagine,Blocchi galleriae Pagine galleria.

Sezioni della galleria (versione 7.1)

Le sezioni Galleria nei layout a griglia della versione 7.1 hanno un'opzione lightbox negli stili di sezione. Per abilitare la lightbox:

  1. Fai clic su Modifica nella pagina, quindi passa il mouse sopra la sezione della galleria e fai clic sull'icona a forma di matita .
  2. Assicurati che il tipo di galleria sia impostato su Griglia: semplice, Griglia: strisce o Griglia: bacheca. I layout slideshow non supportano le funzionalità della lightbox.
  3. Attiva l'interruttore della Lightbox .
  4. Clicca su Salva per salvare il lavoro e continuare ad apportare modifiche, oppure clicca su Esci e poi su Salva per chiudere l'editor.

Per modellare lo stile della lightbox:

  1. Durante la modifica di una pagina, apri Stili sito, quindi clicca su Colori.
  2. Passa il mouse sul tema che corrisponde alla sezione della tua galleria e fai clic sull'icona a forma di matita.
  3. Nella sezione Gallerie, usa la funzione Sfondo Lightbox per scegliere il colore della lightbox.
  4. Per modificare il colore dei controlli di navigazione della lightbox, utilizza il tweak Icona Lightbox.
  5. Clicca su Salva per salvare il lavoro e continuare ad apportare modifiche, oppure clicca su Esci e poi su Salva per chiudere l'editor.

Ricorda:

  • Il testo della didascalia non viene visualizzato nella lightbox della sezione galleria.
  • Se aggiungi URL di click-through alle immagini e poi attivi la lightbox, cliccando sull'immagine si passa all'URL. La lightbox non si apre.

Blocchi immagine

I blocchi immagine supportano una lightbox nei seguenti casi:

Per attivare una lightbox:

  1. Aggiungi un Blocco immagine o clicca due volte su un Blocco immagine esistente per aprire l'editor di immagini.
  2. Clicca sulla scheda Design .
  3. Se il tuo blocco ha un'opzione di layout, assicurati che sia impostato su In linea. Altri layout non supportano una lightbox.
  4. Attiva l'interruttore della Lightbox .
  5. Scegli tra Sovrapposizione scura e Sovrapposizione chiara per selezionare lo stile della lightbox tramite il menu a discesa Tema Lightbox.

Ricorda:

  • Le didascalie vengono sempre visualizzate al passaggio del mouse sulle immagini lightbox, indipendentemente dall'opzione di visualizzazione delle didascalie scelte. Su dispositivi mobili, vengono visualizzate toccando l'icona del pallino.
    • I blocchi immagine aggiunti alle sezioni dell'Editor fluido non supportano le didascalie per le immagini. In alternativa, puoi utilizzare un blocco di testo per aggiungere del testo accanto o sovrapposto a un blocco immagine. Il testo non verrà visualizzato nella lightbox. 
  • Non è possibile abilitare una lightbox se si aggiunge un URL di click-through.
  • Per mantenere attivate le lightbox e collegare le immagini, aggiungi un link di testo alla descrizione dell'immagine. Per quanto riguarda i Blocchi immagine, considera che alcuni layout supportano l'utilizzo di pulsanti.

Blocchi della galleria a griglia

Dopo aver aggiunto le immagini a un Blocco galleria a griglia, clicca sulla scheda Design e seleziona Lightbox. Imposta lo stile dello slideshow della lightbox scegliendo Sovrapposizione scura o Sovrapposizione chiara dal menu a discesa.

Ricorda:

  • Le didascalie vengono sempre visualizzate al passaggio del mouse sulle immagini lightbox. Su dispositivi mobili, vengono visualizzate toccando l'icona del pallino.
  • I Blocchi galleria a slideshow, a carosello e a colonna non supportano una lightbox.
  • Se aggiungi URL di click-through e attivi la lightbox, cliccando sull'immagine si apre la lightbox anziché l'URL.
  • Affinché i video vengano aperti in una lightbox, assicurati di attivare l'opzione Usa miniatura nelle impostazioni dell'elemento.

Quando un Blocco riepilogo a bacheca o a griglia è collegato a una Pagina galleria, le immagini si aprono automaticamente come slideshow in una lightbox. Il colore della lightbox Blocco riepilogo è sempre scuro. Le didascalie vengono visualizzate al passaggio del mouse.

Lo slideshow lightbox influisce sugli URL di click-through:

  • Durante la visualizzazione della pagina, un clic sulle immagini con l'URL di click-through apre il link di click-through e non lo slideshow lightbox.
  • Quando lo slideshow lightbox è aperto, gli URL di click-through sono disabilitati.

Suggerimento

nei siti della versione 7.0 che supportano le lightbox, puoi abilitare l'apertura dei video aggiunti alle Pagine galleria in lightbox nei Blocchi riepilogo. Per farlo, attiva l'opzione Miniatura video nelle impostazioni elemento per i video presenti nella Pagina galleria. Se non lo fai, oppure se il modello non supporta le lightbox, i tuoi video vengono riprodotti nel Blocco riepilogo senza aprirsi in una lightbox.

Pagine galleria (versione 7.0)

Le Pagine Galleria di alcuni modelli sulla versione 7.0 supportano una funzione lightbox. Per le Pagine galleria standard, puoi impostare il colore della lightbox su Chiaro o Scuro in Stili sito. Le descrizioni dei video non vengono visualizzate nella lightbox.

Per imparare come funzionano le opzioni relative alla lightbox in queste famiglie di modelli, consulta la tabella riportata di seguito.

Famiglia di modelli Opzioni lightbox
Adirondack
  • Pagina galleria impostata su Griglia
  • Le didascalie delle immagini vengono visualizzate al passaggio del mouse
Avenue
  • Lightbox non supportata

Aviator

  • Pagina galleria impostata su Griglia
  • Gli URL di click-through disattivano una lightbox
  • Le didascalie delle immagini vengono visualizzate al passaggio del mouse

Bedford

  • Pagina galleria impostata su Griglia
  • Gli URL di click-through disattivano una lightbox
  • Le didascalie delle immagini vengono visualizzate al passaggio del mouse

Brine

  • Pagina galleria impostata su Griglia
  • Gli URL di click-through disattivano una lightbox
  • Le didascalie delle immagini vengono visualizzate al passaggio del mouse
  • Supportata nelle sezioni galleria della Pagina Indice solo per i video. Suggerimento: cliccando su un link nella didascalia del video si apre la lightbox, non il link.

Farro

  • Pagina galleria impostata su Griglia
  • Gli URL di click-through disattivano una lightbox
  • Le didascalie delle immagini vengono visualizzate al passaggio del mouse
Five
  • Pagina galleria impostata su Griglia
  • Gli URL di click-through disattivano una lightbox
  • Le didascalie delle immagini vengono visualizzate al passaggio del mouse
Flatiron
  • Lightbox non supportata
Forte
  • Clicca sull'icona + nell'angolo in alto a destra dell'immagine per aprire una lightbox
  • Disabilitata per la Pagina Indice
  • Le didascalie non vengono visualizzate
Galapagos
  • Pagina galleria impostata su Griglia
  • Gli URL di click-through disattivano una lightbox
  • Le didascalie delle immagini vengono visualizzate al passaggio del mouse
Ishimoto
  • Lightbox non supportata
Momentum
  • Lightbox non supportata

Montauk

  • Lightbox non supportata
Native
  • Pagina galleria impostata su Griglia
  • Gli URL di click-through disattivano una lightbox
  • Le didascalie delle immagini vengono visualizzate al passaggio del mouse

Pacific

  • Pagina galleria impostata su Griglia
  • Gli URL di click-through disattivano una lightbox
  • Le didascalie delle immagini vengono visualizzate al passaggio del mouse
  • Supportata nelle sezioni galleria a griglia della Pagina Indice

Skye

  • Pagina galleria impostata su Griglia
  • Gli URL di click-through disattivano una lightbox
  • Disabilitata per la Pagina Indice
  • Le didascalie delle immagini vengono visualizzate al passaggio del mouse
Supply
  • Lightbox non supportata

Tremont

  • Lightbox non supportata
Wells
  • Lightbox non supportata
Wexley
  • Clicca su un'immagine per aprire una slideshow in una lightbox
  • Lightbox disabilitata su dispositivi mobili
  • Le didascalie non vengono visualizzate

York

  • Pagina galleria impostata su Griglia
  • Gli URL di click-through disattivano una lightbox
  • Le didascalie delle immagini vengono visualizzate al passaggio del mouse
Footer Image
  • Ricevi assistenza dalla nostra community

  • Ricevi assistenza dalla nostra community in merito alle personalizzazioni avanzate.

  • Affidati a uno Squarespace Expert

  • Fatti notare online con l'aiuto di un designer o di uno sviluppatore esperto.