So fügen Sie in WordPress einen Zurück-nach-oben-Button hinzu

Sie sind sich nicht sicher, wie Sie in WordPress einen „Nach oben“-Button hinzufügen? Leider enthalten die meisten WordPress-Themes diesen Button nicht von Haus aus. Es gibt jedoch einige Methoden, mit denen Sie den Button auf Ihrer Website einrichten können.

Der Aufwand lohnt sich auch. Wenn Ihre Website lange Seiten enthält, auf denen Nutzer weit von Ihrem Navigationsmenü oder Ihrer Handlungsaufforderung wegscrollen, kann der Button Nutzern dabei helfen, mit minimalem Aufwand zum Hauptfokus der Seite zurückzukehren. 

Zu den gängigsten Methoden, einen „Nach oben“-Button in WordPress hinzuzufügen, gehören die Verwendung eines Plug-ins, das Einfügen von benutzerdefiniertem Code oder das Einbetten eines No-Code-Widgets. Plug-ins und eingebettete Widgets erfordern keinerlei Programmierkenntnisse und sind daher die bevorzugten Methoden, wenn Sie mit HTML, CSS oder JavaScript nicht vertraut sind. Benutzerdefinierter Code gibt Ihnen die volle Kontrolle über Ihren Button, ist aber keine optimale Lösung für Einsteiger.

In diesem Leitfaden zeigen wir Ihnen, wie Sie mit diesen Methoden einen „Nach oben“-Button in WordPress hinzufügen, und gehen auf die Vor- und Nachteile der einzelnen Methoden ein. 

Einen „Nach oben“-Button mit einem WordPress-Plug-in hinzufügen

WordPress bietet eine Vielzahl von Plug-ins, um die Funktionalität Ihrer Website zu erweitern. In seinem Verzeichnis finden Sie „Nach oben“-Plug-ins von verschiedenen Entwicklern – dies ist die gängigste Methode, um den Button hinzuzufügen. 

Verfügbare Optionen in einem „Nach oben“-WordPress-Plug-in

Viele dieser Plug-ins bieten Anpassungsoptionen, mit denen Sie die Platzierung des Buttons und sein Design festlegen können. Wenn Sie nach dem richtigen „Nach oben“-Button-Plug-in für Ihre Website suchen, sollten Sie entscheiden, welche Einstellungen Ihnen am wichtigsten sind. Einige zu berücksichtigende Punkte sind

• Button-Position: Dies legt fest, wo der Button auf Ihrer Seite erscheint. Plug-ins bieten Ihnen möglicherweise Optionen, den Button rechts, links oder zentriert zu platzieren. Einige bieten eine genauere Kontrolle.
• Symbol oder Beschriftung: Plug-ins bieten möglicherweise ein einzelnes Symbol oder ein Menü mit Optionen zur Auswahl. Einige ermöglichen Ihnen auch, die Symbolfarbe anzupassen.
• Sichtbarkeit auf Mobilgeräten oder Desktops: Buttons werden auf PCs und Mobilgeräten möglicherweise unterschiedlich angezeigt. Überprüfen Sie die Sichtbarkeitsoptionen des Plug-ins, um zu verstehen, wie sie erscheinen werden.
• Sanftes Scrollen: Einige Buttons bieten Scroll-Optionen, anstatt sofort an den Seitenanfang zu springen. Dies ist hilfreich, wenn Sie Nutzern mehr Kontrolle über die Seitennavigation geben möchten.
• Scroll-Offset oder Schwellenwert: Diese Einstellung legt fest, wie viel Abstand zwischen den Elementen am oberen Rand der Seite und der Scroll-Position bereitgestellt wird. Im Idealfall verdeckt das Klicken auf den „Nach oben“-Button keine Inhalte aus Menüs oder Headern.

Einige Plug-ins bieten mehr Anpassungsmöglichkeiten als andere. Auch wenn Sie möglicherweise keinen „Nach oben“-Button mit vielen Gestaltungsoptionen benötigen, sollte der von Ihnen gewählte Button nicht fehl am Platz auf Ihrer Website wirken. Er sollte sich nahtlos in die anderen Elemente der Seite einfügen.

So fügen Sie einen „Nach oben“-Button in WordPress hinzu

Sobald Sie ein Plug-in ausgewählt haben, das Ihren Anforderungen entspricht, installieren Sie es mit diesen Schritten:

1. Melden Sie sich im Administrator-Dashboard Ihrer Website an.
2. Klicken Sie auf Plugins.
3. Suchen Sie das Plug-in im WordPress-Plugin-Verzeichnis. Sie können das Suchfeld verwenden, um seinen Namen einzugeben.
4. Klicken Sie auf das Plug-in.
5. Klicken Sie auf Installieren und aktivieren. (Wenn Sie ein kostenpflichtiges Plug-in installieren, klicken Sie auf Kaufen und aktivieren.)

Nachdem Sie das Programm installiert haben, besuchen Sie das Menü Einstellungen, um das Erscheinungsbild und das Scroll-Verhalten des „Nach oben“-Buttons zu konfigurieren.

Beliebte WordPress-„Nach oben“-Plug-ins

Es gibt Hunderte von Plug-ins, die einen „Nach oben“-Button in WordPress hinzufügen. Einige Optionen sind

• WPFront Scroll Top: Dieses Plug-in bietet Dutzende vorgestylter „Nach oben“-Buttons zur Auswahl. Außerdem können Sie damit die Größe, Platzierung und das Scroll-Verhalten des Buttons festlegen.

• Smooth Scroll Page Up/Down Buttons: Wenn die Seiten Ihrer Website umfangreiche Dokumente enthalten, kann dieses Plug-in hilfreich sein. Es bietet eine WordPress-Funktion zum sanften Scrollen nach oben, mit der Nutzer zwischen einzelnen Textdokumenten oder zum Seitenanfang scrollen können.

• Nicescrollr: Mit diesem Plug-in können Sie einen „Nach oben“-Button hinzufügen und mehrere Einstellungen verwalten, darunter Button-Größe und Scroll-Geschwindigkeit.

Plug-ins sind zwar einfach zu installieren, fügen jedoch eine neue Abhängigkeit hinzu, die Sie pflegen müssen. Es ist wichtig, alle Updates für das Plug-in im Blick zu behalten, da sie Sicherheitspatches enthalten können.  

Einen „Nach oben“-Button in WordPress mit benutzerdefiniertem Code hinzufügen

Ein benutzerdefinierter „Nach oben“-Button in WordPress gibt Ihnen die volle Kontrolle über sein Erscheinungsbild und Verhalten. Sie sind nicht an die Einstellungsoptionen eines Plug-ins gebunden und können den Button so anpassen, dass er perfekt zu Ihren Anforderungen passt. Es ist eine solide Alternative für alle, die ein maßgeschneidertes Design wünschen oder die durch Plug-ins verursachte Seitenaufblähung vermeiden möchten.

Das Erstellen eines eigenen Buttons erfordert jedoch Fachwissen. Sie sollten mit dem Bearbeiten von WordPress-Themes vertraut sein und Erfahrung mit benutzerdefiniertem HTML, CSS oder JavaScript haben. 

Um Ihren eigenen Button zu entwickeln, fügen Sie Ihren Code zu einem benutzerdefinierten HTML-Block, einem Theme-Anpassungsbereich oder einem Code-Snippet-Workflow hinzu. Sobald er in Ihre Website integriert ist, testen Sie den neuen Button sorgfältig, um sicherzustellen, dass er keine Fehler verursacht.

Vor- und Nachteile eines benutzerdefinierten Buttons

Ein maßgeschneiderter „Nach oben“-Button bietet viel Flexibilität. Sie können das Symbol und die Farbe so anpassen, dass sie sich natürlich in Ihre Website einfügen, und Sie können seine Sichtbarkeit anpassen. Zum Beispiel können Sie den Button so gestalten, dass er nur erscheint, wenn ein Nutzer einen bestimmten Punkt auf der Seite erreicht. Oder Sie können einen schwebenden „Nach oben“-Button in WordPress hinzufügen, der sichtbar bleibt, während ein Nutzer scrollt.

Die Hauptnachteile beim Erstellen eines benutzerdefinierten Buttons sind die technische Einrichtung und das Testen. Es braucht Zeit, Code zu schreiben, der zu Ihrer Website passt und ihr WordPress-Theme nicht beeinträchtigt. 

Auch das Testen ist entscheidend für die Entwicklung eines benutzerdefinierten Buttons. Planen Sie ein, die Leistung des Buttons auf mehreren Geräten zu testen, darunter PCs, Tablets und Smartphones. Es ist auch eine gute Idee, den Button auf mehreren Plattformen auszuprobieren, wie iOS, Windows und Android.

Einfachere No-Code-Methode: Verwenden Sie das Back to Top Widget von Jotform

Es gibt eine Alternative zu Plug-ins und benutzerdefinierten Buttons: das Back to Top Widget von Jotform. Es ist eine No-Code-Lösung, die Sie innerhalb weniger Minuten zu Ihrer Website hinzufügen können.

Anders als Plug-ins verursacht unser Back to Top Widget keine Seitenaufblähung und erfordert keine regelmäßigen Updates. Es ist absolut keine Programmierung erforderlich, und es beeinträchtigt die Funktionalität Ihres WordPress-Themes nicht. 

Das Jotform Back to Top Widget ist außerdem vollständig anpassbar. Sie können den Symbolstil, die Farben, die Größe und den Eckenradius anpassen. Es gibt Optionen, um die Platzierung und Sichtbarkeit des Buttons beim Scrollen zu ändern. Und es funktioniert auf allen Geräten, einschließlich Mobilbildschirmen.

So installieren Sie das Jotform Back to Top Widget

Die Integration des Widgets in Ihre Website ist einfach. Navigieren Sie zunächst zu unserer Back to Top Widget-Seite und folgen Sie dann diesen Schritten:

1. Geben Sie Ihrem Widget einen Namen, indem Sie das Feld „Untitled“ in der Symbolleiste bearbeiten.
2. Geben Sie Ihre bevorzugten Positions- und Scroll-Einstellungen ein und klicken Sie dann auf Fortfahren.

• Button-Position: Wählen Sie Links oder Rechts.
• Beschriftung anzeigen: Umschalten, um zu aktivieren oder zu deaktivieren. Geben Sie einen beliebigen Text ein, den der Button anzeigen soll.
• Nach dem Scrollen anzeigen: Verwenden Sie den Schieberegler, um anzugeben, wie viele Pixel der Nutzer scrollen soll, bevor der Button erscheint.
• Scroll-Animation: Wählen Sie Sanft oder Sofort.

3. Geben Sie Ihre Stilpräferenzen für den Button ein und klicken Sie auf Fortfahren.

• Button-Größe: Verwenden Sie den Schieberegler, um die Breite und Höhe des Buttons festzulegen.
• Symbolgröße: Verwenden Sie den Schieberegler, um die Größe des Pfeilsymbols festzulegen.
• Symbol: Wählen Sie einen Pfeilsymbolstil für den Button (Pfeil nach oben, Chevron nach oben oder Fetter Pfeil nach oben).
• Eckenradius: Wählen Sie Eckige Ecken, Abgerundete Ecken oder Runde Ecken.
• Button-Farben: Geben Sie Ihren bevorzugten Hex-Farbcode für die Hintergrund- und Textfarbe ein.
• Schlagschatten: Umschalten, um einen weichen Schatten unter dem Button zu deaktivieren oder zu aktivieren.

4. Richten Sie die Anzeigeregeln ein und klicken Sie auf Kostenlos auf Ihrer Website ausprobieren.

• Abstand vom unteren Rand: Verwenden Sie den Schieberegler, um festzulegen, wie weit der Button vom unteren Rand entfernt ist.
• Abstand vom seitlichen Rand: Verwenden Sie den Schieberegler, um zu steuern, wie weit der Button vom seitlichen Rand entfernt ist.
• Auf Desktop anzeigen: Aktivieren oder deaktivieren.
• Auf Mobilgeräten anzeigen: Aktivieren oder deaktivieren.

5. Kopieren Sie den Einbettungscode und fügen Sie ihn in Ihren WordPress-HTML-Editor ein.

Während Sie den Button anpassen, können Sie auf das PC- oder Smartphone-Symbol in der unteren rechten Ecke klicken, um zu sehen, wie er erscheinen wird.

Vorteile der Nutzung von Jotform-Tools auf Ihrer WordPress-Website

Egal, ob Sie ein erfahrener Webdesigner sind oder gerade erst lernen, wie man WordPress verwendet, Jotform bietet zahlreiche praktische Tools, die Ihre Website unterstützen.

Wir bieten mehrere kostenlose Website-Widgets, die Sie anpassen können, um die Bewertungen Ihrer Organisation von Drittanbieter-Websites anzuzeigen, darunter Google, Facebook und Tripadvisor – perfekt für Website-Besitzer, die Kundenstimmen präsentieren möchten, aber zögern, sich auf die über WordPress verfügbaren kostenpflichtigen Plug-in-Tools festzulegen.

Sie können auch Jotforms benutzerdefiniertes WordPress-Formular-Einbettungs-Plug-in nutzen. Damit können Sie Formulareinsendungen von Nutzern sammeln, die Ihre Website besuchen. Wir bieten über 20.000 kostenlose benutzerdefinierte WordPress-Formularvorlagen, die gängige Anwendungsfälle abdecken, darunter Kontaktinformationen, Zahlungsinformationen und Bewerbungseinsendungen. Sie können Ihr Formular in WordPress einbetten – mit nur wenigen Schritten.

Das Beste daran: Jotform bietet einen kostenlosen Tarif, der unbegrenzte WordPress-Widgets und bis zu fünf Formulare unterstützt. Ein Upgrade auf einen kostenpflichtigen Tarif erhöht die Anzahl der Formulare, die Sie nutzen können, entfernt das Jotform-Branding und bietet zusätzlichen Speicherplatz.

Fügen Sie einen „Nach oben“-Button hinzu, ohne Ihren WordPress-Workflow zu verlangsamen

Ein „Nach oben“-Button verbessert das Nutzererlebnis beim Scrollen durch umfangreiche Inhalte. Er unterstützt außerdem das Engagement und die Conversions auf E-Commerce-Seiten und Landingpages. Doch während das Hinzufügen eines Buttons mit Plug-ins oder benutzerdefiniertem Code möglich ist, ist die einfachste No-Code-Lösung das Widget von Jotform.

Um zu sehen, wie das Back to Top Widget von Jotform einen eleganten „Nach oben“-Button zu Ihrer WordPress-Website hinzufügt, probieren Sie es noch heute aus.