Nogle billeder har brug for lidt at forklare, som et produktbillede, en plantegning eller et kort. Den Billede Hotspot widget i Master Addons til Elementor er en Pro widget, der fastgør klikbare markører overalt på et billede. Hver enkelt viser en kort tekst værktøjstip, og kan linke til en anden side, når en besøgende svæver eller trykker på den.
Du indlæser et billede, slipper hotspots, hvor du vil have dem, tilføjer værktøjstipteksten, og styler derefter markørerne og indstiller, hvordan værktøjstipsene opfører sig. Denne vejledning dækker hver indstilling i widgetten.
Hvad Image Hotspot widget gør #
Widgetten sætter markører oven på et enkelt billede. Hvert hotspot har sin egen position, ikon og værktøjstip, så du kan mærke dele af et foto eller linke dem til andre sider. Hold markøren eller klik på en markør, og dens værktøjstip dukker op ved siden af.
Tre faner kører det. Content holder billedet, hotspots og værktøjstip-adfærden. Style håndterer billedet, markørfarverne og værktøjstip-looket. Advanced er den sædvanlige Elementor-afstand og synlighed.
Før du starter #
- WordPress med Elementor installeret og aktiv.
- Master Addons Pro installeret med en aktiv licens, da Image Hotspot er en Pro-widget. Ny i plugin'et? Se den installationsvejledning.
- Et billede og de etiketter eller links, du vil have hvert hotspot til at vise.
Sådan tilføjes Image Hotspot-widget #
I Elementor-editoren skal du åbne Elementer panel og søg efter Billede Hotspot, eller rul til afsnittet Mastertilføjelser (widgetsene bærer et lilla MA-badge). Træk det over på siden, og det indlæses med et eksempelbillede og markører, du kan redigere.
Vælg billedet #
Åbn Content fane. Den Image sektion er hvor du indlæser basisbilledet, som hotspots sidder på.
- Vælg Billede: vælg billedet fra mediebiblioteket.
- Billedopløsning: størrelsen serveret, som stor eller fuld.
- Justering: venstre, center eller højre i sin kolonne.
Tilføj hotspots #
Åbn Hotspots sektion. Det er en repeater, så hver markør er sit eget element. Brug Tilføj element til at tilføje markører, og placer derefter hver enkelt med skyderne i sin positionsfane.
- Tilføj vare: tilføj så mange hotspots, som billedet har brug for.
- Deaktiver pulseffekt: sluk for den pulserende animation på markørerne.
- Fanen Position: Vandret og lodret position i procent for hver markør.
Opsæt hvert hotspot #
Klik på et hotspot for at åbne dets indstillinger. Den Content tabulator angiver markørtypen, dens værktøjstiptekst og et valgfrit link.
- Type: vis intet, kort tekst, et ikon eller et billede inde i markøren.
- Tekst og Link: teksten inde i markøren og en URL, som fungerer, når værktøjstip åbnes ved svæve eller deaktiveres på den pågældende skærm.
- Værktøjstipsindhold: værktøjstipteksten. Den redigeres i en WYSIWYG-boks, men værktøjstippet viser kun almindelig tekst.
Style hvert hotspot #
The Style tab på et hotspot indstiller dets farver. Du får en farve og baggrund for normaltilstanden og et separat sæt til hover, plus en opacitetsskyder.
- Standardfarve og baggrund: markøren i hvile.
- Hover Farve og Baggrund: hvordan det ændrer sig på hover.
- Opacitet: hvor solid markøren ser ud.
Styr værktøjstipsene #
Tilbage i hovedfanen Indhold, den Værktøjstip sektion styrer, hvordan hvert værktøjstip opfører sig: hvor det sidder, hvordan det animerer, og om det åbner ved hover eller klik.
- Vis position og pil: hvilken side værktøjstippet åbner på, og om det har en markør.
- Animation: afsløringseffekten, som Shift-Toward.
- Udløser ved Klik: åbn værktøjstip ved klik i stedet for at holde markøren, bedre til berøring. Deaktiver Til skjuler værktøjstip på Tablet & Mobil eller Mobil.
Style billedet og værktøjstip #
Åbn Style faneblad på widgetten. Den Image sektion indstiller billedets opacitet, kant og filtre og adskilles Hotspots og Værktøjstip sektioner styler markørerne og værktøjstipboksene.
- Billede: opacitet, grænseradius, boksskygge og CSS-filtre.
- Hotspots: global størrelse og farve til markørerne.
- Værktøjstip: værktøjstipbaggrunden, tekstfarven og typografien.
Almindelige brugstilfælde #
- Produktbilleder fastgørelse af funktioner eller specifikationer til dele af billedet.
- Kort og plantegninger markering af rum, stande eller steder.
- Infografik tilføjelse af detaljer uden at rode i billedet.
- Team- eller kontorfotos mærkning af personer eller områder.
- Tutorials påpegning af trin eller dele på et skærmbillede.
Tips til at arbejde med Image Hotspot widget #
- Hold hotspots læsbare. Plad dem ud, så markørerne og værktøjstip ikke overlapper hinanden på mindre skærme.
- Brug klik på mobil. Slå Trigger til Klik, så berøringsbrugere kan åbne værktøjstip, da der ikke er nogen svæve på en telefon.
- Kontrast markørerne. Vælg en markørfarve, der skiller sig ud fra billedet bag den, ellers sluger et optaget foto det.
- Hold værktøjstiptekst kort. En linje eller to læser bedre end et afsnit, der er proppet ind i en flydende boks.
- Indstil nøjagtige positioner. Brug fanen Position skyderne, og forhåndsvisning derefter på en telefon for at kontrollere hver markør.
Se video tutorial #
Foretrækker du at følge med på skærmen? Videovejledningen nedenfor går gennem Image Hotspot-elementet fra start til slut og viser, hvordan billedet, hotspots, værktøjstip og styling fungerer i Elementor-editoren.
Ofte stillede spørgsmål #
Hvad er Image Hotspot-widget i Master Addons?
Det er en Master Addons Pro widget til Elementor, der fastgør interaktive markører på et billede. Hvert hotspot har sin egen position, markørtype, almindelig tekstværktøjstip og valgfrit link, vist på hover eller klik. Alt er indstillet fra Elementor-panelet uden kode.
Hvordan tilføjer jeg flere hotspots til et billede?
Åbn Hotspots-sektionen på fanen Indhold, og brug Tilføj element til at oprette en anden markør. Hvert nyt hotspot får sit eget indhold, sin stil og sin placering, og du placerer det med skyderne på fanen Position.
Kan jeg tilføje et link til et hotspot?
Ja. Hvert hotspot har et Link-felt i sin Content-fane, så en markør kan pege på en hvilken som helst URL. Linket fungerer, når værktøjstip åbnes på svæve eller deaktiveres på den skærm. Det lader et billede fungere som et klikbart kort, der sender besøgende til en produktside, en sektion eller et eksternt websted fra en pin på billedet.
Virker billedhotspots på mobilen?
Ja, men svæve findes ikke ved berøring. Slå Udløser til Klik i sektionen Værktøjstip, så mobilbrugere kan trykke på en markør for at åbne dens værktøjstip. Du kan også skjule værktøjstip under et brudpunkt og bruge markørlinket i stedet.
Kan jeg bruge et brugerdefineret ikon eller billede som markør?
Ja. Hvert hotspot har en Type-indstilling i sin Content-fane, hvor du kan vise et ikon eller et billede inde i markøren i stedet for standarden. På den måde kan markørerne matche dit brand eller billedets motiv.
Indpakning #
Image Hotspot-widget'en forvandler et fladt billede til et interaktivt: indlæs billedet, fastgør markørerne, tilføj værktøjstip, stil derefter markørerne og indstil værktøjstip-adfærden. For eksempler og en sammenligning med Elementor Pro's Hotspot, se Elementor billede hotspot widget side. For relaterede widgets, se Billedsammenligningswidget og the Image Hover Effects widget, gennemse hele Master Addons widgets og udvidelser, og kontrollere de prissætning side for hvad hver plan indeholder.
