Der Scroll to Top Button gehört zur den beliebten Elementen auf einer modernen Website. Zusätzlich erhöht er die Usability, da die Besucher durch einen Klick schnell wieder an den Seitenanfang gelangen, ohne lange nach oben scrollen zu müssen. In diesem Beitrag erfährst du, wie du den Back to Top Button einfach in der kostenlosen und der Pro Version von Elementor implementieren kannst.
Scroll to Top in den Theme Optionen
Bevor du anfängst den Scroll to Top Button in Elementor zu integrieren, solltest du einen Blick auf die Einstellungen deines Themes werfen. Bei den meisten modernen Themes befinden sich die Einstellungsoptionen im Customizer. Die Themes Kadence und OceanWP bieten z. B. die Scroll to Top Funktion bereits in der kostenlosen Version an. Bei den ebenso beliebten WordPress Themes Astra und Neve kann die Back to Top Funktionalität über den integrierten Footer Builder realisiert werden, wenn auch nicht so elegant wie mit OceanWP und Kadence.
Scroll to Top bei Kadence und OceanWP im Video ansehen:
Link zum Video Tutorial Scroll to Top bei Kadence und OceanWP
WPC Tipp: Bitte kein Plugin für Scroll to Top verwenden
Als WordPress User tendiert man schnell dazu für jede noch so kleine Funktion ein Plugin zu verwenden. Je mehr Plugins auf deiner WordPress Seite installiert sind, desto höher ist der Wartungsaufwand und das Sicherheitsrisiko. Hier auf dem Blog findest du einen Beitrag, wie du 20 Plugins durch Elementor ersetzen kannst. Mit Scroll to Top sind es jetzt schon 21 :-).
Back to Top in Elementor umsetzen
Am einfachsten ist es sicherlich, wenn du ein Elementor Pro* User bist. Dann musst du lediglich das Scroll to Top Icon (nicht Button :-)) in den Elementor Footer integrieren und die Fußzeile für die gesamte Website aktivieren. Wenn du nur die kostenlose Version von Elementor verwendest, kannst du das Icon auch zu deinem letzten Abschnitt hinzufügen und diesen dann per Copy und Paste oder über Seiten-Templates auf allen Unterseiten kopieren. Das funktioniert jedoch nur, wenn du alle Unterseiten mit Elementor erstellst.
Du kannst jedoch auch ohne die Pro Version das Back to Top Icon in deinem Footer integrieren. Dafür stehen dir kostenlose Elementor Addons zur Verfügung wie z. B. der Elementor Header & Footer Builder von Brainstorm Force oder andere Premium Addons wie Astra Pro*, ElementsKit Pro* oder JetThemeCore* von Crocoblock.
Link zum Video Tutorial Scroll To Top in Elementor Free
Doch welches Elementor Widget solltest du nun für die „Nach oben“-Funktion verwenden? Das Widget Icon oder das Widget Button?
Tipps zur Umsetzung eines Scroll to Top Buttons
Unabhängig davon, ob du die kostenlose oder die Pro Version von Elementor verwendest, um einen Scroll to Top Button zu integrieren, habe ich die folgenden Empfehlungen für dich:
Icon Widget anstatt Button Widget verwenden
Um den nach oben Button zu realisieren, kannst du theoretisch entweder das Button Widget (ohne Text) oder das Icon Widget verwenden. Warum es besser ist, das Icon Widget zu nehmen, zeigen die folgenden zwei Screenshots:
HTML-Struktur des Icon Widgets:
HTML-Struktur des Button Widgets:
Der Screenshot-Vergleich zeigt eine flachere HTML-Struktur für das Icon Widget (5 zu 7 HTML-Elemente). Gerade wenn man keinen Text verwenden möchte, ist das Icon Widget die bessere Wahl für ein Scroll to Top „Button“.
Das gilt übrigens nicht nur für den Scroll to Top Button. Immer wenn du ein Icon verwenden möchtest und du keinen Text benötigst, solltest du im Sinne einer schlankeren DOM Struktur lieber ein Icon Widget verwenden.
DOM Struktur Vergleich zwischen Icon und Button im Video ansehen:
Link zum Video Tutorial Icon vs. Button
Das Menu Anchor Widget lieber NICHT verwenden
Viele Elementor User nutzen das Menu Anchor Widget um von einem Bereich zu einem anderen Bereich auf der gleichen Seite zu verlinken. Damit lassen sich nicht nur Back to Top Buttons verknüpfen, sondern auch ein klassisches One Pager Menü, indem man zu den unterschiedlichen Abschnitten auf der Seite verlinkt.
Der folgende Screenshot zeigt jedoch eine unnötig aufgeblähte DOM Struktur bei der Verwendung von Menu Anchor Widgets:
Wie du dem oberen Screenshot entnehmen kannst, fügt ein einziges Menu Anchor Widget, da es oft in einem eigenen Abschnitt verwendet wird, 9 HTML Ebenen! zu deiner DOM Struktur hinzu. Besser wäre es dem Abschnitt, zu dem du verlinken möchtest, unter Advanced > CSS ID eine ID zu geben und direkt darauf zu verlinken.
Menu Anchor Widget im Video ansehen:
Link zum Video Tutorial Menu Anchor
Fazit
Wie so oft in Elementor führen mehrere Wege zu einem funktionierenden Scroll to Top Button. Wie du aber sehen konntest gibt es selbst bei so einer kleinen Funktion einiges zu beachten. Gerade wenn es mehrere Möglichkeiten gibt, ist es wichtig zu hinterfragen, welche aus verschiedenen Gesichtspunkten (Design, Performance etc.) die beste Methode ist. Für mich ist es die Integration in dem Footer, welcher auf der ganzen Website aktiviert ist. Dabei spielt es keine Rolle, ob die Implementierung über das Theme, Elementor Pro oder ein kostenloses Elementor Addon erfolgt.
2 Antworten
Gibt kein Scroll-to-Top in Elementor Pro…
Hallo Tom,
es gibt kein Scroll to Top Widget in Elementor Pro – ja, das ist richtig. Aber das wurde auch nicht behauptet. Am einfachsten gehts, wenn man das Icon Widget von Elementor verwendet. Die Pro Version kommt nur durch die Verwendung des Footers zum Einsatz.
Viele Grüße, Danijel