Billede Hotspot

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 fastgør klikbare markører hvor som helst på et billede, og hver enkelt viser et værktøjstip med tekst eller et link, når en besøgende svæver eller trykker på det.

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 til Elementor installeret og aktiv. 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 træk dem på plads på billedet.

• Tilføj vare: tilføj så mange hotspots, som billedet har brug for.
• Deaktiver pulseffekt: sluk for den pulserende animation på markørerne.
• Træk til position: flyt hver markør på billedet, eller indstil nøjagtige koordinater.

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, et ikon eller et billede inde i markøren.
• Tekst og Link: en kort etiket og en URL til markøren.
• Værktøjstipsindhold: den fulde tekst vist på hover, redigeret i en WYSIWYG-boks.

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.

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 til præcis placering i stedet for at se træk.

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 #

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 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.