Fügen Sie Ihrer WordPress-Website eine Ladeanimation hinzu (10 verschiedene Optionen)

Jeder hat es immer eilig und eine Website, die länger als 2 oder 3 Sekunden zum Laden braucht, wird als „viel zu langsam“ empfunden. Glücklicherweise gibt es eine Möglichkeit, diese Panik vorübergehend zu umgehen und die Benutzer lange genug auf einer Website zu halten, damit die Dinge geladen werden können. Ich spreche von der perfekt hypnotischen Ladeanimation.

In diesem Beitrag sehen wir uns an, was genau eine Ladeanimation ist, was ihr Zweck ist und wie man eine zu jeder WordPress-Site hinzufügt – einschließlich Ihrer Divi-Sites.

Was ist eine Ladeanimation?

Eine Ladeanimation, auch Preloader genannt, ist eine auffällige Animation, die lange genug auf einer Website angezeigt wird, damit alle Elemente geladen werden können. Einige Ladeanimationen sind kurz und müssen die Aufmerksamkeit des Benutzers nicht sehr lange auf sich ziehen. Aber in einigen Fällen, wenn die Site sehr groß ist, muss die Ladeanimation wirklich fesselnd sein, damit der Benutzer in der Nähe bleibt.

Wenn Sie schon lange genug dabei sind, wissen Sie, dass seit den 90er Jahren Ladeanimationen auftauchen. Schon zu Beginn des Internetzeitalters hatten wir Ladeanimationen. Damals konnten sie natürlich noch viel länger halten als heute. Außerdem haben wir gelernt, sie für den Benutzer viel angenehmer zu gestalten, ohne sie zu langweilen und wegzunavigieren.

Machen Sie sich mit dem Laden von Animationen vertraut

Der gebräuchlichste Stil zum Laden von Animationen ist der sich drehende Kreis. Nicht zu verwechseln mit dem „Regenbogen-Todeskreis“ von Apple-Computern. Die Ladeanimation des sich drehenden Kreises hat eine gestaffelte Verlaufsbewegung. Die ersten sich drehenden Preloader hatten viele verschiedene Versionen, von Blumen über Kreise bis hin zu Schneeflocken und sogar rotierenden Ying-Yangs. Heutzutage sind die sich drehenden Ladeanimationen dynamischer und schöner anzusehen.

Spinnende Ladeanimationen funktionieren nur, wenn die Wartezeit kurz ist. Mehr als 5 Sekunden sind schon zu viel. Dann müssen Entwickler kreativere Preloader verwenden. Eine lustige und unterhaltsame Ladeanimation hält einen Benutzer auf der Website, egal wie lange es dauert.

Tipps zum besseren Laden von Animationen

Es gibt ein paar Dinge, die Sie Ihrer Ladeanimation hinzufügen können, um sie interessanter zu machen als nur ein bewegtes Bild. Hier sind einige Tipps, um sie noch besser und effektiver zu machen.

• Fügen Sie einen Prozentbalken ein
• Zeigen Sie, wie lange der Benutzer noch warten muss
• Erklären, was unter der Haube passiert (Requisiten für den Einsatz von Humor)
• Verwenden Sie eine unterhaltsame Animation, die nicht unbedingt genau die gleiche Aktion wiederholt

Die Vorteile einer gebrandeten Ladeanimation

Wenn Sie die Möglichkeit haben, Ihre eigene Ladeanimation zu erstellen oder ein Plugin mit Anpassungsoptionen zu verwenden, stellen Sie sicher, dass der Preloader gebrandet ist. Dies kann so einfach sein, wie die Farben der Website der Marke zu verwenden, um tatsächlich eine Unternehmensillustration zu verwenden. Die Idee hinter dem Branding einer Ladeanimation besteht darin, dass sie so aussieht, als würde sie auf diese Site gehören und nicht nur ein Add-On. Diese Zusammenfassung auf der Awwwards-Website kann Ihre eigenen Kreationen inspirieren.

So fügen Sie Ihrer WordPress-Site eine Ladeanimation hinzu

Das Hinzufügen einer Ladeanimation ist einfacher als Sie vielleicht denken. Es gibt eine Reihe von Optionen, wie Sie eine WordPress-Site hinzufügen können. Von einfach zu verwendenden Plugins bis hin zum Hinzufügen von benutzerdefiniertem Code zur Website. Da es so viele verschiedene Möglichkeiten gibt, werde ich sie hier auflisten, damit Sie sich umschauen und herausfinden können, welche für Sie am besten geeignet ist.

Verwenden eines Plugins zum Hinzufügen einer Ladeanimation

Ein Plugin ist der einfachste und unkomplizierteste Weg, um eine Ladeanimation hinzuzufügen. Diese sind besonders hilfreich, wenn Sie nicht gerne mit Code herumspielen oder keine Zeit haben. Hier ist eine Liste einiger der vielseitigsten Plugins zum Laden von Animationen. Einige davon sind kostenlos und andere sind Premium. In einigen Fällen hat dasselbe Plugin eine einfachere kostenlose Version und eine robustere Pro-Version.

Hochlader

Loftloader hat eine kostenlose und eine Pro-Version. In der kostenlosen Version können Sie einige der Proloader ausprobieren und dann an die Site und die Marke anpassen. Die Pro-Version bietet mehr Optionen und detailliertere Steuerungen.

Flacher Preloader

Flat Preloader ist ein einfaches kostenloses Plugin mit einem begrenzten Satz bunter Ladeanimationen. Dieses Plugin ist perfekt, wenn Sie eine schnelle Lösung für einen Preloader benötigen und weder die Farben noch das Bild anpassen müssen.

Bester Preloader

Best Preloader ist ein kostenloses Plugin zum Laden von Animationen mit einer Option, das zu jedem Website-Stil passt. Ich komme mit einer Animation mit einigen Customizatio-Steuerelementen.

Seitenlader

Page Loader ist ein Premium-Plugin für Ladeanimationen mit vielen Anpassungs- und Branding-Optionen. Es ist eines der beliebtesten Preloader-Plugins auf dem Markt.

WP Smart Preloader

WP Smart Preloader ist ein kostenloses Open-Source-Plugin mit vollständigen Anpassungsoptionen. Die Animationen sind nicht sehr aufwendig, passen aber zu jedem Website-Stil. Sie können die Farben und die Einstellungen ganz einfach anpassen.

Hinzufügen einer Ladeanimation ohne Plugin

Wenn Sie die Verwendung eines Plugins vermeiden möchten, stehen viele kostenlose und gebrauchsfertige Ladeanimationen zur Verfügung. Sowie einige fortgeschrittene Tutorials, die die Code-Snippets enthalten, die Sie hinzufügen müssen.

PixelBuddha mit Multimedia:

Die Jungs von Multimedia haben ein einfaches Tutorial mit zwei kostenlosen Sätzen von Ladeanimationen von PixelBuddha und dem Code veröffentlicht, den Sie benötigen, um sie auf Ihrer Website einzurichten.

CodePen:

In diesem Medium-Artikel von UX Planet fasst der Autor viele Ladeanimationen in verschiedenen Stilen zusammen. Es gibt einfache und komplexere. Die meisten von ihnen sind in CodePen eingebettet und Sie können das HTML- und CSS-Snippet aus dem Widget selbst abrufen. Sie müssen diese in einen vollständigen Codesatz einfügen, um eine Ladeanimation einzurichten.

SpinKit:

Tobias Ashlink hat ein SpinKit mit einer schönen Sammlung von Ladeanimationen mit dem Code, der über GitHub verfügbar ist. Diese müssen auch zu einem vollständigen Codesatz für eine Pre-Loaer-Einrichtung hinzugefügt werden.

Laden.io:

Loading.io ist eine Sammlung von Ladeanimationen mit vielen verschiedenen Optionen. Es gibt CSS-Preloader, GIF-Preloader, Schaltflächen und mehr. Sehen Sie sich ihre Website an, um alle Optionen und Anweisungen zum Hinzufügen zu Ihrer Website zu finden.

Pixelvars:

Die Jungs sind Pixelvars hat ein praktisches Tutorial mit dem gesamten Code geschrieben, den Sie zum Einrichten Ihrer eigenen Ladeanimation benötigen. Sie können ihren Code sogar zusammen mit den obigen CodePen- oder GitHub-Animationen verwenden. Diese Option scheint für einige Leute etwas fortgeschrittener zu sein. Gehen Sie damit, wenn Sie ein Entwickler mit guten Programmierkenntnissen sind.

Bei so vielen Optionen, für welche werden Sie sich entscheiden?

Das Hinzufügen einer Ladeanimation zu einer WordPress-Website ist einfach. Bei so vielen verschiedenen Optionen ist es nur eine Frage der Wahl.

In diesem Beitrag haben wir Ihnen viele verschiedene Möglichkeiten gezeigt, um Ihrer Website eine Ladeanimation hinzuzufügen. Welche ist Ihre bevorzugte Methode? Individuell gestaltet und mit Code zu einem Child-Theme hinzugefügt? Ein anpassbares Plugin? Eine einfache Option ohne Schnickschnack? Lassen Sie es uns in den Kommentaren wissen, damit wir Ihre eigenen Ladeanimationen überprüfen können.

Ausgewähltes Bild über muchomoros / shutterstock.com