OpenByt - Ihre ultimative Quelle für kostenloses WordPress-Wissen

Wie man in Elementor ohne Plugins eine Schaltfläche "Nach oben scrollen" erstellt und anwendet

tomsqum

A "Nach oben scrollenDie Schaltfläche "Zurück" ist eine hervorragende Ergänzung für jede lange Seite. Sie bietet den Benutzern eine schnelle Möglichkeit, zum Anfang zurückzukehren und macht die Navigation zugänglicher und benutzerfreundlicher. In dieser Anleitung erfahren Sie, wie Sie eine Schaltfläche "Nach oben scrollen" in Elementor erstellen, keine Plugins erforderlichund wenden Sie es auf Ihre gesamte Website an, um ein einheitliches Erscheinungsbild zu gewährleisten.

Einrichten einer globalen Schaltflächenvorlage in Elementor

Beginnen Sie mit der Erstellung einer neuen Vorlage:

  1. Gehen Sie im WordPress-Dashboard zu "Vorlagen" > "Neu hinzufügen."
  1. Wählen Sie “Single Page” from the dropdown menu as the template type. Name it something like “Nach oben scrollen Schaltfläche“.
  1. Klicken Sie "Vorlage erstellen", um den Elementor-Editor zu öffnen.
  1. Verlassen Sie die Bibliothek: Click the “X” at the top-right corner to close the template library.

Hinzufügen und Anpassen der Schaltfläche:

  1. Ziehen Sie das "SchaltflächeWidget" aus der Seitenleiste in die Vorlage ein.
  1. Ändern Sie den Text der Schaltfläche in "Nach oben scrollen" oder verwenden Sie ein Pfeilsymbol nach oben.
  1. Gehen Sie zur Symbolgalerie und wählen Sie den Pfeil nach oben Ikone.
  1. Wählen Sie eine andere Taste Typ zum Löschen der Text.
  1. Gehen Sie zum "Stil" und stellen Sie die Hintergrundfarbe, die Schriftart und den Rahmenradius so ein, dass sie zum Stil Ihrer Website passen. Eine runde Schaltfläche mit einer kontrastierenden Farbe ist gut geeignet, um sie sichtbar zu halten.

Ändern des Schaltflächenstils

  1. Abgerundete Ecken verwenden
    • Gehen Sie zum Stil Registerkarte in Elementor.
    • Stellen Sie die Radius der Grenze auf 10%, um einen perfekt runden Knopf zu erstellen.
    • Ändern Sie die Polsterung Werte, um die Abstände innerhalb eines Elements anzupassen. Dies definiert den inneren Abstand zwischen dem Inhalt und dem element’s borders.
  1. Schatteneffekt hinzufügen
    • In der Box Schatten Einstellungen (normalerweise zu finden unter Stil > Umrandung), fügen Sie einen subtilen Schatten hinzu, um Tiefe zu erzeugen. Verwenden Sie Einstellungen wie:
    • Unschärfe: 10px
    • Abstand: 0px
    • Farbe: Wählen Sie ein helles Grau oder transparentes Schwarz, um einen weichen Schatten zu erzeugen.
  1. Wählen Sie ein kontrastreiches Farbschema
    • Use colors that contrast with your website’s background. For example, if your background is light, opt for a bold color like blue, orange, or green.
    • Achten Sie bei der Farbe des Symbols darauf, dass sie weiß oder eine andere Farbe ist, die sich von dem Hintergrund der Schaltfläche abhebt.
  1. Schwebeeffekt hinzufügen
    • In der Schweben Einstellungen unter dem Stil können Sie das:
      • Ändern Sie die Hintergrundfarbe beim Schweben auf einen helleren oder dunkleren Farbton der Schaltfläche.
      • Schwebe-Animation ermöglicht es Ihnen, die Geschwindigkeit von Animationen und Übergängen zu steuern.
  1. Hinzufügen einer Puls-Animation (optional)
    • In der Fortgeschrittene Registerkarte, gehen Sie zu Benutzerdefiniertes CSS (erhältlich in Elementor Pro) und fügen Sie eine Puls-Animation hinzu:
    • Ersetzen Sie 1TP5IhreButtonID mit der ID Ihrer Schaltfläche. Dadurch wird die Schaltfläche dezent vergrößert und verkleinert, was die Aufmerksamkeit auf sie lenkt.
@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } #yourButtonID { animation: pulse 2s unendlich; }

Dieser Code fügt eine pulsierender Animationseffekt auf eine bestimmte Schaltfläche. Die Schaltfläche vergrößert sich sanft und kehrt dann innerhalb von 2 Sekunden in ihre ursprüngliche Größe zurück, was sich kontinuierlich wiederholt. Dieser Effekt lenkt die Aufmerksamkeit auf die Schaltfläche und macht sie für den Benutzer besser sichtbar.

https://www.openbyt.com/wp-content/uploads/2024/10/Action-2024-10-18-14-19-07.mp4

Fixieren Sie den Knopf:

  1. In der "FortgeschritteneRegisterkarte ", unter "Positionierung," wählen "Fixiert."
  1. Platzieren Sie die Schaltfläche in der rechten unteren Ecke mit einem 20px Rand von beiden Seiten, damit es beim Scrollen nicht verrutscht.
  1. Klicken Sie "veröffentlichen". Set the display conditions to “Alle Seiten.” This will ensure the button is displayed on every page, providing a consistent user experience.

Einen Anker am Anfang der Seite hinzufügen

  1. Öffnen Sie die Seite in Elementor:
    • Gehen Sie zu Ihrem WordPress-Dashboard, navigieren Sie zu Seiten oder Beiträgeund wählen Sie die Seite, die Sie bearbeiten möchten.
    • Klicken Sie auf Mit Elementor bearbeiten um die Seite im Elementor-Editor zu öffnen.
  1. Wählen Sie das oberste Element:
    • Choose an element near the top of the page where you want users to be directed when they click the “Scroll to Top” button. This is typically the Kopfzeile Abschnitt, eine Titel, oder die erster Abschnitt der Seite.
    • Klicken Sie auf das Element, um es auszuwählen.
  1. Gehen Sie auf die Registerkarte Erweitert:
    • Wenn Sie das oberste Element ausgewählt haben, navigieren Sie zum Feld Fortgeschrittene im Elementor-Panel auf der linken Seite.
  2. Legen Sie die CSS-ID fest:
    • Finden Sie die CSS-ID Feld unter dem Fortgeschrittene Registerkarte.
    • Geben Sie das Wort top (oder jedes andere einfache Wort, das Sie bevorzugen, wie z.B. starten).
  1. Speichern Sie Ihre Änderungen:
    • Sobald Sie die CSS-ID festgelegt haben, klicken Sie auf Update um die Änderungen an der Seite zu speichern.

Wichtiger Hinweis:

Fügen Sie einen Anker für die Schaltfläche hinzu:

  1. Öffnen Sie eine beliebige Seite in Elementor und klicken Sie auf das oberste Element (wie eine Überschrift oder einen Abschnitt).
  2. ISetzen Sie die Schaltfläche Link. In der Link Feld, geben Sie ein #top (stellen Sie sicher, dass Sie die # Symbol).
  1. Lesen Sie weiter, um die Ergebnisse zu sehen.
https://www.openbyt.com/wp-content/uploads/2024/10/Action-2024-10-18-16-08-50.mp4

Fazit

Adding a “Scroll to Top” button in Elementor is a straightforward way to improve user experience on longer pages by allowing easy navigation back to the top. By creating a global button template, you ensure a consistent appearance across your entire site. The process includes designing the button, setting custom styles like rounded corners and shadow effects, and optionally adding animations like a pulse effect for added visibility.

Once the button is designed, you can fix it in place using the “Fixed” positioning and ensure it appears on all pages through display conditions. Additionally, by setting a CSS ID at the top of each page (such as “top”) and linking the button to this anchor (#top), können Benutzer schnell zurück zum Anfang der Seite blättern, wenn sie auf die Schaltfläche klicken.

Häufig gestellte Fragen

1. Warum sollte ich eine Schaltfläche "Nach oben scrollen" hinzufügen?

Diese Schaltfläche erspart den Benutzern das ständige Scrollen, insbesondere auf langen Seiten. Sie bietet einen schnellen Weg zurück zum Anfang und macht die Website übersichtlicher.

2. Kann ich der Schaltfläche weitere Animationseffekte hinzufügen?

Aber sicher! Mit den Bewegungseffekten von Elementor können Sie Animationen wie Bounce oder Slide hinzufügen, um die Schaltfläche noch auffälliger zu machen.

3. Gibt es Plug-ins, die dies tun können?

Ja, mehrere Plugins bieten "Scroll to Top"-Schaltflächen. Aber wenn Sie sie durch benutzerdefinierten Code hinzufügen, bleibt Ihre Website schneller, weil Sie keine zusätzlichen Plugins benötigen.

Die mobile Version verlassen