FloatingBar Plugin

Mit dem FloatingBar Plugin kannst du eine Leiste mit bis zu vier Menüpunkten auf der rechten oder linken Seite deiner Website fixieren. Dadurch kannst du Links oder deine Kontaktdaten auf dem schnellsten Weg mit deinen Besuchern teilen.

Nach der Installation des Plugins erscheint in der linken Backend-Navigation ein neuer Menüpunkt, der das Icon des Plugins beinhaltet. Klickst du darauf, gelangst du zu dieser Übersicht.

Status

Der Status legt fest, ob die Leiste überhaupt im Frontend sichtbar ist oder nicht abgebildet wird.

Position

Mit der Position kannst du festlegen an welcher Stelle auf deiner Website die Leiste platziert werden soll.

Box 1 bis 4

Klickst du auf einen der Buttons, kannst du die Inhalte der jeweiligen Box verwalten.

Box konfigurieren

1. Status
Der Status einer Box legt fest, ob die jeweilige Box überhaupt in der Leiste dargestellt wird.

2. Icon
Das Icon muss ein Icon von Fontawesome sein. Im Folgenden Beitrag findest du eine detaillierte Beschreibung dazu.

3. Überschrift
Die Überschrift wird dann angezeigt, wenn der Besucher nicht mit seiner Maus über der jeweiligen Box ist.

4. Link
Der Link beinhaltet das Attribut, zu dem der Besucher geleitet wird, sobald er auf die jeweilige Box klickt. Dabei kann der Link z.B. eine interne/externe Url, eine E-Mail Adresse oder aber auch eine Telefonnummer sein. Wichtig dabei ist, dass bei einer E-Mail oder Telefonnummer die entsprechende Anweisung in HTML Schreibweise vor der Adresse sein muss.

Beispiel (Telefon): tel:+490123456789
Beispiel (E-Mail): mail:max@

5. Kontaktdaten

Die Inhalte der Textbox werden in der jeweiligen Box angezeigt, sobald der Besucher mit der Maus darüber fährt.

Fontawesome Icon wählen

Damit du (unter Punkt 2.) das passende Icon eintragen kannst, navigierst du bitte zu der Url die sich auch unter dem Eingabefeld befindet:

Zu Fontawesome: https://fontawesome.com/v5/search?o=r&m=free&s=solid

Dort findest du eine große Bibliothek mit vielen Icons vor, aus denen du dir pro Box ein Icon aussuchen kannst. Wichtig dabei ist, dass du ausschließlich Icons aus der Kategorie "Free" und "Solid" nutzt. Icons aus anderen Kategorien werden unter alphaNEXT nicht dargestellt!

Sobald du ein Icon gefunden hast, das du verwenden möchtest klickst du darauf und erhältst die Ansicht, die du in diesem Screenshot erkennen kannst. Von dort kopierst du die zwei markierten Begriffe (z.B. fas fa-wrench) und fügst sie in das Eingabefeld "Icon" ein.

Die Icon-Vorschau aktualisiert sich erst bei erneutem Öffnen des Konfigurationsfenster der jeweiligen Box. 

Zurück zur Übersicht