Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Coppa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Come aggiungere l’ingrandimento delle immagini in WordPress

Volete aggiungere una lente di ingrandimento simile a quella di Amazon per le immagini in WordPress?

L’aggiunta di una funzione di zoom consente agli utenti di vedere dettagli che non sarebbero visibili in un’immagine di dimensioni normali.

In questo articolo vi mostreremo come aggiungere facilmente lo zoom di ingrandimento per le immagini in WordPress.

How to add magnifying zoom for images in WordPress

Perché aggiungere uno zoom di ingrandimento per le immagini?

L’aggiunta di una funzione di zoom di ingrandimento sul vostro sito WordPress consentirà ai visitatori di visualizzare chiaramente i dettagli più complessi delle immagini.

Se avete un sito web di fotografia, l’aggiunta di una funzione di ingrandimento consentirà agli utenti di ingrandire le vostre fotografie per visualizzarne i dettagli più fini.

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

Molti grandi siti di e-commerce utilizzano già lo zoom di ingrandimento per le immagini dei prodotti. Permette ai clienti di esaminare il prodotto e crea una migliore esperienza di acquisto nel vostro negozio.

Detto questo, vi mostreremo come aggiungere facilmente uno zoom di ingrandimento per le immagini in WordPress utilizzando due metodi diversi. Potete utilizzare i link sottostanti per passare al metodo che preferite.

Video tutorial

Subscribe to WPBeginner

Se preferite le istruzioni scritte, continuate a leggere.

Envira Gallery è il miglior plugin di galleria per WordPress. È possibile utilizzarlo per creare facilmente splendide gallerie di immagini per il proprio sito web WordPress. È inoltre dotato di un addon per lo zoom, che consente di aggiungere la funzionalità di zoom alle immagini della galleria.

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

Per iniziare, è necessario installare e attivare il plugin Envira Gallery. Per maggiori dettagli, potete seguire il nostro tutorial su come installare un plugin di WordPress.

Nota: è possibile utilizzare una versione gratuita di Envira Gallery. Tuttavia, per accedere all’addon Zoom è necessario passare al piano “Plus” del plugin premium.

Al momento dell’attivazione, è necessario andare alla pagina Envira Gallery ” Impostazioni e inserire la chiave di licenza. La chiave di licenza si trova nell’area dell’account di Envira Gallery.

Add the Envira Gallery license key

Successivamente, fare clic sul pulsante “Verifica chiave”.

Successivamente, è necessario andare su Envira Gallery Addons. Da qui, scorrere verso il basso per trovare l’addon Zoom e fare clic sul pulsante “Installa”.

Install the Zoom Addon for Envira Gallery

Una volta installato l’addon Zoom, è necessario attivarlo selezionando l’interruttore.

Activate the Zoom Addon

Il passo successivo consiste nell’aggiungere una nuova galleria. Per farlo, andare su Envira Gallery ” Aggiungi nuovo dalla dashboard di WordPress.

Da qui è possibile inserire un nome per la galleria e fare clic sul pulsante “Seleziona i file dal computer” per caricare le immagini nella galleria.

Add a new gallery

È anche possibile fare clic sul pulsante “Seleziona file da altre fonti” per aggiungere alla galleria immagini dalla libreria multimediale di WordPress.

Una volta caricate le immagini nella galleria, è possibile riorganizzarle trascinando e rilasciando le miniature al loro posto.

Edit image gallery in Envira

Esistono anche altre opzioni per personalizzare la galleria di immagini. Ad esempio, è possibile selezionare il layout della galleria, aggiungere titoli e testi alt alle immagini, attivare la lightbox della galleria, mostrare le didascalie delle immagini, modificare le dimensioni delle immagini e altro ancora.

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

Configurare le impostazioni dello zoom dell’immagine

Per aggiungere uno zoom di ingrandimento alle immagini della galleria, fare clic sulla scheda “Zoom”. Quindi, selezionare la casella per abilitare la funzionalità di zoom.

Enable Zoom in Envira

Una volta attivata la funzionalità di zoom, appariranno le impostazioni per aggiungere lo zoom alle immagini.

È possibile configurare impostazioni come lo zoom al passaggio, l’effetto zoom, il tipo di zoom, la posizione della finestra di zoom, la dimensione della finestra di zoom, il colore della tinta e altro ancora.

Configure zoom settings

Quando si è soddisfatti delle impostazioni dello zoom, fare clic sul pulsante “Pubblica” per memorizzare le modifiche e rendere disponibile la galleria.

Publish your image gallery

Incorporare la galleria di immagini con lo zoom d’ingrandimento

Ora che la vostra galleria è pronta, potete aggiungerla direttamente a qualsiasi pagina o post di WordPress.

Nell’editor di contenuti di WordPress, è sufficiente fare clic sul pulsante “+” per aggiungere il blocco Envira Gallery. Quindi, fare clic sul menu a discesa all’interno del blocco Envira Gallery per scegliere la galleria da visualizzare.

Add Envira Gallery block

Successivamente, verrà visualizzata un’anteprima della galleria di immagini nell’editor di blocchi di WordPress. Se siete soddisfatti dell’aspetto, potete pubblicare il post o la pagina.

Publish image gallery in WordPress page or post

Ora potete visitare il vostro sito web per vedere la funzione di zoom ingrandimento in azione.

Envira Gallery magnifying zoom example

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

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

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

Per prima cosa, è necessario installare e attivare il plugin WP Image Zoom. Per maggiori dettagli, consultate la nostra guida passo-passo su come installare un plugin di WordPress.

In questo tutorial utilizzeremo la versione gratuita, ma se desiderate maggiori opzioni personalizzate, potreste voler dare un’occhiata a WP Image Zoom Pro. Per saperne di più su questo plugin, consultate la nostra recensione di WP Image Zoom.

Dopo l’attivazione, è necessario andare alla pagina WP Image Zoom ” Impostazioni dello zoom dalla barra laterale dell’amministrazione di WordPress.

Successivamente, è necessario configurare le impostazioni dell’effetto zoom passando alla scheda ‘Impostazioni zoom’ e scegliendo la forma dell’obiettivo che si desidera utilizzare.

Choose a lens shape

È possibile scegliere tra le forme di lenti circolari, quadrate e di finestre zoom. È anche possibile scegliere l’opzione ‘Senza lente’ (⨯) se non si desidera utilizzare una forma per l’effetto di ingrandimento.

Dopo aver scelto l’obiettivo preferito, è necessario scorrere verso il basso fino alla fase successiva, dove è possibile visualizzare l’anteprima di un’immagine con l’obiettivo selezionato per vedere come funziona. Il plugin dispone di un’immagine di anteprima che è possibile utilizzare per testare le modifiche.

Check the preview of the lens in step two

Successivamente, è necessario passare alla scheda “Generale”.

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

Se volete ancora più opzioni, alcune funzioni sono disponibili solo per la versione pro del plugin WP Image Zoom.

Configure General tab settings in step 3

Dopo aver effettuato le scelte del caso, basta andare alla scheda “Obiettivo” dall’alto.

Ora è possibile configurare impostazioni come le dimensioni dell’obiettivo, il colore dell’obiettivo, le opzioni del bordo dell’obiettivo e altro ancora se si è selezionato l’obiettivo “cerchio” o “quadrato” al punto 1.

Lens Settings

Se è stata selezionata la lente della finestra di zoom, è necessario passare alla scheda di configurazione “Finestra di zoom”.

Da qui è possibile modificare la larghezza e l’altezza della finestra di zoom, il posizionamento, la distanza dall’immagine principale, i colori dei bordi e altro ancora.

Zoom window settings

Successivamente, è sufficiente fare clic su “Salva modifiche” per memorizzare le impostazioni.

Dopodiché, è sufficiente configurare alcune impostazioni generali.

Clcik the Save Changes for the last step

Configurare le impostazioni generali del plugin

Successivamente, è necessario passare alla scheda Impostazioni generali delle impostazioni del plugin.

Da qui è possibile abilitare funzioni come lo zoom sulle immagini dei prodotti WooCommerce, sulle miniature, sui dispositivi mobili, sulle pagine degli allegati, sulle pagine delle categorie di prodotti e altro ancora.

È sufficiente selezionare le caselle accanto a queste opzioni.

Go to the General Settings tab and check the boxes beside the options you want to activate

È anche possibile rimuovere l’effetto lightbox, in modo che gli utenti possano ingrandire le immagini senza problemi.

Tuttavia, per questa funzione è necessaria la versione Pro del plugin.

Remove the lightbox option by checking the box

Se non si intende rimuovere la lightbox per le immagini, è necessario scorrere verso il basso fino all’opzione “Abilita all’interno di una lightbox” e selezionare la casella accanto.

Nota: è possibile vedere le lightbox supportate per verificare che lo zoom funzioni correttamente all’interno di una lightbox sul proprio sito.

Check enable inside lightbox option

Una volta terminata la regolazione delle impostazioni, non dimenticate di fare clic sul pulsante “Salva modifiche” per memorizzare le impostazioni.

Lo zoom con ingrandimento è ora abilitato per i prodotti WooCommerce.

Potete visitare il vostro negozio online per verificare la nostra funzione di zoom.

Zoom feature enabled on the WooCommerce store

Tuttavia, se si desidera abilitare lo zoom per le immagini sui post e sulle pagine di WordPress, è necessario seguire la procedura riportata di seguito.

Abilita lo zoom di ingrandimento per le immagini nell’Editor blocchi

Per impostazione predefinita, lo zoom di ingrandimento non è abilitato per le immagini nei post e nelle pagine. È necessario farlo manualmente dopo aver aggiunto un’immagine al contenuto.

Per prima cosa, è necessario aprire un post che si desidera modificare nell’editor di blocchi.

Successivamente, è necessario caricare un’immagine su quel post dalla libreria multimediale o dal proprio computer.

Una volta fatto ciò, è sufficiente fare clic sull’immagine per aprire il pannello Impostazioni blocco nell’angolo destro dello schermo.

Da qui, basta andare alla scheda ‘Stili’ e fare clic sul pulsante ‘Con zoom’ per applicare lo zoom all’immagine.

Click on the Zoom button

A questo punto, è sufficiente fare clic sul pulsante “Aggiorna” o “Pubblica” in alto per memorizzare le impostazioni.

La funzione di zoom avrà il seguente aspetto sul vostro sito:

Zoom feature preview

Nota: è necessario ripetere questo passaggio ogni volta che si desidera aggiungere l’effetto zoom a una singola immagine.

Si consiglia di utilizzare immagini di alta qualità affinché la funzione di zoom risulti perfetta. Le immagini di alta qualità hanno normalmente dimensioni maggiori e richiedono più tempo per essere caricate, il che influisce sulla velocità e sulle prestazioni del sito web.

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

Speriamo che questo articolo vi abbia aiutato a capire come aggiungere lo zoom di ingrandimento per le immagini in WordPress. Potreste anche consultare la nostra guida su come ottimizzare le immagini per i motori di ricerca e la nostra selezione dei migliori plugin per la compressione delle immagini.

Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.

Divulgazione: I nostri contenuti sono sostenuti dai lettori. Ciò significa che se cliccate su alcuni dei nostri link, potremmo guadagnare una commissione. Vedi come WPBeginner è finanziato , perché è importante e come puoi sostenerci. Ecco il nostro processo editoriale .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Il kit di strumenti WordPress definitivo

Ottenete l'accesso gratuito al nostro kit di strumenti - una raccolta di prodotti e risorse relative a WordPress che ogni professionista dovrebbe avere!

Reader Interactions

13 commentiLascia una risposta

  1. Sofie

    Thanks for this article. Can you help me understand how I can use this for a page/blog when I use the divi builder? Where can I then add something so this function works?

    • WPBeginner Support

      You would want to reach out to the plugin’s support for the current method to use the plugin with a page builder.

      Admin

  2. Kenny

    Any chance that there is a zoom plugin that will work with LayerSlider images? I want the background of my LayerSlider slide to zoom in with a magnifying glass so that people can see the image larger on screen.

    • WPBeginner Support

      We would first recommend reaching out to LayerSlider’s support to see if they have a recommended plugin for adding zoom

      Admin

  3. michel hissi

    can you please tell me about image size. if image size of website is low then can we use this plugin.

    • WPBeginner Support

      Yes, you can still use this plugin if you are optimizing your images :)

      Admin

  4. santhosh muralidhar

    please show the steps by using the new Wordpress editor. I think in the new editor there is no option to add a zoom magnify feature for the image. I searched and tried a lot but could not find that option.

    • WPBeginner Support

      We will certainly look to update our articles as we are able, for this, the option to add the CSS class that the plugin needs for an image would be in the block’s settings.

      Admin

  5. Tony

    Please could you tell me how to add image zoom to product images in woocommerce? the article instruct how to add zoom to post and pages only.

    • WPBeginner Support

      The plugin should still work for WooCommerce, if it is not applying to WooCommerce then you would need to reach out to the plugin’s support for them to take a look.

      Admin

  6. Eliezer Braun

    I keep getting this message when I press on the magnifying glass after I have selected the image for zoom.

    First you have to select the image to which you want to add the zoom feature

  7. Eileen Bednarz

    I’d love to get this to work on my site, but I have a Pinterest plug-in that I can’t deactivate. I suspect that plug-in interferes with this plug-in. Any suggestions on removing to odious Pinterest plug-in are welcome.

    • Eileen Bednarz

      P.S. I’m not a programmer and don’t dare go into the FTP or whatever it’s called.

Lascia una risposta

Grazie per aver scelto di lasciare un commento. Tenga presente che tutti i commenti sono moderati in base alle nostre politica dei commenti e il suo indirizzo e-mail NON sarà pubblicato. Si prega di NON utilizzare parole chiave nel campo del nome. Avremo una conversazione personale e significativa.