Dieser Artikel erklärt, wie man Animation Customizations innerhalb von Funnels & Websites verwendet, um deine Seitengestaltung zu verbessern. Du wirst lernen, wie du genau kontrollierst, wie Elemente animiert werden – indem du Eigenschaften wie Scale, Duration, Delay und Easing direkt im Page Builder anpasst. Egal, ob du eine Landing Page, einen Funnel oder eine komplette Website erstellst, diese Werkzeuge helfen dir, flüssige, auffällige Animationen zu erstellen, ohne dass benutzerdefinierter Code oder Drittanbieter-Tools nötig sind. Am Ende wirst du wissen, wie man Animationen anwendet, anpasst und in der Vorschau anzeigt, um ein ansprechenderes Erlebnis für deine Besucher zu schaffen.
INHALTSVERZEICHNIS
Was sind Animation Customizations in Funnels & Websites?
Verbesserung des Animation Delay-Verhaltens
Wichtige Vorteile der Animation Customizations
So richtest du Animation Customizations ein
Häufig gestellte Fragen
Verwandte Artikel
Was sind Animation Customizations in Funnels & Websites?
Animation Customizations ist eine integrierte Funktion im Page Builder, die es dir ermöglicht, zu steuern, wie einzelne Elemente auf deinen Funnels und Websites animiert werden. Sie bietet ein dediziertes Einstellungs-Panel, in dem du Animationseffekte wie Scale, Duration, Delay und Easing anwenden und feinjustieren kannst – alles mit Echtzeit-Vorschau. Das Panel organisiert diese Steuerungen in klar beschriftete Abschnitte, sodass es einfach ist, einzustellen, wie Elemente erscheinen, verschwinden oder sich auf der Seite bewegen, ohne den Editor zu verlassen oder benutzerdefinierten Code zu verwenden.
Du kannst Animationen präzise anpassen:
Scale: von 0,5× bis 2× für subtile bis dramatische Effekte
Duration: von 0,1 bis 3 Sekunden, um das Tempo festzulegen
Delay: bis zu 5 Sekunden für gestaffelte Sequenzen
Easing: wähle zwischen Linear, Ease-In, Ease-Out und Ease-In-Out für sanfte Übergänge
Diese Einstellungen geben dir die vollständige Kontrolle über die visuelle Bewegung und helfen dir, individuellere und ansprechendere Seitendesigns zu erstellen.
Verbesserung des Animation Delay-Verhaltens
Animation Delays funktionieren jetzt genauer über Funnels und Websites hinweg. Elemente bleiben während der eingestellten Verzögerungszeit vollständig verborgen und werden erst sichtbar, wenn die Animation beginnt.
Früher konnten bestimmte Elemente kurz erscheinen, bevor die Verzögerung abgeschlossen war. Dieses Verhalten wurde korrigiert, um flüssigere, visuell konsistentere Animationen zu gewährleisten – besonders bei gestaffelten Animationssequenzen.
Keine zusätzliche Konfiguration ist erforderlich. Alle bestehenden Animation Delay-Einstellungen folgen automatisch dem verbesserten Verhalten.
Wichtige Vorteile der Animation Customizations
Animation Customizations verbessern sowohl deinen Design-Workflow als auch die Benutzererfahrung auf deinen Seiten. Folgendes kannst du erwarten:
Granulare Kontrolle: Passe jede Animation genau an, indem du Scale, Duration, Delay und Easing mit exakten Werten einstellst.
Echtzeit-Vorschau: Sieh deine Anpassungen sofort, sodass du Bewegungen ohne Ratespiel feinjustieren kannst.
Organisiertes Layout: Alle Steuerungen befinden sich in einem sauberen, intuitiven Panel, das den Bearbeitungsprozess optimiert.
Professioneller Schliff: Durch die Anpassung der Animationen kannst du die Aufmerksamkeit der Nutzer lenken, das Branding verstärken und dynamischere Interaktionen erzeugen – ohne Drittanbieter-Tools zu benötigen.
Diese Funktionen geben dir die Werkzeuge, um flüssige, wirkungsvolle Animationen direkt im HighLevel Page Builder zu erstellen.
So richtest du Animation Customizations ein
Du kannst Animationen für jedes Element in nur wenigen Schritten anwenden und anpassen:
1. Zugriff auf den Funnels-Bereich
Klicke im linken Sidebar-Menü auf Sites, dann wähle den Funnels-Tab oben auf dem Bildschirm. Dies öffnet die Liste aller Funnel-Projekte, die in deinem Konto verfügbar sind.
2. Funnel auswählen oder erstellen
Nutze die Suche für Funnels, um einen bestehenden Funnel zu öffnen, oder klicke auf + New Funnel, um einen neuen zu erstellen. Dies führt dich zum Funnel Steps-Bildschirm, auf dem du jeden Schritt deines Funnels verwalten und bearbeiten kannst.
3. Seite zum Animieren auswählen
Wähle aus der Liste der Funnel-Schritte links die Seite aus, auf der du Animationen implementieren möchtest. Beispiele sind Landing Page, Schedule Page oder Thank You Page. Die Vorschau und Bearbeitungsoptionen der ausgewählten Seite werden geladen.
4. Page Editor öffnen
Klicke auf den Edit-Button unter der Seitenvorschau, dann wähle Edit in a New Tab für ein Vollbildbearbeitungserlebnis. Dadurch wird die Seite im Builder geöffnet, wo du Animationseinstellungen anwenden kannst.
5. Element zum Animieren auswählen
Klicke auf das spezifische Element, das du animieren möchtest – zum Beispiel Button, Textblock oder Bild. Die Einstellungen des Elements erscheinen im rechten Panel des Builders.
6. Animation Settings öffnen
Mit ausgewähltem Element klicke auf den Animations-Tab im rechten Panel. Hier verwaltest du Entrance- und Hover-Animationseffekte für das gewählte Element.
7. Entrance Animation auswählen
Klicke auf Entrance Animation, um anzupassen, wie das Element beim Laden auf der Seite erscheint. Dies öffnet eine Liste der verfügbaren Animationsstile.
8. Animationsstil auswählen
Durchsuche die Optionen wie Fade, Slide, Bounce und mehr. Klicke auf einen Stil – zum Beispiel “Fade In” oder “Slide Right” – um sofort eine Vorschau zu sehen, wie das Element in die Ansicht animiert wird.
9. Adjust Animation klicken
Nachdem du einen Animationsstil ausgewählt hast, klicke auf Adjust Animation am unteren Rand des Panels. Dies öffnet die erweiterten Einstellungen, um das Animationsverhalten feinzujustieren.
10. Animationsverhalten feinabstimmen
Nutze die Steuerungen, um Scale, Duration, Delay und Easing der Animation anzupassen. Diese Einstellungen helfen dir zu kontrollieren, wie schnell, wie sanft und wann die Animation für das ausgewählte Element abgespielt wird.
11. Easing-Verhalten anpassen
Öffne das Easing-Dropdown, um den Fluss der Animation zu steuern. Wähle Optionen wie Linear, Ease In, Ease Out oder Ease In Out, um zu definieren, wie die Bewegung beschleunigt oder verlangsamt wird und für einen flüssigeren visuellen Effekt sorgt.
Häufig gestellte Fragen
F: Brauche ich Vorerfahrung mit Animationen, um diese Funktion zu nutzen?
A: Nein, es ist keine Erfahrung erforderlich. Die Benutzeroberfläche ist für alle Nutzer intuitiv gestaltet, mit Echtzeit-Feedback und klar beschrifteten Steuerungen.
F: Welche Arten von Animationen kann ich anwenden?
A: Du kannst aus einer Vielzahl von Animationsstilen wählen und sie mit den verfügbaren Steuerungen für Timing, Scale und Easing anpassen.
F: Kann ich Animationen vor der Veröffentlichung in der Vorschau sehen?
A: Ja, alle Animationseinstellungen werden live im Page Builder angezeigt, sodass du die Effekte sofort sehen kannst.
F: Was bewirkt Easing in einer Animation?
A: Easing bestimmt, wie sich die Animation bewegt – ob sie langsam startet, langsam endet oder mit konstanter Geschwindigkeit abläuft.
F: Kann ich mehrere Animationen auf ein Element anwenden?
A: Pro Element kann nur eine Animation angewendet werden. Du kannst jedoch verschiedene Animationen auf mehrere Elemente anwenden, um koordinierte Effekte zu erzeugen.
Verwandte Artikel
• Navigation Menus im HighLevel Funnel Builder
• Scroll zu Elementen oder Sektionen in Websites oder Funnels
• Wie man mehrere Popups pro Seite für Funnels und Websites erstellt