Elementor Image Hotspot Widget med værktøjstip (Pro)
Image Hotspot er en Master Addons Pro widget, der sætter 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 gratis Værktøjstip widget 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.
Fire markørtyper på ét billede
The Type 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.
Text 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.
Image 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 Link. 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
The 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
The 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 åbner ved svæve. Telefoner har ingen svæve, hvilket efterlader to ærlige muligheder. Tænd Udløser på Klik og et tryk åbner værktøjstippet. Eller sæt Deaktiver Til til mobil eller tablet og mobil, som skjuler værktøjstip på disse skærme og overdrager jobbet til hver markørs link.
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.
Style Markers for Default and Hover
Marker styling sidder to steder, hvilket er enklere end det lyder, når man kender splittet.
Widgetens Style 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.
| Feature | Elementor Pro Hotspot | Master Addons Image Hotspot |
|---|---|---|
| Price | 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 |
| Mobile | Pr. enhedspositioner | Deaktiver værktøjstip på Tablet & Mobil eller Mobil |
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 gratis Værktøjstip widget, den Tooltips udvidelse (Pro), Billedsammenligning og Image Hover Effects.
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å, værktøjstip indstillet til Trigger på klik, og et link på hver markør, der peger på hele siden. Femten stifter forbliver læsbare på den måde; femten pulserende piller gør ikke.
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. Du kan også indstille Deaktiver til mobil eller Tablet & mobil, som skjuler værktøjstip på disse skærme og lader markøren Link tage besøgende til flere oplysninger.
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.
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. Værktøjstip skal muligvis Trigger on Click eller Disable On til små skærme.
Er Image Hotspot widget gratis?
Nej. Image Hotspot er en del af Master Addons Pro. Det gratis plugin har 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?
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/Page Duplicator
