Har du någonsin önskat att dina besökare kunde utforska en plats virtuellt eller se en produkt från alla vinklar?
På WPBeginner känner vi till kraften i fängslande bilder, och 360-graders images är ett säkert sätt att fånga besökarens uppmärksamhet. I takt med att VR-enheter (Virtual Reality) blir mer tillgängliga kan du till och med använda 360-graders images för att skapa riktigt uppslukande och roliga upplevelser för potentiella prenumeranter och customers.
I den här artikeln visar vi dig hur du enkelt kan add to interaktiva 360-graders images i WordPress.
Varför använda interaktiva 360-graders images i WordPress?
Om du run en online store, då kan högkvalitativa produkt images hjälpa dig att få mer försäljning.
Vissa stora varumärken tar det här till nästa nivå genom att skapa en interaktiv 360-graders image som allow shoppers att utforska en produkt från alla vinklar.
Detta är mycket mer engagerande än att be kunderna rulla genom ett gallery med bilder som visar objektet från olika vinklar.
Om du har en website för fastigheter kan du använda 360 images för att skapa virtuella rundturer så att potentiella köpare kan utforska fastigheten. Detta kan hjälpa till att övertyga människor om att boka möten och view.
Du kan också använda 360-graders images för att skapa new och engagerande upplevelser. Om du till exempel har en blogg om resor kan läsarna använda interaktiva images för att utforska olika locations.
Med detta sagt, låt oss se hur du kan add to en interaktiv 360 graders image till din WordPress blogg eller website. Vi kommer att täcka 2 metoder, och du kan använda snabblänkarna under för att hoppa till den du vill använda:
Metod 1: Så här addar du en 360-graders interaktiv image i WordPress
Det enklaste sättet att add to 360 graders roterande images till WordPress är genom att använda Algori 360 Image. Detta gratis WordPress plugin lägger helt enkelt till ett nytt block, vilket gör plugin mycket lätt att använda.
Tillägget hjälper dig dock inte att skapa en 360-graders image, bara att displayed den. Det betyder att du måste skapa imagen med hjälp av en smartphone-app eller webbdesignprogramvara. 360 graders images kan också add to mycket vikt till din website, så det är viktigt att du optimerar denna image för webben.
När det är gjort måste du installera och aktivera Algori 360 plugin. För mer detaljer, se vår Step-by-Step guide om hur du installerar ett WordPress plugin.
Vid aktivering finns det inga inställningar som du behöver konfigurera, så du kan börja använda tillägget direkt.
När du har en 360-graders image går du helt enkelt till den post eller page där du vill visa den interaktiva bilden.
Här klickar du på knappen ”+” och börjar skriva ”360 Image”. När det rätta blocket dyker upp, ge det ett click för att add to the page.
Du kan nu klicka på ”Mediabibliotek”.
Därefter väljer du antingen en 360-graders image från biblioteket eller uppladar en new fil från din dator.
Beroende på storleken på 360-graders-imagen kan du behöva vänta tills WordPress har behandlat den. Efter en stund ser du 360-graders-imagen i post editor.
You can then simply click the ’Update’ or ’Publicera’ button to make the image live.
Om du nu besöker din website i WordPress kan du dra för att rotera 360-graders imagen.
Om du har ett VR-headset kan du klicka på knappen ”VR” för att utforska 360-imagen i en virtuell verklighet.
Tänk bara på att interaktiva images kan sakta ner din website. Med det sagt kanske du vill läsa vår ultimata guide om hur du ökar hastigheten och prestandan i WordPress.
Det är också en bra idé att testa hur 360-graders imagen ser ut och fungerar på mobila enheter. För Step-by-Step instruktioner, vänligen se vår guide om hur man viewar mobilversionen av WordPress webbplatser från skrivbordet.
Metod 2: Hur man addar en 360 graders produkt image till din WooCommerce store
Interactive images allow shoppers to see a product from every angle, så de är viss nytta för marknadsplatser och butiker online.
Om du har en WooCommerce-butik, då tillåter SR Product 360° View dig att skapa en 360 graders roterande produkt image för varje objekt i din store.
Ta helt enkelt ett foto av produkten från alla vinklar och uploada sedan bilderna i den order du vill visa dem.
Pluginet kommer sedan att kombinera dessa images till en 360 graders roterande animation som kunderna kan se på din WooCommerce produkt page.
Först måste du installera och aktivera SR Product 360 view plugin. Om du behöver hjälp, vänligen se vår guide om hur du installerar ett plugin för WordPress.
Gå sedan till Produkter ” Alla produkter och öppna den produkt där du vill add to en 360 graders image.
I Product Editor rullar du till den nya sectionen Product 360 Degree View. Här klickar du på knappen ”Add 360 images”.
Nu kan du välja all images som du vill ha med i 360-gradersanimationen.
Se till att du väljer images i den order de ska visas i animationen.
SR Product 360° View kommer nu att visa alla dessa filer i Product 360 Degree View section. Du kan ordna bilderna på nytt med drag and drop.
När du är nöjd med bilderna klickar du antingen på knappen ”Update” eller ”Publicera” för att göra 360-gradersanimationen live.
Bonus: Vill du ta din WooCommerce store till nästa nivå? Prova att använda FunnelKit trattbyggare och automatiseringsplattform för att add to dynamiska upsells, cross-sells, order bumps, och full försäljningstratt i WooCommerce.
Vi hoppas att den här artikeln hjälpte dig att lära dig hur du lägger till interaktiva 360-graders images i WordPress. Du kanske också vill läsa vår guide om hur man skapar flipbox-överlägg och hover i WordPress, och vårt expertval av de bästa slider-tilläggen.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!