Wie man eine Preloader-Animation zu WordPress hinzufügt (Schritt für Schritt)

Ist Ihnen schon einmal das sich drehende Symbol oder die Animation aufgefallen, die beim Laden einer Website erscheint? Das ist eine Preloader-Animation und ein praktisches Werkzeug, das Sie für Ihre WordPress-Projekte verwenden können.

Preloader erfüllen einen echten Zweck. Auf inhaltsreichen Websites halten sie die Besucher in den entscheidenden Sekunden des Ladevorgangs bei der Stange, was die Absprungrate senken kann. Und für Websites von Unternehmen kann ein Preloader mit Markenzeichen sogar einen professionellen Touch verleihen.

Wenn Sie denken, dass dies kompliziert klingt, machen Sie sich keine Sorgen. Wir haben 2 Methoden für das Hinzufügen einer Preloader-Animation zu Ihrer WordPress Website entwickelt, die für Benutzer aller Kenntnisstufen geeignet sind.

Warum eine Preloader-Animation zu WordPress hinzufügen?

Ein Preloader ist eine Animation, die Sie sehen, wenn Sie darauf warten, dass eine Seite geladen wird. Sie teilt dem Benutzer mit, dass die Seite noch geladen werden muss, und bittet ihn, geduldig zu warten. Sobald der Ladevorgang abgeschlossen ist, verschwindet der Preloader, und der Besucher kann die Seite normal betrachten.

Hier ist ein Beispiel für eine Preloader-Animation:

Ein Szenario, in dem Sie vielleicht eine Ladeanimation hinzufügen möchten, ist, wenn Ihre Seite viele große Bilder oder Videos enthält. In diesem Fall dauert das Laden Ihrer Seite länger als normal, und Sie möchten, dass die Benutzer lange genug oben bleiben, bis die Seite vollständig angezeigt wird.

Wenn Ihre Seite nicht viele umfangreiche Elemente enthält, ist es besser, sich auf die Verbesserung der Geschwindigkeit und Leistung Ihrer Website zu konzentrieren. Möglicherweise sollten Sie auch ein Upgrade auf einen besseren WordPress Hosting-Anbieter vornehmen.

Sehen wir uns also an, wie Sie Ihrer WordPress-Website ganz einfach einen Preloader hinzufügen können. Verwenden Sie einfach die unten stehenden Links, um direkt zur gewünschten Methode zu springen:

Methode 1: Hinzufügen eines Preloaders zu WordPress mit WP Smart Preloader (einfache Methode)

Eine einfache Möglichkeit, einen Preloader in WordPress hinzuzufügen, ist die Verwendung von WP Smart Preloader.

Von den 2 Plugins, die wir in diesem Leitfaden hervorheben, ist dieses die einfachste Version. Das liegt daran, dass es 6 integrierte Preloader-Animationen hat, die Sie verwenden können, und Sie müssen nicht viele Einstellungen konfigurieren, um die Animation zu aktivieren.

Als Erstes müssen Sie das WP Smart Preloader-Plugin installieren und aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung für die Installation eines WordPress-Plugins.

Gehen Sie nach der Aktivierung zu Einstellungen “ WP Smart Preloader und öffnen Sie dann das Dropdown-Menü „Smart Preloader“. Hier werden alle verschiedenen Animationen angezeigt, die Sie verwenden können.

Das Plugin zeigt eine Vorschau der von Ihnen gewählten Animation an, so dass Sie verschiedene Preloader auswählen können, um zu sehen, welcher Ihnen am besten gefällt.

Standardmäßig wird die Animation auf Ihrer gesamten WordPress-Website angezeigt, aber wenn Sie möchten, können Sie sie auch nur auf Ihrer Homepage verwenden. Aktivieren Sie einfach das Kontrollkästchen „Nur auf der Startseite anzeigen“.

Wenn Sie Ihre eigene CSS-Animation erstellen möchten, geben Sie einfach Ihren Code in das Feld „Custom CSS“ ein.

Eine weitere Möglichkeit ist die Erstellung einer benutzerdefinierten HTML5-Animation, indem Sie Code in das Feld „Benutzerdefinierte Animation“ einfügen.

Nachdem Sie eine Animation ausgewählt haben, blättern Sie zum Abschnitt „Dauer für die Anzeige des Loaders“. Hier können Sie festlegen, wie lange der Preloader abgespielt werden soll.

Die Standardoption ist 1500 Millisekunden oder 1,5 Sekunden. Dies sollte für die meisten Websites ausreichen, aber Sie können auch eine andere Zahl eingeben.

Standardmäßig dauert es 2500 Millisekunden oder 2,5 Sekunden, bis die Animation vollständig ausgeblendet wird. Um dies zu ändern, geben Sie einfach eine größere oder kleinere Zahl in das Feld „Lader bis Ausblendung“ ein.

Wenn Sie mit der Einrichtung des Preloaders zufrieden sind, klicken Sie einfach auf die Schaltfläche „Änderungen speichern“, um Ihre Einstellungen zu speichern.

Sie können nun Ihren WordPress-Blog oder Ihre Website besuchen, um den Preloader in Aktion zu sehen.

Methode 2: Hinzufügen von Preloader zu WordPress mit Safelayout Cute Preloader (mehr anpassbar)

Das erste Plugin macht es definitiv einfach, eine Preloader-Animation zu WordPress hinzuzufügen. Allerdings ist es nicht die am besten anpassbare Option.

Wenn Sie dem Preloader Ihren eigenen Stempel aufdrücken oder sogar das Design an Ihre Marke anpassen möchten, können Sie sich den Safelayout Cute Preloader ansehen.

Um Safelayout Cute Preloader zu verwenden, installieren Sie das WordPress Plugin in Ihrem Verwaltungsbereich. Sobald das Plugin aktiviert ist, gehen Sie zu Einstellungen “ Safelayout Preloader.

Der erste Tab, den Sie sehen werden, heißt „Voreinstellungen“. Hier können Sie ein vorgefertigtes Preloader-Design für Ihre Website auswählen.

Wenn Ihnen eines der Designs gefällt, können Sie auf den Button „Einstellungen für diesen Preloader ändern“ unterhalb des Templates klicken.

Von dort aus können Sie den Preloader mithilfe der anderen verfügbaren Optionen individuell anpassen, die wir Ihnen zeigen werden.

Andernfalls können Sie diesen Schritt überspringen und zum nächsten Tab, den „Anzeigeeinstellungen“, wechseln.

Hier können Sie auswählen, wo die Preloader-Animation angezeigt werden soll.

Stellen Sie sicher, dass Sie die Box ‚Enable Safelayout Cute Preloader‘ aktivieren, damit das Plugin funktioniert.

Bei den Einstellungen für „Anzeigen auf“ können Sie eine beliebige Option für die Position wählen. In diesem Beispiel wählen wir die Option „Vollständige Website“.

Wenn Sie nach unten blättern, können Sie die Dauer der Preloader-Animation ändern.

Minimale Ladezeit bedeutet, wie lange die Preloader-Animation angezeigt wird, auch wenn die Seite bereits fertig geladen ist.

Andererseits ist die maximale Ladezeit die Sekunde, bei der die Animation verschwinden soll, wenn die Seite länger als erwartet zum Laden braucht.

Sie können auch festlegen, dass nach einer bestimmten Anzahl von Sekunden, nachdem der Preloader angezeigt wurde, ein Button „Schließen“ angezeigt wird.

Sobald Sie Ihre Änderungen vorgenommen haben, klicken Sie einfach auf „Änderungen speichern“.

Gehen wir nun zum Tab „Hintergrund“.

Oben können Sie eine Hintergrundanimation auswählen. Jede Box zeigt, wie der animierte Effekt später auf Ihrer Website aussehen wird.

Wenn Sie keine davon auswählen möchten, wählen Sie einfach „Kein Hintergrund“.

Wenn Sie nach unten gehen, können Sie die Deckkraft der Hintergrundfarbe wählen, den Vollbildhintergrund in einen kleinen Hintergrund umwandeln und eine Hintergrundfarbe auswählen.

Wenn Sie mit Ihrer Auswahl zufrieden sind, klicken Sie einfach auf „Änderungen speichern“.

Die nächste Einstellung ist „Fortschrittsbalken“.

Hier können Sie optional die Form eines Fortschrittsbalkens auswählen, der in Ihrer Preloader-Animation angezeigt werden soll. Dies ist eine gute Design-Funktion, die den Besuchern den Eindruck vermittelt, dass die Seite geladen wird.

Sie können auch ‚Kein Fortschrittsbalken‘ wählen, wenn Sie dies wünschen.

Während Sie nach unten blättern, können Sie die Farbe des Fortschrittsbalkens ändern.

Danach können Sie die Position, die Breite, den Eckenradius, die Farbe des Randes und die Außenabstände des Fortschrittsbalkens ändern.

Klicken Sie unbedingt auf den Button „Änderungen speichern“, bevor Sie zum nächsten Schritt übergehen.

Wenn das erledigt ist, wechseln Sie zum Tab „Markenbild“.

Hier können Sie ein Logo zu Ihrer Preloader-Animation hinzufügen. Aktivieren Sie dazu einfach die Box „Marke anzeigen“ und wählen Sie Ihr Logobild aus, indem Sie auf den Button „Mediathek“ klicken.

Sie können bei Bedarf auch einen animierten Effekt hinzufügen.

Danach können Sie die Position des Logo-Bildes ändern.

Es gibt 4 Optionen: über dem Preloader-Symbol, über dem Preloader-Zähler, über dem Preloader-Text oder unter dem Text. Wenn Sie sich nicht sicher sind, was das ist, keine Sorge, wir werden gleich darüber sprechen.

Sie können auch den oberen und unteren Außenabstand des Logo-Bildes ändern, damit es nicht zu nah an anderen Preloader-Elementen steht. Aber in unserem Fall werden wir es so lassen, wie es ist.

Wenn das alles eingerichtet ist, klicken Sie auf „Änderungen speichern“.

Navigieren wir nun zu den Einstellungen für „Icons“.

Hier können Sie ein animiertes Bild anzeigen, das typischerweise in einem Preloader erscheint, wie ein kreisförmiger Fortschrittsbalken.

Wenn Sie bereits einen Fortschrittsbalken verwenden und das Gefühl haben, dass die Verwendung eines Symbols zu viel wäre, können Sie einfach „Kein Symbol“ auswählen.

Wenn Sie sich für ein Symbol entscheiden, haben Sie auch die Option, das Design individuell anzupassen.

Sie können die Größe, die Farbe und den animierten Effekt ändern.

Wenn Sie mit dem Design des Symbols zufrieden sind, klicken Sie einfach auf „Änderungen speichern“.

Die nächste zu konfigurierende Einstellung ist „Zähler“. Hier wird ein nummerierter Zähler (z. B. 0 % bis 100 %) angezeigt, um den Ladefortschritt anzuzeigen. Sie können diese Funktion wahlweise deaktivieren oder aktivieren.

Außerdem können Sie den Zählertext, der nach der Zahl angezeigt wird, bei Bedarf ändern.

Sie können auch den Ort ändern, an dem der Zähler erscheint.

Es gibt 4 Optionen: unter dem Preloader-Symbol, in der Mitte des Fortschrittsbalkens, auf der linken Seite des Fortschrittsbalkens und auf der rechten Seite des Fortschrittsbalkens.

Wenn Sie nach unten gehen, können Sie die Farbe, die Schriftgröße und die Außenabstände des Zählers ändern.

Danach klicken Sie einfach auf den Button „Änderungen speichern“.

Schließlich können Sie den Text des Preloaders hinzufügen und ändern. Vergewissern Sie sich dazu, dass die Box „Text anzeigen“ angekreuzt ist.

Standardmäßig zeigt der Preloader einen ‚Loading…‘-Text an, aber Sie können auch kreativer werden.

Sie können auch einen animierten Effekt hinzufügen, um den Text noch mehr hervorzuheben.

Wenn Sie nach unten blättern, können Sie die Textfarbe, die Schriftgröße und den Außenabstand ändern.

Klicken Sie dann einfach auf den Button „Änderungen speichern“.

Und das war’s! Ihre Preloader-Animation sollte nun auf der Grundlage Ihrer Konfigurationen erscheinen. Sie können Ihre Website auf dem Handy, Desktop oder Tablet anzeigen, um sie in Aktion zu sehen.

So sieht unsere aus:

Mehr WordPress-Tricks, um Ihre Website-Besucher zu fesseln

Das Hinzufügen einer Preloader-Animation ist nur eine von vielen Möglichkeiten, Ihre WordPress Website aufzuwerten. Wenn Sie auf der Suche nach weiteren kreativen Ideen sind, um Ihr Publikum zu fesseln, haben wir für Sie das Richtige:

• Hinzufügen eines Parallaxen-Effekts zu einem beliebigen WordPress Theme – Erstellen Sie Tiefe und visuelles Interesse mit dieser Technik der Bildlauftäuschung.
• So fügen Sie fallende Schneeflocken in Ihren WordPress Blog ein – Erfreuen Sie Ihre Besucher mit einem Hauch von Winterzauber auf Ihrer Website.
• So fügen Sie Ihrer WordPress-Website ganz einfach einen dunklen Modus hinzu – Bieten Sie mit dieser beliebten Funktion ein angenehmeres Surferlebnis.
• Halloween-Effekte für Ihre WordPress-Website – Lassen Sie Ihre Website mit diesen lustigen und festlichen Halloween-Tricks erstrahlen.
• Hinzufügen eines animierten Hintergrunds in WordPress – Setzen Sie mit auffälligen bewegten Hintergründen ein Zeichen.
• Hinzufügen von YouTube-Videos als Vollbild-Hintergrund in WordPress – Erzeugen Sie einen starken ersten Eindruck mit dynamischen Video-Hintergründen.
• Infinite Scroll auf Ihrer WordPress Website (Schritt-für-Schritt-Anleitung) – Fesseln Sie Ihre Besucher, indem Sie beim Scrollen nahtlos weitere Inhalte laden.

Wir hoffen, dass dieser Artikel Ihnen geholfen hat zu lernen, wie Sie Ihrer WordPress Website ganz einfach eine Preloader-Animation hinzufügen können. Vielleicht möchten Sie auch unsere Expertenauswahl der besten Drag-and-drop Page-Builder in WordPress und unseren vollständigen Leitfaden zum Bearbeiten einer WordPress-Website lesen.

Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.