Lesefortschritt:

«Back to top»-Button im Divi-Theme stylen

19. März 2021 | CSS-Stylesheet, Divi-Theme

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

 

Kostenlose WordPress- und Divi-Tricks im Abo

Wir schicken Ihnen sporadisch (weniger als 10x jährlich) neue Tricks für Wordpress und das Divi-Theme, aber auch hilfreiche CSS- und HTML-Codes frei Haus.

Füllen Sie zur Anmeldung das folgende Formular aus. Angaben mit * sind Pflichtangaben.






Vielen Dank.

Pin It on Pinterest

Share This