Manche Bilder brauchen ein wenig Erklärung, wie eine Produktaufnahme, ein Grundriss, oder eine Karte Die Bild Hotspot Widget In Master-Addons für Elementor Ist ein Pro-Widget, das an einer beliebigen Stelle auf einem Bild anklickbare Markierungen ansteckt. Jedes zeigt einen kurzen Text-Tooltip und kann auf eine andere Seite verlinken, wenn ein Besucher mit der Maus fährt oder darauf tippt.
Sie laden ein Bild, legen Hotspots dort ab, wo Sie sie haben möchten, fügen den Text für den Tooltip hinzu, stylen dann die Markierungen und stellen ein, wie sich die Tooltips verhalten Diese Anleitung deckt jede Einstellung im Widget ab.
Was das Image Hotspot Widget macht #
Das Widget setzt Markierungen auf ein einzelnes Bild Jeder Hotspot hat seine eigene Position, sein eigenes Symbol und seinen eigenen Tooltip, sodass Sie Teile eines Fotos beschriften oder mit anderen Seiten verknüpfen können Bewegen Sie den Mauszeiger oder klicken Sie auf einen Marker und neben ihm erscheint sein Tooltip.
Drei Tabs führen es aus. Inhalt Hält das Bild, die Hotspots und das Tooltip-Verhalten. Stil Behandelt das Bild, die Markierungsfarben und den Tooltip-Look. Fortgeschritten Ist der übliche Elementorabstand und die Sichtbarkeit.
Bevor Sie beginnen #
- WordPress Mit Elementor Installiert und aktiv.
- Master Addons Pro Mit aktiver Lizenz installiert, da Image Hotspot ein Pro Widget ist Neu im Plugin? siehe die Installationsführung.
- Ein Bild und die Beschriftungen oder Links, die jeder Hotspot anzeigen soll.
So fügen Sie das Image Hotspot Widget hinzu #
Öffnen Sie im Elementor-Editor die Elemente Panel und suchen nach Bild Hotspot, oder scrollen Sie zum Abschnitt Master Addons (die Widgets tragen ein lila MA-Abzeichen) Ziehen Sie es auf die Seite und es wird mit einem Beispielbild und Markierungen geladen, die Sie bearbeiten können.
Wählen Sie das Bild #
Öffnen Sie die Inhalt Tab. Die Bild Abschnitt ist, wo Sie das Basisbild laden, auf dem die Hotspots sitzen.
- Wählen Sie Bild: Wählen Sie das Bild aus der Mediathek.
- Bildauflösung: Die servierte Größe ist groß oder voll.
- Ausrichtung: Links, in der Mitte oder rechts in seiner Spalte.
Hotspots hinzufügen #
Öffnen Sie die Hotspots Abschnitt. Es handelt sich um einen Repeater, somit ist jeder Marker ein eigener Gegenstand Verwenden Sie Element hinzufügen, um Marker hinzuzufügen, und platzieren Sie dann jeden mit den Schiebern in seiner Registerkarte Position.
- Artikel hinzufügen: Fügen Sie so viele Hotspots hinzu, wie das Bild benötigt.
- Pulseffekt deaktivieren: Schalten Sie die pulsierende Animation auf den Markierungen aus.
- Position Tab: Horizontale und vertikale Position in Prozent für jeden Marker.
Richten Sie jeden Hotspot ein #
Klicken Sie auf einen Hotspot, um seine Einstellungen zu öffnen Die Inhalt Tab legt den Markierungstyp, seinen Tooltip-Text und einen optionalen Link fest.
- Typ: Zeigen Sie nichts, kurzen Text, ein Symbol oder ein Bild innerhalb der Markierung an.
- Text und Link: Der Text innerhalb der Markierung und einer URL, die funktioniert, wenn sich Tooltips im Mauszeiger öffnen oder auf diesem Bildschirm deaktiviert sind.
- Tooltip-Inhalt: Der Tooltip-Text. Es wird in einem WYSIWYG-Feld bearbeitet, aber der Tooltip zeigt nur Klartext an.
Stil jedes Hotspots #
Die Stil Tab auf einem Hotspot stellt seine Farben einSie erhalten eine Farbe und einen Hintergrund für den Normalzustand und einen separaten Satz für den Hover, plus einen Deckkraft-Slider.
- Standardfarbe und Hintergrund: Der Marker in Ruhe.
- Hover Farbe und Hintergrund: Wie es sich beim Hover ändert.
- Deckkraft: Wie solide der Marker aussieht.
Steuern Sie die Tooltips #
Zurück im Hauptregisterkartenreiter Inhalt, dem Tooltips Abschnitt steuert, wie sich jeder Tooltip verhält: wo er sitzt, wie er animiert und ob er sich mit dem Mauszeiger oder Klick öffnet.
- Position und Pfeil anzeigen: Auf welcher Seite sich der Tooltip öffnet und ob er einen Zeiger hat.
- Animation: Der Enthüllungseffekt, wie Shift-Toward.
- Auslösen auf Klick: Tooltips auf klicken statt mit dem Mauszeiger öffnen, besser zum Anfassen. Deaktivieren Ein Versteckt Tooltips auf Tablet & Mobile oder Mobile.
Gestalten Sie das Bild und die Tooltips #
Öffnen Sie die Stil Tab auf dem Widget Die Bild Abschnitt legt die Deckkraft, den Rand und die Filter des Bildes fest und trennt Hotspots und Tooltips Abschnitte gestalten die Markierungen und die Tooltip-Boxen.
- Bild: Opazität, Randradius, Kastenschatten und CSS-Filter.
- Hotspots: Globale Größe und Farbe für die Marker.
- Kurzinfos: Der Tooltip-Hintergrund, die Textfarbe und die Typografie.
Häufige Anwendungsfälle #
- Produktbilder Pinnen von Funktionen oder Spezifikationen an Teilen des Fotos.
- Karten und Grundrisse Markierungsräume, Kabinen oder Standorte.
- Infografiken Hinzufügen von Details, ohne das Bild zu überladen.
- Team - oder Bürofotos Kennzeichnung von Personen oder Bereichen.
- Tutorials Hinweisen auf Schritte oder Teile auf einem Screenshot.
Tipps für die Arbeit mit dem Image Hotspot Widget #
- Hotspots lesbar halten. Platzieren Sie sie, damit sich die Markierungen und Tooltips auf kleineren Bildschirmen nicht überlappen.
- Verwenden Sie einen Klick auf Mobiltelefon. Aktivieren Sie den Auslöser auf Klicken, damit Touch-Benutzer die Tooltips öffnen können, da auf einem Telefon kein Hover vorhanden ist.
- Vergleichen Sie die Marker. Wählen Sie eine Markierungsfarbe, die sich vom Bild dahinter abhebt, oder ein vielbeschäftigtes Foto verschluckt sie.
- Kurz den Text des Tooltips halten. Ein oder zwei Zeilen lesen sich besser als ein Absatz, der in eine schwebende Schachtel gestopft ist.
- Genaue Positionen festlegen. Verwenden Sie die Registerkartenschieber und sehen Sie sich dann auf einem Telefon eine Vorschau an, um jede Markierung zu überprüfen.
Sehen Sie sich das Video-Tutorial an #
Bevorzugen Sie, auf dem Bildschirm mitzumachen? Das Video-Tutorial unten durchläuft das Bild-Hotspot-Element von Anfang bis Ende und zeigt, wie das Bild, die Hotspots, Tooltips und das Styling im Elementor-Editor funktionieren.
Häufig gestellte Fragen #
Was ist das Image Hotspot Widget in Master Addons?
Es handelt sich um ein Master Addons Pro Widget für Elementor, das interaktive Markierungen auf einem Bild pinnt Jeder Hotspot hat seine eigene Position, Markierungstyp, Klartext-Tooltip, und optionalen Link, angezeigt auf Hover oder Klick Alles wird aus dem Elementor-Panel ohne Code eingestellt.
Wie füge ich einem Bild weitere Hotspots hinzu?
Öffnen Sie den Hotspots-Bereich in der Registerkarte Inhalt und verwenden Sie Element hinzufügen, um eine weitere Markierung zu erstellen Jeder neue Hotspot erhält seinen eigenen Inhalt, Stil und seine eigene Position, und Sie platzieren ihn mit den Schiebereglern in seiner Registerkarte Position.
Kann ich einen Link zu einem Hotspot hinzufügen?
Ja. Jeder Hotspot hat ein Link-Feld in seiner Inhaltsregisterkarte, so dass eine Markierung auf jede URL verweisen kann Der Link funktioniert, wenn sich Tooltips im Mauszeiger öffnen oder auf diesem Bildschirm deaktiviert sind Dadurch kann ein Bild als anklickbare Karte fungieren und Besucher von einem Pin auf dem Foto auf eine Produktseite, einen Abschnitt oder eine externe Website senden.
Funktionieren Image-Hotspots mobil?
Ja, aber Hover existiert nicht auf Touch Schalten Sie Trigger ein Klicken Sie im Abschnitt Tooltips, damit mobile Benutzer auf einen Marker tippen können, um seinen Tooltip zu öffnen Sie können Tooltips auch unter einem Haltepunkt ausblenden und stattdessen den Markierungslink verwenden.
Kann ich ein benutzerdefiniertes Symbol oder Bild als Markierung verwenden?
Ja. Jeder Hotspot hat in seiner Inhaltsregisterkarte eine Typoption, in der Sie anstelle der Standardeinstellung ein Symbol oder ein Bild innerhalb der Markierung anzeigen können. Auf diese Weise können die Markierungen mit Ihrer Marke oder dem Bildgegenstand übereinstimmen.
Einwickelnd #
Das Image Hotspot Widget macht aus einem flachen Bild ein interaktives: Bild laden, die Marker feststecken, Tooltips hinzufügen, dann die Marker stylen und das Tooltip-Verhalten einstellen Beispiele und einen Vergleich mit dem Hotspot von Elementor Pro finden Sie im Elementor-Image-Hotspot-Widget Seite. Für verwandte Widgets siehe die Bildvergleichs-Widget und die Widget für Bild-Hover-EffekteDurchsuchen Sie das Ganze Master Addons Widgets und Erweiterungen& überprüfen Sie die Preisseite Für das, was jeder Plan beinhaltet.
