Lange Seiten brauchen einen Rückweg. Wer 3.000 Pixel nach unten gescrollt hat, will nicht erst mit dem Mausrad zurückkurbeln. Ein „Nach oben“-Button löst das. In Divi 5 gibt es dafür zwei Wege: einen fertigen Schalter in den Theme-Optionen und einen selbst gebauten Button, den du mit dem Button-Modul an eine feste Stelle setzt.
Ich zeige dir beide Wege und sage dir, wann welcher passt. Getestet mit Divi 5.13 (deutsche Oberfläche), Stand Oktober 2026. Die Beschriftungen stehen so da, wie Divi sie anzeigt, auch wenn manche holprig übersetzt sind.
Welcher Weg passt?
| Eingebauter Button | Eigener Button |
|---|
| Einrichtung | ein Schalter | Button-Modul plus Positionseinstellung |
| Erscheint | erst nach dem Scrollen | immer |
| Gilt für | die ganze Website | nur dort, wo du ihn einbaust, oder in einem Footer |
| Aussehen | grauer Standard, per CSS änderbar | alle Button-Einstellungen von Divi |
Meine Empfehlung: Nimm den eingebauten Button, wenn du schnell eine Lösung für die ganze Seite willst. Der eigene Button lohnt sich, wenn er wie dein restliches Design aussehen soll oder nur auf einzelnen Seiten erscheinen darf.
Weg 1: Der eingebaute Button
Einschalten
Geh im WordPress-Menü auf Divi → Theme-Optionen. Du bleibst im Reiter „Allgemein“ und scrollst weit nach unten, bis zu den Schaltern. Dort steht „Nach-Oben-Button“ mit der Beschreibung, dass er beim Scrollen angezeigt wird. Schalt ihn ein und klick auf „Änderungen Speichern“, den blauen Knopf oben auf der Seite.
Der Schalter „Nach-Oben-Button“ liegt im Reiter „Allgemein“ weit unten.Direkt darunter steht „Sanftes Scrollen“. Lass dich vom Namen nicht täuschen: Laut Beschreibung geht es um den Effekt des sanften Scrollens mit dem Mausrad, nicht um eine Animation beim Hochspringen. Ich habe diesen Schalter nicht benutzt.
Im Theme Customizer habe ich nach Einstellungen für den Button gesucht und keine gefunden. Aussehen und Position änderst du deshalb per CSS.
So sieht er aus und wann er erscheint
Der Button erscheint nicht sofort, sondern erst, wenn Besucher ein Stück gescrollt haben. Auf einer kurzen Testseite von etwa 1.400 Pixeln Höhe blieb er unsichtbar, auf einer Seite von gut 3.000 Pixeln war er nach dem Scrollen da. Bei kurzen Seiten wirst du ihn also nie sehen, und das ist gewollt.
Standardmäßig ist er ein 40 × 40 Pixel großes Feld in halbtransparentem Schwarz, am rechten Rand, 125 Pixel über der Unterkante, mit abgerundeten Ecken nur links.
Der Standard: ein halbtransparentes graues Feld am rechten Rand.Aussehen mit CSS ändern
Der Button ist ein Element mit der Klasse et_pb_scroll_top, im sichtbaren Zustand zusätzlich et-visible. Das CSS trägst du direkt auf der Theme-Optionen-Seite ein, im Feld „Individuelles CSS“ unter den Schaltern. Mein Beispiel macht daraus einen runden blauen Button mit etwas Abstand zum Rand:
.et_pb_scroll_top.et-visible { background: #1d4ed8; border-radius: 50%; width: 48px; height: 48px; line-height: 48px; right: 24px; bottom: 24px; }
Das CSS steht im Feld „Individuelles CSS“, direkt unter den Schaltern.Danach wieder „Änderungen Speichern“. Auf der Live-Seite zeigt Divi den Button jetzt in meinen Werten: Hintergrund dunkelblau, 48 Pixel groß, rund, jeweils 24 Pixel vom Rand.
Der angepasste Button auf der Live-Seite.Stolperfalle: Setz line-height in der Höhe des Buttons, sonst sitzt der Pfeil nicht mittig. Und denk daran, dass das CSS für die gesamte Website gilt.
Weg 2: Eigener Button mit festem Platz
Hier baust du den Button selbst. Er sieht aus wie jeder andere Divi-Button und bleibt per Positionseinstellung am Bildschirmrand kleben.
- Füg ein Button-Modul ein. In der Modul-Auswahl heißt es „Button“.
- Im Reiter „Inhalt“ trägst du unter „Text“ bei „Button-Text“ zum Beispiel „Nach oben“ ein.
- Öffne die Gruppe „Link“ und schreib bei „Button-Link-URL“ den Anker
#top. Das ist der Sprung zum Seitenanfang. „Button Link-Ziel“ bleibt auf „Im Aktuellen Tab“.
Mit dem Anker #top springt der Button zum Seitenanfang.Jetzt kommt der Teil, der aus dem Button einen schwebenden macht:
- Wechsle in den Reiter „Erweitert“ und öffne die Gruppe „Arbeitsstelle“. Das ist Divis Übersetzung für „Position“.
- Stell das Feld „Position“ (dort mit einem Strich davor beschriftet) von „Standard“ auf „Fest“. Zur Auswahl stehen „Standard“, „Relativ“, „Absolut“ und „Fest“.
- Beim „Versatz-Ursprung“ klickst du in dem Raster mit neun Feldern die Ecke unten rechts an.
- Mit „Vertikaler Versatz“ und „Horizontaler Versatz“ legst du den Abstand zum Rand fest, bei mir je 24 Pixel.
„Fest“, Ecke unten rechts, 24 Pixel Abstand.Im Canvas war der Button erst zu sehen, nachdem ich den Ursprung unten rechts gewählt hatte. Das Feld „Z-Index“ darunter hebt ihn bei Bedarf über andere Elemente.
Speichere die Seite und ruf sie im Frontend auf. Der Button sitzt unten rechts im Fenster, und ein Klick darauf bringt mich in meinem Test wieder an den Seitenanfang, in der Adresszeile steht dann #top.
Der eigene Button klebt unten rechts im Fenster.Ein Unterschied zum eingebauten Button: Der eigene ist immer da, auch ganz oben auf der Seite. Wenn er erst später auftauchen soll, brauchst du zusätzlich Sichtbarkeits- oder Scroll-Einstellungen, die ich hier nicht getestet habe. Außerdem gilt er nur für die Seite oder das Layout, in dem du ihn platzierst. Willst du ihn überall, lohnt es sich, ihn in einen Footer im Theme Builder zu setzen. Das habe ich nicht ausprobiert.
Kurzfassung
- Schnell: Divi → Theme-Optionen → Allgemein → „Nach-Oben-Button“ einschalten und speichern.
- Anpassen: CSS für
.et_pb_scroll_top.et-visible im Feld „Individuelles CSS“. - Frei gestaltbar: Button-Modul, Link
#top, Erweitert → „Arbeitsstelle“ → Position „Fest“, Ursprung unten rechts. - Nicht beide gleichzeitig: Sonst hast du zwei Buttons übereinander. Schalt den eingebauten Button aus, wenn du einen eigenen nutzt.
Noch kein Divi? Preise und Lizenzen findest du direkt bei Elegant Themes (Werbung).
