Einführung

Eine effektive Möglichkeit, dieses Erlebnis zu verbessern, ist das Hinzufügen eines Preloaders - ein Animation oder Bild das erscheint, während der Seiteninhalt im Hintergrund geladen wird. So erhalten die Benutzer einen nahtlosen Übergang, während sie warten, und Ihre Website wirkt ausgefeilt und professionell. In dieser Anleitung gehen wir die einzelnen Schritte zur Einrichtung einer Preloader in Elementor ProDamit können Sie individuelle Animationen oder Markenlogos anzeigen, die die Identität Ihrer Website unterstreichen.

Zum Klicken gehen Sie zu Elementor Pro Original-Kaufkanal.

Was ist ein Preloader und warum sollte man ihn verwenden?

Ein Preloader ist eine Animation oder Grafik als Platzhalter, die angezeigt wird, während der Inhalt Ihrer Website geladen wird. Dies kann besonders für Seiten mit umfangreichen Inhalten nützlich sein, die länger zum Laden brauchen. Die Verwendung eines Preloaders sorgt für ein besseres Benutzererlebnis, da er die wahrgenommene Ladezeit verkürzt, die Benutzer bei der Stange hält und verhindert, dass sie teilweise geladene Seiten sehen. Außerdem können Sie mit einem Preloader Ihr Branding präsentieren und Ihrer Website ein wenig Persönlichkeit verleihen.

Wie man einen Preloader in Elementor Pro erstellt

Schritt 1: Erstellen Sie eine Kopfzeilenvorlage

Der erste Schritt ist eine Kopfzeile erstellen Vorlage die den Preloader enthält. Wenn Sie den Preloader in einer Kopfzeilenvorlage platzieren, können Sie sicherstellen, dass er auf allen Seiten Ihrer Website einheitlich angezeigt wird.

Zugriff auf den Theme Builder:

• Gehen Sie zu Ihrem Elementor Dashboard, navigieren Vorlagen, und wählen Sie Theme Builder.

Eine neue Kopfzeilenvorlage erstellen:

• Suchen Sie im Theme Builder die Option Kopfzeile section and click the + Symbol, um eine neue Vorlage zu erstellen.

• Wählen Sie eine Vorlage und klicken Sie auf Einfügen, um die Seite aufzurufen.

Veröffentlichen Sie die Vorlage:

• Nachdem Sie Ihre Kopfzeile entworfen haben, klicken Sie auf veröffentlichen.

• Wenn Sie nach den Anzeigebedingungen gefragt werden, wählen Sie Gesamte Website um sicherzustellen, dass der Preloader auf jede Seite Ihrer Website angewendet wird.

• Klicken Sie auf Speichern & Schließen.

Schritt 2: Fügen Sie einen Container hinzu und legen Sie eine CSS-ID fest

Fügen wir nun eine Container die die Preloader-Animation enthalten wird. Festlegen einer eindeutigen CSS-ID für diesen Container ermöglicht es uns, ihn später mit CSS und JavaScript auszurichten.

Einen Container hinzufügen:

• Fügen Sie innerhalb Ihrer neuen Kopfzeilenvorlage einen einspaltigen Container hinzu.

Legen Sie die CSS-ID fest:

• Gehen Sie zum Fortgeschrittene in den Einstellungen des Containers.

• In der CSS-ID Feld, geben Sie ein abc_vorladen. Diese ID wird verwendet, um benutzerdefiniertes CSS und JavaScript anzuwenden, um das Verhalten des Preloaders zu steuern.

Schritt 3: Fügen Sie ein Icon oder ein Bild-Widget hinzu

So erstellen Sie die visuelles Element Ihres Preloaders, können Sie ein Ikone oder Bild Widget, um entweder ein Ladesymbol oder das Logo Ihrer Marke anzuzeigen.

Das Widget hinzufügen:

• Sie können dem Container ein Symbol- oder Bild-Widget hinzufügen, je nachdem, ob Sie ein Standard-Ladesymbol oder ein benutzerdefiniertes Logo wünschen.

Legen Sie die CSS-ID für das Widget fest:

• Gehen Sie zum Fortgeschrittene in den Einstellungen des Widgets und setzen Sie die CSS-ID auf abc_loader.

Das Icon oder Bild gestalten:

• Navigieren Sie zum Menüpunkt Stil und passen Sie die Größe des Symbols oder Bildes an Ihr Design an. Es ist oft am besten, Icons mit einer Größe von etwa 1px.

Schritt 4: Fügen Sie ein HTML-Widget zur Steuerung des Preloaders hinzu

Als nächstes fügen wir ein HTML-Widget hinzu, das JavaScript enthält, um zu steuern, wann der Preloader angezeigt wird und wann er verschwindet. Dieses Skript blendet den Preloader nach einer kurzen Verzögerung aus, so dass Ihre Inhalte reibungslos geladen werden können.

Fügen Sie das HTML-Widget hinzu:

• Fügen Sie unter dem Icon- oder Bild-Widget ein HTML-Widget hinzu.

JavaScript-Code einfügen:

• Fügen Sie in das HTML-Widget den folgenden JavaScript-Code ein:

<script>
  document.addEventListener('DOMContentLoaded', function () {
    setTimeout(function () {
      document.getElementById('abc_preload').style.display = 'none';
      document.getElementById('content').classList.add('visible');
    }, 2000); // Adjust the delay as needed (in milliseconds)
  });
</script>

Dieser Code blendet den Preloader 2 Sekunden nach Beginn des Ladens des Seiteninhalts aus. Basierend auf der durchschnittlichen Ladezeit Ihrer Website können Sie die 2000 Wert, um die Verzögerung (in Millisekunden) zu erhöhen oder zu verringern.

Legen Sie die CSS-ID für das HTML-Widget fest:

• In der HTML-Widget-Datei Fortgeschrittene setzen Sie die CSS-ID auf abc_preloader_adds um unbeabsichtigte Abstände zu vermeiden.

Schritt 5: Hinzufügen von benutzerdefiniertem CSS für die Gestaltung des Preloaders

Wenn die Struktur vorhanden ist, werden wir benutzerdefiniertes CSS hinzufügen um den Preloader-Container und die Ladeanimation zu gestalten.

Benutzerdefinierte CSS-Einstellungen öffnen:

• Klicken Sie auf die Seite einstellen (Zahnrad-Symbol) im Elementor-Panel.

• Gehen Sie zum Fortgeschrittene und öffnen Sie die Registerkarte Benutzerdefiniertes CSS Abschnitt.

• Fügen Sie den folgenden CSS-Code ein:

#abc_preload {
  Position: fixiert;
  top: 0;
  links: 0;
  Breite: 100%;
  Höhe: 100%;
  Hintergrund: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

#abc_loader {
  border: 8px solid #363636;
  border-top: 8px solid #3498db;
  border-radius: 50%;
  Breite: 50px;
  Höhe: 50px;
  animation: spin 1s linear unendlich;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

#abc_preloader_adds {
  Anzeige: keine;
}

• Dieser Code wird:
  • Bedecken Sie die gesamte Seite mit einem weißen Hintergrund, bis der Preloader ausgeblendet wird.
  • Zentrieren Sie den Lader (#abc_loader) sowohl vertikal als auch horizontal auf der Seite.
  • Animieren Sie den Lader auf unbestimmte Zeit drehen.

Schritt 6: Veröffentlichen Sie die Vorlage und testen Sie den Preloader

Veröffentlichen Sie die Kopfzeilenvorlage:

• Klicken Sie auf veröffentlichen und bestätigen Sie die Anzeigebedingungen als Gesamte Website um sicherzustellen, dass der Preloader auf Ihrer gesamten Website aktiv ist.

Testen Sie den Preloader:

• Besuchen Sie Ihre Website, um den Preloader in Aktion zu sehen. Wenn Ihnen die Ladezeit zu kurz oder zu lang erscheint, passen Sie die Verzögerung im JavaScript-Code nach Bedarf an.

Fazit

Das Hinzufügen eines Preloaders zu Ihrer Elementor Pro Website verbessert die Benutzererfahrung, indem es einen nahtlosen Übergang schafft, während der Inhalt geladen wird. Diese Animation oder Grafik fesselt die Benutzer, verkürzt die wahrgenommenen Ladezeiten und unterstreicht die Identität Ihrer Marke mit benutzerdefinierten visuellen Elementen wie Logos oder Ladesymbolen. Der Einrichtungsprozess umfasst:

• Erstellen einer Kopfzeilenvorlage.
• Hinzufügen eines Containers für den Preloader.
• CSS und JavaScript werden verwendet, um das Aussehen und Verhalten zu steuern.

Ein gut gestalteter Preloader, der anpassbar und reaktionsschnell ist, verleiht Ihrer Website den letzten Schliff und sorgt für ein reibungsloses, professionelles Erlebnis auf allen Geräten.

FAQs

1. Welche Vorteile bietet die Verwendung eines Preloaders?

Ein Preloader kann die Benutzererfahrung verbessern, indem er die wahrgenommene Ladezeit verkürzt, die Benutzer bei der Stange hält und Ihrer Website ein professionelles Aussehen verleiht. Außerdem verhindert er, dass Benutzer teilweise geladene Seiten sehen, und sorgt so für ein angenehmeres Surferlebnis.

2. Kann ich die Animation des Preloaders anpassen?

Ja, Sie können die Preloader-Animation anpassen, indem Sie das CSS im Code ändern. Sie können das Element #abc_loader so ändern, dass es verschiedene Arten von Animationen, Farben, Größen und andere visuelle Effekte enthält. Falls gewünscht, können Sie das Symbol durch ein GIF oder eine andere benutzerdefinierte Animation ersetzen.

3. Wie kann ich die Dauer des Preloaders einstellen?

Im JavaScript-Code sehen Sie in der Funktion setTimeout einen Wert von 2000, der die Verzögerung in Millisekunden angibt. Sie können diesen Wert ändern, um die Zeit, die der Preloader sichtbar ist, zu erhöhen oder zu verringern. Wenn Sie den Wert zum Beispiel auf 3000 ändern, wird der Preloader 3 Sekunden lang angezeigt.