Hur man lägger till förstoringsglas för bilder i WordPress

Vill du lägga till en Amazon-liknande förstoringszoom för bilder i WordPress? En förstoringszoom är mer än bara en snygg funktion, det är ett användbart verktyg som låter dina besökare se små detaljer i bilder som de normalt inte kan se. 

Vi rekommenderar starkt att lägga till en zoomfunktion för onlinebutiker, där kunder vill se textur och kvalitet på varor. Det är också användbart för fotowebbplatser, där besökare vill se varje detalj i en bild.

Genom att lägga till en förstorande zoom till dina bilder kan du förbättra användarupplevelsen, hålla användarna intresserade längre, och du kan till och med öka försäljningen.

I den här artikeln visar vi dig hur du enkelt lägger till förstoringseffekt för bilder i WordPress.

Varför lägga till en förstoringszoom för bilder?

Att lägga till en förstoringsfunktion på din WordPress-webbplats gör det möjligt för besökare att tydligt se de intrikata detaljerna i bilderna.

Om du har en fotografisajt, kommer en förstoringsfunktion att göra det möjligt för användare att zooma in på dina fotografier för att se de finare detaljerna.

På samma sätt, om du driver en webbutik, kommer dina kunder att kunna zooma in på produktbilder.

Många stora e-handelswebbplatser använder redan förstoringszoom för produktbilder. Det gör det möjligt för kunder att granska produkten och skapar en bättre shoppingupplevelse i din butik.

Med det sagt, vi kommer att visa dig hur du enkelt lägger till en förstoringszoom för bilder i WordPress med tre olika metoder. Du kan använda länkarna nedan för att hoppa till den metod du föredrar.

• Metod 1: Lägg till en förstoringszoom för bilder i WordPress med Envira Gallery (Rekommenderas)
• Metod 2: Lägg till en förstoringszoom för WordPress-bilder med WP Image Zoom
• Method 3: Add a Magnifying Zoom for Images in WordPress with WPCode

Metod 1: Hur du lägger till en förstoringszoom för bilder i WordPress med Envira Gallery (Rekommenderas)

Envira Gallery är det bästa galleriprogrammet för WordPress. Du kan använda det för att enkelt skapa vackra bildgallerier för din WordPress-webbplats. Det levereras också med ett Zoom Addon, som låter dig lägga till zoomfunktionalitet till dina galleribilder.

Andra kraftfulla Envira-funktioner inkluderar en dra-och-släpp-byggare, färdiga galleriteman, lightbox-popups, bildkomprimering, bildskydd och mer.

För att komma igång måste du installera och aktivera pluginet Envira Gallery. För mer information kan du följa vår handledning om hur man installerar ett WordPress-plugin.

Efter aktivering måste du gå till sidan Envira Gallery » Settings och ange din licensnyckel. Du hittar licensnyckeln i ditt Envira Gallery-konto.

Därefter klickar du på knappen 'Verifiera nyckel'.

Gå sedan till Envira Gallery » Tillägg. Skrolla ner härifrån för att hitta Zoom-tillägget och klicka på knappen 'Installera'.

När Zoom Addon är installerat måste du också aktivera det genom att växla omkopplaren.

Nästa steg är att lägga till ett nytt galleri. För att göra det, gå till Envira Gallery » Lägg till nytt från WordPress-instrumentpanelen.

Härifrån kan du ange ett namn för ditt galleri och klicka på knappen ‘Välj filer från din dator’ för att ladda upp bilder till ditt galleri.

Du kan också klicka på knappen 'Välj filer från andra källor' för att lägga till bilder från WordPress mediabibliotek till ditt galleri.

När du har laddat upp bilder till ditt galleri kan du ordna om dem genom att dra och släppa miniatyrbilderna på plats.

Det finns också andra alternativ för att anpassa ditt bildgalleri. Du kan till exempel välja en gallerlayout, lägga till bildtitlar och alt-text, aktivera galleriljuslådan, visa bildtexter, redigera bilddimensioner och mer.

För mer information, se vår guide om hur man skapar responsiva bildgallerier med Envira.

Konfigurera bildzoominställningar

För att lägga till en förstorande zoom till dina galleribilder, klicka på fliken 'Zoom'. Markera sedan rutan för att aktivera zoomfunktionaliteten.

När zoomfunktionaliteten är aktiverad visas inställningarna för att lägga till zoom i dina bilder.

Du kan konfigurera inställningar som zoom vid hovring, zomeffekt, zometyp, zoomfönstrets position, zoomfönstrets storlek, färgton och mer.

När du är nöjd med zoominställningarna klickar du på knappen 'Publicera' för att spara dina ändringar och göra detta galleri tillgängligt.

Bädda in ditt bildgalleri med förstoringsglas

Nu när ditt galleri är klart kan du lägga till det direkt på vilken sida eller inlägg som helst i WordPress.

Från WordPress innehållsredigerare, klicka helt enkelt på '+' -knappen för att lägga till Envira Gallery-blocket. Klicka sedan på rullgardinsmenyn inuti Envira Gallery-blocket för att välja vilket galleri som ska visas.

Därefter ser du en förhandsgranskning av ditt bildgalleri i WordPress blockredigerare. Om du är nöjd med hur det ser ut kan du publicera inlägget eller sidan.

Nu kan du besöka din webbplats för att se zoomfunktionen i aktion.

Envira Gallery är ett utmärkt plugin för att lägga till zoomfunktionalitet på fotograferingssajter. Men det fungerar också perfekt för nätbutiker.

För att lära dig mer, se vår guide om hur man skapar ett produktbildgalleri för WooCommerce.

Metod 2: Hur man lägger till en förstorande zoom för bilder i WordPress med WP Image Zoom

WP Image Zoom är ett gratis WordPress-plugin som låter dig enkelt skapa ett förstoringsglas på dina bilder.

Först måste du installera och aktivera pluginet WP Image Zoom. För mer information, se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.

Vi kommer att använda gratisversionen i den här handledningen, men om du vill ha fler anpassningsalternativ kanske du vill kolla in WP Image Zoom Pro. Du kan läsa mer om pluginet i vår recension av WP Image Zoom.

Efter aktivering måste du gå till sidan WP Image Zoom » Zoom Settings från WordPress admin sidofält.

Därefter behöver du konfigurera zoomningseffektens inställningar genom att växla till fliken ‘Zoominställningar’ och välja en linsform som du vill använda.

Du kan välja mellan runda, fyrkantiga och zoomfönsterlinser. Du kan till och med välja ett alternativ för 'Ingen lins' (⨯) om du inte vill använda en form för förstoringseffekt.

Efter att ha valt önskad lins måste du skrolla ner till nästa steg där du kan förhandsgranska en bild med den valda linsen för att se hur den fungerar. Pluginet har en förhandsgranskningsbild som du kan använda för att testa dina ändringar.

Därefter behöver du växla till fliken ‘Allmänt’.

Härifrån kan du välja en markörtyp, ställa in en animationseffekt, aktivera zoom vid muspekaren eller muspekarklick och definiera en zoomnivå.

Om du vill ha ännu fler alternativ är vissa funktioner endast tillgängliga för proversionen av WP Image Zoom-pluginet.

Efter att ha gjort dina val därefter, gå helt enkelt till fliken 'Lens' högst upp.

Du kan nu konfigurera inställningar som linsstorlek, linsfärg, linskantalternativ och mer om du valde linsen 'cirkel' eller 'fyrkant' i steg 1.

Om du valde Zoomfönsterlinsen måste du sedan växla till fliken 'Zoomfönster' i konfigurationen.

Härifrån kan du ändra bredden och höjden på zoomfönstret, positionering, avstånd från huvudbilden, kantfärger och mer.

Därefter behöver du bara klicka på 'Spara ändringar' för att spara dina inställningar.

Därefter behöver du bara konfigurera några allmänna inställningar.

Konfigurera allmänna plugin-inställningar

Därefter måste du växla till fliken Allmänna inställningar under plugininställningarna.

Härifrån kan du nu aktivera funktioner som zoom på WooCommerce-produktbilder, miniatyrbilder, mobila enheter, bilagesidor, produktsidekategorier och mer.

Allt du behöver göra är att helt enkelt markera rutorna bredvid dessa alternativ.

Du kan också ta bort ljusboxeffekten, så att användare smidigt kan zooma bilder.

Du skulle dock behöva Pro-versionen av pluginet för den här funktionen.

Om du inte kommer att ta bort lightboxen för bilder, måste du skrolla ner till alternativet 'Enable inside a Lightbox' och markera rutan bredvid det.

Notera: Du kan se stödda ljusboxar för att säkerställa att zoom fungerar bra inuti en ljusbox på din webbplats.

När du är klar med att justera inställningarna, glöm inte att klicka på knappen 'Save Changes' för att spara dina inställningar.

Förstorande zoom kommer nu att vara aktiverat för WooCommerce-produkter.

Du kan besöka din onlinebutik för att se vår zoomfunktion.

Om du däremot vill aktivera zoom för bilder i WordPress-inlägg och sidor måste du följa steget nedan.

Aktivera förstorande zoom för bilder i blockredigeraren

Som standard är zoomfunktionen inte aktiverad för bilder i dina inlägg och sidor. Du måste göra det manuellt efter att ha lagt till en bild i ditt innehåll.

Först måste du öppna ett inlägg du vill redigera i blockredigeraren.

Därefter måste du ladda upp en bild till det inlägget från mediabiblioteket eller din dator.

När du har gjort det klickar du helt enkelt på bilden för att öppna dess panel för blockinställningar i det övre högra hörnet av skärmen.

Härifrån går du helt enkelt till fliken 'Stilar' och klickar på knappen 'Med zoom' för att applicera förstorande zoom på din bild.

Därefter klickar du helt enkelt på knappen 'Uppdatera' eller 'Publicera' högst upp för att spara dina inställningar.

Zoomfunktionen kommer att se ut så här på din webbplats:

Notera: Du måste upprepa detta steg varje gång du vill lägga till zomeffekten till en enskild bild.

Metod 3: Hur man lägger till en förstorande zoom för bilder i WordPress med WPCode

Du kan också lägga till en förstorande zoomfunktion till dina bilder i WordPress med hjälp av det kostnadsfria WPCode-pluginet.

WPCode är det bästa pluginet för kodavsnitt på marknaden, vilket gör att du säkert och enkelt kan lägga till anpassad kod på din webbplats. Det levereras med 393+ färdiga kodavsnitt som du kan lägga till med bara några få klick, inklusive ett förstoringsglas för bilder.

För att komma igång måste du installera och aktivera det kostnadsfria WPCode-pluginet. Om du behöver hjälp, se vår handledning om hur man installerar ett WordPress-plugin.

Efter aktivering, gå till Kodavsnitt » Bibliotek från din WordPress-instrumentpanel.

Detta tar dig till Snippetbiblioteket, där du kan se alla olika avsnitt som du kan lägga till på din webbplats.

Härifrån söker du helt enkelt efter kodsnutten ‘Magnifier Glass for Images’ i biblioteket.

När du har hittat den, för muspekaren över den och klicka på knappen ‘Använd kodsnutt’.

WPCode kommer sedan automatiskt att lägga till koden åt dig, samt välja rätt infogningsmetod.

Nu behöver du bara växla omkopplaren från ‘Inaktiv’ till ‘Aktiv’ och sedan klicka på knappen ‘Uppdatera’.

Det var allt! När du besöker din WordPress-webbplats kommer du att se att alla dina bilder kommer att ha ett förstoringsglas som visas när du för muspekaren över dem.

Notera: Vi rekommenderar att använda bilder av hög kvalitet för att zoomfunktionen ska se bra ut. Bilder av hög kvalitet är normalt större i filstorlek och tar längre tid att ladda, vilket kommer att påverka din webbplatsens hastighet och prestanda.

För att lösa detta problem behöver du optimera dina bilder för webben innan du laddar upp dem till WordPress.

Videohandledning

Om du inte gillar skriftliga handledningar kan du titta på vår videohandledning istället:

Prenumerera på WPBeginner

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du lägger till förstoringsglas för bilder i WordPress. Du kanske också vill se vår guide om hur du optimerar bilder för sökmotorer och våra toppval för bästa plugins för bildkomprimering.

Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.