Der Hotspot-Block ermöglicht es Ihnen, jedes statische Bild in ein interaktives, klickbares Erlebnis zu verwandeln, indem Sie Hotspot-Markierungen direkt darauf platzieren. Wenn Besucher mit der Maus über einen Hotspot fahren oder darauf klicken, erscheint ein Tooltip mit Ihren benutzerdefinierten Inhalten – eine leistungsstarke Möglichkeit, Produktmerkmale hervorzuheben, Diagramme zu beschriften, Raumdesigns zu präsentieren oder Besucher durch visuelle Elemente zu führen.
Jeder Hotspot ist vollständig anpassbar mit eigenem Symbol, Farbe, Position, Tooltip-Inhalt und Link. Sie können beliebig viele Hotspots hinzufügen und den Animationsstil sowohl für die Markierungen als auch für deren Tooltip-Popups steuern.
Hinzufügen des Hotspot-Blocks zu Ihren Seiten
Befolgen Sie diese Schritte, um einen Hotspot-Block zu Ihrer SeedProd-Seite hinzuzufügen:
Schritt 1: Block hinzufügen
Ziehen Sie unter Design > Blöcke den Hotspot-Block in den gewünschten Bereich Ihrer Seite.
Schritt 2: Inhaltseinstellungen konfigurieren
Nach dem Hinzufügen klicken Sie auf den Hotspot-Block, um seine Einstellungen zu öffnen. Der Tab Inhalt ist in drei Abschnitte unterteilt: Bild, Hotspot und Tooltip.
Bild:
- Bild: Laden Sie das Hintergrundbild hoch oder wählen Sie es aus, auf dem Ihre Hotspots platziert werden sollen.
- Alternativtext: Geben Sie beschreibenden Alternativtext für das Bild ein, um die Zugänglichkeit und SEO zu verbessern.
- Bildgröße: Legen Sie die Breite und Höhe des Bildes in Pixel (px) oder als Prozentsatz (%) fest.
- Ausrichtung: Legen Sie die horizontale Ausrichtung des Hotspot-Blocks innerhalb seines Bereichs fest – Links, Mitte oder Rechts. Unterstützt gerätespezifische Werte für Desktop, Tablet und Mobilgerät.
Hotspot:
Der Abschnitt Hotspot listet alle Hotspot-Markierungen auf, die Ihrem Bild hinzugefügt wurden. Jede Hotspot-Zeile zeigt sein Symbol und eine Vorschau des Tooltip-Inhalts. Sie können Hotspots per Drag & Drop neu anordnen, duplizieren oder löschen. Klicken Sie auf eine Hotspot-Zeile, um ihre individuellen Einstellungen zu erweitern:
- Horizontale Ausrichtung: Legen Sie die horizontale Position der Hotspot-Markierung auf dem Bild als Prozentsatz von 0 bis 100 fest.
- Vertikale Ausrichtung: Legen Sie die vertikale Position der Hotspot-Markierung auf dem Bild als Prozentsatz von 0 bis 100 fest.
- Tooltip-Inhalt: Geben Sie den Inhalt ein, der im Tooltip-Popup angezeigt wird, wenn der Hotspot ausgelöst wird. Unterstützt Rich-Text-Formatierung einschließlich Fett, Kursiv, Links und Inline-Farben.
- Farbe: Legen Sie die Farbe der Hotspot-Symbolmarkierung fest.
- Erweiterte Einstellungen: Schalten Sie diese Option ein, um zusätzliche Optionen pro Hotspot anzuzeigen, einschließlich Beschriftung, Link (mit Optionen zum Öffnen in neuem Fenster und No Follow), Symbolposition (Links oder Rechts), Symbolauswahl, Umschalter für benutzerdefinierte Symbolgröße und Schieberegler für die Symbolgröße (10–150 Pixel, sichtbar, wenn benutzerdefinierte Symbolgröße aktiviert ist).
Klicken Sie unten in der Liste auf + Hotspot hinzufügen, um Ihrem Bild eine neue Hotspot-Markierung hinzuzufügen.
Unterhalb der Hotspot-Liste legt das Dropdown-Menü Hotspot-Animation den kontinuierlichen Animationsstil fest, der auf alle Hotspot-Markierungen angewendet wird – wählen Sie aus Keine, Sanfter Schlag oder Expandieren.
Tooltip:
- Position: Wählen Sie aus, wo der Tooltip relativ zum Hotspot-Marker angezeigt werden soll – Oben, Rechts, Unten oder Links.
- Trigger: Legen Sie fest, welche Aktion den Tooltip öffnet – Keine, Hover oder Klicken.
- Animation: Wählen Sie den Animationsstil, der beim Erscheinen des Tooltips verwendet wird – Ausblenden, Wachsen, Schwingen, Gleiten oder Fallen.
- Dauer: Legen Sie die Dauer der Animation zum Öffnen/Schließen des Tooltips in Millisekunden fest (0–10.000 ms).
- Pfeil anzeigen: Schalten Sie den kleinen Richtungspfeil auf der Tooltip-Blase ein oder aus.
- Maximale Breite: Legen Sie die maximale Breite des Tooltip-Popups in Pixeln fest (0–1000 px).
Schritt 3: Design anpassen
Im Tab Erweitert können Sie das Bild-Styling und den Abstand Ihres Hotspot-Blocks anpassen.
Stile:
- Bildschatten: Fügen Sie einen Schlagschatten hinter dem Bild hinzu. Wählen Sie aus Keine, Haarlin, Klein, Mittel, Groß, X Groß oder 2X Groß.
- Bildrand: Fügen Sie einen Rand um das Bild hinzu. Legen Sie den Randstil (Durchgezogen, Geringelt oder Gestrichelt), die Randfarbe, die Randbreite (Oben, Rechts, Unten, Links) und den Radius fest, um die Ecken abzurunden.
Abstand:
- Abstand außen: Steuern Sie den äußeren Abstand um Ihren Hotspot-Block (Oben, Rechts, Unten, Links). Unterstützt geräteabhängige Werte für Desktop, Tablet und Mobilgeräte.
- Abstand innen: Passen Sie den inneren Abstand innerhalb Ihres Hotspot-Blocks an (Oben, Rechts, Unten, Links). Unterstützt geräteabhängige Werte für Desktop, Tablet und Mobilgeräte.
Attribute:
- CSS-ID: Zeigt die automatisch generierte eindeutige Kennung für Ihren Hotspot-Block an, die von SeedProd automatisch für benutzerdefiniertes Styling oder JavaScript-Targeting erstellt wurde.
- Benutzerdefinierte Klasse: Fügen Sie benutzerdefinierte CSS-Klassen hinzu, um spezifische Stile aus Ihrem Theme oder benutzerdefinierten CSS anzuwenden.
- Benutzerdefinierte Attribute: Fügen Sie dem Block-Wrapper-Element beliebige HTML-Attribute hinzu. Geben Sie jedes Attribut in einer neuen Zeile im Format ein: attribut-name|wert.
Gerätesichtbarkeit:
- Auf Desktop ausblenden: Blenden Sie den Hotspot-Block auf Desktop-Bildschirmen aus.
- Auf Tablet ausblenden: Blenden Sie den Hotspot-Block auf Tablet-Geräten aus.
- Auf Mobilgeräten ausblenden: Blenden Sie den Hotspot-Block auf Mobilgeräten aus.
Schritt 4: Speichern Sie Ihre Änderungen
Wenn Sie mit der Konfiguration des Hotspot-Blocks und der Anpassung seines Erscheinungsbilds fertig sind, stellen Sie sicher, dass Sie Ihre Arbeit speichern.
Sie haben erfolgreich einen Hotspot-Block zu Ihrer Seite hinzugefügt! Indem Sie statische Bilder in interaktive Erlebnisse verwandeln, können Sie die Aufmerksamkeit der Besucher lenken, wichtige Details hervorheben und das Engagement steigern. Experimentieren Sie mit verschiedenen Hotspot-Animationen, Tooltip-Positionen und Symbolstilen, um ein Erlebnis zu schaffen, das zu Ihrer Marke passt und die Besucher dazu anregt, Ihre Inhalte zu erkunden.