Michael Baierl – WordPress-Profi aus Wien.

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 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 Abschnitt mit dem Button hinzu

Erstelle einen neuen Abschnitt im Header (Spaltenabstand: keiner) und füge ein Bild-Element hinzu.

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

7 Bausteine für dein Online-Business

Du träumst von deinem eigenen Online-Business, weißt aber nicht genau, wie du starten sollst? 

Hole dir gleich meinen Report über die
7 Bausteine für dein Online-Business –
für Newsletter-Abonnenten kostenlos.
Also jetzt anmelden!

Die Abmeldung vom Newsletter ist jederzeit möglich. Details in der Datenschutzerklärung.

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 aus und wähle das Tab “Erweitert” aus.

Sticky-Einstellungen für den Abschnitt
Sticky-Einstellungen für den Abschnitt

Unter “Bewegungseffekte” wähle “oben” bei Sticky, der Wert für “Auslassen” beträgt 0, und der Offset 500. Damit bleibt der Abschnitt, 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

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,

Schreibe einen Kommentar

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

Projektanfrage

Wobei kann ich dich unterstützen?