Website-Besucher werden häufig mit sehr viel Content konfrontiert, welcher es oft sehr schwierig macht, wichtige Informationen entlang der Customer Journey schnell zu finden.
Um Kontaktmöglichkeiten, Warenkorb oder Call-to-Actions möglichst nutzerfreundlich zu präsentieren, nutzen viele Websites Sticky Buttons oder Sticky Bars, welche beim scrollen auf der Website immer an der gleichen Stelle der Bildschirmfläche „festgeklebt“ (sticky) sind, um Kunden einen möglichst einfachen Zugang zu bestimmten Aktionen zu verschaffen.
Egal, ob du Sticky Button, Sticky Bar, Sticky Menu, Floating Menu, Floating Bar, Sticky Elements oder was auch immer dazu sagst: Solche Elemente kannst du per Pagebuilder, Plugin oder CSS ganz einfach in deine WordPress Website einfügen
In diesem Artikel zeige ich dir die manuelle Umsetzung mit Thrive Architect* und Thrive Theme Builder*, du kannst das System aber mit jedem anderen Page-Builder genauso umsetzen.
1. Warum soll ich überhaupt Sticky Buttons benutzen?
- Benutzerfreundlichkeit:
Sticky Buttons oder eine Sticky Bar können die Benutzerfreundlichkeit deiner Website verbessern, indem sie wichtige Links ständig sichtbar und leicht zugänglich machen, ohne großartig scrollen zu müssen. - Erhöhte Konversionen:
Durch das Hervorheben wichtiger Call-to-Actions tragen Sticky Buttons oder eine Sticky Bar dazu bei, die Conversion-Rate auf deiner Website zu steigern. Ist ein auffälliger Button immer im Blickfeld des Besuchers, ist auch die Wahrscheinlichkeit höher, dass er darauf klickt und die gewünschte Aktion ausführt. - Informationsübermittlung:
Eine Sticky Bar kannst du unter anderem auch dazu verwenden, um Besucher über Neuigkeiten, Sonderangebote, Veranstaltungen oder andere relevante Inhalte zu informieren. Da die Sticky Bar ständig sichtbar bleibt, kann sie auch nicht übersehen werden. - Navigationserleichterung:
Wenn deine Website ein umfangreiches Menü oder viele Unterseiten hat, können Sticky Buttons die Navigation erheblich erleichtern, unabhängig davon, auf welcher Seite man sich gerade befindet. - Platzersparnis:
Sticky Buttons oder eine Sticky Bar können dir helfen, wertvollen Platz auf deiner Website zu sparen. Anstatt mehrere statische Elemente oder eine große Navigationsleiste anzuzeigen, kannst du wichtige Funktionen oder Informationen in einer kompakten, immer sichtbaren Bar zusammenfassen. - Visuelle Hervorhebung:
Durch das „Festkleben“ wichtiger Elemente am Bildschirmrand oder einer festen Position stechen Sticky Buttons oder Sticky Bar visuell hervor, wodurch wichtige Informationen oder Aktionen nicht übersehen werden (können).
Aber Achtung: Es ist wichtig, daß du Sticky Buttons oder Sticky Bar mit Bedacht einsetzt und sicherstellst, daß sie das Gesamterlebnis deiner User verbessern, anstatt es zu beeinträchtigen. Du solltest darauf achten, daß die Bar nicht zu aufdringlich oder störend wird und daß sie auf verschiedenen Geräten und Bildschirmgrößen gut funktioniert.
Kurze Richtwerte:
- Überprüfe die Elemente auf Mehrwert für deine User
- Sollen so wenig Platz wie möglich einnehmen, aber gut klickbar (mobil) bleiben
- Unbedingt darauf achten, wo du die Sticky Elements positionierst. Schließlich fehlt dieser Platz für Content.
- Keine störenden und unnötigen Animationen verwenden
2. 6 kurze Schritte, um mit Thrive Themes Sticky Buttons zu erstellen
2.1 Platzierung festlegen
Bevor du damit beginnst, deine Sticky Bar zu bauen, musst du dir grundlegend überlegen, ob du diese nur auf einzelnen Seiten einbauen möchtest oder auf deiner gesamten Website.
Benutzt du z.B. Thrive Theme Builder, dann kannst du deine Sticky Bar direkt in Templates hinterlegen und musst sie nicht jedes mal per Hand einfügen, wenn du eine neue Seite anlegst.
Benutzt du einen Page-Builder wie Thrive Architect und ein externes Theme, welches von sich aus keine Sticky Elemente erstellen kann, dann musst du deine Bar jedes Mal per Hand in eine neue Seite einfügen.
Achtung: Letzteres geht in Thrive Architect relativ einfach, da du die Sticky Bar abspeichern und per Knopfdruck in die neue Seite einfügen kannst.
2.2 Container einfügen
2.2.1 Background-Section
Hauptcontainer deiner Floating Bar ist eine Background-Section. So müssen wir später nur dieser Anzeigeoptionen zuweisen, um unseren gewünschten Sticky-Bar-Effekt zu erzielen.
Füge die Background-Section oberhalb deines Contents in die Seite ein und gehe links im Menü zu den Main Options.
Achte darauf, daß sowohl die Background-Section, als auch dessen Inhalt, die gesamte Bildschirmbreite einnimmt. Ändere letzteres nur, falls du die Bar auch auf der Desktop-Version anzeigen lassen möchtest.
2.2.2 Columns-Element
Je nachdem, wie viele Buttons deine Sticky Bar enthalten soll, fügst du gegebenenfalls ein Columns-Element ein.
Mehr als 4 Buttons solltest du ohnehin nicht einbauen, damit es nicht zu fummelig wird und mobil auch nicht zu viel Platz einnimmt.
Wähle deine Spaltenanzahl (ich habe hier 3 gewählt) und gehe weiter zum nächsten Schritt.
2.2.3 Content-Box & Icons
In jede dieser Spalten benötigst du eine Content-Box und ich erkläre dir auch gleich warum.
- Die Content Box ist dein „Button“, den du mit einem Link versehen kannst. Würdest du nur das Icon verlinken, wäre die klickbare Fläche mobil einfach viel zu klein.
- Wenn du in die erste Content-Box nun ein Icon einfügst und deine ganzen Designanpassungen vornimmst (falls notwendig), dann brauchst du die Content-Box nur duplizieren und in die restlichen Spalten einfügen -> spart ne Menge Arbeit!
3. Links einfügen
Hast du dein Design fertig, klickst du auf die erste Content-Box und wechselst links im Menü auf den Punkt „Add Link to Content Box“.
Hier kannst du dich dann entscheiden, ob du einen statischen Link, einen Jump-Link oder Global Fields (z.B. deine hinterlegte Telefonnumer oder E-Mail-Adresse) einfügen möchtest.
Ab hier könnte dein Kunde nun die einzelnen Links bereits anklicken und deine Sticky Bar wäre somit prinzipiell auch schon einsatzbereit.
Damit sie aber an der richtigen Stelle und auf den richtigen Geräte-Typen angezeigt wird, müssen wir noch 2 Einstellungen vornehmen.
4. Scroll Behavior festlegen
Würdest du die Scroll Behavior nicht festlegen, dann würde dein Sticky Menu einfach oberhalb deines Inhalts angezeigt werden und du würdest daran vorbei-scrollen.
Damit das nicht passiert, wählst du die Background-Section aus und gehst links im Menü zum Punkt Scroll Behavior.
Hier wählst du den Punkt „Sticky“ aus und je nachdem, ob deine Bar am oberen oder unteren Bildschirmrand angezeigt werden soll, wählst du bei „Stick to Screen“ „Top“ (oben) oder „Bottom“ (unten).
Du könntest dich bei „Sticky Until“ ebenfalls noch entscheiden, wie weit deine Sticky Buttons mitscrollen sollen: bis zum Ende der Seite/ bis zum Ende des Containers/ bis zu einem anderen Element.
Da wir jedoch hier im Beispiel ein „Sticky Menu“ mit den wichtigsten Kontaktinformationen haben, soll es auch bis zum Ende der Seite „mitfahren“ und ich wähle „End of Page“ aus.
5. Anzeigeort festlegen
Abschließend musst du noch festlegen, auf welchem Gerätetyp – Desktop, Tablet, Mobil – du deine Sticky Buttons anzeigen lassen möchtest.
Wähle wieder die gesamte Background-Section aus und gehe links zum Punkt „Responsive“.
Hier wählst du entsprechende Geräte-Typen jeweils an oder ab – grau hinterlegt bedeutet aktiv (also da wird es angezeigt).
In meinem Beispiel wird das Sticky Menu nur auf Mobilgeräten, nicht aber auf Tablet oder Desktop angezeigt.
FERTIG!
6. Ansicht überprüfen
Überprüfe abschließend das Design erst nochmal in den verschiedenen Editor-Ansichten und abschließend noch auf echten Geräten.
So kannst du sicherstellen, daß auch alles wie gewünscht funktioniert!
Fazit
Wie du siehst ist es überhaupt kein Hexenwerk, Sticky Buttons in deine Website manuell einzufügen, sofern du einen Page-Builder wie Thrive Architect* oder ein Theme wie Thrive Theme Builder* benutzt.
