wordpress preloader

Wordpess Preloader

Wie du einen stylischen Wordpess Preloader für deine Divi Webseite bastelst

In diesem Divi Tutorial zeigen wir dir, wie du einen WordPress Preloader deiner Wahl in deine Webseite integrieren kannst. Ein Plugin brauchen wir dazu nicht und kostenlos ist es auch noch. Wenn du etwas Geld übrig hast, kannst du auch superschicke Preloader kaufen oder sogar einen custom Preloader für dich entwickeln lassen. Wie? Das zeigen wir dir jetzt!

1. Warum überhaupt einen Preloader integrieren?

Divi ist ein fantastisches Theme und WordPress ein cooles CMS. Aus Sicht der Performance allerdings, werden beide Technologien keinen Preis für Ladezeiten gewinnen. Erst recht, wenn man sich die Gewohnheiten eines durchschnittlichen WordPress Entwickler anschaut. Hier ein Plugin für den Tracking Code von Google Analytics, unaufgeräumte Mediatheken bis der Webspace platzt, 200 ausstehende Plugin Updates, obwohl man nur 183 Plugins installiert hat. On Top bringt Elegant Themes wöchentlich neue Features für den Divi Builder bekannt, die ja wirklich gut sind, aber eben Performance killen.

Kennst du es, wenn du eine Website aufruft, und in den ersten Millisekunden siehst, wie sich die Seite zusammenbaut?

webseite ohne preloader
Beispiel für eine Webseite mit zu vielen Plugins & ohne Preloader
Der Preloader gibt einem die Möglichkeit, das Laden der Webseite vor dem Besucher zu „verstecken“. D.h. die Webseite wird nach wie vor so geladen, wie sie geladen wird. Dem Besucher wird aber ein Screen gezeigt, auf dem er den Preloader sieht.
webseite mit preloader
Beispiel für eine Webseite mit WordPress Preloader
Preloader machen auch dann Sinn, wenn eine Webseite etwas länger zum Laden braucht, weil eventuell komplizierte Script geladen werden müssen. Der WordPress Preloader teilt dem Besucher mit „Warte noch in wenig. Die Webseite wird noch geladen“ und verhindert somit vielleicht einen Absprung des Besuchers.

2. WordPress Preloader Auswahl

Wo du coole & kostenlose WordPress Preloader findest

Im Netz gibt es mehr als genug Preloader Bibliotheken. Da wären z.B. icons8.com und loading.io. Wir werden hier ein mit einem Beispiel aus loading.io weitermachen.
Auf der Unterseite loading.io/spinner gibt eine gute Auswahl an kostenlosen & kostenpflichtigen Preloadern.

loading.io preloader
Kostenlose & kostenpflichtige Preloader auf loading.io
Klicke auf den Preloader und setze die Parameter (Farben, Größe, etc. ) wie du sie möchtest.
Wichtig: Setzte den Parameter „Transparent“ auf „ON“.
Anschließend lädst du die Datei als „SVG“ „ANIMATED“ herunter.

SVG?

Richtig! Es gibt auch noch andere Möglichkeiten einen WordPress Preloader umzusetzen. Z.B. über CSS, gif oder super performante Ansätze wie LottieFiles. Die Lösung mit Hilfe einer SVG Datei scheint uns am sinnvollsten, da man für relativ wenig Aufwand ein sehr solides Ergebnis erhält.

SVG vs GIF vs CSS

Format: SVG
Dateigröße: 1.021 Byte
Farben: Kräftig
Animation: Flüßig
Format: GIF
Dateigröße: 91.000 Byte
Farben: Ausgebleicht
Animation: Ruckelnd
Format: CSS
Dateigröße: 5.704 Byte
Farben: Kräftig
Animation: Flüßig
Hier ist übrigens der WordPress Preloader, den wir aktuell auf unserer eigenen Webseite verwenden. Falls du diesen auch für deine Zwecke verwenden möchtest, kannst du ihn gerne herunterladen.
Download WordPress Preloader

3. SVG Dateien in die WordPress Mediathek hochladen

Schon mal probiert eine SVG Datei in die WordPress Mediathek hochzuladen. Du wirst merken, dass es nicht funktionieren wird. WordPress akzeptiert standardmäßig keine Uploads von SVG Dateien über die Mediathek. Etwas PHP Code hilft uns hier aus der Patsche.

Navigiere zur funktions.php deines Child-Themes (du hast hoffentlich ein Child-Theme!) und füge folgenden Code am Ende der Datei ein.
                    

// Erlaubt Uploads von SVG
function cc_mime_types($mimes) {
 $mimes['svg'] = 'image/svg+xml';
 return $mimes;
}
add_filter('upload_mimes', 'cc_mime_types');

PHP Code, um den Upload von SVG Dateien über die WordPress Mediathek zu erlauben.
Nach dem Abspeichern der neuen functions.php kannst du deinen SVG Preloader wie gewohnt über die WordPress Mediathek hochladen.

4. CSS

Als nächstes kümmern wir uns um das Styling.

Navigiere zu deinen Custom Styles in WordPress, füge folgenden Code am des Textfeldes ein & speichere alles ab. Vergiss nicht den Link deiner SVG Datei, an der entsprechenden Stelle im Code einzufügen. Und wenn du möchtest, kannst du auch die Hintergrundfarbe anpassen.

css code einfuegen
So kommst du den Custom Styles deines Divi Templates.
                    

/* PRELOADER */ 
.preloader {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: #fefefe; /*Deine Hintergrundfarbe*/
   z-index: 100000;
   height: 100%;
   width: 100%;
   overflow: hidden !important;
}
.preloader .status {
   width: 100px;
   height: 100px;
   position: absolute;
   left: 50%;
   top: 50%;
   background-image: url(/double-ring.svg); /*Link zu deiner SVG Datei*/
   background-repeat: no-repeat;
   background-position: center;
   -webkit-background-size: cover;
   background-size: cover;
   margin: -50px 0 0 -50px;
}

CSS Code, um den Prealoder richtig zu positionieren und zu stylen.

5. JavaScript

Etwas JavaScript brauchen wir auch, um den Preloader korrekt ein- und auszublenden.

Navigiere zum head deines Divi Templates, füge den folgenden Code am Ende des Textfeldes ein und speichere alles ab.
css code einfuegen
So kommst du zum head-Bereich deines DIVI Templates.
                    

<!--Prealoder-->
<script type="text/javascript">
    jQuery(window).load(function () {
        "use strict";
        // will first fade out the loading animation
		if(  jQuery( '.et-bfb' ).length <= 0 && jQuery( '.et-fb' ).length <= 0  ){ 
			jQuery(".status").fadeOut();
			// will fade out the whole DIV that covers the website.
			jQuery(".preloader").delay(1000).fadeOut("slow");
		}else{
			jQuery(".preloader").css('display','none');
		}
    }); 
</script>

JavaScript Code, um den Prealoder ein- & auszublenden

6. HTML

Damit der Preloader auch auf jeder Seite angezeigt wird, brauchen wir noch etwas HTML Code.

Navigiere zum body-Bereich deines Divi Templates, füge den folgenden Code am Ende des Textfeldes ein und speichere alles ab.
css code einfuegen
So kommst du zum body-Bereich deines DIVI Templates.
                    

<!--Prelaoder-->
<div class="preloader">
	<div class="status"></div>
</div>

HTML Code, um den Prealoder auf jeder Seite darzustellen
Et voilà. Das war es schon. Der Preloader erscheint während die Webseite geladen wird und verschwindet mit einer weichen Fade-Animation wieder, wenn die Webseite fertig geladen ist.