Sådan opretter du en WordPress billedzoomeffekt

Du har sikkert set websteder med forstørrelsesglas eller zoom på billeder rundt omkring på nettet, for eksempel på Amazons produktsider, og du har måske spekuleret på, hvordan du tilføjer den smarte funktion til dit WordPress-websted. Hvis det er tilfældet, har vi gode nyheder til dig. Det er ret nemt at skabe en WordPress billedzoom-effekt, hvis du gør det ved hjælp af et WordPress-plugin.

Tilføjelse af denne type funktion til dit websted kan være yderst praktisk for dine besøgende, da de vil være i stand til at inspicere dine produkter i detaljer. Dette giver dem mulighed for at bemærke visse aspekter, som de ellers ikke ville være i stand til at se, hvis du kun brugte billeder i almindelig størrelse til at fremvise dine produkter. Det er dog ikke kun produktbilleder. Du kan for eksempel have, at dine besøgende også skal kunne se nærmere på dine porteføljebilleder. Evnen til at zoome ind på dine billeder er derfor en god UX-praksis og potentielt også en salgsbooster.

Uden yderligere omhu, her er, hvordan du kan tilføje en forstørrende WordPress billedzoom-effekt til dit WordPress-websted med WP Image Zoom plugin.

Installation og konfiguration af WP Image Zoom Plugin

Først og fremmest skal du installere plugin’et. Når du er færdig med installationen og aktiveringen, skal du gå til WP billedzoom fanen i dit WordPress admin dashboard.

Åbning af denne fane giver dig mulighed for nemt at indstille plugin’s billedzoomindstillinger.

I den Generelle indstillinger fanen, kan du aktivere zoom på WooCommerce-produkter, WooCommerce-kategorisider og variationsprodukter. Du kan også indstille zoom-effekten på mobile enheder, fjerne lysboksen for mere ubesværet zoom af dine billeder og så videre. Derudover kan du aktivere zoom inde i en lysboks, hvis du ønsker at beholde den, og endda tjekke en liste over understøttede lysbokse.

Sørg for at klikke på Gem ændringer knappen, når du har indstillet alle indstillinger i henhold til dine præferencer.

Så gå til det Zoomindstillinger fanen.

Ligesom Generelle indstillinger fanen, den Zoomindstillinger fanen er ret intuitiv og kommer med 4 enkle trin, der giver dig mulighed for at tilføje en zoom-effekt til dine billeder.

Trin 1 lader dig vælge linsens form. Nogle af de tilgængelige muligheder inkluderer cirkellinseform, firkant og zoomvindue.

Dernæst kan du kontrollere dine konfigurationsændringer ved at forhåndsvise testbilledet (billedet kommer sammen med plugin) ved hjælp af den linse, du valgte. Du kan vende tilbage til denne mulighed og se et eksempel på eventuelle yderligere ændringer, som du foretager i de andre trin.

Det tredje trin giver dig mulighed for at indstille flere muligheder i dens Generel fanen. Du får mulighed for at vælge markørtype, definere animationslindringseffekten, vælge om du vil aktivere zoom ved musebevægelse eller museklik og indstille zoomniveauet.

Klik derefter på det Linse fanen. Der vil du være i stand til at indstille nogle ekstra muligheder, herunder linsestørrelse, linsefarve, kanttykkelse, kantfarve osv. Du skal dog være opmærksom på, at du kun kan bruge disse indstillinger, hvis du valgte en cirkel eller firkantet linse i den første trin.

På den anden side Zoom vindue fanen kan bruges, hvis du har valgt zoomvinduets linseform. Hvis du gjorde det, vil du være i stand til at indstille zoomvinduets bredde, zoomvinduets højde, afstanden fra hovedbilledet og så videre.

Endnu en gang skal du trykke på knappen Gem ændringer for at indstillingerne træder i kraft.

Og det er det – dine produktbilleder vil nu have en forstørrende zoom-effekt.

Tilføjelse af en zoomeffekt til dine billeder

Når du har sat plugin-funktionerne op i henhold til dine præferencer, er det tid til at tilføje zoom-effekten til dine billeder, som du skal gøre manuelt for hvert billede.

Gå først til siden eller indlægget, hvor dit billede er offentliggjort (ved at gå til Sider > Alle sider/indlæg > Alle indlæg), eller for at tilføje effekten til et nyt billede på indlæg eller side, opret et nyt (Sider/indlæg > Tilføj nyt).

Hvis du bruger Gutenberg-editoren, efter at du har tilføjet dit billede til din side eller dit indlæg (ved at klikke på plustegnet og derefter vælge Billede blok), klik på det pågældende billede og vælg derefter billedknappen placeret i billedblokken i øverste venstre hjørne.

Dette åbner en Blok stilarter drop-down. Du skal blot vælge den navngivne stilart Med Zoom.

Til sidst skal du trykke på Udgiv/opdater knappen og gå til din side eller dit indlæg for at se, hvordan dit billede ser ud live.

I Classic-editoren ligner processen meget. Når du har tilføjet dit billede til en side eller et indlæg, skal du klikke på det og vælge forstørrelsesikonet, som du vil se i højre hjørne af redigeringsværktøjslinjen. Dette vil aktivere en forstørrende effekt på dit billede.

Bemærk, at Classic-editoren giver dig mulighed for kun at tilføje zoom-funktionen til billeder, der ikke er i fuld størrelse, hvorfor du skal vælge dit billede og derefter klikke på blyant ikon (Redigere) for at ændre dens størrelse.

En ny skærm vises, der viser billeddetaljerne og giver dig mulighed for at ændre visse billedindstillinger. Du vil også kunne ændre billedstørrelsen her. Når du har valgt størrelsen (enhver anden størrelse undtagen Fuld størrelse), klik på Opdatering knap.

Når du har udgivet eller opdateret din side/indlæg, skal du gå videre og se dine ændringer igen.

Bare en sidste bemærkning – denne mulighed gælder kun for det billede, du valgte på den pågældende side eller indlæg, hvilket betyder, at du skal aktivere den samme mulighed igen for hvert billede, du vil tilføje zoom-effekten til.

Konklusion

En forstørrende zoom-effekt på billeder kan være en fantastisk tilføjelse til en e-handelsbutik eller enhver anden hjemmeside, der ønsker at sælge produkter. Uanset hvilken type produkter du tilbyder, vil dine potentielle kunder helt sikkert være interesserede i at undersøge dem så detaljeret som muligt.

Hvis du bruger et WordPress-plugin som WP Image Zoom til at tilføje denne funktion til dine billeder, vil du være i stand til at gøre det hurtigt og med lethed. Bare vær forsigtig med at bruge billeder af høj kvalitet for at sikre, at zoomfunktionen ser upåklagelig ud og gør sit arbejde godt. Endelig, da billeder af høj kvalitet kan påvirke dit websteds hastighed, bør du også optimere dine billeder til nettet for at reducere deres størrelse uden at bringe deres kvalitet i fare.