Ricordo ancora quando ho creato uno dei miei primi siti portfolio e ho passato ore a sistemare le foto. Un amico mi fece notare che non poteva cliccare per vedere i dettagli del mio lavoro, e mi resi conto di aver saltato un passaggio fondamentale che stava compromettendo l'esperienza utente.
È un piccolo dettaglio che fa una grande differenza in quanto professionale appare un sito. Quando i visitatori non possono ingrandire le foto dei prodotti o i pezzi del portfolio, si crea un'esperienza frustrante.
Ora che ho impostato questa funzionalità su diversi siti web, ho scoperto che far ingrandire le immagini al clic è uno dei modi più veloci per migliorare il coinvolgimento dei visitatori. È una soluzione semplice che aggiunge un tocco rifinito e di alta qualità a qualsiasi sito.
In questa guida, ti illustrerò tre metodi semplici per rendere le tue immagini cliccabili. Tratteremo tutto, dalla semplice funzionalità predefinita ai plugin per gallerie più avanzati, senza bisogno di codice.
Perché ingrandire le immagini al clic in WordPress?
Consentire ai visitatori di cliccare per ingrandire le immagini sul tuo sito web WordPress li aiuta a vedere i dettagli importanti da vicino.
È un semplice aggiornamento che aggiunge un tocco professionale e curato, specialmente per portfolio, annunci immobiliari e gallerie fotografiche.
Inoltre, può essere utile per i negozi online dove i clienti vogliono esaminare attentamente i tuoi prodotti prima di decidere di acquistarli.
WordPress include una funzionalità di base "Ingrandisci al clic" per impostazione predefinita. Apre l'immagine direttamente sulla pagina, senza alcun oscuramento dello sfondo o effetto visivo.
Questo funziona bene per blog semplici o pagine interne, ma sembra un po' anonimo e non offre molto controllo.
Se desideri qualcosa di più moderno e curato, allora un plugin per lightbox di immagini è una scelta migliore.
Invece di espandere semplicemente l'immagine, si apre in una sovrapposizione elegante che oscura lo sfondo e mantiene lo spettatore concentrato. Ottieni anche un maggiore controllo su come l'immagine appare e funziona.
Prima di mostrarti questi diversi metodi, c'è un'altra cosa da tenere a mente: la qualità dell'immagine. Quando qualcuno fa clic per ingrandire una foto, si aspetta una versione chiara e ad alta risoluzione. Ma i file di immagini di grandi dimensioni possono rallentare il tuo sito.
È qui che entra in gioco l'ottimizzazione delle immagini. Comprimendo le tue immagini senza abbassarne la qualità visibile, puoi mantenere le dimensioni dei file piccole e il tuo sito veloce.
Ciò significa che puoi utilizzare immagini con grandi dimensioni (come 1500px di larghezza) che appaiono fantastiche quando ingrandite, senza compromettere le prestazioni.
Per aiuto, consulta la nostra guida su come ottimizzare le immagini per il web.
In questo articolo, condividerò 3 metodi diversi che possono ingrandire le tue immagini di WordPress quando vengono cliccate, incluse alcune opzioni lightbox.
Puoi usare i collegamenti rapidi qui sotto per passare al metodo che desideri utilizzare:
- Metodo 1: Utilizzo della funzionalità predefinita di WordPress (Semplice)
- Metodo 2: Utilizzo di un plugin Lightbox (Maggiore personalizzazione)
- Metodo 3: Utilizzo di un plugin Galleria (Ideale per più immagini)
- Domande frequenti sull'ingrandimento delle immagini in WordPress
- Risorse bonus: Gestisci e migliora le tue immagini di WordPress
Metodo 1: Utilizzo della funzionalità predefinita di WordPress (Semplice)
Dopo aver testato diversi modi per ingrandire le immagini, ho scoperto che la funzionalità integrata di WordPress è perfetta per esigenze semplici.
Ho usato questo metodo quando creavo documentazione o scrivevo articoli tecnici. È particolarmente utile quando hai bisogno che i lettori vedano piccoli dettagli negli screenshot o esaminino più da vicino parti specifiche di un'immagine.
Lo svantaggio principale è che non è una vera lightbox. Ingrandisce semplicemente l'immagine e non puoi personalizzare l'aspetto o aggiungere effetti accattivanti.
Passaggio 1: Aggiungi la tua immagine nell'editor di WordPress
Innanzitutto, devi creare o aprire il post in cui desideri aggiungere l'immagine cliccabile.
Quindi, nell'editor a blocchi, fai clic sull'icona (+) per aggiungere un nuovo blocco e scegli 'Immagine' dalle opzioni del blocco. Una volta fatto, vedrai i pulsanti per aggiungere un'immagine in 3 modi diversi: Carica, Libreria multimediale o Inserisci da URL.
Su WPBeginner, utilizziamo sempre l'opzione 'Libreria multimediale'. Questo garantisce che il titolo e il testo alternativo che aggiungiamo all'immagine siano disponibili se la riutilizziamo in altri articoli.
Suggerisco di evitare ‘Inserisci da URL’. Esso hotlinka un'immagine su un altro sito web, il che significa che l'immagine potrebbe scomparire dal tuo sito se l'originale venisse rimosso.
Passaggio 2: Imposta l'opzione ‘Ingrandisci al clic’
Dopo aver aggiunto la tua immagine al post o alla pagina, puoi cliccarci sopra per visualizzare le impostazioni dell'immagine.
Con l'immagine selezionata, fai clic sull'icona ‘Inserisci link’ nella barra degli strumenti del blocco. Nelle impostazioni che appaiono, attiva semplicemente l'opzione etichettata ‘Ingrandisci al clic’.
Passaggio 3: Configura le impostazioni dell'immagine
Ora che hai abilitato la funzione di ingrandimento al clic, potresti voler personalizzare le impostazioni dell'immagine originale per garantire la migliore qualità di visualizzazione all'interno del tuo post o della tua pagina.
Seleziona la tua immagine e quindi controlla il pannello delle impostazioni del blocco sul lato destro dello schermo.
Puoi controllare l'aspetto dell'immagine sulla pagina regolando le dimensioni dell'immagine. Tuttavia, questa è solo la dimensione di visualizzazione.
Quando un visitatore clicca sull'immagine, vedrà l'immagine originale ad alta risoluzione che hai caricato nella tua Libreria multimediale. Quindi, assicurati di caricare un'immagine di alta qualità larga almeno 1500 pixel. Ricorda solo di ottimizzarla prima, come abbiamo discusso in precedenza, per mantenere veloce il caricamento della tua pagina! 😉
Passaggio 4: Anteprima della tua immagine e Pubblicazione dei tuoi contenuti
Prima di pubblicare il tuo post o la tua pagina con l'opzione immagine ‘ingrandisci al clic’ abilitata, vorrai visualizzarla in anteprima per assicurarti che funzioni.
Per fare ciò, fai clic sul pulsante Visualizza nell'angolo in alto a destra del tuo editor e seleziona ‘Anteprima in una nuova scheda’.
Ti consiglio di testarla in ogni opzione di visualizzazione, specialmente ‘Mobile’, dato che molte persone usano smartphone in questi giorni.
Con l'effetto immagine ‘ingrandisci al clic’ applicato, dovrebbe espandersi sulla stessa pagina, come visto nell'esempio qui sotto. Quanto si espande dipende dalle dimensioni dell'immagine originale che hai caricato.
Clicca semplicemente sull'immagine per riportarla alle dimensioni normali.
Sebbene questa funzionalità integrata sia rapida e semplice, manca dell'elegante sovrapposizione che molti siti professionali utilizzano. Se stai cercando quell'effetto 'lightbox' rifinito che attenua lo sfondo e fa risaltare le tue immagini, il nostro prossimo metodo è quello che fa per te.
Metodo 2: Utilizzo di un plugin Lightbox (Maggiore personalizzazione)
A differenza della funzionalità base di WordPress, un plugin lightbox crea un'esperienza molto più professionale. Quando un utente fa clic su un'immagine, questa si apre in un elegante overlay che attenua il resto della pagina, facendo risaltare la tua immagine.
Consiglio il plugin gratuito Simple Lightbox perché ti permette di aggiungere animazioni fluide, temi personalizzabili e funzionalità di slideshow che fanno risaltare le tue immagini. È leggero e funziona automaticamente con tutte le tue immagini una volta attivato.
Passaggio 1: Installa e attiva il plugin Simple Lightbox
Per iniziare, devi installare e attivare il plugin Simple Lightbox.
Se hai bisogno di aiuto con questo processo, leggi la nostra guida su come installare i plugin di WordPress.
Passaggio 2: Configura le impostazioni di Simple Lightbox
Dopo aver attivato il plugin, è una buona idea andare su Aspetto » Lightbox e rivedere le sue impostazioni per assicurarsi che tutto sia configurato come desideri.
Qui troverai le impostazioni di Lightbox che ti permettono di regolare dove vuoi abilitare la funzionalità lightbox. Questo può essere sulla home page, sui singoli post, sulle pagine e altro ancora.
Di solito mi attengo alle impostazioni predefinite poiché funzionano benissimo per la maggior parte dei siti web.
Successivamente, scorri verso il basso fino alle impostazioni 'UI'. Queste controllano l'aspetto e la sensazione del lightbox.
Per impostazione predefinita, il plugin utilizzerà un tema chiaro, ma puoi passare alla modalità scura se preferisci. Puoi anche regolare l'opacità dell'overlay, che controlla quanto la pagina di sfondo viene oscurata quando un'immagine è aperta, e abilitare le animazioni per cambiare il modo in cui l'immagine si apre.
Sentiti libero di giocare con queste impostazioni e non dimenticare di fare clic su 'Salva modifiche' quando hai finito.
Passaggio 3: Aggiungi la tua immagine e abilita il lightbox
Ora, testiamo la funzionalità lightbox. Crea o apri semplicemente un post e aggiungi un'immagine.
Una volta che la tua immagine è nell'editor, puoi aggiungere una didascalia digitando direttamente nel campo 'Aggiungi didascalia' che appare appena sotto l'immagine.
Se non aggiungi una didascalia, il plugin utilizzerà automaticamente il titolo dell'immagine dalla Libreria multimediale. Tuttavia, trovo che l'uso del campo didascalia ti dia un controllo più diretto.
Successivamente, con l'immagine ancora selezionata, devi fare clic sull'icona 'Link' nella barra degli strumenti e selezionare l'opzione 'Link al file immagine'. Questo è un passaggio fondamentale che consente al plugin Simple Lightbox di funzionare.
Una volta fatto ciò, il plugin rileverà automaticamente il link e applicherà il suo effetto lightbox quando un visitatore fa clic sull'immagine.
💡 Nota: Puoi anche utilizzare Simple Lightbox per un'intera galleria di immagini. Basta creare una galleria di immagini utilizzando l'editor a blocchi e quindi seguire i passaggi descritti in questo metodo per aggiungere la funzionalità lightbox a ciascuna immagine.
Passaggio 4: Testa il tuo Lightbox
Ora, testiamo la funzionalità lightbox visualizzando in anteprima il post. Fai semplicemente clic sull'opzione Visualizza nell'angolo in alto a destra e quindi seleziona 'Anteprima in una nuova scheda'.
Una volta aperta la nuova scheda, procedi e fai clic sull'immagine. Dovresti vederla aprirsi fluidamente in un overlay lightbox con uno sfondo scurito.
A seconda delle impostazioni di design, vedrai il lightbox in un tema chiaro o scuro. Ecco come appare il tema chiaro.
Il tema chiaro circonda la foto con una cornice bianca, che crea un buon contrasto con lo sfondo scurito.
Ora ecco come appare il tema scuro.
Dovresti anche vedere la didascalia della tua immagine nell'angolo in basso a sinistra della lightbox.
Raccomando anche di visualizzare in anteprima la tua lightbox su altre dimensioni dello schermo per assicurarti che sia bella su ogni dispositivo.
Puoi farlo tornando all'opzione Visualizza e selezionando l'opzione 'Desktop', 'Tablet' o 'Mobile'. Dopodiché, fai clic su 'Anteprima in una nuova scheda'.
Metodo 3: Utilizzo di un plugin Galleria (Ideale per più immagini)
Se hai mai voluto mettere in risalto più immagini, allora i plugin per gallerie sono senza dubbio la soluzione migliore. Aiutano a organizzare e mostrare una serie di immagini con funzionalità di ingrandimento delle immagini senza rallentare il tuo sito.
Questi plugin possono migliorare l'interazione dell'utente rendendo i tuoi contenuti più coinvolgenti e visivamente accattivanti, offrendo ai visitatori un'esperienza fluida nella navigazione tra le tue immagini.
Raccomando Envira Gallery perché ti permette di creare gallerie belle e personalizzabili che hanno un bell'aspetto su qualsiasi dispositivo. È anche super facile per i principianti.
Inoltre, include funzionalità di performance come il caricamento lazy per assicurarti che le tue gallerie non rallentino il tuo sito. E il suo strumento AI può aiutarti a creare immagini personalizzate direttamente all'interno di WordPress.
Soprattutto, il plugin offre un'impostazione lightbox con molte opzioni di personalizzazione. In questo modo, puoi ottenere tutti i vantaggi della funzionalità di ingrandimento dell'immagine al clic, oltre ad alcune fantastiche impostazioni per layout, transizioni della galleria e molto altro.
Vuoi saperne di più su cosa può fare il plugin? L'abbiamo testato a fondo in passato e puoi consultare la nostra recensione completa di Envira Gallery per maggiori informazioni.
📝 Nota: Sebbene esista una versione gratuita di Envira Gallery, consiglio la versione Pro per funzionalità avanzate come il lightbox SuperSize, Envira AI e strumenti di condivisione social. La versione gratuita include tutte le funzionalità essenziali del lightbox di cui avrai bisogno per iniziare!
Ora, esamineremo i passaggi per utilizzare Envira Gallery per aggiungere una funzionalità lightbox.
Passaggio 1: Installa e attiva il plugin Envira Gallery
Iniziamo installando il plugin sul tuo sito. In questo tutorial, userò la versione gratuita, oppure puoi acquistare una licenza Pro dal sito web di Envira Gallery.
Successivamente, installalo e attivalo seguendo la nostra guida su come installare un plugin WordPress. Una volta attivato il plugin, la procedura guidata di configurazione di Envira dovrebbe avviarsi immediatamente.
Da qui, fai clic sul pulsante ‘Inizia’ per avviare il processo.
Ci sono 5 passaggi in questa procedura guidata.
Durante la configurazione, puoi scegliere la categoria che descrive la tua attività o il tuo sito web (come fotografo o proprietario di un'attività) e selezionare le funzionalità della galleria che desideri aggiungere.
Consiglio di continuare con le impostazioni predefinite suggerite perché di solito offrono tutto ciò di cui hai bisogno. Tuttavia, se hai un piano Pro, potrai attivare funzionalità più avanzate.
Tieni presente che l'opzione ‘Lightboxes’ dovrebbe essere già selezionata, quindi questa funzionalità sarà automaticamente abilitata.
Una volta terminata la procedura guidata di configurazione, dovrai comunque attivare la tua licenza pro se ne hai acquistata una. Per farlo, vai su Envira Gallery » Impostazioni e incolla la tua chiave di licenza nel campo. Quindi, fai clic su ‘Verifica chiave’.
Passaggio 2: Crea una nuova galleria
Per creare la tua prima galleria, vai su Envira Gallery » Aggiungi nuova nella tua dashboard.
Innanzitutto, aggiungi un titolo in cima alla pagina. Consiglio di dargli un nome chiaro e descrittivo in modo che sia più facile da tenere traccia in seguito.
Successivamente, noterai 3 opzioni per aggiungere immagini: Galleria nativa Envira, Gallerie da altre fonti e Crea con Envira AI.
Consiglio di iniziare con la Galleria nativa Envira. È il modo più semplice per caricare direttamente le tue immagini.
💡 Hai bisogno di immagini originali velocemente? Puoi anche creare le tue immagini personalizzate con Envira AI. Questa funzionalità rende facile generare immagini uniche su richiesta. Tutto quello che devi fare è creare una breve descrizione dell'immagine, scegliere tra i risultati e aggiungerla alla tua galleria con un singolo clic.
Procedi e seleziona le immagini che desideri includere. Puoi aggiungerne quante ne vuoi mantenendo la dimensione massima del file di caricamento al di sotto di 256 MB.
Passaggio 3: Configura le opzioni della galleria e della light-box
Nel menu a sinistra delle immagini della tua galleria, troverai le impostazioni della galleria di Envira.
Ci sono schede per la configurazione generale, la funzione light-box, le impostazioni per dispositivi mobili e altro ancora. Esaminiamole una per una.
Puoi scegliere il layout della tua galleria in cima alla sezione 'Configurazione'. Il layout a griglia funziona benissimo per la maggior parte delle gallerie, ma sentiti libero di sperimentare con altre opzioni.
Scorrendo verso il basso, puoi trovare altre opzioni di impostazione della galleria.
Ad esempio, puoi abilitare il caricamento lazy, impostare un layout automatico e aggiungere una descrizione della galleria.
Ad esempio, potresti voler impostare layout automatici per garantire che la tua galleria appaia ordinata e organizzata senza sforzo aggiuntivo.
💡 Suggerimento Pro: Ti consiglio di abilitare l'opzione di caricamento lazy. Questa funzione aiuta la tua galleria a caricarsi più velocemente caricando le immagini solo quando i visitatori scorrono la pagina. Aiuta anche a ottimizzare la velocità del tuo sito.
Successivamente, passa alla scheda 'Lightbox'. Ricorda, questa funzione dovrebbe essere abilitata per impostazione predefinita, ma se non lo è, seleziona la casella accanto a 'Abilita Lightbox?'.
Quindi, vorrai selezionare un 'Tema Lightbox Galleria'. Questo determinerà l'aspetto generale della tua light-box.
Le tue opzioni dipenderanno dal tuo piano Envira e se hai l'addon Gallery Themes. Ma dovresti essere in grado di scegliere tra un tema scuro, chiaro o legacy.
Più in basso nella scheda 'Lightbox', puoi scegliere come appaiono le tue immagini ingrandite, selezionare gli effetti di transizione e decidere se mostrare i titoli delle immagini.
Quindi, puoi trovare altre impostazioni della light-box nella seconda metà della pagina.
Ad esempio, puoi abilitare le frecce di navigazione, il loop infinito delle immagini o la modalità ingrandimento. Puoi persino aggiungere effetti interessanti per quando le persone aprono o chiudono la tua galleria, e quando ci cliccano attraverso.
Ad esempio, per ‘Effetto transizione Lightbox’, puoi scegliere opzioni divertenti come Dissolvenza, Scorrimento, Circolare, Tubo, Rotazione e altro ancora.
Successivamente, ti consiglio di andare alla scheda ‘Mobile’ per configurare sia le impostazioni generali che quelle della lightbox.
Poiché molti dei tuoi visitatori probabilmente visualizzeranno la tua galleria sui loro telefoni, è importante assicurarsi che sia bella anche su schermi più piccoli.
Oltre ad attivare la funzione lightbox per i dispositivi mobili, puoi personalizzare le impostazioni specifiche per i dispositivi mobili come le dimensioni del lightbox, le altezze delle righe e la visualizzazione del titolo o della didascalia.
Scorrendo verso il basso, scoprirai altre opzioni, tra cui funzionalità come lo scorrimento verso l'alto per chiudere, le frecce di navigazione della galleria, le miniature e altro ancora.
Infine, le schede 'Standalone' e 'Misc' hanno alcune impostazioni aggiuntive che potresti trovare utili.
La scheda 'Standalone' ti consente di dare alla tua galleria un URL univoco. Questa è un'ottima funzionalità se desideri condividere un link diretto a un portfolio o album fotografico specifico.
La scheda 'Misc' include strumenti per importare ed esportare gallerie, ma probabilmente non ne avrai bisogno al momento.
Per un'analisi più approfondita di tutte queste impostazioni, puoi consultare la nostra guida dettagliata su come creare una galleria di immagini.
Passaggio 4: Anteprima e Pubblicazione della Tua Galleria
Per visualizzare in anteprima la galleria, fai clic sul pulsante 'Anteprima' sul lato destro della pagina delle impostazioni della galleria.
Una volta nella pagina di anteprima, fai clic sulle diverse immagini per testare l'effetto lightbox.
Qui puoi vedere il nome dell'immagine e il resto della galleria.
Quando testi la galleria, le immagini dovrebbero aprirsi senza problemi. Se hai scelto un effetto di transizione, questo dovrebbe essere visibile qui.
Ad esempio, ho impostato l'effetto di transizione Slide, ed ecco come appare.
Per navigare tra le immagini, fai clic sulle frecce di navigazione su entrambi i lati dello schermo o utilizza i tasti freccia sulla tastiera.
A questo punto, potresti voler assicurarti che le frecce di navigazione funzionino e che i titoli delle tue immagini vengano visualizzati correttamente se li hai abilitati.
Una volta che sei soddisfatto di come funziona tutto, puoi pubblicare la galleria cliccando sul pulsante ‘Pubblica’ sul lato destro delle impostazioni della tua galleria.
Dopo aver pubblicato la galleria, puoi passare ad aggiungerla al tuo sito web.
Passaggio 5: Aggiungi la galleria al tuo sito web
Ora che la tua galleria funziona perfettamente, aggiungiamola a un post.
Una volta nell'editor di WordPress, fai clic sull'icona (+) per aggiungere un nuovo blocco e cerca ‘Envira Gallery.’ Quindi trascina il blocco sul tuo post.
Successivamente, quando fai clic sul menu a discesa ‘Cerca una galleria’, seleziona la galleria che hai appena creato. Verrà inserita automaticamente nel post con tutte le impostazioni che hai appena configurato.
In alternativa, puoi aggiungere la tua galleria a pagine, widget o tipi di post personalizzati utilizzando uno shortcode.
Puoi trovare questo shortcode nella barra laterale destra delle impostazioni della galleria, appena sotto il pulsante ‘Pubblica’.
Per ulteriori informazioni, consulta la nostra guida su come aggiungere uno shortcode in WordPress.
Prima di fare clic sul pulsante ‘Pubblica’, assicurati di visualizzare in anteprima il tuo post un'ultima volta per assicurarti che la galleria appaia esattamente come desideri.
Le tue immagini dovrebbero ora essere visualizzate in un layout a griglia professionale con un effetto lightbox fluido quando cliccate.
Domande frequenti sull'ingrandimento delle immagini in WordPress
Ecco alcune domande frequenti sull'ingrandimento delle immagini in WordPress.
Come ingrandisco le immagini in WordPress?
Puoi utilizzare la funzione predefinita ‘Ingrandisci al clic’ in WordPress per funzionalità di base. Per un maggiore controllo, puoi utilizzare plugin come Simple Lightbox o Envira Gallery.
Come ridimensiono automaticamente le immagini in WordPress?
WordPress crea automaticamente diverse versioni più piccole delle tue immagini quando le carichi. Per avere un maggiore controllo sulle dimensioni delle immagini o per ottimizzarle per la velocità, ti consiglio di utilizzare un plugin di ottimizzazione delle immagini come EWWW Image Optimizer.
Plugin come Envira Gallery ti danno anche un controllo preciso sulle dimensioni di visualizzazione delle immagini all'interno delle tue gallerie.
Come forzo la dimensione delle immagini in WordPress?
Puoi impostare dimensioni personalizzate per le immagini all'interno del tuo tema. Per una guida dettagliata, consulta il nostro tutorial su come creare dimensioni aggiuntive per le immagini in WordPress. Questo è un ottimo modo per garantire un layout coerente tra le tue gallerie e il tuo sito.
Se preferisci usare un plugin, considera opzioni come Envira Gallery. Ti permette di specificare dimensioni esatte delle immagini in modo efficiente, fornendo controllo su come appaiono le tue gallerie. Questo può aiutare a mantenere un aspetto curato su tutto il tuo sito.
Risorse bonus: Gestisci e migliora le tue immagini di WordPress
Spero che questo articolo ti abbia aiutato ad aggiungere la funzionalità di 'ingrandire le immagini al clic' in WordPress. Ecco alcune guide bonus se sei interessato a gestire e migliorare le tue immagini di WordPress:
- Come ottimizzare le immagini per le prestazioni web senza perdere qualità
- Come aggiungere più gallerie nei post e nelle pagine di WordPress
- Confronto tra i migliori plugin per la compressione delle immagini di WordPress
- Come aggiungere un'immagine eroica in WordPress (funziona per tutti i temi)
- Come creare dimensioni aggiuntive per le immagini in WordPress
- Come risolvere problemi comuni delle immagini in WordPress (Guida definitiva)
Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.
Hai una domanda o un suggerimento? Lascia un commento per iniziare la discussione.