Et produktfoto med et afsnit med specs under det sjældent bliver læst. En plantegning med en legende ud til siden bliver ignoreret. Problemet er altid det samme: billedet og oplysningerne bor i to forskellige steder, og de fleste besøgende aldrig rulle langt nok til at forbinde dem.
An image hotspot retter det. Du sætter små markører direkte på billedet, og hver enkelt afslører en kort etiket, når nogen svæver eller trykker. Den Billede Hotspot widget fra Master Addons gør dette inde i Elementor editor. Upload et billede, slip markører, hvor du vil have dem, skriv en etiket for hver, og du er færdig. Ingen CSS, ingen brugerdefineret kode.
Hvad Er et billede Hotspot i Elementor?
Et billede hotspot er en lille interaktiv markør fastgjort på en bestemt position på et billede. Hver markør har sin egen etiket, ikon eller link. På skrivebordet viser svævende over markøren et flydende panel med indholdet. På mobilen gør det samme at trykke på den.
Et produktfoto kan have en markør på hver funktion. En plantegning kan markere individuelle rum. Et skærmbillede kan pege på knapper eller indstillinger med en kort forklaring. Selve billedet ændres ikke. Markørerne giver bare besøgende en måde at udforske det på.
Elementor har ikke en indbygget hotspot widget. Master Addons versionen håndterer alt fra widget panelet: markør placering, label indhold, ikoner, animationer, og styling. Du konfigurerer hvert hotspot individuelt gennem repeateren, og widgetten tager sig af positionering og reaktionsevne.
Hvorfor bruge Image Hotspots på dit websted?
Statiske billeder skaber et hul mellem, hvad den besøgende ser, og hvad de har brug for at vide. Hotspots lukker det hul.
På et produktfoto skal du fastgøre en markør på hver funktion, så besøgende ser specifikationer uden at rulle til en separat liste. På en plantegning skal du markere rum eller kabiner, så hver placering åbnes med sit navn og detaljer. På en infografik skal du holde det visuelle rent og lade markører bære den ekstra kontekst. På et skærmbillede skal du pege på specifikke knapper eller indstillinger for en tutorial eller onboarding flow. På et holdfoto skal du mærke personer eller afdelinger.
Strukturen er altid den samme: ét billede, flere markører, hver enkelt afslører indhold, når de interageres med. Den besøgende bliver på billedet i stedet for at hoppe mellem billedet og en tekstblok under det.
Sådan tilføjes et billedhotspot i Elementor (trinvis)
Hele opsætningen tager cirka fem minutter.
Trin 1: Installer Master Addons og Aktiver Pro
Gå til Plugins, Tilføj Nyt i din WordPress dashboard og søg efter “Master Addons.” Installer og aktiver det gratis plugin. Hvis du har en Pro licens, indtast det under Master Addons, Licens. Image Hotspot widget vises kun efter Pro er aktiv.
Trin 2: Træk Image Hotspot Widget ind på din side
Åbn en vilkårlig side i Elementor-editoren. I panelet Elementer til venstre skal du søge efter Billedhotspot eller rulle til afsnittet Mastertilføjelser (widgetsene bærer et lilla MA-badge). Træk det over på siden. Det indlæses med et eksempelbillede og et par pladsholdermarkører, du kan redigere.
Trin 3: Upload dit billede
Åbn afsnittet Billede i fanen Indhold. Klik på Vælg billede, og vælg et billede i mediebiblioteket. Indstil billedopløsning til Fuld eller Stor for en skarp gengivelse. Indstillingen Justering placerer billedet i dets kolonne: venstre, midter eller højre.
Trin 4: Tilføj Hotspots til billedet
Åbn Hotspots-sektionen. Hvert element i repeateren er én markør. Klik på Tilføj element for at oprette et nyt. Du kan tilføje så mange, som billedet har brug for. Åbn hver markørs positionsfane og indstil skyderne for vandret og lodret position, i procent, for at placere den på billedet.
Der er en Deaktiver pulseffekt-skift, hvis du vil have statiske markører i stedet for standardpulserende animation.
Trin 5: Indstil markørtypen og etiketindholdet
Klik på et hotspot-element for at åbne dets indstillinger. Under Type skal du vælge, hvad der vises inde i markøren: intet (bare en prik), kort tekst (et plustegn som standard), et ikon eller et lille billede. Tekstfeltet er den tekst, der vises inde i markøren. Feltet Link tilføjer en URL, som fungerer, når etiketter åbnes på hover eller er slået fra for den skærmstørrelse.
Redaktøren til værktøjstipindhold er en WYSIWYG-boks til etiketteksten, men selve etiketten viser almindelig tekst. Formatering, billeder og links fjernes, så skriv en kort linje.
Trin 6: Konfigurer markøradfærd
Tilbage i hovedfanen Indhold styrer sektionen Værktøjstip, hvordan etiketter opfører sig på tværs af alle markører:
- Vis position: hvilken side af markøren etiketten åbner på (øverst, nederst, venstre, højre).
- Arrow: skift en markør mellem markøren og etiketten.
- Animation: afsløringseffekten, når etiketten vises, såsom Shift-Toward.
- Udløser på Klik: skifter fra hover-to-afsløring til klik-to-afsløring. Dette er den, du ønsker til mobil, da touchscreens ikke har hover.
Markørstylingindstillinger
Hvert hotspot har sin egen Style-fane til markørens udseende:
- Standardfarve og Standard baggrund: markøren i hvile.
- Hover Farve og Hover Baggrund: hvordan det ændrer sig på hover.
- Opacitet: hvor solid markøren ser ud mod billedet. Lavere værdier gør det mere subtilt.
Vælg en markørfarve, der skiller sig ud fra billedet bag. Et optaget foto vil sluge en lavkontrastmarkør, og besøgende vil ikke bemærke hotspots.
Styling af billedet og etiketterne
Widgettens hovedfane Style har tre sektioner.
Billedpanel
Styrer selve billedet: opacitet, grænseradius, boksskygge og CSS-filtre. En grænseradius eller skygge hjælper billedet med at sidde inde i et layout i kortstil. CSS-filtre lader dig justere lysstyrke, kontrast eller mætning uden at eksportere billedet igen.
Markers Panel
Globale indstillinger for alle markører: størrelse, tekstudfyldning, grænseradius, typografi, en overgang og farve, baggrund, kant, opacitet og boksskygge til standard og svirre. Individuelle hotspotfarver tilsidesætter disse.
Etiketter Panel
Styrer det flydende panel, der vises, når en markør interageres med: baggrundsfarve, tekstfarve, typografi, udfyldning, grænseradius og skygge.
Responsiv adfærd på mobil
Markører bruger procentbaseret positionering, så de forbliver fastgjort til det samme sted på billedet, uanset skærmstørrelsen. Etiketterne ændrer størrelse og genplacerer for at forblive inden for visningsporten.
Berøringsenheder har ikke hover, så Trigger on Click-skift i sektionen Værktøjstip skifter hele widgetten til tap-to-afsløring. Besøgende trykker på en markør for at åbne etiketten og trykker et andet sted for at lukke den. Hvis dit publikum for det meste er på mobil, skal du slå dette til fra starten.
På meget små skærme, hvor etiketter begynder at overlappe hinanden, kan du indstille Deaktiver til mobil eller Tablet & Mobil og lade markørlinkene gøre arbejdet i stedet. Hver markør navigerer stadig til sin URL på tryk.
Image Hotspot vs Tooltip Widget: Hvad er forskellen?
Master Addons har to funktioner, der producerer svæveetiketter, og folk blander dem sammen:
| Feature | Hvad Det Gør | Best For |
|---|---|---|
| Billede Hotspot widget | Fastgør interaktive markører ved bestemte x/y-positioner på et billede. Hver markør åbner en etiket ved at holde markøren eller klikke. | Kommenterede billeder, produktudkald, plantegninger, interaktive kort. |
| Tooltip widget og Tooltips udvidelse | Tooltip widget er et selvstændigt tip med sin egen trigger. Tooltips udvidelsen vedhæfter en hover label til et eksisterende Elementor element, såsom en knap, ikon, tekstblok eller sektion. | Hover hints på knapper, hjælpetekst på formularfelter, yderligere kontekst på ethvert sideelement. |
Image Hotspot er bygget til billeder og placerer markører efter position. Hvis du har brug for markører på et foto, skal du bruge Image Hotspot. For en svæve-etiket på en knap eller tekstblok, der allerede eksisterer, skal du bruge Tooltips udvidelse. Hvis du vil have et selvstændigt tip i stedet, er Værktøjstip widget gør det.
Image Hotspot og Tooltips-udvidelsen har brug for Master Addons Pro, mens Tooltip-widgetten er i det gratis plugin. De deler ikke vælgere eller hændelseshandlere, så du kan bruge dem på samme side.
Tips til at arbejde med Image Hotspots
- Pladsmarkører ud. Overlappende markører gør billedet svært at bruge. Hvis to hotspots sidder tæt sammen, skal du skubbe deres etiketter til modsatte sider eller slippe en af dem.
- Hold etiketter korte. En linje eller to læser bedre end et afsnit inde i et flydende panel. Brug etiketten til en hurtig oversigt og link ud for de fulde detaljer.
- Slå Trigger til på Klik for mobil. Selvom hover virker på skrivebordet, skal touch-brugere have et trykmål. Widgetten håndterer begge tilstande på samme tid.
- Test på forskellige skærme. Markører, der ser godt placeret på et skrivebord, kan samle op på en telefon. Kontroller en telefon, en tablet og en bred skærm, før du udgiver.
- Sæt markørerne mod billedet. En lys markør på et mørkt foto virker. En dæmpet markør på en optaget baggrund forsvinder. Brug tilstanden Svæve for at lægge vægt på, når nogen fokuserer på en markør.
- Brug fanen Position, når justering betyder noget. Træk er hurtigt for grov placering. Fanen Position med nøjagtige procentværdier er bedre, når du har brug for markører til at stille op med bestemte dele af et diagram eller skærmbillede.
Gratis vs Pro: Hvad du får
| Plan | Billede Hotspot | Andre Widgets |
|---|---|---|
| Free | Ikke inkluderet | Snesevis af gratis widgets såsom Dual Heading, Creative Button, Infobox, Advanced Accordion og Tooltip-widgetten. |
| Pro | Inkluderet | Alle gratis widgets plus Image Hotspot, Tooltips-udvidelsen, Display Conditions og resten af de 80+ widgets og udvidelser. |
Basisplugin'et er gratis at installere fra WordPress repository. Image Hotspot widget kræver specifikt en Pro licens.
Hvad er et billede hotspot i Elementor?
Et billede hotspot er en lille interaktiv markør placeret oven på et billede. Når en besøgende svæver eller trykker på det, vises en etiket med tekst, en beskrivelse eller et link til det specifikke område 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. Praktisk talt holder 5 til 7 hotspots pr. billede tingene læsbare. Ud over det begynder markører at overlappe hinanden. Hvis du har brug for at kommentere flere områder, skal du opdele indholdet på tværs af flere billeder.
Virker billedhotspots på mobilen?
Ja. Touchskærme har ingen hover, så aktiver Trigger on Click og mobile besøgende trykker på en markør for at åbne dens etiket. Procentbaseret positionering holder hotspots fastgjort korrekt på tværs af skærmstørrelser.
Kan jeg linke et hotspot til en anden side?
Ja. Hvert hotspot har et Link-felt. Linket fungerer, når etiketter åbnes på hover, eller på skærme, hvor etiketter er slået fra, så en markør kan vise sin etiket på hover og tage den besøgende til en produktside eller ekstern URL ved klik. Med Trigger på Klik på, et klik åbner etiketten i stedet.
Er Image Hotspot widget gratis eller Pro?
Image Hotspot widget er en Pro funktion. Basen Master Addons plugin er gratis, men hotspot widget kræver en Pro licens.
Hvad er forskellen mellem Image Hotspot-widget og Tooltip-widget?
Image Hotspot-widgetten fastgør interaktive markører på bestemte positioner på et billede, der hver viser en etiket ved at holde markøren eller klikke på. Den Værktøjstip widget er et selvstændigt tip med sin egen udløser, og Tooltips-udvidelsen vedhæfter en svæveetiket til et eksisterende element som f.eks. en knap, tekst eller ikon. Brug Image Hotspot til kommenterede fotos og værktøjstipindstillingerne til at holde markøren nede på andre sideelementer.
Indpakning Up
Image Hotspot widget tager et fladt billede og tilføjer markører, der afslører oplysninger om hover eller klik. Upload billedet, slip markører på de områder, der har brug for forklaring, skriv en kort etiket til hver, og stil markørerne til at matche dit design. Alt sker inde i Elementor editor.
For mere om billeder i Elementor, se Billedsammenligningswidget og the Image Hover Effects widget. Hvis du har brug for svæveetiketter på knapper eller tekst i stedet for billeder, skal Tooltip widget tutorial dækker det. Og den fulde liste over Master Addons widgets og udvidelser er værd at browse, hvis du vil se, hvad der ellers er tilgængeligt.
Få Master Addons Pro sådan låses Image Hotspot-widgeten og resten af 80+ widgets og udvidelser til Elementor op.
