Inhaltsverzeichnis

• Warum Preloader-Animationen wichtig sind
• Preloader-Stile, die Sie verwenden können
• Schritt für Schritt: Hinzufügen eines benutzerdefinierten Preloaders in Elementor
  • Schritt 1: Installieren Sie ein Preloader-Plugin
  • Schritt 2: Installation von Preloader Plus
  • Schritt 3: Konfigurieren der Preloader-Einstellungen
  • Schritt 4: Wählen Sie Ihre Preloader-Animation
  • Schritt 5: Anpassen von Design und Timing
• Integration von Preloader mit Elementor für mehr Kontrolle
• Testen und Optimieren Ihres Preloaders
• Abschließende Überlegungen: So hebt sich Ihre Elementor Website ab

Warum Preloader-Animationen wichtig sind

Ein Preloader kann den ersten Eindruck Ihrer Elementor-Website in etwas Unvergessliches verwandeln. Anstelle einer leeren Seite oder des gefürchteten Lade-Spinners verleiht ein gut gestalteter Preloader einen Hauch von Persönlichkeit und hält Ihre Besucher bei der Stange, während sie darauf warten, dass Ihre Inhalte erscheinen. In diesem Artikel führe ich Sie durch den Prozess der Erstellung und Anpassung von Preloader-Animationen in Elementor und erkläre Ihnen in einfachen Schritten, was Sie tun können.

Stellen Sie sich vor, Sie haben auf einen Link geklickt und bleiben vor einem leeren Bildschirm stehen. Das ist frustrierend, oder? Preloader-Animationen lösen dieses Problem, indem sie ein visuelles Feedback geben, dass die Seite aktiv geladen wird - so werden die Besucher unterhalten und erhalten die Gewissheit, dass sich ihr Besuch lohnt. Preloader steigern nicht nur die Benutzeraktivität, sondern helfen auch, die Persönlichkeit Ihrer Marke durch visuelle Kreativität zu vermitteln.

Preloader-Stile, die Sie verwenden können

Bevor wir uns ansehen, wie Sie Ihrer Elementor-Website Preloader hinzufügen können, sollten wir uns die verschiedenen Stile ansehen, die Sie verwenden können:

1. Spinner-Animation: Eine klassische Wahl. Einfach, aber wirkungsvoll, zeigt der rotierende Spinner dem Benutzer, dass etwas passiert.
   • Anwendungsfall: Geeignet für minimalistische oder technisch orientierte Websites. Dieser Stil ist geradlinig und nicht ablenkend. Er ist ideal für Websites, bei denen Einfachheit der Schlüssel ist.
   • Anpassungs-Tipps: Verwenden Sie Ihre Markenfarben für den Spinner, um Konsistenz zu gewährleisten.
2. Fortschrittsbalken: Ideal, wenn Sie einen genauen Prozentsatz der Ladezeit angeben möchten, damit die Besucher ein Gefühl dafür bekommen, wie lange sie warten müssen.
   • Anwendungsfall: Ideal für inhaltsreiche Websites wie E-Commerce oder Blogs mit vielen Bildern. Fortschrittsbalken zeigen dem Benutzer deutlich den Ladefortschritt an und verringern so die Frustration.
   • Anpassungs-Tipps: Passen Sie die Farbe des Fortschrittsbalkens an die primäre Farbpalette Ihrer Website an, und fügen Sie eine Beschriftung wie "Loading... Please wait" hinzu, um ihn informativer zu gestalten.
3. Logo-Animation: Sie können Ihr Logo animieren, um die Markentreue zu wahren und gleichzeitig kreatives Flair zu zeigen.
   • Anwendungsfall: Perfekt für markenorientierte Websites wie Agenturen, Modemarken oder kreative Portfolios. Diese Art von Preloader stärkt die Markenidentität.
   • Anpassungs-Tipps: Verwenden Sie Tools wie After Effects oder LottieFiles um leichte SVG-Animationen Ihres Logos zu erstellen. Stellen Sie sicher, dass die Animationsschleife flüssig ist und nicht länger als ein paar Sekunden dauert.
4. Text ein-/ausblenden: Wörter wie "Loading...", die auftauchen und verblassen, sind eine einfache, aber wirkungsvolle Option, die eine persönliche Note verleiht.
   • Anwendungsfall: Ideal für persönliche Blogs oder Community-Websites. Es schafft ein warmes und freundliches Gefühl, so dass sich die Benutzer stärker verbunden fühlen.
   • Anpassungs-Tipps: Passen Sie den Text an die Stimme Ihrer Marke an - verwenden Sie etwas Einzigartiges wie "Halten Sie sich fest, tolle Inhalte sind auf dem Weg!

Ziel ist es, einen Preloader zu wählen, der zu Ihrer Marke passt, der zum Stil Ihrer Website passt und der Ihre Benutzer beschäftigt, während die Inhalte geladen werden.

Schritt für Schritt: Hinzufügen eines benutzerdefinierten Preloaders in Elementor

Lassen Sie uns nun im Detail besprechen, wie Sie eine benutzerdefinierte Preloader-Animation zu Ihrer Elementor-Website hinzufügen können. Machen Sie sich keine Sorgen, wenn Sie kein Programmierungsexperte sind - diese Methode ist anfängerfreundlich.

Schritt 1: Installieren Sie ein Preloader-Plugin

Der einfachste Weg, eine Preloader-Animation in Elementor hinzuzufügen, ist die Verwendung eines Plugins. Einige der beliebtesten Optionen sind:

• LoftLoader: Ein hochgradig anpassbares Plugin, das sich gut mit Elementor integrieren lässt.
• Preloader Plus: Bietet große Flexibilität beim Hinzufügen von Animationen und Anpassen von Einstellungen.
• PageLoader: Eine Premium-Option mit umfassender Kontrolle über Design und Anzeige.

Für dieses Tutorial verwenden wir die Preloader Plus Plugin als Beispiel, da es benutzerfreundlich ist und eine Menge Anpassungsmöglichkeiten bietet, ohne dass Sie irgendeinen Code anfassen müssen.

Schritt 2: Installation von Preloader Plus

1. Navigieren Sie zum WordPress Dashboard.
   • Melden Sie sich in Ihrem WordPress-Administrationsbereich an.
   • Über das Dashboard haben Sie Zugriff auf die Installation von Plugins und die Anpassung von Einstellungen.
2. Gehen Sie zu Plugins > Neu hinzufügen.
   • Klicken Sie auf das Plugins in der linken Seitenleiste und klicken Sie dann auf Neu hinzufügen.
3. Suchen Sie in der Suchleiste nach "Preloader Plus".
   • Geben Sie "Preloader Plus" in die Suchleiste ein und drücken Sie die Eingabetaste.
4. Klicken Sie auf Jetzt installieren und dann Aktivieren Sie.
   • Sobald Sie das Plugin gefunden haben, klicken Sie auf Jetzt installieren.
   • Nachdem die Installation abgeschlossen ist, klicken Sie auf Aktivieren Sie um das Plugin auf Ihrer Website zu aktivieren.

Nach der Aktivierung sehen Sie die Preloader Plus-Einstellungen in Ihrem WordPress-Dashboard.

Schritt 3: Konfigurieren der Preloader-Einstellungen

1. Öffnen Sie Preloader Plus Einstellungen vom Dashboard aus.
   • Gehen Sie zu Einstellungen > Preloader Plus um auf die Konfigurationsoptionen zuzugreifen.
2. Navigieren Sie zum Menüpunkt Allgemeine Einstellungen Registerkarte.
   • Hier können Sie den Preloader aktivieren oder deaktivieren und sein grundlegendes Verhalten einstellen.
3. Aktivieren Sie den Preloader indem Sie den Kippschalter einschalten.
   • Dadurch wird der Preloader auf Ihrer gesamten Website entsprechend den von Ihnen gewählten Einstellungen aktiviert.

Als nächstes müssen Sie entscheiden, wann und wo Ihr Preloader aktiv sein soll. Vielleicht möchten Sie ihn nur für Ihre Homepage, vielleicht aber auch für die gesamte Website.

• Anzuzeigende Seiten: Wählen Sie die Seiten aus, auf denen der Preloader sichtbar sein soll (z. B. Homepage, Alle Seiten usw.).
  • Tipp: Für ein besseres Nutzererlebnis sollten Sie den Preloader nur auf Seiten mit umfangreichen Inhalten aktivieren, die länger zum Laden brauchen.
• Frequenz anzeigen: Legen Sie fest, ob es auf dem Bildschirm angezeigt werden soll nur erste Seite laden oder für jedes Mal, wenn ein Besucher zu einer neuen Seite navigiert.
  • Tipp: Wenn Sie sie nur für das erste Laden der Seite verwenden, können Sie das Browsing-Erlebnis insgesamt verbessern, indem Sie sich wiederholende Ladeanimationen reduzieren.

Schritt 4: Wählen Sie Ihre Preloader-Animation

1. Gehen Sie zum Stil-Einstellungen Registerkarte.
   • Auf dieser Registerkarte können Sie das Aussehen Ihres Preloaders konfigurieren.
   • Beispiel: Sie können besuchen https://example.com um zu sehen, wie ein Logo-Animations-Preloader das Branding für ein kreatives Portfolio verbessern kann.
2. Preloader-Typ auswählen: Wählen Sie zwischen Spinner, Fortschrittsbalken oder benutzerdefinierter Animation.
   • Je nach dem Stil Ihrer Marke wählen Sie die Art von Preloader, die am besten zu Ihren Bedürfnissen passt.
   • Beispiel: Für eine E-Commerce-Website wie https://shopdemo.comEin Fortschrittsbalken eignet sich gut, um die Benutzer auf dem Laufenden zu halten.
3. Für Benutzerdefinierter PreloaderLaden Sie eine GIF- oder SVG-Datei Ihres Logos hoch, wenn Sie eine gebrandete Animation wünschen.
   • Klicken Sie auf Hochladen um Ihre eigene Preloader-Animation hinzuzufügen.

Ein individuelles GIF Ihres Markenlogos kann eine großartige Möglichkeit sein, um bei Ihren Besuchern einen Eindruck zu hinterlassen. Sie können Tools verwenden wie Canva oder Figma um einfache Logo-Animationen zu erstellen.

• Tipp: Stellen Sie sicher, dass Ihre benutzerdefinierte Animation leichtgewichtig ist, um den Ladevorgang nicht zu verlangsamen. Streben Sie eine Dateigröße der Animation von weniger als 200KB für optimale Leistung.

Schritt 5: Anpassen von Design und Timing

• Hintergrundfarbe: Passen Sie die Hintergrundfarbe an die Farbpalette Ihrer Marke an. Sie können eine Farbe verwenden, die mit Ihrem Logo kontrastiert, um es hervorzuheben.
  • Anweisungen: Klicken Sie auf den Farbwähler im Fenster Hintergrundfarbe und wählen Sie eine Farbe, die zum Thema Ihrer Website passt.
• Animation Dauer: Legen Sie die Dauer fest, wie lange die Animation abgespielt werden soll. Normalerweise sollte die Dauer unter 3 Sekunden funktioniert am besten, um die Aufmerksamkeit des Benutzers ohne Frustration zu halten.
  • Tipp: Testen Sie verschiedene Laufzeiten, um den Sweet Spot zu finden, bei dem der Preloader weder zu schnell noch zu langsam ist.
• Seite ein-/ausblenden: Verwenden Sie Einblend-/Ausblendeffekte, um einen sanfteren Übergang zwischen dem Preloader und dem eigentlichen Inhalt zu schaffen.
  • Tipp: Ein leichter Einblendungseffekt kann den Übergang ausgefeilter und weniger abrupt wirken lassen.

Integration von Preloader mit Elementor für mehr Kontrolle

Wenn Sie eine genauere Kontrolle darüber haben möchten, wo und wann Ihr Preloader erscheint, können Sie Preloader Plus mit Elementor integrieren, indem Sie Benutzerdefiniertes CSS von Elementor Funktion.

• In Elementor, die Seite bearbeiten wo Sie den Preloader hinzufügen möchten.
  • Navigieren Sie zu der Seite, die Sie bearbeiten möchten, und klicken Sie auf Mit Elementor bearbeiten.
• Öffnen Sie die Fortgeschrittene und scrollen Sie nach unten zu Benutzerdefiniertes CSS.
  • Klicken Sie auf das Fortgeschrittene auf der linken Seite und scrollen Sie dann nach unten, um die Registerkarte Benutzerdefiniertes CSS Feld.
• Fügen Sie CSS-Code hinzu, um Preloader-Animationen für bestimmte Abschnitte der Seite zu erstellen. Zum Beispiel:

/* Benutzerdefiniertes CSS für Preloader */
.preloader-section {
  animation: fadeIn 2s ease-in-out;
}

@keyframes fadeIn {
  0% { Deckkraft: 0; }
  100% { Deckkraft: 1; }
}

• Tipp: Verwenden Sie diese Funktion, um Preloader nur für kritische Bereiche hinzuzufügen, die länger zum Laden brauchen, wie z.B. Bildergalerien oder Videoeinbettungen. So bleibt der Rest der Seite schnell und reaktionsschnell.

Testen und Optimieren Ihres Preloaders

Jetzt, wo Sie Ihren Preloader eingerichtet haben, ist es wichtig, ihn zu testen. Hier sind einige Tipps:

• Auf verschiedenen Geräten prüfen: Verwenden Sie Tools wie BrowserStack um zu sehen, wie Ihr Preloader auf dem Handy, dem Tablet und dem Desktop aussieht. Stellen Sie sicher, dass er auf allen Geräten ein konsistentes Erlebnis bietet.
  • Anweisungen: Öffnen Sie BrowserStack, wählen Sie die Geräte aus, auf denen Sie testen möchten, und navigieren Sie zu Ihrer Website.
• Monitor Ladegeschwindigkeit: Denken Sie daran, dass ein Preloader das Erlebnis verbessern sollte, ohne Ihre Seite wesentlich zu verlangsamen. Verwenden Sie Tools wie GTmetrix oder Google PageSpeed Insights um sicherzustellen, dass die Ladegeschwindigkeit Ihrer Website optimiert ist.
  • Tipp: Wenn sich Ihr Preloader negativ auf die Ladezeiten auswirkt, sollten Sie die Größe der Animationsdatei optimieren oder die Verwendung von Preloadern auf bestimmte Seiten beschränken.
• Vermeiden Sie übermäßigen Gebrauch: Preloader-Animationen sind effektiv, aber wenn Sie sie auf jeder Seite verwenden, kann das die Besucher frustrieren. Setzen Sie sie strategisch ein - typischerweise auf umfangreicheren Seiten, die mehr Zeit zum Laden benötigen.
  • Tipp: Testen Sie das Benutzerverhalten mit und ohne Preloader auf bestimmten Seiten mit Tools wie Hotjar um festzustellen, ob Preloader die Benutzerfreundlichkeit verbessern oder beeinträchtigen.

Abschließende Überlegungen: So hebt sich Ihre Elementor Website ab

Ein gut gestalteter Preloader ist mehr als nur ein Ladebildschirm - er ist ein leistungsstarkes Branding-Tool und verbessert das Benutzererlebnis. Um Ihre Elementor-Website auf die nächste Stufe zu heben, sollten Sie sich nicht mit dem Hinzufügen eines Preloaders begnügen. Optimieren Sie kontinuierlich die Leistung Ihrer Website und überlegen Sie, wie jede Interaktion - vom Preloader bis zur Seitenanimation - zu Ihrer Markengeschichte beiträgt.

Mit diesen Schritten und Tipps haben Sie nun alles, was Sie brauchen, um einen benutzerdefinierten Preloader zu erstellen, der nicht nur die Aufmerksamkeit der Besucher auf sich zieht, sondern auch Ihre Markenidentität stärkt.