L’aggiunta di una galleria con effetto lightbox mette in bella mostra le immagini, consentendo di visualizzarle in un formato più grande.
Questo migliora l’interazione con l’utente, in quanto i visitatori possono vedere le immagini senza spostarsi dalla pagina, e rende il contenuto del sito più dinamico.
Tuttavia, il blocco galleria predefinito di WordPress non supporta le lightbox.
Negli ultimi anni abbiamo utilizzato Envira Gallery per creare gallerie di immagini con effetti lightbox sui nostri siti di prova e durante la realizzazione dei siti web dei clienti.
Abbiamo riscontrato che è incredibilmente facile da usare per i principianti e affidabile, in quanto consente a chiunque di creare splendide gallerie senza avere molte conoscenze tecniche.
In questo articolo vi mostreremo come aggiungere facilmente una galleria in WordPress con un effetto lightbox, passo dopo passo.
Perché aggiungere l’effetto Lightbox nelle gallerie di WordPress?
Aggiungendo un effetto lightbox reattivo alle gallerie del vostro sito WordPress, potrete mostrare le vostre immagini in modo più professionale. Questo effetto consente di visualizzare le foto in una finestra pop-up sul vostro sito web quando un utente fa clic su di esse.
I lightbox contribuiscono a creare un’esperienza di visualizzazione più coinvolgente per i visitatori e facilitano persino la condivisione delle immagini sui social media o il loro download sul computer.
Se avete un sito web di fotografia, l’aggiunta di un effetto lightbox consentirà agli utenti di visualizzare le vostre immagini ad alta risoluzione in una modalità priva di distrazioni, aumentando il coinvolgimento.
Allo stesso modo, se avete un negozio WooCommerce, l’aggiunta di un effetto lightbox alle vostre gallerie di prodotti può aiutare i clienti a vedere il prodotto da vicino e a prendere una decisione informata.
Detto questo, vediamo come aggiungere facilmente una galleria di immagini su WordPress con effetto lightbox, passo dopo passo.
Come aggiungere una galleria di WordPress con un effetto lightbox
Potete aggiungere facilmente una galleria WordPress con effetto lightbox utilizzando Envira Gallery.
È il miglior plugin per gallerie di WordPress che consente di creare gallerie di immagini completamente reattive e moderne per il vostro sito web.
Envira Gallery è anche super veloce e dispone di un costruttore drag-and-drop, di modelli di galleria professionali e di molte funzioni, tra cui l’aggiunta di tag, audio, condivisione sociale e lightbox.
Innanzitutto, è necessario installare e attivare il plugin Envira Gallery. Per istruzioni dettagliate, consultare la nostra guida passo passo su come installare un plugin di WordPress.
Nota: Envira Gallery dispone anche di un plugin gratuito che è possibile utilizzare per questa esercitazione. Tuttavia, l’aggiornamento al piano a pagamento vi darà accesso a più funzioni.
Dopo l’attivazione, visitare la pagina Envira Gallery ” Impostazioni dalla barra laterale dell’amministrazione di WordPress per inserire la chiave di licenza.
È possibile ottenere queste informazioni dal proprio account sul sito web di Envira Gallery.
Successivamente, visitate la pagina Envira Gallery ” Add New dalla dashboard di WordPress per iniziare a creare la vostra nuova galleria.
Da qui, digitare un titolo per la galleria di immagini. Quindi, fare clic sul pulsante “Seleziona i file dal computer” per caricare le immagini. Se si desidera aggiungere immagini della mediateca alla galleria, fare clic sul pulsante “Seleziona file da altre fonti”.
In questo modo si avvia la libreria multimediale da cui è possibile caricare le immagini della galleria. Ricordate che è possibile caricare solo un’immagine alla volta dalla libreria multimediale.
Una volta fatto ciò, scorrere verso il basso fino alla sezione “Attualmente nella tua galleria”. Qui si vedrà un’anteprima della galleria sulla destra e le impostazioni nella colonna di sinistra.
A questo punto, fare clic sull’icona della matita in cima a ciascuna immagine per aprire la richiesta “Modifica metadati” sullo schermo.
Da qui è possibile aggiungere la didascalia, lo stato, il titolo e il testo alt per le singole immagini.
Quindi, non dimenticate di fare clic sul pulsante “Salva metadati” per memorizzare le impostazioni.
Quindi, passare alla scheda “Configurazione” dalla colonna di sinistra per modificare il layout della galleria secondo i propri gusti. Da qui è possibile selezionare un layout, il numero di colonne, le dimensioni delle immagini, le dimensioni, i temi e altro ancora.
Per istruzioni dettagliate, consultate la nostra guida per principianti su come creare una galleria di immagini in WordPress.
Una volta fatto ciò, passare alla scheda “Lightbox” dalla colonna di sinistra e selezionare l’opzione “Enable Lightbox?”.
Quindi, selezionare un tema lightbox dal menu a discesa “Gallery Lightbox Theme”. Se si sceglie l’opzione ‘Legacy’, il prompt dell’effetto lightbox avrà un layout più vecchio.
Scegliendo l’opzione “Base (scura)”, la richiesta di lightbox avrà come layout una base scura.
Successivamente, è necessario selezionare se si desidera visualizzare il titolo dell’immagine o la sua didascalia nella richiesta di lightbox. È anche possibile visualizzarli entrambi o nessuno, se si desidera.
Una volta fatto ciò, scegliere le dimensioni dell’immagine per la lightbox dal menu a discesa.
Quindi, selezionare l’opzione “Abilita le frecce della galleria”. Il prompt della lightbox mostrerà ora due frecce che gli spettatori potranno usare per passare a diverse immagini della galleria.
È inoltre possibile configurare altre impostazioni per la lightbox, tra cui l’effetto di transizione, l’effetto di apertura/chiusura, l’abilitazione del lightbox supersize e altro ancora.
Una volta terminato, non dimenticate di fare clic sul pulsante “Pubblica” in alto per memorizzare le modifiche.
Per aggiungere la galleria di immagini a una pagina/post di WordPress, aprire la pagina nell’editor dei blocchi.
A questo punto, è necessario fare clic sul pulsante Aggiungi blocco ‘+’ nell’angolo in alto a sinistra dello schermo per aprire il menu dei blocchi. Quindi, aggiungere il blocco Galleria Envira alla pagina/post.
Successivamente, selezionare la galleria di immagini appena creata dal menu a discesa del blocco stesso. Infine, fare clic sul pulsante “Aggiorna” o “Pubblica” per memorizzare le impostazioni.
Ora, potete visitare il vostro blog WordPress per visualizzare la galleria di immagini e poi fare clic su qualsiasi immagine per vedere l’effetto lightbox.
Alternativa: Utilizzare NextGen Gallery per creare portfolio e gallerie di immagini in WordPress
Envira Gallery è l’opzione migliore per aggiungere immagini lightbox al vostro sito WordPress. In alternativa, potete utilizzare NextGEN Gallery per creare gallerie e portfolio completamente reattivi e gradevoli alla vista sul vostro sito WordPress.
NextGEN Gallery è la migliore alternativa a Envira Gallery perché supporta un’ampia gamma di tipi di galleria, dispone di funzioni per l’e-commerce e consente di aggiungere filigrane, lightbox, commenti alle immagini e altro ancora.
Inoltre, NextGEN Gallery consente di accettare pagamenti online tramite Stripe o PayPal, facilitando la vendita delle immagini online.
È un plugin per gallerie avanzato con funzioni per fotografi professionisti, grafici e artisti visivi, che lo rendono uno dei migliori plugin per portfolio WordPress sul mercato.
Per istruzioni dettagliate, potete consultare il nostro tutorial su come aggiungere un portfolio al vostro sito WordPress.
Speriamo che questo articolo vi abbia aiutato a capire come aggiungere facilmente una galleria WordPress con un effetto lightbox. Potreste anche voler consultare la nostra guida per principianti su come fare l’editing di base delle immagini in WordPress e le nostre scelte di esperti sui migliori strumenti per creare immagini migliori per i vostri post sul blog.
Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.
Jiří Vaněk
Thanks for recommending Envira Gallery. I make websites on Elementor, and apart from Elemenotr, I only knew NextGen gallery, which does not completely meet my requirements. I will definitely give the plugin a try and probably replace the NextGen Gallery I’ve been using with it.
Muhammad Danial Emran
Hi, I want to ask if using a lightbox effect will affect my website speed.
WPBeginner Support
It should not cause your site to slow down.
Admin
Ahmed Omar
thank you for the post, but here a question would it make difference if I used Using the WordPress Block Editor to add photo gallery than using Envira ?
WPBeginner Support
Envira has more tools and customization options than the default gallery
Admin
E
I’m so glad I found this article and this website. Love you guys right now!
Lynsey
I love you! Is there any way to make the thumbnails smaller?
Editorial Staff
Yes. Go to Settings > Media. Edit the thumbnail size. Then download a plugin called Regenerate thumbnails. Run that plugin, and thats it.
http://wordpress.org/extend/plugins/regenerate-thumbnails/
Admin
Sandeep Singh
I am really Thankful for the suggestion to add Lightbox effect to the gallery. I really appretiate such kind of support and hope same for the future.
Mike
Hello,
This is great, one question though is there a plugin or anything that is out there to make the gallery into a slideshow. For example say the first attached images shows up large and below are the thumbs of all the image in the gallery and you can click on a image to change the large image rather than a lightbox effect.
Thanks,
Mike
Editorial Staff
Not sure if a plugin like that exists.
Admin
Renee
Pretty sure that Fancybox plugin does that. You can enable or disable lightbox and thumbnails.
Emma Beatty Howells
Thanks for a great solution I am new to all this and am trying to work out the easiest way to manage photogalleries on line – this keeps it simple and elegant! Something else I found useful was an App that watermarks photos with the minimum of fuss… ‘ImageBucket’.
Tiaan
Thanks, works like a bomb!
Michael
Seems easy enough. Is there a way to have captions under each picture? Also, when it opens to a lightbox, is there a way to have descriptive text in the lightbox with the image?
Editorial Staff
This plugin should be able to do what you are looking for: http://wordpress.org/extend/plugins/gallery-and-caption/
Admin
Alex
I have a banner at the top of my website which displays a picture. When it opens the lightbox, the banner still appears over it. Is there any way, a code or something, which will stop this?
Thanks
Alex
Editorial Staff
Probably happening because your banner has a very high z-index value set. Lower that value in your CSS. There are a lot of CSS tutorials covering z-index on the web.
Admin
JulieBozza
This is a really cool solution, thank you! So much quicker and neater than what I was doing…
Is there a way, however, to choose which of the images appears as the main thumbnail? That is, the thumbnail that appears in the ‘feed’ before you open up the individual post.
Thank you in anticipation!
wpbeginner
@JulieBozza The thumbnail for the post is selected by using Featured Image feature. In your post editor, look at the right hand side, below publish button there should be a box in that line called Featured image.
JulieBozza
@wpbeginner Hello! Thanks for the reply. Unfortunately when I do that, it changes the banner image, but has no effect on the thumbnail in the post. I’m using the Twenty Eleven WordPress theme, so perhaps it’s giving the banner the priority, as it were.
wpbeginner
@JulieBozza You are referring to these gallery thumbnail images right???
JulieBozza
@wpbeginner LOL! Yes. I created the gallery post exactly as described above.
I don’t know if it would help to visit the post itself, but here’s the URL. Keep in mind that the site is a work in progress!
http://rupertfyoung.com/2011/09/pierrefonds-september-2011/
wpbeginner
@JulieBozza The gallery works like it should.
http://rupertfyoung.com/category/gallery/ << If you are referring to the thumbnail image here, then that is controlled by your Featured Image or the first attachment I believe. Upload a featured image that is low in width (thumbnail size or something)… And it will not take over the header image.
wpbeginner
@ukdazza The problem is with your site rather than this plugin. jQuery issues like these are very common. There is another jQuery that is causing this plugin to not work. You would have to change positions of the other jQuery code.
This is a game of trial and error when you encounter problems like these.
ukdazza
I’m having a problem where we’re using slickr flickr plugin to create thumbnail galleries with lightbox features. However the lightbox isn’t working at all. According to the notes I can find online about this kind of problem with this plugin, it is likely there is more than one lightbox or more than one jQuery running – causing it to not run properly.
Lightbox doesn’t work. If you click a thumbnail it opens the image in the browser, which is rubbish.
Any ideas? I hoped you or someone might have an idea because I tried to install this plugin and it said the destination was already taken.
TGA
Wow. Thank you SO much. I was using NextGEN gallery, but wasn’t allowed to let my client have galleries with thumbnails of various sizes. (Dumb). So I realized using the native gallery that would be possible, but then Highslide wouldn’t create a thumbnail viewer like it would with NextGEN. Point being, this was a lifesaver! It may not be perfect, but it’s A solution and now I can move on with the project!
wpbeginner
@TejSanusi✔ This plugin has a way for users to view the next image as part of the same lightbox.
TejSanusi✔
Is there anyway to create a lightbox gallery that is enabled from one thumbnail. When the user clicks on the thumbnail, the lightbox is created, with a series of gallery images?
cata
Is quite interesting the plugin mentioned in the article. I have also tested with good results this one http://wordpress.org/extend/plugins/lightbox-gallery/
Chris
Thanks for the great writeup. I found this extremely useful. I do have a question though. What if I had a pretty large gallery of about 40 or 50 pics and I only wanted one of them displayed in the post and then when someone clicks on it they’d be able to scroll through the entire gallery? Is this possible? I’d rather not have all 40 pics displayed in my post and I think this would be useful.
Thanks!
Keith Davis
Nice one boys.
Never knew that Wordpress had a gallery function… do you guys know everything?
Might actually use this one day.
jonathan perrodin
Hey thanks for this, I’ve been wanting to get this on my site, but was too lazy to look for a plugin that did it simply. This was perfect.
Mike Roberts
I am an artist and illustrator and I continue to be disappointed by the options for displaying a gallery of images in WordPress. I live in hope that, sometime soon, some bright coder will answer my plea!
Gretchen
I didn’t realize how hard it was to find a lightbox plugin that used the native WordPress gallery function until I started looking for one! I ended up with http://wordpress.org/extend/plugins/lightbox-plus/ because of its ability to specify via shortcode in each post/page gallery whether it was to use the lightbox setting or not. I actually like to use the attachment pages sometimes, and needed a lightbox plugin that would allow me to choose when to use it. I’d be curious to hear if anyone else has found another lightbox plugin with that feature.
Bronson
Thanks for the information.
It’s great to be able to apply the lightbox effect to native galleries trather than having to go and manually recreate them.
Sonu
How this works ? and do we need a lightbox class to every image on gallery ?
Editorial Staff
No you don’t need to lightbox class every image on the gallery. It automatically does that for all images in the gallery. The class should be added on any other image that you have aside from the gallery..
Admin
Binoy
The problem here is all the images in post show up on gallery. Any options to select images?
Editorial Staff
No that is not possible yet.
Admin
Leo
Hi! To select the images to show in the gallery try this plugin: Multiple Galleries, you can find it here > http://goo.gl/kNFer
Bye!
Editorial Staff
Thanks for sharing this plugin. Updating the article to add this
Preston
Each image should have some kind of wordpress number associated with it. I exclude images in the gallery with this code, hopefully it works for you:
[gallery link="file" exclude="Photo#, Photo#, Photo#"]