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

Veröffentlicht: 2022-09-14

Das Hinzufügen einer Zurück-nach-oben-Schaltfläche zu Ihrer WordPress-Website kann eine großartige Möglichkeit sein, die Benutzererfahrung auf Ihrer Website zu verbessern. Mit dieser Schaltfläche können Besucher schnell zum Anfang der Seite zurückscrollen, ohne die Bildlaufleiste oder die Zurück-Schaltfläche des Browsers verwenden zu müssen. Es gibt verschiedene Möglichkeiten, wie Sie Ihrer WordPress-Site einen Zurück-nach-oben-Button hinzufügen können. Sie können ein WordPress-Plugin verwenden oder den Code selbst hinzufügen. Wenn Sie die Schaltfläche selbst hinzufügen möchten, müssen Sie den folgenden Code zur Datei functions.php Ihres WordPress-Themes hinzufügen: function my_back_to_top_button() { echo '↑'; } add_action( 'wp_footer', 'my_back_to_top_button' ); Dieser Code fügt Ihrer WordPress-Site einen einfachen Zurück-nach-oben-Button hinzu. Wenn Sie die Schaltfläche formatieren möchten, können Sie der style.css-Datei Ihres Designs das folgende CSS hinzufügen: #back-to-top { position: fixed; unten: 20px; rechts: 20px; Anzeige: keine; Textdekoration: keine; Hintergrund: #333; Farbe: #fff; Polsterung: 10px; -Webkit-Randradius: 3px; -moz-Randradius: 3px; Randradius: 3px; } #zurück nach oben:hover { Hintergrund: #222; } Wenn Sie ein WordPress-Plugin verwenden, um eine Zurück-nach-oben-Schaltfläche hinzuzufügen, müssen Sie den Anweisungen des Plugin-Autors folgen.

Wenn Ihr Inhalt lang ist, möchten Sie vielleicht einen „Zurück zum Anfang“-Button einfügen. Drücken Sie einfach die Pfeiltaste auf der rechten Seite der Seite, um nach oben zu scrollen. Die meisten der beliebtesten WordPress-Themes enthalten einen Front-to-Top-Button. Der WPFront Scroll Top ist eine hervorragende Möglichkeit, Ihrer WordPress-Site einen Back-to-Top-Button hinzuzufügen. Sie haben Zugriff auf eine Vielzahl von Anpassungsoptionen im Plugin, sodass Sie tun können, was Sie wollen. Wenn Sie eine Schaltfläche automatisch ausblenden möchten, aktivieren Sie die Schaltfläche „Automatisch ausblenden“ und stellen Sie dann den Timer ein. Darüber hinaus können Sie damit bestimmte Seiten ausschließen, also wählen Sie, welche Option für Sie am besten geeignet ist.

Schaltfläche "Zurück nach oben" WordPress ohne Plugin

Bildnachweis: themeskills.com

Es gibt einige Möglichkeiten, einen „Zurück nach oben“-Button für deine WordPress-Seite zu erstellen, ohne ein Plugin zu verwenden. Eine Möglichkeit besteht darin, einfach einen Link in Ihren Inhalten zu erstellen, der auf den Anfang der Seite verweist. Sie könnten beispielsweise am Ende jedes Beitrags einen Link mit der Aufschrift „Zurück zum Anfang“ hinzufügen.
Eine andere Möglichkeit, eine Schaltfläche „Zurück nach oben“ zu erstellen, besteht darin, ein bisschen Code zu verwenden. Sie können den folgenden Code zur Datei functions.php Ihres WordPress-Themes hinzufügen:
Funktion my_back_to_top_button() {
Echo 'Zurück zum Anfang';
}
add_action( 'wp_footer', 'my_back_to_top_button' );
Dieser Code fügt einen Link zur Fußzeile Ihrer Website hinzu, der den Benutzer, wenn er angeklickt wird, zurück zum Anfang der Seite bringt.

Die Benutzererfahrung wird bei der Gestaltung von Websites häufig übersehen. Viele Websites haben eine kleine Schaltfläche , mit der Sie zum Anfang zurückkehren können. Der Vorteil dieser Funktion besteht darin, dass Benutzer nach dem Anzeigen von Inhaltsseiten schnell zum Anfang der Seite zurückkehren können. Es ist einfach, die Schaltfläche einzurichten, aber Sie müssen die Themendateien bearbeiten, um dies zu tun. Wenn Sie keinen Ordner für Ihre js haben, können Sie einen erstellen, wenn Sie keinen Ordner für Ihre js haben. Sie können die Scrollgeschwindigkeit der Schaltfläche ändern, indem Sie die Zahl neben var speed = top speed eingeben. Eine höhere Zahl führt zu einem langsameren automatischen Scrollen.

Wenn Sie Ihrer Website kein Bild hinzufügen möchten und Text hinzufügen möchten, können Sie dies auch tun. Sie müssen den Stil ändern. Nachdem Sie das CSS-Stylesheet Ihres Designs geöffnet haben, können Sie den folgenden Code überall dort hinzufügen, wo Sie es für richtig halten, solange er sich nicht zwischen vorhandenen Tags und Code befindet. Nachdem Sie ein Plugin wie Simple Custom CSS installiert haben, können Sie den Code direkt in den bereitgestellten Bereich einfügen. Der Link zur Back-to-Top-Seite Ihrer Website muss direkt zur Seite hinzugefügt werden. Sie können auch vermeiden, die Dateien Ihres Designs zu bearbeiten, wenn Sie dies nicht möchten. Wenn Sie auf Zurück nach oben scrollen klicken, wird Ihrer Website eine Zurück-nach-oben-Schaltfläche hinzugefügt, sodass keine Codierung erforderlich ist. Das Admin-Dashboard ermöglicht es Ihnen, die Größe, Farbe, Position und andere Optionen einer Schaltfläche zu ändern.

Schaltfläche "Zurück nach oben" WordPress Elementor

Bildnachweis: YouTube

Die Zurück-nach-oben-Schaltfläche in WordPress Elementor ist eine großartige Möglichkeit, schnell zum Anfang einer Seite zurückzukehren. Diese Schaltfläche kann an das Design Ihrer Website angepasst und an beliebiger Stelle auf einer Seite platziert werden.

Da die Schaltfläche beim Lesen wieder an den Anfang der Seite gedrückt wird, wissen einige Benutzer dies zu schätzen. Elementor macht es einfach, die Schaltfläche "Zurück nach oben" hinzuzufügen. Schaltflächen-Widget (oder jedes Widget, das die Option hat, einen Link wie Text, Symbol oder sogar Bild hinzuzufügen) sollte hinzugefügt werden. Der Zurück-nach-oben-Button auf Ihrer Website ist eine einfache, aber nützliche Funktion. Wenn das Schaltflächen-Widget ausgewählt ist, gehen Sie zur Registerkarte „Erweitert“ im linken Seitenbereich und suchen Sie nach der Option „Positionierung“. Indem Sie Ihre Schaltfläche an eine beliebige Stelle ziehen, können Sie die Position Ihrer Schaltfläche ganz einfach festlegen.

Zurück nach oben Schaltfläche Codepen

Eine „Zurück zum Anfang“-Schaltfläche ist eine häufige Funktion auf langen Webseiten, die es dem Benutzer ermöglicht, mit einem einzigen Klick zum Anfang der Seite zurück zu scrollen. Viele Websites verwenden eine feste „Zurück nach oben“-Schaltfläche, die immer auf dem Bildschirm sichtbar ist, während andere eine schwebende „Zurück nach oben“-Schaltfläche verwenden, die nur angezeigt wird, wenn der Benutzer auf der Seite nach unten scrollt.
Es gibt viele Möglichkeiten, einen „Zurück nach oben“-Button zu programmieren, aber eine der einfachsten und effektivsten ist die Verwendung eines „Scroll to top“-Plugins. Es gibt viele verschiedene Scroll-to-Top-Plugins, aber eines der beliebtesten ist das „Scroll to Top“-Plugin von WPBeginner.
Nachdem Sie das Plugin installiert und aktiviert haben, gehen Sie einfach auf die Seite Einstellungen » Nach oben scrollen, um das Plugin zu konfigurieren. Auf dieser Seite können Sie die Position der Schaltfläche, die Bildlaufgeschwindigkeit und die Farbe der Schaltfläche auswählen. Sie können die Schaltfläche auch auf der Startseite, auf allen Seiten oder auf bestimmten Seiten anzeigen.
Nachdem Sie das Plugin konfiguriert haben, klicken Sie einfach auf die Schaltfläche „Änderungen speichern“, um Ihre Änderungen zu speichern. Ihre „Zurück nach oben“-Schaltfläche erscheint nun auf Ihrer Website und ist voll funktionsfähig.

Entfernen Sie die Scroll-to-Top-Schaltfläche WordPress

Die folgenden Schritte führen Sie durch den Prozess zum Deaktivieren der Schaltfläche „Nach oben scrollen“ auf Ihrem WordPress-Dashboard: Um die Schaltfläche „Nach oben scrollen“ zu deaktivieren, gehen Sie zu Darstellung. Um die Schaltfläche „Nach oben scrollen“ zu deaktivieren, markieren Sie „Häkchen“ als Häkchen. Sie können Ihre Arbeit veröffentlichen, indem Sie auf die Schaltfläche „Veröffentlichen“ klicken.

Wie lösche ich eine Schaltfläche in WordPress?

Wenn Sie diese Abschnitte löschen möchten, müssen Sie zuerst den Customizer auf Ihrer Website starten. Wählen Sie die Option „Designs“ und klicken Sie dann auf die Schaltfläche „Anpassen “ neben „Meine Websites“. Durch Klicken auf Themenoptionen -> Homepage-Vorlage können Sie auf die Vorlage zugreifen. Löschen Sie nur das letzte Zeichen des ersten Kästchens – das ist das einzige, das gelöscht werden muss.

Wie platziere ich das Scroll-Back-Up-Button-Elementor?

Sie können nach oben zurückkehren, indem Sie eine Elementor-Seite öffnen oder auf einer Elementor-Seite posten und dann auf die Schaltfläche „Zurück nach oben scrollen“ klicken. Durch Klicken auf das Zahnrad- oder Einstellungssymbol auf der linken Seite des „Elementor-Bedienfelds“ können Sie auf den Abschnitt „Seiteneinstellungen“ zugreifen. Scrollen Sie einfach nach unten, um die Option „EA Scroll To Top“ zu finden, und schalten Sie sie dann ein.

Wie verhindere ich, dass WordPress scrollt?

Sie können Infinite Scroll deaktivieren, indem Sie die Option „Infinite Scroll“ unter „Meine Website“ > „Einstellungen Schreiben“ > „Scrollen“ auswählen. Wenn Sie außerdem ein Fußzeilen-Widget hinzufügen, können Sie die Option „Infinite Scroll“ nicht verwenden.

Wie springe ich in WordPress zum Anfang der Seite?

Wenn ein Benutzer auf einer Seite Ihrer Website nach unten scrollt, wird die Schaltfläche „Nach oben scrollen“ in der unteren rechten Ecke angezeigt. Wenn ein Besucher eine Seite nach unten scrollt, erscheint ein Menü. Anders ausgedrückt: Wenn Ihre Website-Besucher auf die Ein-Klick- Schaltfläche klicken , können sie innerhalb von Sekunden zum Anfang der Seite zurückkehren.

WordPress-Zurück-Button zur vorherigen Seite

Wenn Sie beabsichtigen, eine WordPress-Seite mit einem Seitenübergang anzuzeigen, wenn auf einen Link geklickt wird, fügen Sie dem Link eine Klasse namens „pushing-page“ hinzu. Als Ergebnis wird die Seite aufgefordert, die URL einzugeben. Die Klasse ermöglicht es Ihnen, einen Stapel von Schaltflächen von einem Link zu entfernen, indem Sie die Zurück-Schaltflächen in Ruhe lassen. Eine Stammseite ist das Stammverzeichnis der Website.

Es ist nicht erforderlich, die Zurück-Schaltfläche auf einer Seite zu verwenden. Ein Benutzer kann auswählen, wo ein Link geöffnet werden soll, und Sie müssen ihn nicht für ihn verwalten. Ich habe die Kartenseite nicht erstellt, und die Person, die dies getan hat, sagte, dass es nicht möglich sei, mit der einfachen Zurück-Browser-Schaltfläche dorthin zurückzukehren, wo Sie aufgehört haben. Wenn Sie zur Karte navigieren, wird die Seite vollständig in WordPress erstellt und ist nur sichtbar, wenn Sie über WordPress zur Website navigieren. Daher könnte es eine gute Idee sein, die Seite als Popup mit einem CLOSE- oder X-Button zu öffnen. Da dies eine WPBakery Page Builder-Schaltfläche ist, die über den Javascript-Code erstellt wurde, gebe ich sie in das URL-Feld ein.