So fügst du in WordPress einen „Zurück nach oben“-Button hinzu Β

Für Google-Rankings ist eine angenehme Nutzererfahrung einer der grundlegendsten Faktoren. Heute sehen wir uns an, wie du einen „Zurück nach oben“-Button hinzufügst, ein einfaches, aber wirkungsvolles Werkzeug, um die Nutzung deiner Website oder deines Blogs zu verbessern.

Warum einen „Zurück nach oben“-Button hinzufügen?

Hast du schon einmal einen langen Beitrag bis zum Ende gelesen und wolltest danach noch einmal eine Stelle weiter oben ansehen? Dann hast du wahrscheinlich schnell nach oben gescrollt. Das ist lästig und ineffizient, besonders bei langen Inhalten.

Genau dafür ist ein Zurück nach oben-Button hilfreich, etwa ein Pfeil nach oben unten rechts im Blog. Er verbessert die Nutzererfahrung deutlich, weil Leser mit einem Klick an den Seitenanfang zurückkehren können.

„Zurück nach oben“-Button im Kadence Theme erstellen

Mit dem Kadence Theme in WordPress lässt sich ein „Zurück nach oben“-Button über den Customizer sehr einfach hinzufügen.

Gehe dafür zu:
Design > Customizer > Allgemein > Scroll To Top

Im nächsten Bildschirm aktivierst du oben einfach die Option „Enable Scroll To Top“. Damit ist der Button eingeschaltet.

WPlaybook Profilbild - Isaac Lee — Aktivierungsbildschirm für den Zurück-nach-oben-Button

Geräte festlegen, auf denen der Button angezeigt wird

Standardmäßig ist der Zurück-Button auf PCs und Tablets sichtbar. Weiter unten in diesem Abschnitt findest du die Sichtbarkeitseinstellungen.

Sichtbarkeitseinstellungen für den Zurück-Button

Wenn der Button auch auf Mobilgeräten erscheinen soll, klicke auf das letzte Smartphone-Symbol und aktiviere es.

Erweiterte Einstellungen

Die meisten Nutzer können die Standardeinstellungen verwenden. Wenn du Verhalten und Aussehen des Buttons genauer anpassen möchtest, findest du unten weitere Optionen.

Klicke auf das Bild oben, um es größer zu sehen. Die wichtigsten Optionen sind:

Du kannst zwischen vier verschiedenen Formen für das Hochscroll-Icon wählen.
Du kannst die Größe des Buttons getrennt für PC, Tablet und Mobilgerät einstellen.
- Im zweiten Feld des Bildes klickst du von links nach rechts auf PC, Tablet und Mobilgerät, um jeweils die passende Größe festzulegen.
- Du kannst die Position des Buttons auf dem Bildschirm anpassen.
Du kannst den Abstand des Buttons vom Bildschirmrand steuern.
- Mit Side Offset legst du fest, wie weit der Button vom rechten oder linken Rand entfernt ist.
- Mit Bottom Offset legst du fest, wie weit er vom unteren Rand entfernt ist.

Hinweise

Wenn du AdSense-Ankeranzeigen verwendest, achte besonders auf die Position deines Zurück-nach-oben-Buttons. Überschneidungen können sowohl die Nutzererfahrung als auch die Anzeigenleistung verschlechtern.

Als Referenz findest du hier die Einstellungen, die aktuell auf WPlaybook verwendet werden:

PC-Umgebung: Icon Size 1.2em, Side Offset 30px, Bottom Offset 30px oder 150px, wenn Ankeranzeigen aktiv sind
Mobile Umgebung: Icon Size 0.7em, Side Offset 5px, Bottom Offset 30px

Fazit

Heute haben wir gesehen, wie du im Kadence WordPress Theme einen „Zurück nach oben“-Button hinzufügst und anpasst.
Wenn du weitere Möglichkeiten zur Anpassung deiner WordPress-Website kennenlernen möchtest, lies auch unseren Beitrag WordPress-Customization Collection mit weiteren Tipps und Tutorials.