So fügen Sie einen Tooltip auf der Elementor-Website hinzu

Suchen Sie nach einer Möglichkeit, Ihrer Elementor-Website einen Tooltip hinzuzufügen? Wenn das der Fall ist, sind Sie auf der richtigen Seite gelandet.

Ein Tooltip wird auch als QuickInfo oder InfoTip bezeichnet und zeigt einen Textausschnitt, der angezeigt wird, wenn der Mauszeiger über ein Bild oder einen bestimmten Text bewegt wird. Diese Tooltips sind überall im Internet oder auf Ihrem Desktop als Alt-Text, Labels oder Titeltext zu finden.

Wann immer Sie das Internet öffnen, sehen Sie möglicherweise ein beliebiges Bild, Symbol oder eine Überschrift. Wenn Sie Ihren Mauszeiger über diese Felder bewegen, sehen Sie eine Textbeschriftung, die als QuickInfo fungiert.

Mit der Tooltip-Funktion können Sie dasselbe auf Ihrer Website tun.

In diesem Artikel führen wir Sie durch das Hinzufügen eines Tooltips und das Anpassen seines Erscheinungsbilds mit Elementor- und PowerPack-Add-Ons.

Also machen wir ohne weiteres weiter.

Was ist ein Tooltip?

Ein Tooltip ist im Grunde ein winziges UI-Element, auf das ein Benutzer stößt, wenn er Internetbrowser, Apps, Desktop-Bildschirme usw. verwendet.

Versuchen wir, den Tooltip anhand seines Namens zu verstehen.

Sehen Sie, wie der Name schon sagt, es ist ein Werkzeug, das gibt Tipps an die Benutzer über ein Element oder Feld, wann immer es einen Auslöser gibt. Dieser Auslöser kann entweder ein Hover oder ein Klick sein, je nach Struktur während der Codierung.

Diese QuickInfos sind kleine Textfelder, die eine kurze Beschreibung oder einen Titel enthalten, der auf dieses bestimmte Element, Feld oder Werkzeug hinweist. Sehen Sie sich beispielsweise Ihren Desktop-Bildschirm an und sehen Sie sich die Symbole in der Symbolleiste oder im Windows-Startmenü an.

Wie Sie sehen können, zeigt die App im „ Windows-Startmenü “ ein kleines Textfeld mit Informationen zu dieser Anwendung an. So sieht ein Tooltip aus, den Sie überall auf Ihrem System oder einer Website finden können.

Wenn Sie also möchten, dass diese Tooltips auf Ihrer gesamten Website angezeigt werden, müssen Sie sie hinzufügen.

Wie Tooltips die Benutzererfahrung auf Ihren Websites verbessern

Sehen wir uns an, wie diese QuickInfos Ihnen dabei helfen können, die Benutzererfahrung auf Ihrer Website zu verbessern.

Tooltips können zu folgenden Bereichen Ihrer Website hinzugefügt werden:

• Anklickbare Elemente wie Bilder, Icons etc.
• Titel schweben Texte oder anklickbare Links.
• Bild-Hotspot.
• E-Commerce-Produkte (Wenn Sie eine WooCommerce-Website betreiben.)

Okay, denken Sie einmal darüber nach, wenn Sie diese Tooltips in all diesen Bereichen Ihrer Website verwenden, wie einfach und hilfreich es für alle Benutzer sein wird, die Ihre Website besuchen.

Ja, die Verbraucher werden es bequem finden, und das liegt daran, dass diese Tooltips den Benutzern helfen, indem sie Hinweise auf relevante Texte geben, wo immer sie auf Ihrer Website platziert sind, und dies wird ihre Benutzererfahrung verbessern.

Wie füge ich Tooltips in Elementor mit PowerPack hinzu?

Mit Hilfe eines Tooltips können Sie Ihren Benutzern für eine bessere Benutzererfahrung eine wichtige Nachricht per Text präsentieren.

Um Ihrer Website einen Tooltip hinzuzufügen, müssen Sie Elementor- und PowerPack-Add-Ons installieren und aktivieren.

PowerPack Addons für Elementor verfügt über mehr als 80 praktische und kreative Widgets, über 300 vorgefertigte Vorlagen und nützliche Erweiterungen, um das allgemeine Erscheinungsbild Ihrer Website zu verbessern. Eine dieser Erweiterungen ist ein Tooltip , mit dem Sie Tooltip-Texte auf Ihrer Website anzeigen können.

Sehen wir uns also an, wie Sie Ihrer Website mit Elementor und PowerPack einen Tooltip hinzufügen können.

Aktivieren Sie die Tooltip-Erweiterung

Um Ihrer Website einen Tooltip hinzuzufügen, aktivieren Sie zunächst die Tooltip-Erweiterung.

Gehen Sie als Nächstes zu Ihrem WordPress-Dashboard, navigieren Sie zu Elementor und klicken Sie auf PowerPack.

Navigieren Sie als Nächstes zum Abschnitt Erweiterungen und aktivieren Sie die Tooltips -Funktion.

Wenn Sie fertig sind, klicken Sie auf die Schaltfläche Änderungen speichern .

Aktivieren Sie die Tooltip-Funktion in Elementor

Um einen Tooltip zu einem bestimmten Widget/Abschnitt auf Ihrer Elementor-Website hinzuzufügen, öffnen Sie Ihre Seite im Elementor-Editor. Wählen Sie das Element aus, in dem Sie den Tooltip anzeigen möchten, und gehen Sie dann zur Registerkarte Erweitert > PowerPack ; Aktivieren Sie jetzt die Funktion „ Tooltip “ .

Schließlich wird die Tooltip-Funktion erfolgreich aktiviert, um auf Ihrer Website-Seite angezeigt zu werden.

Passen Sie die Tooltip-Funktion an

Nachdem Sie die Tooltip-Funktion aktiviert haben, sehen wir uns die Funktionen an, die Sie anpassen können, um einen attraktiven Tooltip-Text anzuzeigen.

Sobald Sie die QuickInfo-Funktion aktivieren, werden alle Anpassungsoptionen angezeigt, mit denen Sie das Gesamterscheinungsbild verbessern können.

Mal sehen, welche Tooltip-Einstellungen Sie mit dieser Funktion erhalten:

• QuickInfo-Inhalt: Fügen Sie den Inhalt hinzu, der in der QuickInfo angezeigt werden soll.
• Ziel: Mit dieser Option können Sie das Ziel entweder als aktuelles Element oder als benutzerdefinierten Selektor auswählen.
• Auslöser: Wählen Sie den gewünschten Auslöser aus den verfügbaren Optionen aus, z. B. Bewegen oder Klicken .
• Tooltip-Position: Wählen Sie die Tooltip-Position als oben , unten , links oder rechts .
• Pfeil anzeigen: Wählen Sie eine Option, ob ein Pfeil angezeigt werden soll oder nicht.
• Animation: Mit dieser Funktion können Sie aus verfügbaren Optionen wie Fade , Fall , Grow , Slide oder Swing eine Animation auf den Tooltip anwenden.
• Abstand: Diese Option kann den Abstand zwischen dem Hotspot und dem Tooltip anpassen.
• Z-Index: Mit dieser Option können Sie den Z-Index-Wert für den Tooltip anpassen.

Nachdem Sie nun alle QuickInfo-Einstellungen angepasst haben, gehen wir zum nächsten Schritt über.

Sehen wir uns alle Styling-Optionen an, die für die Tooltip-Funktion verfügbar sind:

• Hintergrundfarbe: Passen Sie die Hintergrundfarbe des Tooltips mit dieser Option an.
• Textfarbe: Diese Funktion kann verwendet werden, um die QuickInfo-Textfarbe anzupassen.
• Typografie: QuickInfo-Typografietext kann mit dieser Option angepasst werden.
• Box Shadow: Sie können die Box Shadow-Funktion mit dieser Option aktivieren, um ihr Aussehen zu verbessern.
• Rahmentyp: Wenn Sie dem Tooltip einen Rahmen hinzufügen möchten, können Sie diese Option verwenden. Wählen Sie aus den verfügbaren Optionen einen Rahmentyp aus, z. B. durchgehend , gepunktet , gestrichelt , doppelt und gerillt .
• Randradius: Wenn Sie dem Tooltip einen Rand zugewiesen haben, können Sie mit dieser Option seinen Radius anpassen.
• Polsterung : Sie können die Polsterung für den Tooltip anpassen; Dadurch wird ein Abstand zwischen dem Tooltip-Text und dem Rand ermöglicht.
• Breite: Mit dieser Option können Sie auch die Tooltip-Breite anpassen.

Nachdem Sie all diese Funktionen angepasst haben, sieht der soeben erstellte Tooltip so aus.

Abschluss!

Wie wir besprochen haben, ist der gesamte Prozess zum Hinzufügen eines Tooltips auf einer Elementor-Website mit PowerPack-Addons. Dies kann aber auch per Codierung erfolgen; wenn Sie ein professioneller Programmierer sind.

Wir hoffen, dass dieses Tutorial Ihnen geholfen hat, Ihrer Elementor-Website einen Tooltip hinzuzufügen. Klicken Sie hier, um PowerPack Elementor Addons zu erhalten, um erstaunliche Tooltips und viele andere Abschnitte auf Ihrer Elementor-Website zu erstellen.

Wenn Sie Ihre Elementor-Seite entwerfen und nach Möglichkeiten suchen, benutzerdefinierte Schriftarten hinzuzufügen, hilft Ihnen der Artikel So fügen Sie benutzerdefinierte Schriftarten zu Elementor-Websites hinzu.

Wenn Sie auf Probleme gestoßen sind, können Sie Ihre Fragen gerne im Kommentarbereich hinterlassen.

Begleiten Sie uns auf Twitter, Facebook und YouTube.