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.

Hinzufügen des Lader Blocks

Im Tab "Blöcke" gehe zu "Navigation" und ziehe den Lader-Block in deinen Heyflow
Passe die Einstellungen wie Wartezeit und Navigation nach Bedarf an
Lade eine eigene Lader-Animation hoch – entweder als GIF oder als Lottie-Datei
Publiziere deinen heyflow und schon bist du startklar!

Loader-Animationen

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.

LottieFiles (verfügbar unter lottiefiles.com) 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.

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.

Bearbeitungsoptionen

Allgemein

Deaktiviert: Deaktiviere die automatische Navigation.
Wartezeit in Sekunden: Bestimmt die Zeit, bevor der Nutzer weitergeleitet wird.
Navigation: Bestimme, wohin der Benutzer nach der Ladeanimation weitergeleitet wird.

Abstand

Oben, Unten, Links und Rechts: Über diese Optionen kannst du den Abstand zu allen Seiten festlegen. Verwende hierzu entweder den Schieberegler oder lege die genaue Pixelanzahl fest.

Aussehen

Sichtbarkeit: Hierüber kannst du auswählen, ob der Block nur in der mobilen bzw. Desktop Version angezeigt wird oder diesen gänzlich verstecken.
Hintergrundfarbe: Du kannst du eine Farbe auswählen, die als Hintergrund für den Block genutzt wird.
Eigene Animation: Lade deine eigene, benutzerdefinierte Animation hoch, um den Block noch mehr zu personalisieren.

Verwandte Artikel