Inhaltsverzeichnis
Möchten Sie eine Preloader-Animation zu Ihrer WordPress-Website hinzufügen?
Ein Preloader ist eine Animation, die den Ladevorgang einer Seite im Hintergrund anzeigt, so dass die Besucher wissen, dass die Seite geladen wird.
In diesem Artikel zeigen wir Ihnen, wie Sie einen Preloader zu WordPress hinzufügen, Schritt für Schritt.
Was ist eine Preloader-Animation und warum sollte man sie zu WordPress hinzufügen?
Jedes Mal, wenn Sie eine Website besuchen, lädt Ihr Browser verschiedene Teile dieser Website herunter. Einige Teile wie Text und Code werden schneller geladen, während Bilder, Videos und Grafiken länger brauchen können.
Wenn eine Seite lange braucht, um zu laden, könnten sich Besucher fragen, ob Ihre Website kaputt ist. Aus diesem Grund sollten Sie einen Preloader hinzufügen. Das ist eine Animation oder ein Status, der den Ladevorgang der Seite im Hintergrund anzeigt.
Sie können ein Live-Beispiel einer Preloader-Animation sehen, wenn Sie einen neuen Beitrag in WordPress hinzufügen. Klicken Sie einfach auf die Schaltfläche "Vorschau" im Beitragseditor und WordPress zeigt eine Preloader-Animation, während es die Vorschau lädt.
Wenn der größte Teil Ihres Inhalts aus Text besteht und nur wenige Bilder und Videos vorhanden sind, brauchen Sie keinen Preloader auf Ihrer Website. Stattdessen sollten Sie sich lieber auf die Verbesserung der Geschwindigkeit und Leistung Ihrer Website konzentrieren.
Wenn Ihre Website jedoch viele Bilder und Videoeinbettungen enthält, kann es sinnvoll sein, eine Preloader-Animation hinzuzufügen.
Schauen 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 gelangen.
Methode 1: Hinzufügen eines Preloaders in WordPress mit WP Smart Preloader (einfache Methode)
Der einfachste Weg, einen Preloader in WordPress hinzuzufügen, ist die Verwendung von WP Smart Preloader. Dieses Plugin hat sechs integrierte Preloader-Animationen, die Sie verwenden können, oder Sie können Ihre eigenen Animationen mit benutzerdefinierter HMTL und CSS erstellen.
Als erstes müssen Sie das WP Smart Preloader-Plugin installieren und aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung zur Installation eines WordPress-Plugins.
Nach der Aktivierung gehen Sie zu Einstellungen " WP Smart Preloader und öffnen Sie dann das Dropdown-Menü "Smart Preloader", in dem alle verschiedenen Animationen angezeigt werden, die Sie auswählen 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 es vorziehen, können Sie sie nur auf Ihrer Homepage verwenden. Aktivieren Sie einfach das Kontrollkästchen "Nur auf der Homepage anzeigen".
Danach müssen Sie nach unten zum Abschnitt "Dauer der Anzeige des Preloaders" scrollen. Hier können Sie die Dauer der Wiedergabe des Preloaders ändern.
Die Standardoption ist 1500 Millisekunden oder 1,5 Sekunden, was für die meisten Websites ausreichen sollte, 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. Sie können diesen Wert erhöhen oder verringern, indem Sie eine neue Zahl in das Feld "Lader bis Ausblenden" eingeben.
Wenn Sie mit der Einrichtung des Preloaders zufrieden sind, klicken Sie auf die Schaltfläche "Änderungen speichern", um Ihre Einstellungen zu speichern.
Sie können nun Ihren WordPress-Blog besuchen, um den Preloader in Aktion zu sehen.
Methode 2: Hinzufügen eines Preloaders in WordPress mit LoftLoader (besser anpassbar)
Eine weitere Möglichkeit, Ihrer WordPress-Website eine Preloader-Animation hinzuzufügen, ist die Verwendung von LoftLoader. Dieses Plugin verfügt über integrierte Animationen und viele Anpassungsoptionen, mit denen Sie den Preloader besser an Ihre Website anpassen können.
Als Erstes müssen Sie das Plugin installieren und aktivieren. Weitere Einzelheiten finden Sie in unserem Leitfaden für Einsteiger zur Installation eines WordPress-Plugins.
Nach der Aktivierung gehen Sie zu Einstellungen " LoftLoader Lite LoftLoader Lite ist in den WordPress Customizer integriert, daher sollte Ihnen dieser Bildschirm bekannt vorkommen.
Wählen Sie auf diesem Bildschirm aus, ob Sie denselben Preloader für Ihren gesamten WordPress-Blog oder nur für Ihre Homepage verwenden möchten.
Sie können den Preloader zum Beispiel nur auf Ihrer Homepage anzeigen, wenn diese im Vergleich zum Rest Ihrer Website viele Bilder und Videos enthält.
Nachdem Sie Ihre Entscheidung getroffen haben, klicken Sie auf den Pfeil "Zurück", um zur Seite mit den Plugin-Einstellungen zurückzukehren.
Klicken Sie anschließend auf die Option "Hintergrund".
Hier können Sie die Hintergrundfarbe der Animation auswählen, indem Sie auf das Feld "Farbe auswählen" klicken. Sie können auch die Deckkraft des Hintergrunds anpassen und eine neue Endanimation wie "Fade" oder "Slide Up & Down" auswählen.
Während Sie Änderungen vornehmen, wird die Vorschau aktualisiert, so dass Sie verschiedene Einstellungen ausprobieren können, um zu sehen, was Ihnen am besten gefällt. Wenn Sie mit den Hintergrundeinstellungen zufrieden sind, klicken Sie auf den Pfeil "Zurück".
Als nächstes können Sie die Animation ändern, indem Sie auf die Option "Lader" klicken.
Sie können eine neue Animation auswählen, indem Sie auf die verschiedenen Miniaturansichten im Feld "Loader-Animation" klicken. Um die Farbe des Preloaders zu ändern, wählen Sie einfach eine neue Farbe im Feld "Farbe auswählen".
Klicken Sie anschließend auf den Pfeil "Zurück", um zum Hauptbildschirm der Einstellungen zurückzukehren.
Klicken Sie anschließend auf den Menüpunkt "Mehr", wo Sie die Dauer der Animation durch Auswahl von "Maximale Ladezeit" ändern können.
Sie können dann eingeben, wie lange der Preloader dauern soll.
Um eine Schaltfläche zum Beenden der Animation hinzuzufügen, klicken Sie auf "Schaltfläche schließen" und verwenden Sie dann die Einstellungen, um Ihre Schaltfläche zu konfigurieren.
Wenn Sie mit der Einrichtung der Schaltfläche zufrieden sind, klicken Sie auf die Schaltfläche "Veröffentlichen", um Ihren Preloader zu aktivieren.
Jetzt können Sie Ihre Website besuchen, um den neuen Preloader in Aktion zu sehen.
Wir hoffen, dass dieser Artikel Ihnen geholfen hat zu lernen, wie man eine Preloader-Animation zu WordPress hinzufügt. Vielleicht interessieren Sie sich auch für unsere Anleitung, wie man eine Landing Page mit WordPress erstellt, oder für unsere Expertenauswahl der besten Drag & Drop WordPress Page Builder.
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.
