Vill du göra dina WordPress-bilder mer interaktiva och engagerande? Bild-hotspots förvandlar statiska bilder till dynamiskt innehåll genom att lägga till klickbara områden som avslöjar ytterligare information.
Vi har själva experimenterat med dem för att visa punkter på en karta, tagga teammedlemmar i ett fotografi och markera produktfunktioner. Från vår forskning har vi hittat 2 enkla sätt att lägga till bild-hotspots i WordPress.
Redo att förbättra din webbplats visuella upplevelse? Låt oss börja.
När du ska lägga till hotspots i dina bilder i WordPress
Bildhotspots är klickbara punkter som kan förvandla enkla bilder till interaktivt innehåll som besökare kan utforska. Men när bör du överväga att lägga till hotspots i dina bilder?
Ett bra tillfälle att använda hotspots är när du vill visa upp olika delar av en produktbild.
Låt oss säga att du säljer en ny telefon. Du kan lägga till hotspots för att peka ut dess kamera, skärm och andra funktioner. Detta hjälper kunderna att lära sig om produkten utan att läsa långa beskrivningar.
Många webbplatser för hemvaror använder också bildannotationer för att lyfta fram produktinformationen för föremål som visas i iscensatta foton.
Hotspots är också utmärkta för att göra infografik och datavisualisering mer engagerande. Istället för att klämma in all information i en enda bild kan du dölja extra detaljer bakom hotspots. När folk klickar på olika delar av infografiken kan de se mer fakta och siffror.
Om du driver en eLearning-webbplats, kan hotspots förbättra användarupplevelsen och göra dina lektioner mer interaktiva. Till exempel kan du lägga till hotspots på en karta, så att eleverna kan klicka för att lära sig om olika länder eller landmärken.
Med det i åtanke, låt oss titta på hur du enkelt lägger till bildhotspots till din WordPress-webbplats. Vi har tagit fram 2 metoder, och du kan använda snabblänkarna nedan för att navigera genom artikeln:
- Metod 1: Lägg till bild-hotspots med SeedProd (för landningssidor/anpassade teman)
- Metod 2: Lägg till bildhotspots med Image Hotspot Plugin (gratis men begränsat)
- Fler designtips för WordPress som du bör känna till
Metod 1: Lägg till bild-hotspots med SeedProd (för landningssidor/anpassade teman)
Den här första metoden använder SeedProd, en dra-och-släpp sidbyggare, för att lägga till bildhotspots på din WordPress-webbplats. Vi rekommenderar den här metoden om du skapar en anpassad landningssida eller ett anpassat WordPress-tema och vill använda en plattform med ett bildhotspot-block.
Vi har testat andra sidbyggare tidigare som Divi och WPBakery, men SeedProd är alltid bäst.
Vad vi älskar med SeedProd är att det erbjuder över 350 landningssidmallar och temakit för olika branschategorier, från onlinebutiker och städtjänster till SaaS-företag. Så det finns ett alternativ för varje typ av webbplats.
En sak du bör tänka på är att om du bara vill ha en gratis lösning för att skapa bildhotspots, kanske den här metoden inte är något för dig. Detta beror på att SeedProd:s hotspot-block endast är tillgängligt i de betalda versionerna av SeedProd. I så fall rekommenderar vi att du går med metod 2.
För mer information om pluginets funktioner och prissättning, kolla in vår SeedProd-recension.
När du har köpt en SeedProd-plan kan du ladda ner och installera WordPress-pluginet i ditt adminområde. Gå sedan till SeedProd » Inställningar och ange din licensnyckel. Du hittar denna information på din SeedProd-kontosida.
När du är klar, klicka bara på 'Verifiera nyckel'.
Navigera sedan till SeedProd » Landningssidor.
Klicka sedan på ‘Add New Landing Page.’
Du kommer nu att se alla mallar som SeedProd erbjuder. Det finns alternativ för en viral väntelista landningssida, en Google Ads landningssida, en kommande sida och mer.
Se till att bläddra igenom alternativen och förhandsgranska dem en efter en så att du kan välja det som bäst passar dina behov.
När du har bestämt dig för en mall, för bara muspekaren över ditt val.
Klicka sedan på den orangea bockmärkesknappen.
Nu kommer ett nytt popup-fönster att visas och be dig att namnge sidan och ange dess URL-slug.
När du har gjort det klickar du på 'Spara och börja redigera sidan'.
Detta öppnar SeedProds dra-och-släpp-redigerare.
Det fungerar på ett liknande sätt som WordPress blockredigerare, där du kan dra och släppa block på sidan och klicka på dem för att anpassa dem hur du vill.
För att skapa bildhotspots kan du hitta blocket ‘Hotspot’ i sidofältet till vänster.
Dra och släpp den sedan direkt på din sida.
Därefter måste du ladda upp WordPress-bilden som du vill lägga till hotspots till.
Du kan göra detta genom att klicka på blocket 'Hotspot' och välja antingen 'Använd din egen bild' eller 'Använd en lagerbild' för att välja en bild.
Det första alternativet öppnar mediabiblioteket där du kan välja en befintlig bild eller ladda upp en ny. Om storleken är ganska stor kan du kolla in vår guide om hur man laddar upp stora bilder i WordPress.
När du har laddat upp en bild kan du ange lite alt-text för att beskriva bilden för sökmotorer och skärmläsarverktyg.
Du kan också anpassa bildstorleken och justeringen.
Efter det kan du scrolla ner för att börja lägga till dina hotspots.
Du kan göra detta genom att klicka på knappen '+ Lägg till hotspot'.
En orange prick kommer nu att visas på din bild. Du kan justera dess position genom att dra i de horisontella och vertikala orienteringsreglagen.
Dessutom kan du infoga texten som ska visas när en användares muspekare svävar över hotspoten.
När du går längre ner kan du ändra färgen på hotspoten.
Klicka helt enkelt på inställningarna för ‘Färg’ för att välja en färg som passar ditt varumärke och din webbplatsdesign.
Om du fortsätter att skrolla ner kan du aktivera växlingsknappen 'Avancerade inställningar'.
Här kan du lägga till en länk till din hotspots tooltip-text så att användare kan omdirigeras till din önskade sida.
Dessutom kan du välja en anpassad ikon för att ersätta standardcirkelformen.
För att göra detta, klicka bara på knappen ‘Choose Icon’.
Ett popup-fönster visas där du kan välja olika ikoner från SeedProds bibliotek. Du kan också välja ikoner från Font Awesome om du behöver fler alternativ.
För att använda en ikon, klicka bara på den.
När du har valt en ikon kan du dra i reglaget för 'Ikonstorlek' för att göra formen mindre eller större, beroende på dina preferenser.
Du kan sedan upprepa stegen för att skapa fler interaktiva bildhotspots.
Nedan kan du lägga till en animerad effekt till dina bildhotspots. Det finns 2 alternativ: 'Soft Beat' och 'Expand'.
Nu, låt oss gå vidare till avsnittet ‘Tooltip’.
Här kan du ändra positionen för verktygstipset (höger, vänster, ovanför eller under hotspoten) och ändra utlösaren.
Om du väljer 'Klick' betyder det att tooltipen visas när användaren klickar på hotspoten. Å andra sidan betyder 'Hovra' att tooltipen visas när muspekaren förs över den.
Därefter kan du ändra varaktigheten för verktygstipset.
Detta hänvisar bara till hur lång tid det tar för verktygstipset att visas efter att användaren har hovrat över eller klickat på hotspoten. Om du vill att texten ska visas omedelbart, ställ in den till 0.
Du kan också inaktivera pilen för verktygstipset, beroende på dina preferenser.
Nu, om du byter till fliken 'Avancerat', kan du anpassa bildens utseende ännu mer.
Till exempel kan du lägga till en skuggning eller justera utfyllnad och marginal.
När du är klar klickar du bara på knappen ‘Spara’ i det övre högra hörnet.
Klicka sedan på 'Publicera' för att göra sidan live.
Och det var allt! Se till att du visar sidan på mobil, dator och surfplatta för att se om den ser bra ut på alla enheter.
Här är hur vår interaktiva bild-hotspot ser ut:
Metod 2: Lägg till bildhotspots med Image Hotspot Plugin (gratis men begränsat)
Om du använder en sidbyggare och att byta tema låter som lite för mycket, kan du istället använda det kostnadsfria WordPress-pluginet Image Hotspot. Det är ett av de bästa bildhotspot-plugins vi har provat och ett utmärkt alternativ till metod 1.
Observera dock att gratisversionen endast tillåter att lägga till upp till 6 hotspots på en enda bild.
För att använda Image Hotspot kan du installera och aktivera WordPress-pluginet i ditt adminområde. Gå sedan till Image Map Hotspot » All Image Map Hotspot och klicka på knappen 'Lägg till ny'.
Ge nu din nya bildkarta-hotspot ett namn. Välj sedan en av visningstyperna för verktygstips. Du kan antingen få de interaktiva hotspotens verktygstips att visas genom att föra muspekaren över eller klicka.
När du är klar, klicka på 'Spara'.
När det är klart, låt oss lägga till din bild.
För att göra detta, klicka bara på knappen 'Ladda upp bild'.
Detta öppnar mediabiblioteket, där du kan ladda upp en ny bild eller välja en befintlig.
Därefter kan du lägga till hotspots i din bildkarta. Klicka helt enkelt på knappen 'Lägg till punkt' för att göra detta.
Ett popup-fönster visas nu så att du kan konfigurera din interaktiva bildhotspot.
Navigera först till fliken 'Markör'. Det är här du kan anpassa hur hotspot-bilden ser ut. För att ändra ikonerna kan du klicka på '+' -tecknet bredvid fälten 'Ikoner' och/eller 'Hovringsikoner'.
'Ikoner' syftar på standardsymbolen för hotspot när den inte klickas på eller hålls över. Under tiden är 'Hover Icons' symbolen som visas när användaren klickar på eller håller muspekaren över hotspoten.
Välj nu en ikon för att ersätta det aktuella standardalternativet. Pluginet har massor att välja mellan.
När du har gjort ditt val, klickar du bara på den och trycker på 'Stäng'-knappen.
Med dina hotspot-bilder inställda kan du ändra färgerna på ikonerna.
Pluginet låter dig göra standardfärgen för hotspot-ikonen annorlunda än färgen vid hovring över ikonen. På så sätt kan användare enkelt se om en hotspot är aktiv när de klickar eller för muspekaren över den.
För att ändra färgen, klicka bara på den fyrkantiga färgvalsknappen och välj den färg du vill använda.
Du kan sedan klicka var som helst på sidan för att gå vidare till en annan inställning.
Du kan också anpassa hotspotens ikonstorlek på datorn. Ju högre nummer, desto större blir ikonen.
När du är nöjd med ikonens utseende, klicka bara på ‘Save.’
Scrolla nu upp och byt till fliken 'Innehåll'. Det är här du kan anpassa verktygstipsens text och utseende.
Pluginet ger dig 4 mallar att välja mellan, så du kan välja den som bäst passar din webbdesign.
Förutom det, se till att ersätta standardrubriken med din egen text.
Och beroende på din webbplatsdesign kanske du vill göra teckenstorleken större och ändra textfärgen för att förbättra dess läsbarhet.
När du är nöjd med inställningarna, klicka bara på ‘Save.’
Den sista fliken är 'länk'. Här har du möjlighet att göra din tooltip-text hyperlänkad, så att användare kan omdirigeras till en annan sida.
Om du vill göra detta, välj 'Ja' i inställningen 'Vill du länka titel?'.
Därefter infogar du din titel-URL i lämpligt fält och väljer om du vill att länken ska öppnas i en ny flik eller inte.
Slutligen, klicka på ‘Save.’
Nu bör en ny hotspot visas på din bild, som du kan dra till önskad position.
Du kan också upprepa samma steg som tidigare för att skapa fler bild-hotspots.
När du har konfigurerat din bildkarta kan du klicka på knappen 'Spara' igen.
För att lägga till bild-hotspoten till någon av dina sidor, inlägg och/eller widgets, kan du kopiera kortkoden ovanför bilden.
Därefter klistrar du bara in kortkoden i ett kortkodsblock på din widget, sida eller inlägg i blockredigeraren. Du kan lära dig mer om hur du gör detta i vår steg-för-steg-guide om hur du lägger till och använder kortkoder i WordPress.
Här är hur vår interaktiva bildhotspot ser ut:
Fler designtips för WordPress som du bör känna till
Förutom att skapa interaktiva bildhotspots finns det många fler sätt att göra din webbdesign engagerande. Här är några guider som kan hjälpa dig:
- Nyckelelement för design av en effektiv WordPress-webbplats
- Hur man lägger till oändlig scrollning till din WordPress-webbplats (steg för steg)
- Hur man lägger till oändlig scrollning till din WordPress-webbplats (steg för steg)
- Hur man skapar en visuell webbplatskarta i WordPress (steg för steg)
- Hur man skapar en klistrig flytande sidofot i WordPress
- Hur man lägger till en teckenstorleksändrare i WordPress för tillgänglighet
- Hur man lägger till en klick-för-att-ringa-knapp i WordPress (steg för steg)
- Hur man lägger till en anpassad scrollbar i WordPress
- Hur man lägger till en framstegsmätare i dina WordPress-inlägg
- Hur man skapar en anpassad formdelare i WordPress
- Hur man lägger till en rullande nyhetsticker i WordPress
Vi hoppas att den här artikeln hjälpte dig att lära dig hur du enkelt lägger till bildhotspots i WordPress. Du kanske också vill kolla in vår ultimata guide om WordPress-sidotrick för maximala resultat och våra experttips om de bästa WordPress-temabyggarna.
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.