Trick # 78 | Dieser Beitrag beinhaltet 383 Wörter. – Geschätzte Lesezeit: ca. 2 Minuten.
Im Divi-Theme lässt sich ein «Back to top»-Button anzeigen. Wenn man auf einer Seite hinunterscrollt, wird dieser Button unten rechts eingeblendet und ermöglicht es BesucherInnen, mit einem Klick wieder bis ganz nach oben zu scrollen. Ein nettes Feature, das sich mit wenig CSS-Code stylen lässt.
Falls der Back-to-top-Button auf Ihrer Divi-Website beim Scrollen noch nicht angezeigt wird, können Sie diesen im Backend unter Divi/Theme Options/Allgemein/Button „Nach oben“ aktivieren.
Wir zeigen hier nun den kurzen CSS-Code an, welcher auf dieser Website genutzt wird. Den Code können Sie natürlich frei Ihren Bedürfnissen entsprechend anpassen und unter Design/Customizer/Zusätzliches CSS einfügen:
.et_pb_scroll_top.et-pb-icon {
background-color: #293280;
color: #d3e5f7;
}
.et_pb_scroll_top.et-pb-icon:hover {
background-color: #d3e5f7;
color: #293280;
border: 1px solid #293280;
border-right: none;
}Die ersten vier Codezeilen definieren das Aussehen des Back-to-top-Buttons im Normalzustand. Wie sie sehen haben wir nur die Farbwerte definiert. Von Zeile 6-11 geht es dann um das Aussehen, wenn der Mauszeiger über den Button bewegt wird. Auch da geht es bei uns nur um Farben.
Sie haben aber noch eine ganze Menge weiterer Möglichkeiten: Der Button lässt sich nämlich sehr vielfältig gestalten und sogar animieren. Falls Sie Interesse haben, kann ich Ihnen die englischsprachige aber einfach verständliche Anleitung von Maciej Ekstedt empfehlen.
Werbung
Werbung
