Så här lägger du till Image Hotspots i WordPress (det enkla sättet)

Ibland räcker det inte att bara lägga till bilder och visuella element för att fånga besökarnas uppmärksamhet.

Det är där bildhotspots kan komma till undsättning. Dessa klickbara områden kan förvandla en enkel bild till en engagerande och informativ upplevelse för dina besökare. Vi har själva experimenterat med dem för att visa upp punkter på en karta, tagga teammedlemmar på ett fotografi och lyfta fram produktegenskaper.

Om du undrar hur du gör samma sak har du kommit till rätt ställe. Denna przewodnik visar dig 2 enkla metoder för att skapa en bild-hotspot för din WordPress-webbplats utan någon kod.

När ska du lägga till hotspots i dina bilder i WordPress

Imagely hotspots är klickbara punkter som kan förvandla enkla bilder till interaktivt innehåll som besökarna kan utforska. Men när bör du tänka på 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 klienci att lära sig mer om produkten utan att läsa långa beskrivningar.

Många heminredningswebbplatser använder också bildhotspots för att lyfta fram produktdetaljerna för artiklar 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 bild kan du dölja extra detaljer bakom hotspots. När människor klickar på olika delar av infografiken kan de se mer fakta och siffror.

Om du driver en webbplats för eLearning kan hotspots förbättra användarupplevelsen och göra dina lektioner mer interaktiva. Du kan till exempel lägga till hotspots på en karta så att eleverna kan klicka för att lära sig mer om olika länder eller landmärken.

Med detta i åtanke, låt oss titta på hur du enkelt kan lägga till bildhotspots på din WordPress-webbplats. Vi har kommit fram till 2 metoder, och du kan använda snabblänkarna nedan för att navigera genom artikeln:

Metod 1: Lägg till Image Hotspots med SeedProd (för landningssidor/anpassade teman)

Den här första metoden använder SeedProd, en drag-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.

Det vi älskar med SeedProd är att de erbjuder över 350 mallar för målsidor och temakit för olika branschkategorier, från onlinebutiker och städtjänster till SaaS-företag. Så det finns ett alternativ för alla typer av webbplatser.

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 SeedProds hotspot-block endast är tillgängligt i de betalda SeedProd-versionerna. 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 obszara administracyjny. Därefter går du till SeedProd ” Inställningar och anger din klucz licencyjny. Du hittar den här informationen på din SeedProd-kontosida.

När du är klar klickar du bara på ”Verifiera nyckel”.

Efter det, navigera till SeedProd ” Landningssidor.

Klicka sedan på ”Lägg till ny landningssida”.

Du kommer nu att se alla de mallar som SeedProd erbjuder. Det finns alternativ för en wiralowy landningssida för väntelista, en Google-annonslandningssida, en kommande snart-sida och mer.

Se till att bläddra igenom alternativen och förhandsgranska dem ett efter ett så att du kan välja det som bäst passar dina behov.

När du har bestämt dig för en mall är det bara att hålla muspekaren över ditt val.

Klicka sedan på den orangefärgade bockknappen.

Nu visas en ny popup där du ombeds att namnge sidan och wstawić dess URL-slog.

När du har gjort det klickar du på ”Spara och börja redigera sidan”.

Detta öppnar SeedProd drag-and-drop-redigeraren.

Det fungerar på samma 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 som du vill.

För att skapa bildhotspots hittar du blocket ”Hotspot ” i den vänstra sidofältet.

Sedan är det bara att dra och släppa den direkt på din sida.

Därefter måste du ladda upp den WordPress-bild som du vill lägga till hotspots på.

Du kan göra detta genom att klicka på blocket ”Hotspot” och välja antingen ”Use Your Own Image” eller ”Use a Stock Image” för att välja en bild.

Det första alternativet öppnar mediebiblioteket 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 przewodnik om hur du laddar upp stora bilder i WordPress.

När du har laddat upp en bild kan du ange en alt-text för att beskriva bilden för sökmotorer och skärmläsningsverktyg.

Du kan också anpassa bildens storlek och justering.

Därefter kan du bläddra nedåt för att börja lägga till dina hotspots.

Det gör du genom att klicka på knappen ”+ Add Hotspot”.

En orange punkt kommer nu att visas på din bild. Du kan justera dess position genom att dra i de horisontella och vertikala orienteringsfälten.

Dessutom kan du wstawić den text som ska visas när en användares markör håller muspekaren över hotspoten.

När du rör dig nedåt kan du ändra färg på hotspoten.

Klicka bara 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 nedåt kan du aktivera reglaget ”Avancerade inställningar”.

Här kan du lägga till en länk i etykietka-texten för din hotspot så att användarna kan omdirigeras till önskad sida.

Dessutom kan du välja en anpassad ikon för att ersätta standardcirkelformen.

För att göra detta klickar du bara på knappen ”Välj ikon”.

Ett popup-fönster kommer att visas där du kan välja olika ikoner från SeedProd’s bibliotek. Du kan också välja ikoner från Font Awesome om du behöver fler alternativ.

För att använda en ikon klickar du bara på den.

När du har valt en ikon kan du dra i fältet ”Icon Size” för att göra formen mindre eller större, beroende på vad du föredrar.

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 ”Expandera”.

Låt oss nu gå ner till avsnittet ”Etykietka”.

Här kan du ändra positionen för etykietka (höger, vänster, ovanför eller under hotspot) och ändra utlösaren.

Om du väljer ”Click” innebär det att etiketterna visas när användaren klickar på hotspoten. Å andra sidan innebär ”Hover” att etiketterna visas när markören håller muspekaren över dem.

Därefter kan du ändra varaktigheten för etiketterna.

Detta avser bara hur lång tid det tar för etykietka att visas efter att användaren håller muspekaren över eller klickar på hotspot. Om du vill att texten ska visas direkt är det bara att sätta den till 0.

Du kan också inaktivera pilen i etiketterna, beroende på dina preferenser.

Om du nu byter till kartan ”Avancerat” kan du anpassa bildens utseende ännu mer.

Du kan t.ex. lägga till en boxskugga 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 så är det klart! Se till att du visar sidan på mobil, dator och surfplatta för att se om den ser bra ut på alla enheter.

Så här ser vår interaktiva bildhotspot ut:

Metod 2: Lägg till bildhotspots med Image Hotspot Plugin (gratis men begränsat)

Om det låter som lite för mycket att använda en sidbyggare och byta tema, kan du använda gratispluginet WordPress Image Hotspot istället. Detta plugin är ett bra alternativ till metod 1, men observera att gratisversionen endast tillåter att lägga till upp till 6 hotspots på en enda bild.

För att använda Imagely Hotspot kan du installera och aktivera WordPress-pluginet i din obszar administracyjny. Gå sedan till Image Map Hotspot ” All Image Map Hotspot och klicka på knappen ”Lägg till ny”.

Ge nu din nya hotspot för bildkartan ett namn. Välj sedan en av visningstyperna för etiketterna. Du kan antingen få hotspotens etykietka att visas genom att hovra eller klicka.

När du är klar klickar du på ”Spara”.

När det är klart lägger vi till din bild.

För att göra detta klickar du bara på knappen ”Ladda upp bild”.

Detta öppnar mediebiblioteket, där du kan ladda upp en ny bild eller välja en befintlig.

Därefter kan du lägga till hotspots på din bildkarta. Klicka bara på knappen ”Add Point” för att göra detta.

Ett popup-fönster visas nu där du kan konfigurera din interaktiva bildhotspot.

Navigera först till kartan ”Markör”. Det är här du kan anpassa hur hotspot-bilden ser ut. Om du vill ändra ikonerna kan du klicka på ”+”-tecknet bredvid fälten ”Ikoner” och/eller ”Hover-ikoner”.

”Ikoner” avser standardsymbolen för hotspot när den inte klickas på eller hålls över. Under tiden är ”Hover Icons” den symbol som visas när användaren klickar eller håller muspekaren över hotspot.

Nu kan du gå vidare och välja en ikon för att ersätta det aktuella standardalternativet. Pluginet har mycket att välja mellan.

När du har gjort ditt val klickar du bara på det och trycker på knappen ”Stäng”.

När du har konfigurerat dina hotspot-bilder kan du ändra färgerna på ikonerna.

Pluginet låter dig göra standardfärgen på hotspot-ikonen annorlunda än färgen på ikonens hover. På så sätt kan användarna enkelt se om en hotspot är aktiv när de klickar eller håller muspekaren över den.

För att ändra färg klickar du bara på färgvalsknappen Square och väljer 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 storleken på hotspot-ikonen på skrivbordet. Ju högre siffra, desto större blir ikonen.

När du är nöjd med ikonens utseende klickar du bara på ”Spara”.

Bläddra nu uppåt och växla till kartan ”Innehåll”. Det är här du kan anpassa etykietkets text och utseende.

Pluginet ger dig 4 mallar att välja mellan, så att du kan välja den som bäst passar din webbplatsdesign.

Utöver det ska du se till att ersätta standardinnehållet i titeln med din egen text.

Och beroende på hur din webbplats ser ut kanske du vill göra teckensnittet större och ändra textfärgen för att förbättra läsbarheten.

När du är nöjd med inställningarna klickar du bara på ”Spara”.

Den sista kartan är ”länk”. Här har du möjlighet att göra texten i etiketterna hyperlänkad, så att användarna kan omdirigeras till en annan sida.

Om du vill göra detta väljer du ”Yes” i inställningen ”Do you Link Title?”.

Därefter ska du wstawić din URL för titellänken i lämpligt fält och välja om du vill att länken ska öppnas i en ny karta eller inte.

Klicka till sist på ”Spara”.

Nu ska 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 bildhotspots.

När du har konfigurerat din bildkarta kan du klicka på knappen ”Spara” igen.

Om du vill lägga till bildhotspot på någon av dina sidor, inlägg och/eller widgetar kan du kopiera krótki koden ovanför bilden.

Därefter klistrar du bara in kortkoden i ett block med krótki kod 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 przewodnik om hur du lägger till och använder krótki koder i WordPress.

Så här ser vår interaktiva bildhotspot ut:

Upptäck fler spännande designfunktioner för din WordPress-webbplats

Förutom att skapa interaktiva bildhotspots finns det många fler sätt att göra din webbplatsdesign engagerande. Här är några przewodniker som kan hjälpa dig:

• Så här lägger du till nieskończone przewijanie på din WordPress-webbplats (steg för steg)
• Så här skapar du en visuell webbplatskarta i WordPress (steg för steg)
• Så här skapar du ett flytande sidfotsfält i WordPress
• Så här lägger du till en Font Resizer i WordPress för tillgänglighet
• Så här lägger du till en Click-to-Call-knapp i WordPress (steg för steg)
• Så här lägger du till ett anpassat rullningsfält i WordPress
• Så här lägger du till en Progress Bar i dina WordPress-inlägg
• Så här skapar du en egen formdelare i WordPress
• Så här lägger du 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 bild-hotspots i WordPress. Du kanske också vill kolla in vår ultimata przewodnik för WordPress sidofältstricks för att få maximalt resultat och våra expertval av de bästa temabyggarna för WordPress.

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.