Wie passe ich die Seitenlade-Animation in Tilda an oder deaktiviere sie?
- Was ist die Seitenlade-Animation in Tilda?
- Wie kann man die Seitenlade-Animation deaktivieren?
- Wie kann man die Seitenlade-Animation anpassen?
- JavaScript-Methoden zur Steuerung der Animation
- Fazit
Was ist die Seitenlade-Animation in Tilda?
Tilda ist ein beliebtes Website-Baukastensystem, das seinen Nutzern eine einfache Möglichkeit bietet, ansprechende Webseiten zu erstellen.
Eines der Features von Tilda ist die sogenannte Seitenlade-Animation: Während die Seite lädt, wird eine Animation angezeigt, die dem Besucher signalisiert,
dass die Seite gerade im Hintergrund aufgebaut wird. Diese Animation sorgt für eine bessere Nutzererfahrung, kann aber in manchen Fällen entweder
Wie kann man die Seitenlade-Animation deaktivieren?
Um die Seitenlade-Animation in Tilda zu deaktivieren, gibt es mehrere Methoden, abhängig von der verwendeten Vorlage und den persönlichen
Gestaltungsmöglichkeiten im Projekt. Die einfachste Möglichkeit ist, eigenen CSS-Code hinzuzufügen, der die Animation unterdrückt.
Falls Sie Zugriff auf benutzerdefinierte CSS- oder JavaScript-Optionen in Ihrem Tilda-Projekt haben, können Sie folgenden Code verwenden:
/* Versteckt die Standard-Seitenlade-Animation */.t-preloader { display: none !important;}Dieser Code sorgt dafür, dass die gesamte Ladeanimation nicht mehr angezeigt wird. Fügen Sie diesen Code in Ihre benutzerdefinierten CSS-Styles ein, die Sie im Bereich Site Settings unter Additional CSS oder direkt im Block hinzufügen können.
Alternativ können Sie auch im Bereich Site Settings > User CSS diesen Code hinzufügen, um global die Animation zu deaktivieren.
Wie kann man die Seitenlade-Animation anpassen?
Wenn Sie die Seitenlade-Animation nicht komplett abschalten, sondern lieber an das Design Ihrer Seite anpassen möchten, stehen Ihnen ebenfalls verschiedene Möglichkeiten zur Verfügung.
Die Seitenlade-Animation wird meist durch CSS und teilweise JavaScript gesteuert. Um diese anzupassen, können Sie eigene CSS-Regeln schreiben, um beispielsweise Farben, Größe oder Formen zu ändern.
Der wichtigste Selektor ist meistens .t-preloader, der den Ladebildschirm beschreibt. Innerhalb dieses Elements befinden sich häufig weitere Elemente, wie etwa Kreise, Linien oder Logos,
Beispiel für eine Anpassung der Hintergrundfarbe und Animationselemente mithilfe von CSS:
/* Hintergrundfarbe der Ladeanimation ändern */.t-preloader { background-color: #1a1a1a !important;}/* Größe des Lade-Elements anpassen */.t-preloader__loader { width: 80px !important; height: 80px !important;}/* Farbe eines animierten Elements ändern */.t-preloader__loader span { background-color: #ff6600 !important;}Mit solchen CSS-Anpassungen können Sie die Ladeanimation deutlich individualisieren, ohne den Code der Plattform tiefgreifend zu verändern.
Zusätzlich können Sie auch eigene Grafiken oder Logos anstelle der Standard-Animation einbinden, indem Sie im Bereich Site Settings
JavaScript-Methoden zur Steuerung der Animation
Falls Sie mehr Kontrolle wünschen und Tilda Ihnen erlaubt, benutzerdefiniertes JavaScript hinzuzufügen, können Sie auch das Verhalten der Seitenlade-Animation über skriptgesteuerte Maßnahmen beeinflussen.
So lässt sich die Ladeanimation gezielt ausblenden oder Effekte ändern. Ein Beispiel zum automatischen Ausblenden der Animation nach vollständigem Laden der Seite könnte folgendermaßen aussehen:
window.addEventListener(load, function() { var preloader = document.querySelector(.t-preloader); if (preloader) { preloader.style.display = none; }});Dieses Skript sorgt dafür, dass die Ladeanimation unmittelbar nach dem vollständigen Laden der Webseite ausgeblendet wird. Beachten Sie, dass Tilda teilweise eigene Skripte nutzt, welche diese Logik schon enthalten können, sodass doppelte Änderungen zu unerwünschtem Verhalten führen könnten.
Fazit
Die Seitenlade-Animation in Tilda ist ein hilfreiches Feature, das sich mit einfachen Mitteln anpassen oder ganz deaktivieren lässt. Die schnellste Methode zur Deaktivierung ist das Hinzufügen eines kleinen CSS-Snippets, das den gesamten Ladebildschirm verbirgt. Für die Anpassung stehen CSS-Styling und gegebenenfalls JavaScript zur Verfügung, mit denen Farben, Größen oder die Sichtbarkeit verändert werden können.
Wenn Sie tiefere Veränderungen vornehmen möchten, empfiehlt es sich, die Dokumentation von Tilda genau zu studieren oder den Support zu kontaktieren, da individuelle Templates und Updates das Verhalten der Animation beeinflussen können.