Att hitta den perfekta bilden för ditt WordPress-inlägg är en bra början, men ofta är det en enkelriktad gata. Dina besökare ser en statisk bild, och de kanske missar de viktigaste detaljerna du vill lyfta fram.
Detta kan vara frustrerande, särskilt när du försöker visa upp produktfunktioner eller guida användare genom en process. Tänk om dina bilder kunde göra mer och aktivt engagera din publik?
Det är precis vad interaktiva bilder gör. Efter att ha testat flera plugins här på WPBeginner har vi hittat en enkel metod som låter vem som helst lägga till klickbara hotspots till sina bilder utan att behöva någon kod.
I den här guiden visar vi dig hur du enkelt kan förvandla dina statiska bilder till engagerande, interaktiva upplevelser för dina besökare.
I den här guiden går vi igenom hela processen. Här är en snabb översikt över vad du kommer att lära dig.
- Vad är en interaktiv bild?
- Hur man lägger till interaktiva bilder i ditt WordPress-innehåll
- Hur man importerar/exporterar interaktiva bilder till andra WordPress-webbplatser
- Vanliga frågor om interaktiva bilder
Vad är en interaktiv bild?
En interaktiv bild kan ha hotspotområden, höjdpunkter, länkar, klickbara knappar, färger, audiovisuellt innehåll och mer.
Omedelbart är detta mycket mer engagerande än en enkel, vanlig bild som du laddar upp till din WordPress-webbplats.
Interaktiva bilder kan dra besökarens uppmärksamhet till specifika funktioner och innehåll och sedan visa ytterligare information.
Till exempel kan du visa en popup när besökaren hovrar över ett visst stapel i ett diagram.
Denna interaktion kan uppmuntra besökare att utforska dina bilder mer i detalj, vilket gör att de stannar kvar på sidan längre. Det kan också skapa en mer interaktiv och intressant upplevelse, vilket kan öka dina sidvisningar och minska avvisningsfrekvensen i WordPress.
Interaktiva bilder kan också visa besökarna vilka steg de bör ta härnäst. Du kan till exempel lägga till länkar till andra delar av din webbplats eller visa en knapp för uppmaning till handling.
Med det sagt, låt oss se hur du kan skapa interaktiva bilder för din WordPress-webbplats.
Notera: Om du istället vill lägga till animerade bilder på din webbplats, följ vår steg-för-steg-guide om hur du lägger till animerade GIF-filer i WordPress.
Hur man lägger till interaktiva bilder i ditt WordPress-innehåll
Det enklaste, mest nybörjarvänliga sättet att lägga till klickbara områden eller interaktiva hotspots är att använda Draw Attention. Detta plugin låter dig antingen visa en popup med mer information eller öppna en ny URL när användaren interagerar med en bild.
Notera: I den här guiden kommer vi att använda gratisversionen av pluginet. Du är dock välkommen att skaffa proversionen av WP Draw Attention, eftersom den låter dig skapa flera interaktiva bildkartor, använda verktygstips och lightbox-effekter, och mer.
Det första du behöver göra är att installera och aktivera Draw Attention-pluginet. För mer information, se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.
Efter aktivering, gå till Framhäv » Redigera bild i WordPress-instrumentpanelen. Detta tar dig till en skärm där du kan skapa olika interaktioner och sedan lägga till dem i en bild som klickbara områden.
För att börja, skriv in en titel för den interaktiva bilden.
Detta kommer att visas bredvid bilden på din WordPress-webbplats. Till exempel, i följande bild använder vi titeln 'OptinMonster Features.'
Experttips: Exempelbilden visar funktioner från OptinMonster, vilket är exakt det verktyg vi använder här på WPBeginner. Det hjälper oss att skapa popups, slide-in-formulär och andra kampanjer för att växa vår e-postlista och öka konverteringar.
Det är den mest kraftfulla programvaran för konverteringsoptimering på marknaden. Du kan lära dig mer om dess funktioner i vår kompletta OptinMonster-recension.
Efter att ha skrivit in en titel, skrolla till sektionen 'Bild' och välj den bild du vill använda.
Du kan antingen välja en bild från mediebiblioteket eller ladda upp en ny bild.
Efter att ha valt en bild kan du lägga till färger och länkar, skapa klickbara områden och mer genom att skrolla ner till sektionen ‘Hotspot Areas’.
Pluginet skapar ett klickbart område 1 som standard, så klicka för att expandera den här sektionen.
För att börja måste du markera det område som du vill göra interaktivt.
Draw Attention har några olika former du kan använda för highlight, så klicka helt enkelt på den form du vill använda. På följande bild har vi valt en rektangel.
Klicka och dra nu för att markera det område du vill använda som bildens hotspot.
Draw Attention kommer nu att visa några nya inställningar för detta klickbara område. För att börja, skriv ett namn i fältet 'Titel'.
Detta kommer att visas som en tooltip när besökaren för muspekaren över hotspoten, så det är en bra idé att använda något beskrivande.
I följande bild har vi förvandlat nedräkningsområdet till en hotspot och lagt till bildens titel 'Nedräkningstimer'.
När du har gjort det, öppna rullgardinsmenyn 'Åtgärd' och välj vad som händer när en besökare klickar på detta område. Rita uppmärksamhet kan antingen öppna en länk eller visa en 'mer information'-ruta.
Du kommer att se olika inställningar beroende på vilka alternativ du väljer. Om du till exempel väljer 'Gå till URL', måste du sedan lägga till en länk och ange om den ska öppnas i en ny flik.
Om du väljer 'Visa mer information', behöver du skriva in den information som kommer att visas när besökaren klickar på hotspoten.
Du kan också lägga till en valfri detaljbild eller URL, som kommer att inkluderas i informationsrutan.
I följande bild har vi lagt till lite text i rutan 'mer information'.
Vi har också lagt till OptinMonster-logotypen som en detaljbild.
När du är nöjd med hur hotspoten ser ut, klicka på knappen 'Lägg till ett annat område'.
Du kan nu konfigurera det klickbara området genom att följa samma process som beskrivs ovan.
Upprepa helt enkelt dessa steg för att lägga till alla klickbara områden till bilden.
När det är gjort kanske du vill anpassa hur höjdpunkterna och mer information visas. Du kan till exempel ändra färgen som Draw Attention visar när besökare hovrar över ett klickbart område med hjälp av inställningarna för 'Markeringsfärg'.
Du kan också ändra opaciteten för markeringen och kantbredden, lägga till en kant och mer med hjälp av inställningarna i avsnittet 'Markeringsstil'.
Därefter kan du skrolla till 'Mer infobox-styling' och finjustera hur rutan ser ut. Du kan till exempel ändra bakgrundsfärg, textfärg och mer.
Draw Attention kommer också med olika teman som du kan applicera på din interaktiva bild.
För att titta på dessa teman, scrolla helt enkelt till rutan ‘Använd färgschema’ och öppna rullgardinsmenyn. Du kan välja mellan Ljus, Mörk och Framhäv.
Alla dessa alternativ är ganska enkla, så det är värt att prova olika inställningar för att se vad som ser bäst ut på din webbplats.
När du provar de olika alternativen kan du förhandsgranska hur de kommer att se ut på din WordPress-webbplats genom att klicka på 'Förhandsgranska ändringar'.
När du är nöjd med hur den interaktiva bilden ser ut och fungerar, se till att klicka på 'Uppdatera' för att spara dina ändringar.
Du kan nu lägga till den interaktiva bilden på vilken sida, inlägg eller widget-redo område som helst med hjälp av kortkoden i blocket 'Kopiera kortkod'.
För mer information om hur du placerar kortkoden, se vår guide om hur man lägger till en kortkod i WordPress.
Hur man importerar/exporterar interaktiva bilder till andra WordPress-webbplatser
Ibland vill du kanske återanvända samma interaktiva bild på flera webbplatser.
Till exempel, om du är en affiliatemarknadsförare, då kanske du skapar en interaktiv bild som marknadsför en av dina produkter. Du kan sedan använda samma interaktiva bild i alla dina Amazon-affiliatestores och andra webbplatser för affiliatemarknadsföring.
Att ladda upp samma bild och sedan återskapa alla interaktioner manuellt kan ta mycket tid och ansträngning.
Istället rekommenderar vi att du skapar den interaktiva bilden en gång och sedan använder Draw Attentions import-/exportfunktion. Detta gör att du kan återanvända samma bild på otaliga webbplatser eller webbutiker.
För att göra detta behöver du installera Draw Attention-pluginet på den ursprungliga webbplatsen som har den interaktiva bilden och på alla andra webbplatser där du vill använda bilden.
På din ursprungliga webbplats, gå till Framhäv » Importera / Exportera och markera rutan bredvid varje bild som du vill exportera.
Klicka sedan på knappen 'Generera exportkod'. Efter några ögonblick kommer Draw Attention att generera lite kod.
Logga in på din andra WordPress-blogg eller webbplats i en annan flik och gå till Draw Attention » Import / Export.
Här, kopiera exportkoden till rutan 'Import' och klicka på knappen 'Import'.
Draw Attention kommer nu att importera bilden och alla dess interaktioner, redo för dig att använda.
Upprepa helt enkelt dessa steg på alla webbplatser där du vill använda den interaktiva bilden.
Vanliga frågor om interaktiva bilder
Här är svaren på några av de vanligaste frågorna vi får om att lägga till interaktiva bilder i WordPress.
Vilket är det bästa pluginet för att skapa interaktiva bilder i WordPress?
För nybörjare rekommenderar vi Draw Attention-pluginet eftersom det är lätt att använda och har ett enkelt gränssnitt. Gratisversionen ger alla grundläggande funktioner du behöver, medan proversionen låser upp mer avancerade alternativ som flera bildkartor och extra styling för verktygstips.
Är interaktiva bilder mobilvänliga?
Ja, Draw Attention-pluginet är helt responsivt. Detta innebär att dina interaktiva hotspots och infoboxar automatiskt anpassas för att passa alla skärmstorlekar, vilket ger en utmärkt användarupplevelse på mobila enheter.
Kan jag lägga till videor eller animationer till interaktiva hotspots?
Du kan använda åtgärden 'Gå till URL' för att länka en hotspot till en video på en plattform som YouTube eller Vimeo. Medan direkt videobäddning i popupen kan kräva pro-versionen, är länkning en enkel lösning. För animerade bilder rekommenderar vi att du följer vår guide om att lägga till animerade GIF-filer i WordPress.
Kommer interaktiva bilder att sakta ner min webbplats?
Precis som all media, lägger interaktiva bilder till din sides vikt. Draw Attention-pluginet är dock lättviktigt och välkodat. Den största faktorn är den ursprungliga bildfilens storlek, så vi rekommenderar alltid att optimera dina bilder för webben innan du laddar upp dem.
Vi hoppas att den här artikeln hjälpte dig att lära dig hur du skapar interaktiva bilder i WordPress. Du kanske också vill se vår guide om hur du skapar bild-flipbox-överlägg och hovringar i WordPress och våra experttips om bästa WordPress-slider-plugins.
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.
Andrea Davidson
Hej
Måste jag betala för pro för att lägga till mer än en bild?
Tack
Andrea