OpenByt - Ihre ultimative Quelle für kostenloses WordPress-Wissen

Verbessern Sie Ihre Elementor-Website mit benutzerdefinierten Preloader-Animationen

f Lin

Inhaltsverzeichnis

Warum Preloader-Animationen wichtig sind

A preloader can transform the first impression of your Elementor website into something memorable. Instead of a blank page or the dreaded loading spinner, a well-designed preloader adds a touch of personality and keeps your visitors engaged as they wait for your content to appear. In this article, I’ll guide you through the process of creating and customizing preloader animations in Elementor, breaking it down into simple steps anyone can follow.

Imagine you’ve clicked on a link, and you’re stuck staring at a blank screen. It’s frustrating, right? Preloader animations solve this problem by providing visual feedback that the page is actively loading—keeping visitors entertained and reassured that their experience will be worthwhile. Not only do preloaders enhance user engagement, but they also help convey your brand’s personality through visual creativity.

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: Words like “Loading…” that appear and fade are a simple yet impactful option, adding a personal touch.
    • 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:

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.
    • From the dashboard, you’ll have access to install plugins and customize settings.
  2. Go to Plugins > Add New.
    • Klicken Sie auf das Plugins in der linken Seitenleiste und klicken Sie dann auf Neu hinzufügen.
  3. Search for “Preloader Plus” in the search bar.
    • Type “Preloader Plus” into the search bar and press Enter.
  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.

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.

Schritt 5: Anpassen von Design und Timing

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.

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

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

Testen und Optimieren Ihres Preloaders

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

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

A well-designed preloader is more than just a loading screen—it’s a powerful branding tool and user experience enhancer. To take your Elementor website to the next level, don’t stop at just adding a preloader. Continuously optimize your site’s performance and consider how each interaction—from preloaders to page animations—adds to your brand story.

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.

Die mobile Version verlassen