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

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."

2. Wählen Sie "Einzelne Seite" aus dem Dropdown-Menü als Vorlagentyp. Nennen Sie sie etwas wie "Nach oben scrollen Schaltfläche“.

3. Klicken Sie "Vorlage erstellen", um den Elementor-Editor zu öffnen.

4. Verlassen Sie die Bibliothek: Klicken Sie auf das "X" in der oberen rechten Ecke, um die Vorlagenbibliothek zu schließen.

Hinzufügen und Anpassen der Schaltfläche:

1. Ziehen Sie das "SchaltflächeWidget" aus der Seitenleiste in die Vorlage ein.

2. Ändern Sie den Text der Schaltfläche in "Nach oben scrollen" oder verwenden Sie ein Pfeilsymbol nach oben.

3. Gehen Sie zur Symbolgalerie und wählen Sie den Pfeil nach oben Ikone.

4. Wählen Sie eine andere Taste Typ zum Löschen der Text.

5. 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 die Grenzen des Elements.

2. 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.

3. Wählen Sie ein kontrastreiches Farbschema
   • Verwenden Sie Farben, die einen Kontrast zum Hintergrund Ihrer Website bilden. Wenn Ihr Hintergrund zum Beispiel hell ist, wählen Sie eine kräftige Farbe wie Blau, Orange oder Grün.
   • 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.

4. 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.

5. 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.

Fixieren Sie den Knopf:

1. In der "FortgeschritteneRegisterkarte ", unter "Positionierung," wählen "Fixiert."

2. Platzieren Sie die Schaltfläche in der rechten unteren Ecke mit einem 20px Rand von beiden Seiten, damit es beim Scrollen nicht verrutscht.

3. Klicken Sie "veröffentlichen“. Stellen Sie die Anzeigebedingungen auf "Alle Seiten." Dadurch wird sichergestellt, dass die Schaltfläche auf jeder Seite angezeigt wird, was eine einheitliche Benutzererfahrung gewährleistet.

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.

2. Wählen Sie das oberste Element:
   • Wählen Sie ein Element in der Nähe des oberen Seitenrandes, zu dem die Benutzer geleitet werden sollen, wenn sie auf die Schaltfläche "Nach oben scrollen" klicken. Dies ist normalerweise das Kopfzeile Abschnitt, eine Titel, oder die erster Abschnitt der Seite.
   • Klicken Sie auf das Element, um es auszuwählen.

3. 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.
4. 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).

5. 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:

• Vergewissern Sie sich, dass die CSS-ID, die Sie eingegeben haben, mit der in der Schaltfläche "Nach oben scrollen" übereinstimmt. Link. Wenn Sie zum Beispiel die CSS-ID wie folgt festlegen topsollte der Link der Schaltfläche lauten #top.

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).

3. Lesen Sie weiter, um die Ergebnisse zu sehen.

Fazit

Das Hinzufügen einer "Scroll to Top"-Schaltfläche in Elementor ist eine unkomplizierte Möglichkeit, die Benutzerfreundlichkeit auf längeren Seiten zu verbessern, indem Sie eine einfache Navigation zurück zum Anfang ermöglichen. Indem Sie eine globale Schaltflächenvorlage erstellen, sorgen Sie für ein einheitliches Erscheinungsbild auf Ihrer gesamten Website. Der Prozess umfasst die Gestaltung der Schaltfläche, die Festlegung von benutzerdefinierten Stilen wie abgerundeten Ecken und Schatteneffekten und das optionale Hinzufügen von Animationen wie einem Pulse-Effekt für zusätzliche Sichtbarkeit.

Sobald die Schaltfläche entworfen ist, können Sie sie mit der Positionierung "Fest" fixieren und sicherstellen, dass sie durch die Anzeigebedingungen auf allen Seiten erscheint. Außerdem können Sie eine CSS-ID am Anfang jeder Seite festlegen (z. B. "top") und die Schaltfläche mit diesem Anker verknüpfen (#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.