Schritt 1: Bearbeite den Header deiner Website
Die Elemente, um den Button einzufügen, werden in die Kopfzeile – den Header – deiner Website eingefügt.
Öffne den Header in Elementor. Am einfachsten geht das über die schwarze Adminbar von WordPress, die auf jeder Seite eingeblendet wird:
Schritt 2: Vergib die CSS-ID für den Header
Wähle jetzt den obersten Abschnitt des Headers aus und vergib unter “Erweitert” eine CSS ID:
Diese “ID” lautet in meinem Fall einfach “top” und ist die “Sprungmarke” zu der gescrollt wird.
Schritt 3: Füge einen neuen Container mit dem Back-to-top-Button hinzu
Erstelle einen neuen Abschnitt oder Container im Header. Setze den Spaltenabstand auf 0 und stelle sicher, dass das der Abschnitt bzw. Container der erste Container auf der Seite ist.
Füge nu ein Bild-Element in diesen Container ein. Wähle dann das entsprechende Bild (am besten ein SVG), das angezeigt werden soll, aus der Mediathek aus.
Vergib dann noch den Link und verwende hier wieder die oben vergebene CSS-ID, allerdings mit vorangestellter Raute, also #top:
Wasserdichte Angebote schreiben in nur 10 Minuten?
Hol dir die ultimative Angebotsvorlage für Webdesigner, Web-Programmierer und Online-Marketer.
7 Tricks, wie andere Web-Professionals arbeiten und wirklich Geld verdienen
Das eBook für Web-Designer, Grafiker und Online-Marketer.
Hast du es satt, im Internet stundenlang nach Lösungen zu suchen?
Dann werde Teil der Website Heroes 🚀.
In meiner WP Business Community findest du sofort alle Antworten zu WordPress, technischen Fragen und Plugins: Schnell und übersichtlich aufgebaut. Bring so dein Wissen auf das nächste Level und damit auch dein Business.
Schritt 4: Platziere den Button in der rechten unteren Ecke
Im nächsten Schritt gehört der Button noch in der rechten unteren Ecke platziert. Dafür wählst du beim Bild das Tab “Erweitert”.
Unter “Positionierung” stelle die Breite auf “Inline (auto)” sowie die Position auf “Fixiert”. Die horizontale Anordnung ist rechts, die vertikale unten. Mit den zwei Slidern kannst du dann noch den Abstand vom rechten und unteren Rand festlegen.
Speicherst du die Kopfzeile ab, dann funktioniert der Button schon.
Schritt 5: Blende den Button nur bei Bedarf ein
Der Button wird jetzt aber immer angezeigt, auch wenn du schon am oberen Rand der Website bist.
Wähle daher nochmals den in Schritt 3 eingefügten Abschnitt bzw. Container aus und wähle das Tab “Erweitert” aus.
Unter “Bewegungseffekte” wähle “oben” bei Sticky, der Wert für “Auslassen” beträgt 0, und der Offset 500. Damit bleibt der Abschnitt bzw. Container, nachdem 500px weit gescrollt wurde, am oberen Bildschirmrand “kleben” und setzt im Hintergrund ein paar CSS-Klassen, die du im nächsten Schritt benötigst.
Unter “Eigenes CSS” gib den folgenden CSS-Code ein:
selector {
opacity: 0;
transition: all 0.4s;
}
selector.elementor-sticky--effects {
opacity: 1;
}
Dieser Code blendet den Button aus und erst wieder ein, wenn die oben angegebenen 500px gescrollt wurde.
That’s it – speichere den Header und lade die Seite neu.
Der Button “Zurück zum Seitenanfang” schwebt jetzt in der rechten unteren Ecke, wenn du auf der Seite mehr als 500 Pixel nach unten scrollst.
Funktioniert diese Anleitung noch?
Ich habe diesen Button auf einigen Websites selbst im Einsatz. Doch Elementor, wie auch WordPress, entwickeln sich ständig weiter, daher kann es sein, dass die Anleitung angepasst werden muss.
Funktioniert die Anleitung für dich also nicht mehr, dann hinterlasse mir bitte einen Kommentar, damit ich sie entsprechend anpassen kann! Danke!
Lass uns einfach Websites bauen,
6 Antworten
Hallo Michael,
vielen Dank für diese ausführliche Anleitung. Es funktioniert alles einwandfrei. Bis auf Schritt 5. Ich möchte den Button nur einblenden, wenn man auf der Website bereits nach unten gescrollt hat.
Leider sieht meine Auswahl bei „Bewegungseffekte“ anders aus und „Sticky“ ist nicht auffindbar. Ist es möglich, dass diese Funktion nur bei Elementor Pro verfügbar ist?
Danke für deine Hilfe!
Liebe Grüße,
Claudia
Liebe Claudia,
da hast du recht, „Sticky“ ist eine Pro-Funktion.
Liebe Grüße, Michael
Bei mir funktioniert es leider nicht. Ich habe vielleicht eine zu kurze Seite? Daher habe ich auf 100px reduziert aber auch da erscheint der Pfeil nicht. Zudem fehlt bei meiner Version in Schritt 5 die Vorgabe bei Eingangsanimation. Was sollte ich anstelle dessen nehmen?
Hallo Joanna,
ich habe die Anleitung soeben ausprobiert und es funktioniert einwandfrei. Bitte stelle sicher, dass du einen neuen Abschnitt bzw. Container einfügst, und dieser der erste Abschnitt in deinem Header ist. Nur dann klappt das mit den 500px (die du übrigens jederzeit selbst anpassen kannst).
lg Michael
Hi,
Netze Idee, genau das, was ich gern meiner Site zufügen will. Gemacht wie nach Anleitung, etwas gelernt zudem. Allein: Scrolle ich nach unten, taucht das Icon wie gewünscht erst nach einer Zeit auf. Doch drücke ich es, scrollt die Seite nur einige Pixel nach oben. Ich kann mehrfach drücken, mehrfach leicht nach oben kommen. Aber eben nicht wie gedacht bis zum Header, wo der Abschnitt eine entsprechende CSS-ID hat, die nicht angesprungen erden will…
Hallo Martin,
danke für dein Feedback. Ich habe die Anleitung noch einmal nachgebaut, bei mir funktioniert es einwandfrei. Hast du evtl. ein Plugin installiert, welches das Scroll-Verhalten beeinflusst? Ist der Header sticky und die ID im Header? Funktionieren andere Jump-Links (#something -> zur ID „something“) auf der Seite?
lg Michael