Zurück zum Seitenanfang – mit Elementor

Wie du einen “Back to Top”-Button erstellst

Button "Zurück zum Seitenanfang" mit Elementor erstellen

Lerne Schritt für Schritt, wie du einen am Seitenrand mitlaufenden Button erstellst, der den Besucher wieder nach oben zum Anfang der Seite bringt …

So sieht das Ganze dann aus:

Animation mit Button "Zurück zum Seitenanfang" - mit Elementor Pro umgesetzt.

Inhalt

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:

Bearbeite die Kopfzeile deiner Website
Bearbeite die Kopfzeile deiner Website

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:

Die CSS ID eines Abschnitts
Die CSS ID eines Abschnitts

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:

Verlinke das Bild zur CSS-ID #top
Verlinke das Bild zur CSS-ID #top
Angebote schreiben in 10 Minuten - mit der ultimativen Angebotsvorlage für Web-Designer, Webprogrammierer und Online-Marketer

Wasserdichte Angebote schreiben in nur 10 Minuten?

Hol dir die ultimative Angebotsvorlage für Webdesigner, Web-Programmierer und Online-Marketer.

Lerne 7 Tricks, wie andere Webdesigner arbeiten und wirklich Geld verdienen

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?

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.

Sticky-Einstellungen für den Abschnitt
Sticky-Einstellungen für den Abschnitt bzw. Container

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.

Eigener CSS-Code für den Abschnitt
Eigener CSS-Code für den Abschnitt bzw. Container

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,

Über den Autor

Michael
Hi, ich bin Michael Baierl und bin WordPress-Profi aus Wien. Ich arbeite mit Web-Designern, die vor der Herausforderung stehen, an die richtigen Kunden zu kommen. In meiner WordPress-Community – den Website Heroes – finden Web-Designer alles, um großartige Websites für ihre Kunden zu erstellen und finanziell erfolgreich zu sein: regelmäßige Weiterbildung, Austausch, Feedback, schnelle Problemlösung und Co-Working.

8 Antworten

  1. 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

  2. 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?

    1. 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

  3. 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…

    1. 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

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Projektanfrage

Wobei kann ich dich unterstützen?