Der Lader-Block sorgt für ein nahtloses Erlebnis für deine Nutzer:innen, indem er visuell zeigt, dass ihre Eingaben gerade verarbeitet werden. So wissen sie immer, dass im Hintergrund etwas passiert – und das steigert den wahrgenommenen Wert deines Flows.
Ein gut platzierter Lader lässt deinen Flow dynamischer wirken, verstärkt das Gefühl der Personalisierung und kann sogar die Konversionsraten erhöhen. Egal, ob du eine komplexe Berechnung simulieren oder einfach für sanftere Übergänge zwischen den Schritten sorgen möchtest – der Lader-Block hält deine Nutzer engagiert und fokussiert.
❗ Wichtig: Navigation per Lader funktioniert nur im live flow.
Inhalt bearbeiten
Nach dem Klick auf einen Block findest du rechts den Bereich Inhalts.
Standard-Lader-Animation
Die Standard-Lader-Animation übernimmt immer die Primärfarbe deines Flows. Eine individuelle Anpassung ist nicht möglich – ändere einfach die Primärfarbe oder nutze Custom CSS.
Eigene Loader-Animation
Du kannst auch deine eigene Animation hinzufügen. Lade z. B. ein GIF direkt im Lader-Block hoch. Wir empfehlen ein GIF mit einem Endlos-Loop. Wähle eine neue Datei oder benutze ein Bild aus deiner Bildbibliothek.
Lottie-Dateien
Du kannst auch Lottie-Dateien in deinen Lader-Block hochladen. Damit hast du noch mehr Möglichkeiten, deinen Heyflow individuell zu gestalten und mit komplexeren Animationen spannender zu machen. Lerne mehr hier.
Einstellungen anpassen
Nach dem Klick auf einen Block findest du rechts den Bereich Einstellungen. Hier passt du Optionen, Darstellung und Verhalten des Blocks so an, wie es zu deinem Flow passt.
Allgemein
Mit der Option Deaktiviert verhinderst du die automatische Navigation, während die Wartezeit festlegt, nach wie vielen Sekunden die Nutzer:innen weitergeleitet werden.
Navigation
Bestimme, wohin der Benutzer nach der Ladeanimation weitergeleitet wird:
Nächste Seite: Immer zur nächsten Seite gehen
Zur Seite springen: Immer zu einer bestimmten Seite gehen
Konditionale Logik: Gehe abhängig von der Antwort auf unterschiedliche Seiten
Weiterleitung: Zu einer anderen Website navigieren
Modal schließen: Wenn du deinen Flow als Popup eingebettet hast, wird er mit dieser Aktion geschlossen
Erscheinungsbild
Lege die Sichtbarkeit des Blocks so fest, dass er nur auf Mobilgeräten oder Desktops angezeigt oder vollständig ausgeblendet wird. Du kannst auch eine Hintergrundfarbe für den Block auswählen.
Abstände
Definiere die Abstände nach oben, unten, links und rechts mit einer Pixelangabe.
Lottie-Dateien
Du kannst auch Lottie-Dateien in deinen Lader-Block hochladen. Damit hast du noch mehr Möglichkeiten, deinen Heyflow individuell zu gestalten und mit komplexeren Animationen spannender zu machen.
LottieFiles (verfügbar unter lottiefiles.com oder anderen Tools wie Jitter) ist eine Plattform für animierte Vektorgrafiken im eigenen Lottie-Format. Lottie ist ein leichtgewichtiges, plattformübergreifendes Animationsformat, das wenig Speicherplatz benötigt und dadurch eine sehr hohe Performance bietet.
So nutzt du Lottie in deinem Heyflow
1. Registrieren und einloggen
Gehe auf lottiefiles.com/de und klicke oben rechts auf "Log in". Falls du noch keinen Account hast, erstelle einen neuen unter "Register". Du kannst dich mit deinem Google-Account registrieren oder die Anmeldung per E-Mail bestätigen.
2. Animation auswählen
Nutze die Suchleiste oder stöbere durch die Kategorien. Klicke auf eine Animation, um zur Detailansicht zu gelangen. Achte auf das Farbsymbol oder die Kennzeichnung "Customizable", um zu sehen, ob die Farben anpassbar sind.
💡 Tipp: Schau dir die verschiedenen Kategorien bei Lottie an – zum Beispiel Ladeanimationen, Fortschrittsanzeigen oder Pfeile.
3. Farben anpassen
Falls verfügbar, findest du in der Detailansicht die Option "Farbpalette" oder "Farben bearbeiten". Hier kannst du Farben individuell ändern – entweder durch Eingabe der Farbwerte oder durch direkte Auswahl. Die Vorschau aktualisiert sich automatisch.
🔎 Nicht alle Animationen sind anpassbar. Falls keine Farboption angezeigt wird, kann die Animation nicht geändert werden.
4. Animation herunterladen
Klicke auf "Download" und wähle das Lottie-Format. Die Datei wird sofort generiert und steht zum Download bereit.
5. In den Loader-Block hochladen
Öffne die Lader-Block-Einstellungen in deinem Heyflow. Gehe zum Reiter "Darstellung" und klicke auf "Hochladen" neben "Eigene Visuals", um deine Lottie-Datei hinzuzufügen.