Wie machen Sie Ihre Website attraktiv für Besucher? Diese Frage beschäftigt fast alle Besitzer von Internetressourcen: Händler, Blogger, Besitzer kleiner und großer Unternehmen, Reisende und einfach kreative Menschen, die der Welt etwas zu sagen haben.
Warum sollte eine Website schön und funktional sein?
Die Anzahl der Besuche hängt vom Thema der Website und ihrer Zielgruppe, dem Interesse der Menschen an einem bestimmten Produkt, Investitionen, Werbung, Inh alt und vielen anderen Faktoren ab. Aber es kann nicht geleugnet werden, dass die Site "von Kleidung begrüßt" wird. Es ist die erste und Hauptseite der Ressource, die ihr Gesicht ist, die Visitenkarte, anhand derer der Besucher verstehen muss, ob er seine Zeit mit der weiteren Betrachtung des Inh alts verbringen möchte.
Und es gibt keinen Platz für Fehler! Nach Recherchen einer der technischen Universitäten in den USA bekommt der Besucher den ersten Eindruck von der Seite in weniger als einer Sekunde. Im Durchschnitt „scannt“eine Person eine Website in 3 Sekunden. Blitzschnell, oder?!
Bis zu 70 % des Erfolgs der Ressource hängt davon ab, wie die Hauptseite aussieht. Das erste, was die Leute bemerken, istLogo, aber das zweite ist die Navigation. Und wenn mit dem Logo alles mehr oder weniger klar ist, lohnt es sich, sich über die Navigation, das Menü und die Ergonomie der Website den Kopf zu zerbrechen. Es stellt sich eine vernünftige Frage: "Wie dekorieren Sie Ihre Website, machen Sie sie so funktional und bequem wie möglich, aber gleichzeitig schön?" Es gibt viele ungewöhnliche Ideen zu bieten, aber eine der interessantesten sind Tooltips.
Was sind QuickInfos? QuickInfos sind nicht nur ein großartiger Mechanismus zur Verbesserung der Funktionalität der Website, sondern auch ein Tool, mit dem der Benutzer eine Erklärung für ein bestimmtes Bild sehen kann, wenn er mit der Maus über ein Symbol, Wort oder Bild fährt.
Werkzeuge zum Arbeiten mit QuickInfos
Bootstrap ist das beste Tool zum Erstellen von Tooltips. Es ist ein einfach zu erlernender Satz von Vorlagen zum Erstellen von Apps und Websites, die in HTML, CSS, Sass und JavaScript geschrieben sind.
Um genau zu sein, Tooltips verwenden eines der grafischen Elemente der Bootstrap-Vorlage - Tooltip.
Das Bootstrap-Framework wurde für "Twitter" entwickelt und hieß ursprünglich "Twitter Blueprint". Nach einigen Änderungen im Jahr 2012 erhielt es ein 12-Sp alten-Raster, wurde anpassungsfähig und erhielt den bekannten Namen - Tooltip. Ein Tooltip ist ein Element, das angezeigt wird, wenn Sie mit der Maus über ein bestimmtes Element auf dem Monitorbildschirm fahren.
Hinweis erstellen
Du kannst einen Bootstrap-Tooltip mithilfe von Attributen erstellenDaten sowie durch Aktivierung der „Java Script“-Elemente. Es gibt zwei Möglichkeiten, einen HTML-Bootstrap-Tooltip zu erstellen. Die Essenz des ersten besteht darin, das Attribut und den Attributtitel (Titel) anzuwenden, die den Hinweistext enth alten. Der Tooltip wird oben eingeblendet (Standardeinstellung). Denken Sie daran, dass der Tooltip initialisiert werden muss, da die automatische Initialisierung im „Twitter Bootstrap“aus Leistungsgründen ver altet ist.
Um Tooltips zu initialisieren, wird ein spezielles JavaScript verwendet, in dem die Tooltip-Methode für alle Elemente wiederhergestellt wird, die ein Attribut haben. Die Essenz der zweiten Methode besteht darin, einen Tooltip mithilfe des "JavaScript"-Codes unter Beteiligung der jQuery-Bibliothek zu aktivieren, indem eine Toolklasse geschrieben wird, die einen Tooltip enthält. Die Methode ähnelt der ersten, mit Ausnahme der Elementauswahlmethode. Sie können Hinweise in "Java Script" wie unten gezeigt aktivieren.
Bootstrap-Tooltip-Beispiel
Es gibt vier Hauptoptionen für die Positionierung von Tooltips: am linken und rechten Rand sowie über und unter dem Element.
Hinweis von oben
Hinweis rechts
Hinweis ganz unten
Hinweis links
Tooltips verwenden
Es gibt viele Verwendungsmöglichkeiten für den Bootstrap-Tooltip. Sie können Tooltips einfügen, damit der Benutzer die Übersetzung von Texten aus einer Fremdsprache im Text nachvollziehen kann. QuickInfos können auch als Werkzeug verwendet werden, um dem Benutzer zu helfen, die Bedeutung der Sch altflächen auf dem Bedienfeld zu verstehen, wenn er mit der Maus darüber fährt. Bootstrap-Tooltip-Vorlagen werden häufig auf den Websites verschiedener Organisationen verwendet, um ein Abonnement für Unternehmensnachrichten zu erstellen. So bleiben Kunden auf dem Laufenden und Besucher können auch neue Informationen erh alten, z. B. Rabattsätze, Angebote, Änderungen im Unternehmen.
Stellen Sie sich ein Beispiel vor, bei dem ein Benutzer seine E-Mail-Adresse eingeben muss, um einen Newsletter zu abonnieren. Die Aufgabe sicherzustellen, dass das Kundenpublikum Nachrichten abonniert, lässt sich am einfachsten mit HTML5 und dem erforderlichen Attribut lösen. Der Tooltip-Hinweis wird in diesem Fall benötigt, damit der Benutzer die Abfolge der Aktionen versteht. Zum Beispiel habe ich nach Eingabe der E-Mail-Adresse das Kontrollkästchen aktiviert: "Ich stimme zu, Unternehmensnachrichten an meine E-Mail-Adresse zu erh alten." Unten sehen Sie ein Beispiel für den Formularcode.
Die Installation dieses Codes in den HTML Bootstrap Tooltip ist einfach. Aber die Vorteile sind erheblich. Jetzt kennen die Verbraucher alle Neuigkeiten des Unternehmens. Dies ist eine Art kostenlose Werbung.
Hauptfehler beim Erstellen von PopupsHinweise
Was tun, wenn der Bootstrap-Tooltip nicht funktioniert? Der erste und wichtigste Fehler, bei dem das Tooltip-Attribut nicht funktioniert, ist, wenn der Tooltip nicht aktiviert ist. Um es zu aktivieren, müssen Sie einen speziellen Code verwenden.
Mit dieser Methode können Sie absolut alle Tooltips auf einer Webseite initialisieren.
Der zweite häufige Fehler ist, jQuery nicht im Header zu haben.
Damit der Link korrekt funktioniert, muss eine Datenverarbeitungsfunktion wie "Java Script" angegeben werden.
Tooltip-Eigenschaften
Im Kern ist die Tooltip-Komponente darauf ausgelegt, Tooltips anzuzeigen, wenn Sie den Mauszeiger über den einen oder anderen Teil der Seite bewegen. Aber neben der Position des Tooltips rechts, links und oben mit der Hilfe hat Tooltip die folgenden Eigenschaften:
- Aktiv. Die Verwendung der true-Eigenschaft im Bootstrap-Tooltip ermöglicht die Anzeige von QuickInfos, während die gleiche Eigenschaft auf false gesetzt wird, bedeutet, dass keine QuickInfos angezeigt werden können.
- AutoPopDelay ist die Zeit, zu der Tipps angezeigt werden.
- AutoPopDelay. Gibt an, wie lange der Mauszeiger über einem Element verweilen muss, damit der Tooltip angezeigt wird.
- Ist Ballon. Wenn der Wert des HTML Bootstrap Tooltip-Tooltip wahr ist, ändert sich der Tooltip in eine Wolke.
- ToolTipIcon. Stellt das Zeichen dar, das im Fenster angezeigt wirdHinweise.
Tooltipster
Um zum Beispiel schöne Tooltips auf einer mit Wordpress erstellten Seite zu erstellen, ist es nicht notwendig, die Sprache der Webentwickler gründlich zu beherrschen. Es reicht aus, über die Existenz eines solchen Plugins (Erweiterung) wie Tooltipster zu wissen. Aus dem Namen geht hervor, dass dieses Plugin auf Tooltip basiert und diesem in seinen Eigenschaften und seinem Zweck überraschend ähnlich ist. Wozu dient dieses Plugin? Damit können Sie das erforderliche HTML-Markup im Tooltip erstellen.
Die Arbeit des Plugins basiert auf dem Einfügen von Verknüpfungen auf der Seite. Enthält alle grundlegenden HTML-Bootstrap-Tooltip-Attribute: Inh alt (Daten-Tooltip-Inh alt), Titel, Position, Auslöser usw. Dadurch können Sie das Design, die Schriftart, die Tooltip-Größe, die Farbe ändern, ein Bild einfügen und mehr.
