Jag minns fortfarande när jag byggde en av mina första portföljsidor och spenderade timmar på att få bilderna precis rätt. En vän påpekade att de inte kunde klicka för att se detaljerna i mitt arbete, och jag insåg att jag hade missat ett stort steg som skadade användarupplevelsen.
Det är en liten detalj som gör stor skillnad för hur professionell en webbplats känns. När besökare inte kan zooma in på produktbilder eller portföljobjekt skapar det en frustrerande upplevelse.
Nu när jag har konfigurerat den här funktionen på flera webbplatser har jag upptäckt att göra bilder förstoringbara vid klick är ett av de snabbaste sätten att förbättra besökares engagemang. Det är en enkel lösning som ger en polerad, högkvalitativ touch till vilken webbplats som helst.
I den här guiden kommer jag att guida dig genom tre enkla metoder för att göra dina bilder klickbara. Vi kommer att täcka allt från den enkla standardfunktionen till mer avancerade galleriplugins, ingen kodning krävs.
Varför förstora bilder vid klick i WordPress?
Att låta besökare klicka för att förstora bilder på din WordPress-webbplats hjälper dem att se viktiga detaljer på nära håll.
Det är en enkel uppgradering som ger en polerad, professionell känsla, särskilt för portföljer, fastighetsannonser och fotogallerier.
Dessutom kan det vara användbart för onlinebutiker där kunder vill titta närmare på dina produkter innan de bestämmer sig för att köpa dem.
WordPress inkluderar en grundläggande funktion för 'Förstora vid klick' som standard. Den öppnar bilden direkt på sidan, utan någon bakgrundsdämpning eller visuell effekt.
Detta fungerar bra för enkla bloggar eller interna sidor, men det ser lite enkelt ut och erbjuder inte mycket kontroll.
Om du vill ha något som ser mer modernt och polerat ut, då är ett bildlightbox-plugin ett bättre val.
Istället för att bara expandera bilden öppnas den i ett elegant överlägg som dämpar bakgrunden och håller betraktaren fokuserad. Du får också mer kontroll över hur bilden ser ut och fungerar.
Innan jag visar dig dessa olika metoder finns det en sak till att tänka på: bildkvalitet. När någon klickar för att förstora ett foto förväntar de sig en tydlig, högupplöst version. Men stora bildfiler kan sakta ner din webbplats.
Det är där bildoptimering kommer in. Genom att komprimera dina bilder utan att sänka deras synliga kvalitet kan du hålla filstorlekarna små och din webbplats snabb.
Detta innebär att du kan använda bilder med stora dimensioner (som 1500px breda) som ser bra ut när de förstoras, utan att påverka prestandan.
För hjälp med det, kolla in vår guide om hur man optimerar bilder för webben.
I den här artikeln delar jag med mig av 3 olika metoder för att förstora dina WordPress-bilder när de klickas på, inklusive några lightbox-alternativ.
Du kan använda snabblänkarna nedan för att hoppa till den metod du vill använda:
- Metod 1: Använda standardfunktionen i WordPress (enkel)
- Metod 2: Använda ett Lightbox-plugin (mer anpassning)
- Metod 3: Använda ett galleriprogram (Bäst för flera bilder)
- Vanliga frågor om att förstora bilder i WordPress
- Bonusresurser: Hantera & förbättra dina WordPress-bilder
Metod 1: Använda standardfunktionen i WordPress (enkel)
Efter att ha testat olika sätt att förstora bilder har jag upptäckt att WordPress inbyggda funktion är perfekt för enkla behov.
Jag har använt den här metoden när jag skapat dokumentation eller skrivit tekniska artiklar. Det är särskilt användbart när du behöver läsare för att se små detaljer i skärmdumpar eller undersöka specifika delar av en bild närmare.
Den största nackdelen är att det inte är en äkta lightbox. Den förstorar bara bilden, och du kan inte anpassa utseendet eller lägga till coola effekter.
Steg 1: Lägg till din bild i WordPress-redigeraren
Först måste du skapa eller öppna inlägget där du vill lägga till den klickbara bilden.
Klicka sedan i blockredigeraren på (+) ikonen för att lägga till ett nytt block och välj ‘Bild’ från blockalternativen. När du gör det ser du knappar för att lägga till en bild på 3 olika sätt: Ladda upp, Mediebibliotek eller Infoga från URL.
På WPBeginner använder vi alltid alternativet ‘Media Library.’ Detta säkerställer att titeln och alt-texten vi lägger till bilden är tillgängliga om vi återanvänder den i andra artiklar.
Jag föreslår att du undviker 'Infoga från URL'. Det hotlinkar till en bild på en annan webbplats, vilket innebär att bilden kan sluta fungera på din webbplats om originalet någonsin tas bort.
Steg 2: Ställ in alternativet ‘Förstora vid klick’
Efter att ha lagt till din bild i inlägget eller sidan kan du klicka på den för att visa bildinställningarna.
Med bilden vald, klicka på ikonen 'Infoga länk' i verktygsfältet för blocket. I inställningarna som visas, aktivera helt enkelt alternativet som heter 'Förstora vid klick'.
Steg 3: Konfigurera bildinställningar
Nu när du har aktiverat funktionen för att förstora vid klick, kanske du vill anpassa inställningarna för originalbilden för att säkerställa bästa visningskvalitet i ditt inlägg eller din sida.
Välj din bild och kontrollera sedan panelen för blockinställningar på höger sida av skärmen.
Du kan styra hur bilden ser ut på sidan genom att justera bildens dimensioner. Detta är dock bara visningsstorleken.
När en besökare klickar på bilden kommer de att se den ursprungliga bilden i full upplösning som du laddade upp till ditt mediebibliotek. Så se till att ladda upp en högkvalitativ bild som är minst 1500 pixlar bred. Kom bara ihåg att optimera den först, som vi diskuterade tidigare, för att hålla din sida snabb att ladda! 😉
Steg 4: Förhandsgranska din bild och publicera ditt innehåll
Innan du publicerar ditt inlägg eller din sida med alternativet 'förstora vid klick' aktiverat, vill du förhandsgranska det för att se till att det fungerar.
För att göra detta, klicka på knappen Visa i det övre högra hörnet av din redigerare och välj 'Förhandsgranska i ny flik'.
Jag rekommenderar att du testar det i alla visningsalternativ, särskilt 'Mobil', eftersom många människor använder smartphones nuförtiden.
Med effekten 'förstora vid klick' applicerad, bör den expandera på samma sida, som visas i exemplet nedan. Hur mycket den expanderar beror på storleken på originalbilden du laddade upp.
Klicka helt enkelt på bilden för att återställa den till normal storlek.
Även om den här inbyggda funktionen är snabb och enkel, saknar den den eleganta överlagring som många professionella webbplatser använder. Om du letar efter den där polerade 'lightbox'-effekten som dämpar bakgrunden och får dina bilder att sticka ut, är vår nästa metod för dig.
Metod 2: Använda ett Lightbox-plugin (mer anpassning)
Till skillnad från den grundläggande WordPress-funktionen skapar ett lightbox-plugin en mycket mer professionell upplevelse. När en användare klickar på en bild öppnas den i en snygg överläggning som dämpar resten av sidan, vilket får din bild att framträda.
Jag rekommenderar gratispluginet Simple Lightbox eftersom det låter dig lägga till mjuka animationer, anpassningsbara teman och bildspel som får dina bilder att sticka ut. Det är lättviktigt och fungerar automatiskt med alla dina bilder när det har aktiverats.
Steg 1: Installera och aktivera Simple Lightbox-pluginet
För att komma igång måste du installera och aktivera pluginet Simple Lightbox.
Om du behöver hjälp med den här processen, läs vår guide om att installera WordPress-plugins.
Steg 2: Konfigurera inställningar för Simple Lightbox
Efter att ha aktiverat pluginet är det en bra idé att gå till Utseende » Lightbox och granska dess inställningar för att säkerställa att allt är inställt som du vill.
Här hittar du Lightbox-inställningar som låter dig justera var du vill aktivera lightbox-funktionalitet. Detta kan vara på startsidan, enskilda inlägg, sidor och mer.
Jag brukar hålla mig till standardinställningarna eftersom de fungerar utmärkt för de flesta webbplatser.
Skrolla sedan ner till inställningarna för 'UI'. Dessa styr hur lightboxen ser ut och känns.
Som standard använder pluginet ett ljust tema, men du kan växla till mörkt läge om du föredrar det. Du kan också justera 'Overlay Opacity', som styr hur mycket bakgrundssidan tonas ner när en bild är öppen, och aktivera animationer för att ändra hur bilden öppnas.
Känn dig fri att experimentera med dessa inställningar, och glöm inte att klicka på ‘Spara ändringar’ när du är klar.
Steg 3: Lägg till din bild och aktivera Lightbox
Låt oss nu testa lightbox-funktionen. Skapa eller öppna helt enkelt ett inlägg och lägg till en bild.
När din bild är i redigeraren kan du lägga till en bildtext genom att skriva direkt i fältet 'Lägg till bildtext' som visas precis under bilden.
Om du inte lägger till en bildtext kommer plugin automatiskt att använda bildens titel från mediebiblioteket istället. Jag tycker dock att användning av fältet för bildtext ger dig mer direkt kontroll.
Därefter, med bilden fortfarande vald, måste du klicka på ikonen 'Länk' i verktygsfältet och välja alternativet 'Länka till bildfil'. Detta är ett viktigt steg som gör att Simple Lightbox-pluginet kan fungera.
När du gör detta kommer pluginet automatiskt att upptäcka länken och tillämpa sin lightbox-effekt när en besökare klickar på bilden.
💡 Notera: Du kan också använda Simple Lightbox för ett helt bildgalleri. Skapa helt enkelt ett bildgalleri med blockredigeraren och följ sedan stegen som beskrivs i denna metod för att lägga till lightbox-funktionen till varje bild.
Steg 4: Testa din lightbox
Nu ska vi testa lightbox-funktionen genom att förhandsgranska inlägget. Klicka bara på vyn i det övre högra hörnet och välj sedan 'Förhandsgranska i ny flik'.
När den nya fliken öppnas, klicka på bilden. Du bör se den öppnas smidigt i en lightbox-överläggning med en mörkare bakgrund.
Beroende på dina designinställningar ser du lightboxen i en ljus eller mörk tema. Här är hur det ljusa temat ser ut.
Ljustema omger fotot med en vit ram, vilket skapar bra kontrast mot den mörklagda bakgrunden.
Nu ser du hur mörkt tema ser ut.
Du bör också se din bildtext längst ner till vänster i lightboxen.
Jag rekommenderar också att förhandsgranska din lightbox på andra skärmstorlekar för att säkerställa att den ser bra ut på alla enheter.
Du kan göra detta genom att återgå till vyn och välja alternativet 'Desktop', 'Tablet' eller 'Mobile'. Klicka sedan på 'Förhandsgranska i ny flik'.
Metod 3: Använda ett galleriprogram (Bäst för flera bilder)
Om du någonsin har velat lyfta fram flera bilder, då är galleri-plugins utan tvekan den bästa lösningen. De hjälper till att organisera och visa upp en serie bilder med funktion för bildförstoring utan att sakta ner din webbplats.
Dessa plugins kan förbättra användarinteraktionen genom att göra ditt innehåll mer engagerande och visuellt tilltalande, vilket ger besökarna en smidig upplevelse när de navigerar genom dina bilder.
Jag rekommenderar Envira Gallery eftersom det låter dig skapa vackra, anpassningsbara gallerier som ser bra ut på alla enheter. Det är också super nybörjarvänligt.
Dessutom inkluderar det prestandafunktioner som lazy loading för att säkerställa att dina gallerier inte saktar ner din webbplats. Och dess AI-verktyg kan hjälpa dig att skapa anpassade bilder direkt i WordPress.
Viktigast av allt erbjuder tillägget en lightbox-inställning med massor av anpassningsalternativ. På så sätt kan du få alla fördelar med funktionen för att förstora bilder vid klick, plus några coola inställningar för layouter, galleribyten och mycket mer.
Vill du lära dig mer om vad pluginet kan göra? Vi har testat det utförligt tidigare, och du kan läsa vår fullständiga recension av Envira Gallery för mer information.
📝 Notera: Även om det finns en gratis version av Envira Gallery tillgänglig, rekommenderar jag Pro-versionen för avancerade funktioner som SuperSize lightbox, Envira AI och verktyg för social delning. Gratisversionen innehåller all nödvändig lightbox-funktionalitet du behöver för att komma igång!
Nu ska vi gå igenom stegen för att använda Envira Gallery för att lägga till en lightbox-funktion.
Steg 1: Installera och aktivera Envira Gallery-plugin
Låt oss börja med att installera pluginet på din webbplats. I den här handledningen kommer jag att använda gratisversionen, eller så kan du köpa en Pro-licens från Envira Gallerys webbplats.
Installera och aktivera det sedan genom att följa vår guide om hur man installerar ett WordPress-plugin. När du har aktiverat pluginet bör Envira:s installationsguide starta omedelbart.
Härifrån, klicka på knappen ‘Kom igång’ för att påbörja processen.
Det finns 5 steg i denna guide.
Under installationen kan du välja den kategori som beskriver ditt företag eller din webbplats (som fotograf eller företagare) och välja de gallerifunktioner du vill lägga till.
Jag rekommenderar att du fortsätter med de föreslagna standardinställningarna eftersom de vanligtvis erbjuder allt du behöver. Men om du har en Pro-plan kommer du att kunna aktivera mer avancerade funktioner.
Tänk på att alternativet ‘Lightboxes’ redan bör vara markerat, så den här funktionen kommer automatiskt att vara aktiverad.
När du har slutfört installationsguiden måste du fortfarande aktivera din pro-licens om du har köpt en. För att göra detta, gå till Envira Gallery » Inställningar och klistra in din licensnyckel i fältet. Klicka sedan på 'Verifiera nyckel'.
Steg 2: Skapa ett nytt galleri
För att skapa ditt första galleri, gå till Envira Gallery » Lägg till nytt i din instrumentpanel.
Lägg först till en rubrik högst upp på sidan. Jag rekommenderar att ge den ett tydligt och beskrivande namn så att det blir lättare att hålla reda på den senare.
Därefter ser du 3 alternativ för att lägga till bilder: Native Envira Gallery, Gallerier från andra källor och Skapa med Envira AI.
Jag rekommenderar att du börjar med Native Envira Gallery. Det är det enklaste sättet att ladda upp dina egna bilder direkt.
💡 Behöver du originalbilder snabbt? Du kan också skapa egna anpassade bilder med Envira AI. Den här funktionen gör det enkelt att generera unika bilder vid behov. Allt du behöver göra är att skapa en snabb bildbeskrivning, välja bland resultaten och lägga till den i ditt galleri med ett enda klick.
Välj de bilder du vill inkludera. Du kan lägga till så många du vill, men se till att den maximala filstorleken för uppladdning är under 256 MB.
Steg 3: Konfigurera galleri- och lightboxalternativ
I menyn till vänster om dina galleribilder hittar du Envira Galleries inställningar.
Det finns flikar för allmän konfiguration, lightbox-funktionen, mobilinställningar och mer. Låt oss gå igenom dem en i taget.
Du kan välja din gallerlayout högst upp i avsnittet 'Konfiguration'. Rutnätslayouten fungerar utmärkt för de flesta gallerier, men experimentera gärna med andra alternativ.
Skrolla ner, du kan hitta fler inställningsalternativ för galleriet.
Till exempel kan du aktivera lat laddning, ställa in en automatisk layout och lägga till en galleribeskrivning.
Du kanske till exempel vill ställa in automatiska layouter för att säkerställa att ditt galleri ser snyggt och organiserat ut utan extra ansträngning.
💡 Proffstips: Jag rekommenderar att du aktiverar alternativet för lat laddning. Den här funktionen hjälper ditt galleri att laddas snabbare genom att bara ladda bilder när besökare skrollar ner på sidan. Det hjälper också till att optimera din webbplatshastighet.
Växla sedan till fliken ‘Lightbox’. Kom ihåg att den här funktionen bör vara aktiverad som standard, men om den inte är det, markera rutan bredvid ‘Aktivera Lightbox?’
Sedan vill du välja ett 'Galleri Lightbox-tema'. Detta bestämmer utseendet på din lightbox.
Dina alternativ beror på din Envira-plan och om du har tillägget Gallery Themes. Men du bör kunna välja mellan ett mörkt, ljust eller äldre tema.
Längre ner i fliken ‘Lightbox’ kan du välja hur dina förstorade bilder visas, välja övergångseffekter och bestämma om bildtexter ska visas.
Sedan kan du hitta fler lightbox-inställningar på den andra halvan av sidan.
Du kan till exempel aktivera navigeringspilar, oändlig loop av bilder eller supersize-läge. Du kan till och med lägga till coola effekter när folk öppnar eller stänger ditt galleri, och när de klickar igenom det.
Till exempel, för 'Lightbox Transition Effect' kan du välja roliga alternativ som Fade, Slide, Circular, Tube, Rotate och mer.
Därefter rekommenderar jag att du går till fliken 'Mobil' för att konfigurera både de allmänna inställningarna och lightbox-inställningarna.
Eftersom många av dina besökare troligen kommer att se ditt galleri på sina telefoner, är det viktigt att se till att det ser bra ut på mindre skärmar.
Förutom att aktivera lightbox-funktionen för mobila enheter kan du anpassa mobilanpassade inställningar som lightbox-dimensioner, radhöjder och visning av titlar eller bildtexter.
När du skrollar ner kommer du att upptäcka fler alternativ, inklusive funktioner som svep upp för att stänga, galleripilnavigering, miniatyrbilder och mer.
Slutligen har flikarna ‘Standalone’ och ‘Misc’ några extra inställningar som du kan finna användbara.
Fliken 'Standalone' låter dig ge ditt galleri en egen unik URL. Detta är en utmärkt funktion om du vill dela en direktlänk till en specifik portfölj eller ett fotoalbum.
Fliken 'Misc' innehåller verktyg för att importera och exportera gallerier, men du kommer förmodligen inte att behöva dem just nu.
För en djupare genomgång av alla dessa inställningar kan du ta en titt på vår detaljerade guide om hur man skapar ett bildgalleri.
Steg 4: Förhandsgranska och publicera ditt galleri
För att förhandsgranska galleriet, klicka på knappen ‘Förhandsgranska’ på höger sida av din galleriinställningssida.
När du är på förhandsgranskningssidan, klicka på olika bilder för att testa lightbox-effekten.
Här kan du se bildens namn och resten av galleriet.
När du testar galleriet bör bilderna öppnas smidigt. Om du valde en övergångseffekt bör den synas här.
Till exempel ställde jag in Slide-övergångseffekten, och så här ser det ut.
För att navigera mellan bilder, klicka på navigeringspilarna på vardera sidan av skärmen eller använd piltangenterna på ditt tangentbord.
Vid det här laget kanske du vill se till att navigeringspilarna fungerar och att dina bildtitlar visas korrekt om du har aktiverat dem.
När du är nöjd med hur allt fungerar kan du publicera galleriet genom att klicka på knappen 'Publicera' på höger sida av dina galleriinställningar.
Efter att ha publicerat galleriet kan du gå vidare till att lägga till det på din webbplats.
Steg 5: Lägg till galleriet på din webbplats
Nu när ditt galleri fungerar perfekt, låt oss lägga till det i ett inlägg.
När du är i WordPress-redigeraren klickar du på (+) ikonen för att lägga till ett nytt block och söker efter ‘Envira Gallery.’ Dra sedan blocket till ditt inlägg.
Klicka sedan på rullgardinsmenyn ‘Sök efter ett galleri’ och välj det galleri du just skapade. Det kommer automatiskt att infogas i inlägget med alla inställningar du just konfigurerade.
Alternativt kan du lägga till ditt galleri på sidor, widgets eller anpassade inläggstyper genom att använda en kortkod.
Du hittar denna kortkod i sidofältet till höger om galleriinställningarna, precis under knappen 'Publicera'.
För mer information, se vår guide om hur man lägger till en kortkod i WordPress.
Innan du klickar på knappen ‘Publicera’, se till att förhandsgranska ditt inlägg en sista gång för att säkerställa att galleriet visas precis som du vill.
Dina bilder bör nu visas i ett professionellt rutnätslayout med en smidig lightbox-effekt när de klickas på.
Vanliga frågor om att förstora bilder i WordPress
Här är några vanliga frågor om att förstora bilder i WordPress.
Hur förstorar jag bilder i WordPress?
Du kan använda standardfunktionen 'Förstora vid klick' i WordPress för grundläggande funktionalitet. För mer kontroll kan du använda plugins som Simple Lightbox eller Envira Gallery.
Hur ändrar jag storlek på bilder automatiskt i WordPress?
WordPress skapar automatiskt flera mindre versioner av dina bilder när du laddar upp dem. För att ha mer kontroll över bilddimensioner eller för att optimera dem för hastighet, rekommenderar jag att använda ett plugin för bildoptimering som EWWW Image Optimizer.
Tillägg som Envira Gallery ger dig också exakt kontroll över bildernas visningsdimensioner i dina gallerier.
Hur ställer jag in bildstorlek i WordPress?
Du kan ställa in anpassade bilddimensioner inom ditt tema. För en detaljerad guide, kolla in vår handledning om hur man skapar ytterligare bildstorlekar i WordPress. Detta är ett utmärkt sätt att säkerställa en konsekvent layout över dina gallerier och din webbplats.
Om du föredrar att använda ett plugin, överväg alternativ som Envira Gallery. Det låter dig ange exakta bilddimensioner effektivt, vilket ger kontroll över hur dina gallerier ser ut. Detta kan hjälpa till att bibehålla ett polerat utseende över hela din webbplats.
Bonusresurser: Hantera & förbättra dina WordPress-bilder
Jag hoppas att den här artikeln hjälpte dig att lägga till funktionen 'förstora bilder vid klick' i WordPress. Här är några bonusguider om du är intresserad av att hantera och förbättra dina WordPress-bilder:
- Hur man optimerar bilder för webbprestanda utan att förlora kvalitet
- Hur man lägger till flera gallerier i WordPress-inlägg och sidor
- Bästa WordPress-plugins för bildkomprimering jämförda
- Hur man lägger till en hjältebild i WordPress (fungerar för alla teman)
- Hur man skapar ytterligare bildstorlekar i WordPress
- Hur man fixar vanliga bildproblem i WordPress (ultimat guide)
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.
Har du en fråga eller ett förslag? Lämna gärna en kommentar för att starta diskussionen.