Trick # 502 | Dieser Beitrag beinhaltet 691 Wörter. – Geschätzte Lesezeit: ca. 4 Minuten.
Ein Pre-Loader ist in der Regel eine einfache Animation, die angezeigt wird, wenn Ihre Website geladen wird. Er kann äusserst hilfreich sein, wenn eine Website komplex ist und ihre Ladezeit einige Sekunden beträgt. Um das Interesse Ihrer Besucher aufrechtzuerhalten und zu verhindern, dass sie durch das Warten frustriert werden, sollten Sie einen Pre-Loader erwägen. Wie Sie Ihre Divi-Website mit einem Pre-Loader versehen, zeigen wir in diesem Tutorial.
Natürlich können Sie Ihren Pre-Loader als animiertes GIF-File selber erstellen. Alternativ können Sie aber auch ein animiertes GIF-File downloaden. Etwa bei Pixelbuddha, der eine Serie runde Pre-Loaders anbietet, oder bei Codrops, wo Sie eckige GIFs finden.
Für unser Beispiel haben wir uns für einen runden Pre-Loader entschieden und zwar für diesen:
Wählen Sie Ihr File aus und laden Sie es zunächst in die WordPress-Mediathek.
Nun benötigen Sie noch einen Block CSS-Code, den Sie in das CSS-Stylesheet Ihrer Website kopieren müssen. Das Stylesheet können Sie im Backend unter Design/Customizer/Zusätzliches CSS bearbeiten:
.preloader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #fefefe;
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(https://domain.ch/PFAD-ZU-IHREM-PRE-LOADER.gif);
background-repeat: no-repeat;
background-position: center;
-webkit-background-size: cover;
background-size: cover;
margin: -50px 0 0 -50px;
}Auf Zeile 19 des Codes müssen Sie den Platzhalter mit dem Pfad zu Ihrem eigenen Pre-Loader ersetzen.
Nun folgt ein Script, welches Sie in den <head>-Bereich Ihrer Website platzieren. Sie können den <head>-Bereich im Backend unter Divi/Theme-Optionen/Integration bearbeiten:
<script type="text/javascript">
jQuery(window).load(function () {
"use strict";
if( jQuery( '.et-bfb' ).length <= 0 && jQuery( '.et-fb' ).length <= 0 ){
jQuery(".status").fadeOut();
jQuery(".preloader").delay(1000).fadeOut("slow");
}else{
jQuery(".preloader").css('display','none');
}
});
</script> Und am Schluss kommt noch ein Stück HTML-Code. Diesen kopieren Sie in ein Divi-Code-Modul auf jenen Seiten, die den Preloader zeigen sollen. Oft wird dies die gesamte Website sein, womit Sie auch ein Template bemühen können – oder den Code ganz einfach in ein Code-Modul innerhalb des Divi-Theme-Builders platzieren:
<div class="preloader">
<div class="status"></div>
</div>Wenn alles rund läuft, sollte der Pre-Loader nun funktionieren. In diesem Beitrag ist er bereits aktiviuert. Für einen Test laden Sie den Beitrag mit dem folgenden Button neu:
Werbung
Werbung
