Wenn Sie eine Website mit Elementor erstellen, ist es wichtig, dass Sie ein reibungsloses visuelles Erlebnis für Ihre Benutzer schaffen.PreloaderEs ist möglich, Ladeanimationen anzuzeigen, bevor der Seiteninhalt vollständig geladen ist. Im Folgenden geben wir Ihnen eine Schritt-für-Schritt-Anleitung, wie die Elementor Pro Erstellen Sie einen Preloader in der Datei

Was ist ein Preloader?

Ein Preloader ist normalerweise ein Bild oder eine Animation, die auf einer Website angezeigt wird, bevor der Inhalt vollständig geladen ist. Mit Preloadern können Markenlogos oder spezielle Animationen angezeigt werden, um den Nutzern ein professionelleres und flüssigeres Surferlebnis zu bieten.

Schritt 1: Erstellen Sie eine Titelvorlage

Erstens ist es erforderlich, dassEine Titelvorlage erstellenum den Preloader auf alle Seiten der Website anzuwenden.
Betriebsverfahren:

1. Navigieren Sie zum Elementor Dashboard im Menü Vorlage > Themen-Generator.

2. Streik (auf der Tastatur) Bildunterschrift und klicken Sie dann auf das Feld + Symbol, um eine neue Titelvorlage zu erstellen.

3. Nachdem Sie die Vorlage eingerichtet haben, klicken Sie auf Beitrag und wenden Sie die Anzeigebedingungen an.

Das System öffnet sich Bedingungen anzeigen Fenster. Wählen Sie hier den Bereich der Seiten aus, auf die Sie diese Kopfzeilenvorlage anwenden möchten. Wählen Sie die Gesamte Website wird sichergestellt, dass dieser Titel auf allen Seiten angezeigt wird. Bestätigen Sie die Auswahl und klicken Sie auf Speichern und schließen um die Freigabe abzuschließen.

Schritt 2: Fügen Sie den Container hinzu und legen Sie die CSS-ID fest

Fügen Sie innerhalb der Titelvorlage einen Container hinzu, der die vorinstallierte Animation enthält.
Betriebsverfahren:

1. Fügen Sie auf der Bearbeitungsseite der Titelvorlage eineinspaltiger Container.

2. Klicken Sie auf das Symbol des Containershohes Niveausetzen Sie die CSS-ID auf der_vorladen.

Schritt 3: Ein Widget-Symbol oder -Bild hinzufügen

Fügen Sie dem Preloader visuelle Effekte hinzu, z. B. Symbole oder Markenlogos.
Betriebsverfahren:

1. Fügen Sie in dem Container die Ikone (Computertechnik) vielleicht Bildmaterial Widget.

2. In dem Widgethohes NiveauMenü, setzen Sie die CSS-ID auf der_loader.

3. gehen inTypändern Sie die Größe des Symbols (empfohlene Einstellung ist 1), um es an Ihre Bedürfnisse anzupassen.

Schritt 4: HTML-Widget zum Ausführen von Skripten hinzufügen

Als nächstes fügen Sie das HTML-Widget hinzu und fügen den JavaScript-Code ein, um das Ein- und Ausblenden des Preloaders zu steuern.
Betriebsverfahren:

1. Unter dem Symbol oder dem Bild-Widget hinzufügen HTML Widget.

2. Fügen Sie den folgenden Code ein:

<script> document.addEventListener('DOMContentLoaded', function () { setTimeout(function () { document.getElementById('der_preload').style.display = 'none'; document.getElementById('content').classList.add('visible'); }, 2000); }); </script>

3. In der HTML-Widget-Dateihohes Niveausetzen Sie die CSS-ID auf der_preloader_adds, um das Widget auszublenden und unnötigen Leerraum zu vermeiden.

Schritt 5: Benutzerdefiniertes CSS hinzufügen

Damit der Preloader funktioniert, fügen Sie etwas CSS-Code hinzu, um den Preloader-Effekt zu verbessern.

1. Klicken Sie auf das Symbol für die Seiteneinrichtung, um das Fensterhohes NiveauMenü.

2. Fügen Sie den folgenden Code in das Feld Custom CSS ein:

#der_preload { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #fff; display: flex; align-items. center; justify-content: center; z-index: 1000; } #der_loader { border: 8px solid #363636; border-top: 8px solid #3498db; border- radius: 50%; width: 50px; height: 50px; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } #der_preloader_adds { display: none; }

Schritt 6: Veröffentlichen und testen Sie den Preloader

Veröffentlichen Sie Ihre Vorlage undEinstellung der Anzeigebedingungenum sicherzustellen, dass der Preloader auf der angegebenen Seite korrekt angezeigt wird.
Betriebsverfahren:

1. Streik (auf der Tastatur) Beitragwählen Sie im Pop-up-Fenster Anzeigebedingungen Gesamte Website.

2. Speichern Sie die Einstellungen und besuchen Sie die Seite Ihrer Website, um zu überprüfen, ob der Preloader wie erwartet funktioniert.

Zusammenfassungen

Mit den obigen Schritten haben Sie erfolgreich einen benutzerdefinierten Elementor Pro Preloader erstellt. Sie können den Preloader noch weiter personalisieren, indem Sie den CSS- und JavaScript-Code anpassen, um ihn mit Ihrem Markenstil in Einklang zu bringen.