Come aggiungere lo zoom di ingrandimento per le immagini in WordPress

Vuoi aggiungere uno zoom a lente d'ingrandimento per le immagini in WordPress, simile a quello di Amazon? Uno zoom a lente d'ingrandimento è più di una semplice funzione accattivante, è uno strumento utile che consente ai tuoi visitatori di vedere piccoli dettagli nelle immagini che normalmente non riuscirebbero a vedere. 

Consigliamo vivamente di aggiungere una funzione di zoom per i negozi online, dove i clienti desiderano vedere la trama e la qualità degli articoli. È utile anche per i siti web di fotografia, dove gli spettatori vogliono vedere ogni dettaglio di un'immagine.

Aggiungendo uno zoom a lente d'ingrandimento alle tue immagini, puoi migliorare l'esperienza utente, mantenere gli utenti più a lungo interessati e persino aumentare le vendite.

In questo articolo, ti mostreremo come aggiungere facilmente lo zoom a lente d'ingrandimento per le immagini in WordPress.

Perché aggiungere uno zoom a lente d'ingrandimento per le immagini?

Aggiungere una funzione di zoom a lente d'ingrandimento sul tuo sito web WordPress consentirà ai visitatori di visualizzare chiaramente i dettagli intricati delle immagini.

Se hai un sito web di fotografia, allora l'aggiunta di una funzione di ingrandimento consentirà agli utenti di ingrandire le tue fotografie per visualizzare i dettagli più fini.

Allo stesso modo, se gestisci un negozio online, i tuoi clienti potranno ingrandire le immagini dei prodotti.

Molti grandi siti web di eCommerce utilizzano già lo zoom a lente d'ingrandimento per le immagini dei prodotti. Permette ai clienti di esaminare il prodotto e crea una migliore esperienza di acquisto nel tuo negozio.

Detto questo, ti mostreremo come aggiungere facilmente uno zoom di ingrandimento per le immagini in WordPress utilizzando tre metodi diversi. Puoi usare i link qui sotto per passare al metodo che preferisci.

• Metodo 1: Aggiungere uno zoom di ingrandimento per le immagini in WordPress con Envira Gallery (Consigliato)
• Metodo 2: Aggiungere uno zoom di ingrandimento per le immagini di WordPress con WP Image Zoom
• Method 3: Add a Magnifying Zoom for Images in WordPress with WPCode

Metodo 1: Come aggiungere uno zoom di ingrandimento per le immagini in WordPress con Envira Gallery (Consigliato)

Envira Gallery è il miglior plugin per gallerie per WordPress. Puoi usarlo per creare facilmente bellissime gallerie di immagini per il tuo sito web WordPress. Viene fornito anche con un Addon Zoom, che ti consente di aggiungere funzionalità di zoom alle immagini della tua galleria.

Altre potenti funzionalità di Envira includono un builder drag and drop, temi di galleria predefiniti, popup lightbox, compressione delle immagini, protezione delle immagini e altro ancora.

Per iniziare, devi installare e attivare il plugin Envira Gallery. Per maggiori dettagli, puoi seguire il nostro tutorial su come installare un plugin WordPress.

Dopo l'attivazione, è necessario andare alla pagina Envira Gallery » Impostazioni e inserire la chiave di licenza. Puoi trovare la chiave di licenza nell'area del tuo account Envira Gallery.

Successivamente, fai clic sul pulsante 'Verifica chiave'.

Successivamente, è necessario andare su Envira Gallery » Addon. Da qui, scorri verso il basso per trovare lo Zoom Addon e fai clic sul pulsante 'Installa'.

Una volta installato lo Zoom Addon, è necessario anche attivarlo attivando l'interruttore.

Il passo successivo è aggiungere una nuova galleria. Per farlo, vai su Envira Gallery » Aggiungi nuova dalla dashboard di WordPress.

Da qui, puoi inserire un nome per la tua galleria e fare clic sul pulsante ‘Seleziona file dal tuo computer’ per caricare le immagini nella tua galleria.

Puoi anche fare clic sul pulsante ‘Seleziona file da altre origini’ per aggiungere immagini dalla libreria multimediale di WordPress alla tua galleria.

Una volta caricate le immagini nella tua galleria, puoi riorganizzarle trascinando e rilasciando le miniature nella posizione desiderata.

Ci sono anche altre opzioni per personalizzare la tua galleria di immagini. Ad esempio, puoi selezionare un layout della galleria, aggiungere titoli alle immagini e testo alternativo, abilitare il lightbox della galleria, mostrare le didascalie delle immagini, modificare le dimensioni delle immagini e altro ancora.

Per maggiori dettagli, consulta la nostra guida su come creare gallerie di immagini responsive con Envira.

Configura le impostazioni di zoom dell'immagine

Per aggiungere uno zoom di ingrandimento alle immagini della tua galleria, fai clic sulla scheda ‘Zoom’. Quindi, seleziona la casella per abilitare la funzionalità di zoom.

Una volta abilitata la funzionalità di zoom, verranno visualizzate le impostazioni per aggiungere lo zoom alle tue immagini.

Puoi configurare impostazioni come zoom al passaggio del mouse, effetto zoom, tipo di zoom, posizione della finestra di zoom, dimensioni della finestra di zoom, colore della tinta e altro ancora.

Quando sei soddisfatto delle impostazioni di zoom, fai clic sul pulsante ‘Pubblica’ per salvare le modifiche e rendere disponibile questa galleria.

Incorporare la tua galleria di immagini con zoom di ingrandimento

Ora che la tua galleria è pronta, puoi aggiungerla direttamente a qualsiasi pagina o post in WordPress.

Dall'editor di contenuti di WordPress, fai semplicemente clic sul pulsante ‘+’ per aggiungere il blocco Envira Gallery. Quindi, fai clic sul menu a discesa all'interno del blocco Envira Gallery per scegliere quale galleria visualizzare.

Successivamente, vedrai un'anteprima della tua galleria di immagini nell'editor a blocchi di WordPress. Se sei soddisfatto di come appare, puoi pubblicare il post o la pagina.

Ora puoi visitare il tuo sito web per vedere la funzione di zoom con lente d'ingrandimento in azione.

Envira Gallery è un ottimo plugin per aggiungere funzionalità di zoom ai siti web di fotografia. Ma funziona perfettamente anche per i negozi online.

Per saperne di più, consulta la nostra guida su come creare una galleria di immagini di prodotti WooCommerce.

Metodo 2: Come aggiungere uno zoom con lente d'ingrandimento per le immagini in WordPress con WP Image Zoom

WP Image Zoom è un plugin gratuito per WordPress che ti consente di creare facilmente una lente d'ingrandimento sulle tue immagini.

Innanzitutto, devi installare e attivare il plugin WP Image Zoom. Per maggiori dettagli, consulta la nostra guida passo passo su come installare un plugin di WordPress.

Utilizzeremo la versione gratuita in questo tutorial, ma se desideri maggiori opzioni di personalizzazione, potresti voler dare un'occhiata a WP Image Zoom Pro. Puoi saperne di più sul plugin nella nostra recensione di WP Image Zoom.

Dopo l'attivazione, devi recarti alla pagina WP Image Zoom » Impostazioni Zoom dalla barra laterale di amministrazione di WordPress.

Successivamente, devi configurare le impostazioni dell'effetto zoom passando alla scheda 'Impostazioni Zoom' e scegliendo una forma di lente che desideri utilizzare.

Puoi scegliere tra le forme di lente cerchio, quadrato e finestra di zoom. Puoi anche scegliere l'opzione 'Nessuna lente' (⨯) se non desideri utilizzare una forma per l'effetto di ingrandimento.

Dopo aver scelto la tua lente preferita, devi scorrere fino al passaggio successivo dove puoi visualizzare in anteprima un'immagine con la lente selezionata per vedere come funziona. Il plugin ha un'immagine di anteprima che puoi utilizzare per testare le tue modifiche.

Successivamente, devi passare alla scheda 'Generale'.

Da qui, puoi selezionare un tipo di cursore, impostare un effetto di animazione, abilitare lo zoom al passaggio del mouse o al clic del mouse e definire un livello di zoom.

If you want even more options, some of the features are only available for the pro version of the WP Image Zoom plugin.

After making your choices accordingly, simply go to the ‘Lens’ tab from the top.

You can now configure settings like lens size, lens color, lens border options, and more if you selected the ‘circle’ or ‘square’ lens in Step 1.

If you selected the Zoom Window Lens, then you need to switch to the ‘Zoom Window’ configuration tab.

From here, you can change the width and height of the zoom window, positioning, distance from the main image, border colors, and more.

Next, you need to simply click the ‘Save Changes’ to store your settings.

After that, all you have to do is configure a few general settings.

Configure General Plugin Settings

Next, you need to switch to the General Settings tab under the plugin settings.

From here, you can now enable features like zoom on WooCommerce product images, thumbnails, mobile devices, attachment pages, product category pages, and more.

All you need to do is simply check the boxes next to these options.

You can also remove the lightbox effect, so users can smoothly zoom images.

However, you would need the Pro version of the plugin for this feature.

If you are not going to remove the lightbox for images, then you need to scroll down to the ‘Enable inside a Lightbox’ option and check the box next to it.

Note: You can see supported lightboxes to make sure that the zoom works fine inside a lightbox on your site.

Una volta terminate le modifiche alle impostazioni, non dimenticare di fare clic sul pulsante ‘Salva modifiche’ per memorizzare le tue impostazioni.

Lo zoom di ingrandimento sarà ora abilitato per i prodotti WooCommerce.

Puoi visitare il tuo negozio online per controllare la nostra funzione di zoom.

Tuttavia, se desideri abilitare lo zoom per le immagini nei post e nelle pagine di WordPress, devi seguire il passaggio seguente.

Abilita lo zoom di ingrandimento per le immagini nell'editor a blocchi

Per impostazione predefinita, lo zoom di ingrandimento non è abilitato per le immagini nei tuoi post e nelle tue pagine. Devi farlo manualmente dopo aver aggiunto un'immagine al tuo contenuto.

Innanzitutto, devi aprire un post che desideri modificare nell'editor a blocchi.

Successivamente, devi caricare un'immagine in quel post dalla libreria multimediale o dal tuo computer.

Una volta fatto ciò, fai semplicemente clic sull'immagine per aprire il suo pannello Impostazioni blocco nell'angolo in alto a destra dello schermo.

Da qui, vai semplicemente alla scheda ‘Stili’ e fai clic sul pulsante ‘Con zoom’ per applicare lo zoom di ingrandimento alla tua immagine.

Dopodiché, fai semplicemente clic sul pulsante ‘Aggiorna’ o ‘Pubblica’ in alto per memorizzare le tue impostazioni.

La funzione di zoom apparirà così sul tuo sito:

Nota: Dovrai ripetere questo passaggio ogni volta che desideri aggiungere l'effetto zoom a una singola immagine.

Metodo 3: Come aggiungere uno zoom di ingrandimento per le immagini in WordPress con WPCode

Puoi anche aggiungere una funzione di zoom di ingrandimento alle tue immagini in WordPress utilizzando il plugin gratuito WPCode.

WPCode è il miglior plugin per snippet di codice sul mercato, che ti consente di aggiungere in modo sicuro e semplice codice personalizzato al tuo sito web. Viene fornito con oltre 393 snippet di codice pronti all'uso che puoi aggiungere in pochi clic, inclusa una lente d'ingrandimento per le immagini.

Per iniziare, devi installare e attivare il plugin gratuito WPCode. Se hai bisogno di aiuto, consulta il nostro tutorial su come installare un plugin di WordPress.

Dopo l'attivazione, vai su Snippet di codice » Libreria dal tuo pannello di controllo di WordPress.

Questo ti porterà alla Libreria degli snippet, dove puoi vedere tutti i diversi snippet che puoi aggiungere al tuo sito.

Da qui, cerca semplicemente lo snippet 'Lente d'ingrandimento per immagini' nella libreria.

Una volta trovato, passaci sopra il mouse e fai clic sul pulsante 'Usa snippet'.

WPCode aggiungerà quindi automaticamente il codice per te, oltre a selezionare il metodo di inserimento corretto.

Ora, tutto ciò che devi fare è spostare l'interruttore da 'Non attivo' ad 'Attivo' e quindi fare clic sul pulsante 'Aggiorna'.

Ecco fatto! Quando visiti il tuo sito web WordPress, vedrai che tutte le tue immagini avranno una lente d'ingrandimento che appare quando ci passi sopra il mouse.

Nota: Ti consigliamo di utilizzare immagini di alta qualità affinché la funzione di zoom abbia un bell'aspetto. Le immagini di alta qualità sono normalmente più grandi in termini di dimensioni del file e richiedono più tempo per il caricamento, il che influenzerà la velocità e le prestazioni del tuo sito web.

Per risolvere questo problema, devi ottimizzare le tue immagini per il web prima di caricarle su WordPress.

Tutorial video

Se non sei un fan dei tutorial scritti, puoi guardare il nostro video tutorial:

Iscriviti a WPBeginner

Speriamo che questo articolo ti abbia aiutato a imparare come aggiungere lo zoom con lente d'ingrandimento per le immagini in WordPress. Potresti anche voler consultare la nostra guida su come ottimizzare le immagini per i motori di ricerca e le nostre migliori scelte per i migliori plugin di compressione delle immagini.

Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.