Elementor Image Hotspot Widget med værktøjstip (Pro)
Image Hotspot er en Master Addons Pro widget, der fastgør markører oven på et billede. En markør kan være en almindelig prik, en kort tekst etiket, en Font Awesome ikon eller et lille billede, og hver enkelt åbner et værktøjstip, når en besøgende svæver det, eller trykker på det, når du tænder for Trigger på Klik. Det passer shop-the-look fotos, produkt callouts, plantegninger, campus kort og mærkede diagrammer. Hvis det, du ønsker, er en hover hint på en knap eller en overskrift, den Værktøjstip widget (ingen Master Addons Pro nødvendig) eller den Tooltips udvidelse (Pro) er den tættere pasform.
Sådan tilføjes et billedhotspot i Elementor
Hvis du vil tilføje et billedhotspot i Elementor, skal du aktivere Master Addons Pro, redigere siden med Elementor og søge i widgetpanelet efter Billedhotspot. Træk det ind, vælg dit billede under Billede, og åbn derefter Hotspots og klik på Tilføj element for hver markør. Indstil hver markørs Type, Værktøjstipsindhold og Position, og udgiv derefter.
Søg panelet for “hotspot” og to resultater kommer tilbage. Den ene badged MA er denne widget. Den hængelåste ved siden af er Elementors eget Hotspot, som har brug for en Elementor Pro licens, så det er værd at tjekke, hvilken du allerede ejer, før du bygger.
Slip widgetten ind, vælg dit billede og sæt Billedopløsning til Fuld, hvis billedet bærer fine detaljer. Markører sidder på det gengivne billede, så en nedskaleret kilde får hver pin til at se omtrentlig ud. Åbn Hotspots, hit Tilføj element, og gentag én gang pr markør. Hvert element bærer sine egne indhold, Style og Position faner.
To ting snubler folk op på den første build. Markører lander i øverste venstre hjørne, indtil du rører ved skyderne Position, så tre friske elementer stables i, hvad der ligner en. Og Tooltip Content-boksen er en fuld editor, hvilket gør det fristende at indsætte et afsnit i. Der er en grund til at modstå det, dækket længere nede.
Arbejdede eksempler med produktfotos, kort og diagrammer bor i sådan tilføjes billedhotspots i Elementor. Hver kontrol er anført i Guide til indstillinger for Image Hotspot-widget.
Image Hotspot at a Glance
Hvad widgetten gør, læs fra Master Addons Pro-koden.
| Item | Billede Hotspot widget |
|---|---|
| Markørtyper | Ingen, tekst, ikon eller billede |
| Markører pr. billede | Så mange som du tilføjer til Hotspots-listen |
| Positionering | Vandrette og lodrette skydere i procent af billedet, én position for hver skærmstørrelse, ingen træk |
| Per-markør indstillinger | Link, værktøjstiptekst, værktøjstipside, standard- og svævefarver, opacitet |
| Værktøjstipsindhold | Almindelig tekst (HTML fjernes ved gengivelse) |
| Værktøjstipside | Øverst, nederst, venstre eller højre |
| Værktøjstip animation | Skift-væk, Skift-mod, Fade, Skala, Perspektiv |
| aftrækker | Hold markøren, eller klik med Udløser ved Klik |
| Pil, offset og distance | Ja |
| Pulseffekt | Til som standard slukker en kontakt for widgetten |
| Markørlink | Følges, når værktøjstip åbnes på svæve |
| måde | Markørstørrelse, polstring, radius, standard- og svævefarver; værktøjstippolstring, radius, farver, pilfarve, typografi |
| Behov | Elementor og Master Addons Pro |
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 i tre trin.
- Drop Image Hotspot i en beholder og vælg billedet under Image.
- Tilføj et element pr. punkt i Hotspots. Vælg Tekst, Ikon eller Billede som markør, skriv et værktøjstip på én linje, og indstil Vandret og Lodret position i procent.
- Åbn Værktøjstip, vælg side og animation, og slå Udløser til Klik, hvis de fleste besøgende er på telefoner.
For en fuld gennemgang med skærmbilleder, læs sådan tilføjes billedhotspots i Elementor.
Fire nummererede markører på et kontorfoto, med værktøjstippet til mødebordet åbent.
Brug Image Hotspot 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 fungerer, når værktøjstip åbnes på hover. Det tegner ikke klikbare former eller områder, som et SVG-billedkortplugin som Image Map Pro gør, så en grundplan, hvor hver rumoversigt skal være klikbar, har brug for et dedikeret billedkortplugin.
For pins på et campuskort, et butikslayout eller et produktdiagram er markører nok og hurtigere at sætte op. Den gym zone kort demo fungerer på denne måde.
Fire markørtyper på ét billede
de skrift kontrol i en markørs indholdsfane giver dig fire figurer, og du kan blande alle fire inde i et enkelt billede.
Ingen efterlader en bar farvet prik. Det er den reneste mulighed for tætte diagrammer, hvor etiketter ville kollidere med hinanden.
tekst udskriver en kort streng inde i markøren. Tal fungerer godt her, fordi 01, 02 og 03 på tværs af et produkt skud læst som en guidet tur uden nogen legende at skrive. Længere strenge forvandle prikken til en pille, som er det udseende, du ønsker for noget som “Köln nr. 5”.
Ikon tager ethvert Font Awesome-ikon fra biblioteket, så et blad kan stå for ingredienser og en stjerne for en vurdering.
spejlbillede bytter markøren ud med et billede fra dit mediebibliotek. Produktminiaturebilleder og avatarer læses bedst; alt travlt bliver til grød ved markørstørrelse.
Hver markør accepterer også en lænke. Det link udløses, når værktøjstip åbnes på hover, eller på breakpoints, hvor du har slukket værktøjstip. Det udløses ikke, mens Trigger on Click er tændt, fordi hanen allerede er taget.
Placer hver markør efter procentdel
de position tab holder to skydere, Vandret position og Lodret position, begge målt i procent af billedet. Indstilling af 50 og 24 sætter en markør en fjerdedel af vejen ned i midten. Der er ingen drag-on-canvas placering, så du skubber tallene og ser forhåndsvisningen.
Procent er, hvad der holder markørerne ærlige på en telefon. Basisbilledet skalerer med sin beholder, og hver markør holder sit relative sted, så en etiket fastgjort til en flaskehætte er stadig på flaskehætten ved 390px bred, hvor en pixelforskydning ville være drevet af.
Den samme fane bærer en per-markør Vis til, som tilsidesætter den globale værktøjstip side for den ene markør. Det hjælper, når en markør sidder nær højre kant, og dens værktøjstip ville løbe af billedet: sæt den til Venstre og lad resten på Top.
Markører pulserer som standard. Den Deaktiver pulseffekt switch nederst i Hotspots-sektionen slår animationen fra for hver markør på én gang, hvilket normalt er, hvad en plantegning med femten ben har brug for.
Værktøjstip Position, Animation og Mobil Adfærd
de Værktøjstip sektion driver hvert værktøjstip i widgetten sammen: Vis position (øverst, nederst, venstre eller højre), animation (Skift-væk, Skift-mod, Fade, Skala eller Perspektiv), en pil-skift, plus forskydning og afstand for fin skub.
Værktøjstip åbnes ved svæve. Telefoner har ingen svæve, så tænd Udløser på Klik og et tryk åbner værktøjstippet. Markørpositioner indstilles én gang i procent og gælder for hver skærmstørrelse, uden separat tablet eller mobilposition. Markører beholder deres størrelse på en telefon, så på en smal skærm dækker de mere af billedet. Hold antallet lavt eller sænk markøren Størrelse i stil, Hotspots.
En begrænsning at planlægge rundt. Tooltip Content er en WYSIWYG boks, men widget strimler markup før det gengives, så fed, links, billeder og kortkoder forsvinder alle, og værktøjstippet viser almindelig tekst. Hold hver enkelt til en enkelt kort linje. Når du har brug for formateret værktøjstipindhold, håndterer Elementor Pros Hotspot-widget rig tekst, og denne widget gør det ikke.
Styling af selve værktøjstippet er det fulde sæt: justering, polstring, radius, baggrund, tekstfarve, kant, pilefarve, typografi og kasseskygge. Basisbilledet får opacitet, kant, radius, kasseskygge og CSS-filtre.
stilmarkører til standard og svæv
Marker styling sidder to steder, hvilket er enklere end det lyder, når man kender splittet.
Widgetens måde faneblad dækker hver markør på én gang: Tekstpolstring, kantradius, typografi, en overgangsgruppe og derefter Standard- og svævefaner, der holder Opacitet, Størrelse, Farve, Baggrundsfarve, Kanttype og Boksskygge. Størrelse er en skalamultiplikator fra 0,5 til 2, så indstilling af Hover til 1,15 giver markører et lysløft under markøren uden at flytte noget andet på siden.
Fanen Stil inde i en enkelt markør tilsidesætter den markørs farve, baggrund og opacitet som standard og svæver. Sådan gør du én markør rød på en lilla væg, for at markere en udsolgt genstand eller markere det hotspot, du vil have bemærket først.
Border Radius på 100 giver dig cirkler og piller. Drop det til 6 og tekst markører bliver firkantede tags, som læser bedre på en arkitektonisk tegning end en række bobler.
Elementor Pro Hotspot vs Master Addons Image Hotspot
Elementor Pro sender sin egen Hotspot widget. Hvis du allerede betaler for Elementor Pro, skal du kontrollere, at en først, fordi du måske slet ikke har brug for denne.
| særpræ | Elementor Pro Hotspot | master addons image hotspot |
|---|---|---|
| værdi | Behov Elementor Pro | Behov Master Addons Pro |
| Markørtyper | Etikettekst og et ikon, med brugerdefineret størrelse | Ingen, tekst, ikon eller billede |
| Markør animation | Soft Beat, Expand eller Overlay, med sekvenseret animation | Puls tændt eller slukket |
| Værktøjstipsindhold | Rig tekst med formatering | Kun almindelig tekst |
| Værktøjstip-trigger | Hold markøren, klik eller ingen | Hold markøren, eller Klik med udløser ved klik |
| Værktøjstip animation | Udtone- og slideformater med en varighedsindstilling | Shift-Away, Shift-Toward, Fade, Scale, Perspective, plus pil, offset og distance |
| Positionering | Pr. enhedspositioner | Vandrette og lodrette procentskydere, én position for hver skærm, ingen træk på lærredet |
| Markørlink | Link pr. hotspot | Link pr. markør, fulgt når værktøjstip åbnes på svæve |
| Behov Elementor Pro | Ja | ingen |
Elementor Pro vinder på rige værktøjstip tekst og markør animationer. Master Addons er valget, hvis du vil have billedmarkører eller allerede bruge Master Addons Pro uden Elementor Pro. Relateret: den Værktøjstip widget, den Tooltips udvidelse (Pro), Billedsammenligning og Billedhover-effekter.
Hvor et Image Hotspot Tjener Sin Plads
Shop-the-look fotografering er den indlysende. En enkelt livsstil skud, et billede markør pr produkt, et værktøjstip navngivning hvert element og en Link igennem til sin produktside. Det fungerer bedre end et gitter af miniaturebilleder, fordi den besøgende ser stylerne stylet sammen, før de ser dem prissat.
Specs uden en spec tabel er den mere støjsvage brug. På kamerahuse, ure og maskiner går nummererede markører en læser rundt om objektet i den rækkefølge, du vælger, og ingen behøver at kortlægge række 4 i et bord tilbage på billedet.
Så er der plantegninger, campus kort og mærkede diagrammer. Prikker med deaktiver pulseffekt på, en en-linjers værktøjstip på hver, og et link på hver markør, der peger på hele siden, med værktøjstip tilbage på svæve, så linket stadig udløses. Femten stifter forbliver læsbare på den måde; femten pulserende piller gør det ikke.
Passer godt sammen med: den Værktøjstip widget, den Tooltips udvidelse (Pro), Billedhover-effekter, Avanceret billede og Billedsammenligning.
Eksempler på billedhotspot
Fjorten live-demoer bygget med widgetten, hver til forskellig brug for et billedhotspot.
- Shop looket: nummererede markører på en stue, hvert værktøjstip navngiver et stykke og dets pris.
- Restaurantret: ikon markører navngivning leverandøren af hver del af pladen.
- Ejendomsnotering: label markører på en villa til tagterrassen, suite og pool.
- Billiste: ikon markører på lys, hjul og parkering kameraer.
- Mode lookbook: markører på en taske, et ur og en frakke med priser.
- Gym zone kort: én markør pr. træningsområde.
- Se anatomi: små ikon markører på urskiven, bevægelse og krone.
- Coworking tour: almindelige prikker på et kontor gulv.
- Telefon hardware: markører på kameraerne, power-knap og opladning port.
- Hovedtelefonfunktioner: callouts på et produkt skud.
- VR headset: funktion og garanti callouts.
- Outfit-nedbrud: jakke, solbriller og jeans.
- Produkt promo: markører på en mulepose foto.
- Landingsside callouts: markører på et sideskærmbillede.
Ofte stillede spørgsmål til Image Hotspot
Hvad sker der på mobiltelefoner, hvor der ikke er noget svæv?
Slå Udløser til Klik i sektionen Værktøjstip, så besøgende trykker på en markør for at åbne dens værktøjstip. Markører holder den samme procentposition på hver skærm, så se et eksempel på siden ved telefonens bredde, og sænk markøren Størrelse, hvis de crowder billedet.
Kan jeg bruge et brugerdefineret billede i stedet for et ikon til hotspotmarkøren?
Ja. Indstil hotspottet Type til Image, og vælg et billede fra mediebiblioteket. Et lille, simpelt billede som f.eks. et produktminiaturebillede eller avatar læser bedst ved markørstørrelse.
Kan jeg trække markører på plads i editoren?
Nej. Hver markør har Vandret position og Skydere til Lodret position i sin Position-fane, målt i procent af billedet. Flyt skyderen, og se forhåndsvisningen. Procent holder markøren på samme sted, når billedet ændrer størrelse.
Kan jeg bruge Image Hotspot som billedkort?
For punktlinks, ja: sæt en markør på hvert sted og giv det et Link, med værktøjstip tilbage på hover. Det tegner ikke klikbare former eller områder, så for rumkonturer på en plantegning skal du bruge et billedkort-plugin såsom Image Map Pro.
Er der en hotspot widget i gratis Elementor?
Nej. Elementors Hotspot-widget er en del af Elementor Pro, og Image Hotspot har brug for Master Addons Pro. Nogle andre addon-pakker indeholder en hotspot-widget i deres gratis versioner.
Er selve basisbilledet responsivt?
Ja. Billedet skalerer med sin kolonne, og markørpositioner er sat i procent, så hver markør forbliver på den samme del af billedet på tværs af skærmstørrelser. På telefoner skal du tænde Trigger on Click, så et tryk åbner værktøjstippet.
Er Image Hotspot widget gratis?
Nej. Image Hotspot er en del af Master Addons Pro. Uden Pro kan du bruge den Værktøjstip widget, som tilføjer et hover-tip til et enkelt element, men ikke fastgør markører på et billede. Elementor Pro-brugere kan også bruge Elementors egen Hotspot-widget.
Kan jeg slå pulsanimationen fra?
Ja. Deaktiver Pulse Effect sidder nederst i Hotspots-sektionen og slukker pulsen for hver markør i den widget. Der er ingen pulsskift pr. markør, så brug en anden Image Hotspot-widget, hvis du har brug for begge looks på én side.
Hvorfor forsvinder formateringen i mit værktøjstip?
Widgetten fjerner HTML fra Tooltip Content, før den gengives, så fed tekst, links, billeder og kortkoder droppes, og værktøjstippet viser almindelig tekst. Hold hvert værktøjstip på en kort linje. For formaterede værktøjstip understøtter Elementor Pros Hotspot-widget rig tekst.
Trending Elementor Widgets & Udvidelser
Byg sofistikerede websteder på kortere tid.
Glasmorfisme
Container ekstraudstyr
Mønstre
![Master Addons Post/Page Duplicator udvidelse til Elementor: MA Duplicator række link i WordPress Pages liste oprettelse af en Landing Page - [Duplikeret # 128] udkast](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Post/sideduplikator
