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 nun 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.
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.
Wichtig: das ganze funktioniert nur, wenn du den Container/Abschnitt auf sticky setzt. Setzt du den Button auf “sticky”, klappt es nicht.
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,
Michael
19 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
Funktioniert tip top – tolle Anleitung. Danke!
Sehr gerne, liebe Katja.
Hallo Michael,
das ist genau das was ich gesucht habe, danke dafür :)
Allerdings funktioniert der CSS-Code bei mir nicht :/
Wenn ich den in “eigenes CSS einfüge hab ich gar kein Button mehr.. was mach ich falsch
Hallo Ilona,
scrolle ein Stück nach unten, dann erscheint der Button.
lg Michael
Hallo Michael,
leider nicht. Sobald in den CSS-Code reinkopiere ist der Button weg.
Er zeigt eine Fehlermeldung, dass ich das selector weglassen soll (so wie bei dir im Screenshot des Codes das Warndreieck – wenn ich das mache, geht es auch nicht… wo hab ich da ein Fehler drin?
Hi Ilona,
das ist normal. Wenn du speicherst und die Seite neu lädst, dann nach unten scrollst, dann erscheint der Button.
Das “selector” ist notwendig, damit es funktioniert. Die Warnung ist ein Fehler vom Source-Code-Editor und zu ignorieren.
lg Michael
Hallo Michael,
leider wird der Icon bei mir nicht angezeigt, nachdem ich den CSS-Code eingegeben habe. Er erscheint auch nicht beim nach unten Scrollen.
Liebe Nadja,
du musst einen neuen Container einfügen, darin den Button. Dieser Container muss “sticky” sein, wenn du nur den Button auf “sticky” setzt, dann klappt es nicht.
Ich habe dies in der Anleitung noch einmal hervorgehoben.
lg Michael
Wer lesen kann, ist klar im Vorteil ;)
Vielen Dank. Funktioniert natürlich prima.
Danke! Mega Anleitung.
Ich brauche den Button für etwas anderes, auch dafür konnte ich deine Anleitung einwandfrei nutzen. Übrigns auch bei mir ging es erst nicht, dann hab ich die Kommentare gelesen: Container auf Sticky nicht Button, das kommt davon wenn man nur die Bilder schnell, schnell anschaut und nicht ließt…
:-)
Ich habe den Text nochmals angepasst.
Ich habe noch eine Frage, da der Button nun immer eingeblendet ist, überdeckt er manchmal Inhalte. Gibt es die Möglichkeit den Button nach ein paar Sekdungen wieder auszublenden und erst wenn man weiter scrollt wieder einzublenden?
Hallo Helga,
das geht meines Wissens nach nur mit eigener Programmierung. Das Menü auf meiner Website ist ähnlich umgesetzt, es wird wieder eingeblendet, sobald du nach oben scrolls. Das lässt sich sicherlich auch für den Button anpassen. Wäre ein spannendes “Projekt” für die Website Heroes.
lg Michael