Nøgle takeaways
- Et Elementor-billedhotspot er en markør, der er fastgjort på et foto, der åbner en kort etiket ved hover eller tryk, og Master Addons Image Hotspot-widget tilføjer én markør for hvert element på sin Hotspots-liste.
- Image Hotspot-widgetten har brug for Elementor og Master Addons Pro, fordi gratis Elementor ikke har nogen hotspot-widget, og Elementor Pro sender sin egen separate Hotspot-widget.
- Hver Image Hotspot-markør placeres med vandrette og lodrette positionsskydere i procent af billedet, og den ene position gælder på desktop, tablet og telefon.
- Billedhotspot-værktøjstip viser kun almindelig tekst, da fed tekst, links, billeder og kortkoder, der er indtastet i boksen Værktøjstipindhold, fjernes, når siden gengives.
- Udløser ved klik i afsnittet Billedhotspotværktøjstip får markører til at fungere på telefoner, men en markørs link følges kun, når værktøjstip åbnes ved svæve.
- Image Hotspot-widgetten kan tjene som et simpelt billedkort med sammenkædede punktmarkører, selvom den ikke kan tegne klikbare former eller rumkonturer, som et SVG-billedkort-plugin kan.
Et Elementor-billedhotspot er en lille markør, der er fastgjort på et foto, der viser en kort etiket, når en besøgende svæver eller trykker på den. Gratis Elementor har ingen widget til dette, så denne vejledning bruger Master Addons Image Hotspot widget, som tilføjer markører til ethvert billede fra Elementor panelet uden brugerdefineret kode. Du skal bruge Master Addons Pro til det.
Trinnene nedenfor tager dig fra en tom beholder til et offentliggjort interaktivt billede: placere markører i procent, skrive etiketten for hver enkelt, og styling markørerne for desktop og telefoner. Senere afsnit dækker grænserne for at vide, før du bygger, hvordan man bruger hotspots som et simpelt billede kort, og hvordan widgeten sammenligner med Hotspot widget i Elementor Pro.
Indholdsfortegnelse
Hvad et billede hotspot er i Elementor
Et billedhotspot er en markør, der er placeret på et sætpunkt på et billede. Hver markør bærer sin egen korte etiket og, hvis du vil, et link. På et skrivebord vises etiketten på hover. På en telefon trykker den besøgende på markøren.
Et produktfoto kan have en markør på hver funktion. En plantegning kan markere rum eller skriveborde. Et skærmbillede kan pege på de knapper, en ny bruger har brug for. Billedet forbliver det samme, og markørerne lader besøgende udforske det uden at rulle ned til en separat liste over specifikationer eller en forklaring.
Gratis Elementor har ingen hotspot widget. Elementor Pro har en kaldet Hotspot, og Master Addons Pro tilføjer Image Hotspot, som også kan bruge et lille billede som markør. Denne vejledning dækker Master Addons widget.
Hvis du kun vil have et hover-tip på en knap eller en overskrift, er et hotspot det forkerte værktøj. Den Værktøjstip widget håndterer det uden Master Addons Pro, og den Tooltips udvidelse (Pro) tilføjer et tip til et element, der allerede er på siden.
Vil du se det virke, før du bygger? de Billede Hotspot widget side har live demoer, den fulde indstillingsliste og en side-by-side med Elementor Pro Hotspot.
Sådan tilføjes et billedhotspot i Elementor
Opsætningen tager cirka fem minutter for et billede med fire eller fem markører.
Trin 1: Installer Master Addons og aktiver Pro
I dit WordPress dashboard skal du gå til Plugins, Tilføj nyt og søge efter “Master Addons”. Installer og aktiver det, og indtast derefter din Pro licens under Master Addons, Licens. Image Hotspot vises kun i Elementor panelet, når Pro er aktiv. Det virker med gratis Elementor.
Trin 2: Træk Image Hotspot-widgeten over på siden
Åbn siden i Elementor editor og søg Elements panelet for “hotspot”. Resultatet med MA badge er Image Hotspot. Hvis du også ser en hængelåst Hotspot widget ved siden af, at en tilhører Elementor Pro. Træk Image Hotspot ind i en beholder.
Trin 3: Vælg dit billede
Åbn afsnittet Billede på fanen Indhold, og klik på Vælg billede. Indstil billedopløsning til Fuld eller Stor, hvis billedet har fine detaljer, fordi markører sidder på det gengivne billede, og en nedskaleret kopi får hver pin til at se omtrentlig ud. Justering placerer billedet til venstre, i midten eller til højre i sin kolonne.
Trin 4: Tilføj hotspots og indstil deres position
Åbn Hotspots-sektionen. Hvert element på listen er én markør, så klik på Tilføj element én gang for hvert sted, du vil markere. Der er ingen begrænsning på antallet af elementer.
Hvert element har faner Indhold, Stil og Position. På fanen Position skal du flytte skyderne Vandret position (%) og Lodret position (%) for at placere markøren. Værdierne er en procent af billedet, så 50 og 50 sætter markøren i midten. Du kan ikke trække markører på lærredet, og nye elementer starter alle i øverste venstre hjørne, indtil du flytter dem, så tre friske elementer kan ligne en.
En position gælder på hver skærmstørrelse. En markør på 22% på tværs og 52% ned sidder på den samme del af billedet på en bærbar computer og på en telefon.
Under listen, Deaktiver pulseffekt? slukker pulseringsringen omkring hver markør i widgetten.
Trin 5: Vælg markørtypen og skriv etiketten
På fanen Indhold i hvert element indstiller Type det, der vises inde i markøren: Ingen (en almindelig prik), Tekst (et plustegn som standard eller et tal eller et ord, du skriver), Ikon (ethvert Font Awesome-ikon) eller Billede (et lille billede). Blanding af typer på ét billede fungerer fint.
Feltet Link sender den besøgende til en anden side, når de klikker på markøren. Det følges, når værktøjstip åbnes ved hover. Med Trigger on Click slået til (trin 6), åbner et klik værktøjstippet, og linket ignoreres.
Værktøjstipsindhold er den linje, der vises i hotspot-værktøjstippet. Boksen ligner en fuldteksteditor, men værktøjstippet viser almindelig tekst: fed, kursiv, links, billeder og kortkoder fjernes alle, når siden gengives. Skriv en kort linje.
Trin 6: Vælg, hvordan markørerne åbner
Tilbage i fanen Indhold styrer sektionen Værktøjstip hver markør i widgetten på én gang.
- Vis position vælger den side, værktøjstippet åbnes på: øverst, nederst, til venstre eller højre. En markør kan tilsidesætte den med indstillingen Vis til på fanen Placering.
- Animation indstiller afsløringseffekten: Shift-Away, Shift-Toward, Fade, Scale eller Perspective.
- Pil tilføjer en markør fra værktøjstippet til markøren.
- Offset og Distance flytter værktøjstippet langs markøren og væk fra den.
- Udløser på Klik åbner værktøjstip ved et klik eller tryk. Telefoner har ingen hover, så slå dette til, hvis mange besøgende bruger en telefon.
Trin 7: Forhåndsvisning og udgivelse
Klik på Udgiv, og åbn siden i en ny fane. Hold markøren over hver markør for at kontrollere værktøjstipteksten og siden, og tilpas derefter størrelsen på vinduet til telefonens bredde, og kontroller, at markører ikke dækker hinanden.
Style markørerne og billedet
Styling sker to steder: hver markørs egen stilfane og widgettens hovedfane Style.
Per-markør stil
Fanen Stil inde i et hotspot-element har Standard- og Svæveindstillinger for farve, baggrund og opacitet. Brug den til at give en markør en anden farve, som f.eks. et udsalgsobjekt på et produktfoto.
Vælg en markørfarve, der står i kontrast til billedet bag. En dæmpet markør på et optaget foto går tabt, og besøgende vil ikke bemærke, at der er noget at svæve.
spejlbillede
Afsnittet Billede på fanen Style styrer billedet: opacitet, kant, grænseradius, boksskygge og CSS-filtre. En radius og en blød skygge hjælper billedet med at sidde inde i et kortlayout.
Hotspots
Hotspots-sektionen styler hver markør på én gang: størrelse, polstring, grænseradius, opacitet, farve og baggrund, hver med en hover-version. Indstillinger på en individuel markør vinder over disse.
Værktøjstip
Afsnittet Værktøjstip styler hotspot-værktøjstip: tekstjustering, udfyldning, grænseradius, baggrund, tekstfarve, pilfarve og typografi.
Byg et interaktivt billede i Elementor
Et interaktivt billede er et foto, der besvarer spørgsmål, når en besøgende peger på det. I Elementor bygger du et med Image Hotspot ved at følge ovenstående trin: én markør pr. sted, et værktøjstip på én linje på hver og Udløs Klik, hvis din trafik for det meste er mobil.
Parring af billedet med en kort liste ved siden af fungerer godt. Den besøgende kan holde markøren eller læse listen, og begge peger på de samme elementer. Den shop dette værelse demo bruger nummererede markører på et stuefoto med en prisliste ved siden af.
Andre layouts, der passer til et interaktivt billede, omfatter et ur eller en gadget med en markør på hver del, en billiste med markører på lygter og hjul, et ejendomsfoto med etiketter på hver funktion og et holdfoto med et navn på hver person.
Brug billedhotspots som et simpelt billedkort
Et billedkort gør dele af et billede klikbart. Image Hotspot dækker det fælles tilfælde: en markør på hvert sted med et Link til en anden side, som følges, når værktøjstip åbnes på hover. Det placerer kun punktmarkører. Det tegner ikke klikbare former, så en grundplan, hvor hver rumkontur skal være klikbar, har brug for et dedikeret billedkort plugin som f.eks Image Map Pro, som tegner vektorformer på billedet (pr. november 2026).
For nåle på et campuskort, et butikslayout eller et fitnesscentergulv er markører nok og hurtigere at sætte op. Den gym zone kort demo markerer fem zoner på et billede, og hver markør linker til den zones reservationsside.
Image hotspots på telefoner og tablets
Markørpositioner er en procent af billedet, så hver markør forbliver på den samme del af billedet ved hver skærmstørrelse. Der er ingen separat position for tablet eller telefon.
Markører holder deres størrelse som billedet krymper, omkring 40px som standard. På en telefon bliver et billede med mange markører overfyldt. Brug færre markører, lavere Størrelse under Stil, Hotspots, eller giv telefon besøgende et enklere billede.
Telefoner har ingen hover, så tænd for Trigger på Klik i afsnittet Værktøjstip. Besøgende trykker på en markør for at åbne dens værktøjstip. Husk på, at med kliktilstand på, åbner et tryk værktøjstippet, og markørens Link følges ikke, så hvis linkene betyder mere end værktøjstipene, skal du lade Trigger være slået fra.
Hvad du skal bruge billede hotspots
| Opsætning | Hotspot widget du får |
|---|---|
| Gratis Elementor på egen hånd | Ingen. Core Elementor har ingen hotspot-widget. |
| Elementor Pro | Elementors egen Hotspot-widget med formateret værktøjstipindhold og sine egne markøranimationer. |
| Master Addons uden Pro | Intet Image Hotspot. Mange andre widgets er inkluderet. |
| Med Master Addons Pro | Image Hotspot, Tooltips-udvidelsen og resten af 80+ widgets og udvidelser. |
Master Addons installerer fra WordPress plugin bibliotek. Image Hotspot har brug for en Master Addons Pro licens oven i det. Hver kontrol er angivet i Guide til indstillinger for Image Hotspot.
Tips til at arbejde med image hotspots
- Mellemrumsmarkører ud. Hvis to sidder tæt sammen, skal du sende deres værktøjstip til modsatte sider med indstillingen Vis til på hver markørs fane Position eller slippe en.
- Hold hver etiket på én linje. Værktøjstippet gengives som almindelig tekst, så sæt længere detaljer på en side, og brug markørens Link.
- Test ved telefonens bredde, før du udgiver. Den samme procentposition gælder overalt, og markører krymper ikke, så en markør, der ser fint ud på et skrivebord, kan dække en lille detalje på en telefon.
- Brug en Hover-farve på markører, så besøgende kan fortælle, hvilken de er på.
- Linjemarkører op med nøjagtige tal. At skrive værdier i procentfelterne er hurtigere end at skubbe skydere, når markører skal sidde på små dele af et diagram eller skærmbillede.
Ofte stillede spørgsmål
Hvad er et billede hotspot i Elementor?
Et billedhotspot er en lille markør, der er placeret oven på et billede. Når en besøgende svæver eller trykker på det, vises en kort etiket for den del af billedet. Elementor Pro har sin egen Hotspot-widget, og Master Addons Pro tilføjer en Image Hotspot-widget, der også kan bruge små billeder som markører.
Hvor mange hotspots kan jeg tilføje til et enkelt billede?
Der er ingen hård grænse. Fem til syv markører pr billede holder tingene læsbare, og færre på billeder, der vil blive set på telefoner, fordi markører ikke krymper med billedet. Hvis du har brug for mere, opdele indholdet på tværs af to billeder.
Virker billedhotspots på mobilen?
Ja. Telefoner har ingen hover, så tænd for Trigger på Klik og besøgende trykker på en markør for at åbne dens værktøjstip. Positioner er en procent af billedet og det samme på hver skærm, så tjek, at markører ikke crowd hinanden på telefonens bredde.
Kan jeg linke et hotspot til en anden side?
Ja. Hver markør har et Link-felt. Linket følges, når værktøjstip åbnes ved hover, så en besøgende læser værktøjstippet ved hover og går til siden ved klik. Med Trigger ved Klik på åbner et klik værktøjstippet i stedet, og linket følges ikke.
Kan jeg sætte fed tekst, links eller billeder inde i et hotspot-værktøjstip?
Nej. Boksen Værktøjstipindhold er en rig editor, men fed tekst, links, billeder og kortkoder fjernes, når siden gengives, så værktøjstippet viser almindelig tekst. Skriv en kort linje og brug markørens Link til længere indhold.
Har jeg brug for Master Addons Pro til Image Hotspot?
Ja. Image Hotspot er en Master Addons Pro widget, og det virker med gratis Elementor. Det vises i Elementor panelet en gang a Pro licens er aktiv.
Hvordan er Image Hotspot forskellig fra Elementor Pro Hotspot widget?
Elementor Pro Hotspot tillader formateret værktøjstipsindhold, har Soft Beat, Expand og Overlay markør animationer og åbner ved hover, ved klik eller slet ikke. Master Addons Image Hotspot bruger almindelig tekst værktøjstip, en pulseffekt på markører og fem værktøjstip animationer, og det kan bruge et lille billede som markør.
Endelige tanker
Image Hotspot forvandler et fladt foto til et interaktivt billede: fire markørtyper, positioner sat i procent, en almindelig tekstlinje pr. markør og fem afslører animationer, alt sammen fra Elementor-panelet. Hold markører få på billeder, som telefoner vil se, og tænd for Trigger på Klik, når det meste trafik er mobilt.
For flere billedwidgets, se Billedsammenligning og Billedhover-effekter. Hvis du har brug for hover-tip på knapper eller tekst i stedet for billeder, skal værktøjstip widget tutorial dækker det, og den fulde liste over Master Addons widgets og udvidelser viser hvad der ellers følger med plugin'et.
Få Master Addons Pro for at tilføje Image Hotspot og resten af de 80+ widgets og udvidelser til Elementor.
