Sticky Buttons am Bildschirmrand – etwa für „Jetzt anrufen", WhatsApp-Chat oder Newsletter-Abo – erhöhen die Conversion-Rate sichtbar, weil der Call-to-Action dauerhaft präsent bleibt. Mit ein paar Zeilen CSS und einem Divi-Button-Modul lässt sich das Pattern elegant umsetzen, ohne ein weiteres Plugin zu installieren.
Dieses Plugin können wir empfehlen um einfach Sticky-Icons bzw. Sticky Buttons zu ermöglichen. Ein typischer Anwendungsfall ist die schnelle Kontaktmöglichkeit auf einer Webseite.
Folgende CSS-Anpassungen helfen euch bei der Benutzung des Plugins um die Schriftgröße anzupassen und die Hoverfarbe zu ändern:
#ssb-container ul {
font-size: 20px;
}
#ssb-container ul li:hover {
background-color: #FFFFFF;
}
Verwandte Artikel
Für durchdachte UX-Patterns und conversion-optimierte Websites bieten wir unsere Webdesign-Leistungen.
Best Practices für Sticky Buttons
Maximal 2 Buttons
Mehr als zwei seitliche Buttons wirken überladen. Priorisiere: Telefon oder WhatsApp – nicht beides.
Mobile zuerst testen
Sticky Buttons überdecken auf kleinen Screens oft wichtige Inhalte. Teste auf iOS und Android vor dem Launch.
z-index beachten
Setze z-index: 9999 auf dem Sticky-Container, damit er über Headern, Menüs und Popups liegt.
Tipp: DSGVO-konforme WhatsApp-Integration
Ein WhatsApp-Sticky-Button lädt standardmäßig WhatsApp-Tracking. Nutze eine Consent-Lösung wie Borlabs Cookie und lade den Button erst nach Zustimmung – oder verlinke direkt auf wa.me/deine-nummer ohne Script-Einbindung.
Du brauchst professionelle Unterstützung bei WordPress oder Divi? OIT GmbH aus Osnabrück bietet WordPress-Webdesign und WordPress-Wartung für Ihr Unternehmen.
Hast du eine Frage zu diesem Artikel?
Schreib uns – wir antworten in der Regel innerhalb eines Werktages.