Wie füge ich einer WordPress-Website eine Scroll-Animation hinzu?

Effekte und Animationen helfen dabei, Websites zum Leben zu erwecken. Sie sorgen nicht nur dafür, dass sie umwerfend aussehen, sondern verbessern auch das Benutzererlebnis, das eines der wichtigsten Ranking-Signale der Google-Suchmaschine ist.

Sie haben vielleicht gedacht, dass es großartig ist, aber es ist zu schwer für Sie, etwas zu erschaffen. Tatsache ist jedoch, dass es nicht nur möglich ist, sondern Sie können mit nur wenigen Klicks eine Scroll-Animation für Ihre WordPress-Site erstellen.

In diesem Blog helfen wir Ihnen zu lernen, wie Sie Scroll-Animationen so einfach wie möglich in WordPress hinzufügen.

Bleiben Sie also dran und lesen Sie den Beitrag bis zum Ende.

Aber lassen Sie uns vorher verstehen, welche Vorteile das Hinzufügen von Scroll-Animationen in WordPress bietet.

Vorteile des Hinzufügens von Scroll-Animationen in WordPress

Wenn Sie sich immer noch fragen, warum Sie Scroll-Animationen in WordPress hinzufügen sollten, schauen Sie sich die unten genannten Vorteile oder Vorteile an:

1. Verbesserte Benutzereinbindung

Scroll-Animationen ziehen die Aufmerksamkeit der Besucher auf sich und fesseln sie, während sie Ihre Website erkunden. Dynamische Elemente wie verblassender Text oder bewegte Bilder sorgen für ein interaktives Erlebnis und ermutigen Benutzer, weiter zu scrollen und mehr Zeit auf Ihren Seiten zu verbringen.

2. Verbesserte Benutzererfahrung (UX)

Animationen können Benutzer auf reibungslose und intuitive Weise durch den Inhalt führen. Durch die schrittweise Anzeige von Informationen oder die Hervorhebung wichtiger Abschnitte machen Scroll-Effekte die Navigation einfacher und angenehmer und verbessern die allgemeine Benutzerzufriedenheit.

3. Erhöhte visuelle Attraktivität

Das Hinzufügen von Scroll-Animationen verleiht Ihrer Website ein modernes und professionelles Aussehen. Dezente Übergänge und Animationen können Ihr Design dynamischer machen und Ihrer Website dabei helfen, sich von der Konkurrenz abzuheben.

4. Möglichkeiten zum Geschichtenerzählen

Scroll-Animationen ermöglichen kreatives Geschichtenerzählen. Sie können Informationen in einer logischen, visuell ansprechenden Reihenfolge präsentieren, was dazu beiträgt, Ihre Botschaft effektiver zu kommunizieren und die Besucher mit Ihren Inhalten zu beschäftigen.

5. Mobilfreundliche Interaktionen

Scroll-Animationen verbessern mobile Interaktionen und machen sie flüssiger und ansprechender. Insbesondere mobile Nutzer profitieren von intuitiven Designelementen, die auf ihre Gesten reagieren und so das mobile Erlebnis verbessern.

6. SEO-Vorteile

Da Animationen zu einer besseren Benutzereinbindung und einer längeren Verweildauer auf der Website beitragen können, unterstützen sie indirekt SEO-Bemühungen. Eine niedrigere Absprungrate und eine höhere Benutzerinteraktion können Suchmaschinen signalisieren, dass Ihre Website wertvolle Inhalte bietet, und so Ihr Ranking verbessern.

7. Professionelles Branding

Scroll-Animationen spiegeln ein höheres Maß an Professionalität wider und entsprechen den modernen Webdesign-Trends. Wenn sie strategisch eingesetzt werden, können sie die Identität Ihrer Marke stärken und Ihre Website einprägsamer machen.

8. Subtile Anleitung für Benutzer

Scroll-Animationen können Calls-to-Action (CTAs) hervorheben, die Aufmerksamkeit auf wichtige Abschnitte lenken oder Benutzer durch einen bestimmten Pfad auf Ihrer Website führen. Diese subtile Navigationshilfe kann dazu beitragen, die Conversions zu verbessern.

Sehen wir uns nun an, wie Sie es schaffen können.

Fügen Sie Scroll-Animationen in WordPress mit dem WordPress-Plugin hinzu

Eine der einfachsten Möglichkeiten, Scroll-Animationen in WordPress hinzuzufügen, ist die Verwendung eines Plugins namens Scrollsequence .

Obwohl neben Scrollsequence noch andere WordPress-Plugins verfügbar sind, haben wir festgestellt, dass es das stabilste und funktionsreichste ist.

Deshalb haben wir es für diesen Blog ausgewählt, um Ihnen zu zeigen, wie Sie Scroll-Animationen in WordPress hinzufügen.

Hier ist eine Schritt-für-Schritt-Methode, die Sie befolgen können:

Schritt 1: Installieren Sie das Plugin und aktivieren Sie es

• Gehen Sie zu Ihrem WordPress-Admin-Dashboard:
  Melden Sie sich zunächst bei Ihrer WordPress-Site an > suchen Sie im Abschnitt „Plugins“ nach „Scrollsequence“ > installieren Sie die kostenlose Version > aktivieren Sie das Plugin nach der Installation.

Schritt 2: Greifen Sie auf das Scrollsequence-Menü zu

• Suchen Sie die Option „Neue Scrollsequenz“:
  Nachdem Sie das Plugin aktiviert haben, schauen Sie sich noch einmal die linke Seite des Dashboards an. Sie sollten eine neue Option mit der Bezeichnung Scrollsequence sehen.
• Klicken Sie auf dieses Menü:
  Klicken Sie auf Scrollsequenz . Dadurch gelangen Sie zu einem neuen Bereich, in dem Sie Ihre Animationen einrichten und anpassen können. Außerdem finden Sie hilfreiche Tutorials, die die Verwendung erklären.

Schritt 3: Bereiten Sie Ihre Animation vor

• Verstehen, wie Scrollsequence funktioniert:
  Scrollsequence erstellt Animationen aus einer Reihe von Standbildern, ähnlich wie bei einem Daumenkino, damit es wie ein Video aussieht, wenn Benutzer auf der Seite nach unten scrollen.
• Konvertieren Sie Ihr Video in Bilder:
  Um Ihre Animation zu erstellen, benötigen Sie zunächst ein kurzes Video (ca. 5-10 Sekunden lang). Verwenden Sie ein kostenloses Tool wie Ezgif , um dieses Video in separate Bildrahmen (JPEG-Format) zu konvertieren. Das bedeutet, dass Sie von Ihrem Video mehrere Bilder erhalten, die Scrollsequence zur Erstellung der Animation verwendet.

Schritt 4: Erstellen Sie eine neue Scroll-Animation

• Starten Sie eine neue Scrollsequenz:
  Suchen Sie im Scrollsequence-Menü nach einer Schaltfläche mit der Aufschrift „Neue Scrollsequence hinzufügen“ und klicken Sie darauf.
• Fügen Sie eine Szene hinzu:
  Klicken Sie auf Szene hinzufügen . Es erscheint ein Dropdown-Menü, in dem Sie die Bildsequenz auswählen können, die Sie für Ihre Animation verwenden möchten.

• Laden Sie Ihre Bilder hoch:
  Laden Sie nun die Bilder hoch, die Sie aus Ihrem Video erhalten haben. Dies kann je nach Geschwindigkeit Ihres Internets einige Zeit dauern.

Schritt 5: Passen Sie die Animation an

• Animationseinstellungen anpassen:
  Sobald alle Ihre Bilder hochgeladen sind, können Sie einige Einstellungen ändern. Sie können beim Scrollen auswählen, wann die Animation beginnt und endet.
• Wählen Sie den Animationstyp:
  Entscheiden Sie, ob die Animation an einer Stelle bleiben soll (sticky) oder sich bewegen soll, während der Benutzer auf der Seite nach unten scrollt (statisch).

Schritt 6: Vorschau und Speichern

• Überprüfen Sie Ihre Animation:
  Bevor Sie alles fertigstellen, klicken Sie auf die Schaltfläche „Vorschau“, um zu sehen, wie Ihre Animation aussieht.
• Veröffentlichen Sie Ihre Animation:
  Wenn Ihnen gefällt, was Sie sehen, klicken Sie auf die Schaltfläche „Veröffentlichen“, um Ihre Animation auf Ihrer Website live zu veröffentlichen.

Schritt 7: Verwenden Sie die Animation auf Ihrer Website

• Holen Sie sich den Shortcode:
  Gehen Sie nach der Veröffentlichung zurück zum Scrollsequence -Menü. Sie finden einen Shortcode (einen speziellen Code) für Ihre neue Animation.

• Fügen Sie den Shortcode ein:
  Kopieren Sie diesen Shortcode und fügen Sie ihn in eine beliebige Seite oder einen beliebigen Beitrag ein, auf der die Animation angezeigt werden soll. Sie können auf derselben Seite beliebig viele Animationen hinzufügen

Jetzt verfügt Ihre WordPress-Site über eine unterhaltsame und interaktive Scroll-Animation!

Fügen Sie Scroll-Animationen in WordPress mit Elementor hinzu

Bei der obigen Methode haben wir ein Video anstelle von Bildern verwendet, aber bei dieser Elementor-Methode werden wir einen anderen Ansatz verfolgen.

Das Bild bewegt sich von einer Seite des Bildschirms zur anderen, wenn Benutzer auf der Seite nach unten scrollen. So können Sie mit Elementor Standbilder anstelle von Videos verwenden.

Schritt 1: Erstellen Sie eine neue Seite

• Erstellen Sie zunächst eine neue Seite auf Ihrer WordPress-Site.

Schritt 2: Mit Elementor bearbeiten

• Klicken Sie auf Mit Elementor bearbeiten . Elementor ist ein Seitenersteller, mit dem Sie Ihre Seiten einfach gestalten können.

Schritt 3: Fügen Sie ein Bild ein

• Suchen Sie im Elementor-Editor nach der Option, ein Bild in die Seite einzufügen .
• Tipp: Die Animation funktioniert am besten mit einem transparenten Bild. Sie können eine PNG-Datei (die Transparenz unterstützt) oder eine SVG-Datei (die ebenfalls ein Vektorformat ist) verwenden.

Schritt 4: Bildgröße festlegen

• Passen Sie die Größe Ihres Bildes an. Stellen Sie sicher, dass es groß genug ist, damit die Leute die Bewegung beim Scrollen bemerken können. Beispielsweise können Sie die Größe auf „Mittel“ einstellen, was etwa 300 x 300 Pixel entspricht.

Schritt 5: Wählen Sie das Bild aus

• Klicken Sie auf das gerade hinzugefügte Bild, um es auszuwählen.

Schritt 6: Greifen Sie auf die erweiterten Einstellungen zu

• Suchen Sie in den Einstellungen auf der linken Seite des Elementor-Editors nach der Registerkarte „Erweitert“ .

Schritt 7: Bewegungseffekte aktivieren

• Scrollen Sie nach unten, um Bewegungseffekte zu finden.
• Scrolleffekte aktivieren. Dadurch können Sie Ihrem Bild Bewegung verleihen.

Schritt 8: Legen Sie die horizontale Scrollrichtung fest

• Da Sie möchten, dass sich Ihr Bild über die Seite bewegt, suchen Sie nach der Option „ Horizontaler Bildlauf“ .
• Ändern Sie die Richtungseinstellung in „Nach rechts“ . Das bedeutet, dass sich das Bild von links nach rechts bewegt, wenn der Benutzer auf der Seite nach unten scrollt.

Schritt 9: Testen Sie den Effekt

• Scrollen Sie auf der Seite nach unten, um zu sehen, wie sich Ihr Bild bewegt. Dies ist ein einfaches Beispiel, aber es zeigt Ihnen, wie einfach es ist, einen ansprechenden Effekt zu erzielen.

Zusätzliche Hinweise

• Sie können auch das Scrollsequence- Plugin verwenden, um ähnliche Scroll-Animationen in Elementor hinzuzufügen.
• Wenn Sie über Elementor Pro verfügen, verfügt es über eine integrierte Funktion für Sticky-Scrolling-Effekte, die jedoch im Vergleich zu anderen Optionen möglicherweise eingeschränkter ist.

Fügen Sie Scroll-Animationen in WordPress mithilfe von Divi hinzu

Falls Sie kein Elementor-Benutzer sind, sondern stattdessen Divi verwenden, können Sie dennoch einen ähnlichen Effekt erzielen.

Hier erfahren Sie, wie Sie es tun können.

Wir denken zum Beispiel über eine Fußball-Website nach

Schritt 1: Erstellen Sie eine neue Seite

Als Erstes müssen Sie eine neue Seite erstellen und Divi Page Builder auswählen. Auf diese Weise können Sie Ihre Seite mit den Funktionen von Divi gestalten.

Schritt 2: Wählen Sie ein Layout (optional)

• Um die Sache noch ein wenig zu beschleunigen, wählen Sie die vorgefertigten Layouts von Divi. Wählen Sie beispielsweise ein Layout für eine Tennis-Trainingsseite aus.

Schritt 4: Fügen Sie Ihr Bild hinzu

• Um den Scroll-Effekt zu erzeugen, benötigen Sie ein Bild. In diesem Beispiel verwenden Sie ein Score-Bild.
• Stellen Sie sicher, dass das Partiturbild einen transparenten Hintergrund hat (das PNG-Format funktioniert am besten). Laden Sie dieses Bild auf Ihre Seite hoch.

Schritt 5: Rufen Sie die Bildeinstellungen auf

• Klicken Sie auf das Partiturbild, das Sie gerade hinzugefügt haben, um dessen Einstellungen zu öffnen.
• Suchen Sie im Einstellungsmenü nach der Registerkarte „Erweitert“ .

Schritt 6: Scrolleffekte aktivieren

• Suchen Sie in den erweiterten Einstellungen den Abschnitt Scroll-Effekte .
• Sie sehen verschiedene Optionen für Scroll-Effekte.

Schritt 7: Wählen Sie Ihre Effekte

• Wählen Sie den gewünschten Effekt aus.
• Aktivieren Sie außerdem den Effekt „Horizontale Bewegung“ , damit sich das Score-Bild von einer Seite des Bildschirms zur anderen bewegt, wenn Benutzer nach unten scrollen.

Schritt 8: Testen Sie Ihre Scroll-Bewegung

• Scrollen Sie nach dem Einrichten der Effekte auf der Seite nach unten, um zu sehen, wie sich das Partiturbild bewegt.

Schritt 9: Speichern Sie Ihre Änderungen

• Wenn Sie mit dem Aussehen zufrieden sind, speichern Sie Ihre Änderungen.
• Klicken Sie dann auf „Veröffentlichen“, um Ihre Seite mit dem neuen Scroll-Effekt live zu schalten.

Fügen Sie mithilfe von Anchor-Tags und CSS einfache und reibungslose Scroll-Animationen in WordPress hinzu

Diese Methode bietet keine ausgefallenen Optionen zum Hinzufügen von Scroll-Animationen in WordPress, kann Ihnen aber dabei helfen, auf einfachste Weise einfache Animationen zu Ihrer WordPress-Site hinzuzufügen.

Dazu müssen Sie Anker-Tags verwenden, die im Allgemeinen verwendet werden, um Besuchern den Sprung zu bestimmten Inhalten auf derselben Seite zu erleichtern. Das Problem besteht jedoch darin, dass die Scroll-Animation standardmäßig klobig oder abrupt aussieht.

Aber wir können diese Bewegung reibungslos gestalten und den Lesern das Gefühl einer animierten Schriftrolle statt eines plötzlichen Sprungs vermitteln.

Hier erfahren Sie, wie Sie es tun können.

Schritt 1 : Anker-Tags einrichten : Sie müssen zunächst einen Abschnitt Ihrer Seite erstellen, zu dem Sie „springen“ können. Dies geschieht durch das Hinzufügen eines Wortes (Anker-Tag) in das Feld „HTML-Anker“, das als Ziel für den Link fungiert.

Schritt 2 : Erstellen Sie den Link : Verknüpfen Sie das Anker-Tag mit einem Text oder einer Schaltfläche auf der Seite. Der Link sollte mit einem Hashtag gefolgt vom Ankertext (z. B. #Abschnitt1) geschrieben werden.

Schritt 3 : Veröffentlichen Sie die Seite : Wenn Sie die Seite veröffentlichen, gelangen Sie durch Klicken auf den Link zum Anker-Tag, es kann sich jedoch abrupt anfühlen.

Schritt 4 : Beheben Sie das Problem mit reibungslosem Scrollen : Um das Scrollen reibungslos zu gestalten, fügen Sie ein kleines Stück CSS-Code (scroll-behavior: smooth) zum Abschnitt „Zusätzliches CSS“ in WordPress hinzu.

html{
scroll-behavior: smooth;
}

Dieser Code macht die Scrollbewegung schrittweise und optisch ansprechend, als wäre sie animiert.

Sobald Sie die Seite erneut veröffentlichen, führt das Klicken auf den Link zu einem sanften, animierten Scrollen nach unten zum Anker anstelle eines abrupten Sprungs.

Abschluss

Jetzt haben Sie erfahren, dass das Hinzufügen von Scroll-Animationen zu einer WordPress-Site keine besonderen technischen Fähigkeiten oder Entwicklerunterstützung erfordert. Ein einfaches Plugin oder Page Builder reicht aus, um innerhalb weniger Minuten dynamische und attraktive Seiten zu erstellen.

Um die besten Ergebnisse zu erzielen, können Sie die oben genannten Methoden auch kombinieren, um noch bessere Ergebnisse zu erzielen und mehr Traffic auf Ihre Website zu locken und zu halten.

Wenn Sie Fragen haben oder Ihre wertvolle Meinung mitteilen möchten, teilen Sie uns dies bitte im Kommentarbereich unten mit.

Rahul

Rahul Kumar ist ein Web-Enthusiast und Content-Stratege, der sich auf WordPress und Webhosting spezialisiert hat. Mit jahrelanger Erfahrung und seinem Engagement, über Branchentrends auf dem Laufenden zu bleiben, entwickelt er effektive Online-Strategien, die den Traffic steigern, das Engagement steigern und die Conversions steigern. Rahuls Liebe zum Detail und seine Fähigkeit, überzeugende Inhalte zu erstellen, machen ihn zu einer wertvollen Bereicherung für jede Marke, die ihre Online-Präsenz verbessern möchte.