Zum Hauptinhalt springen

Sichtbarkeit von Blöcken in Heyflow festlegen

Lerne, wie du die Sichtbarkeit von Blöcken in Heyflow festlegst. Zeige oder verstecke Blöcke auf bestimmten Geräten oder nutze Bedingungen, um Inhalte nur bei erfüllten Kriterien anzuzeigen.

⭐ Verfügbar im folgenden Paket: Basis-Paket (inkl. in allen Plänen)

⭐ Verfügbar in den folgenden Plänen: Basic, Pro, Agency, Business

👀 Nicht sicher, welchen Plan du hast? Überprüfe dein Abonnement.

Mit der Block-Sichtbarkeit in Heyflow legst du fest, wann und wo Inhalte in deinem Flow angezeigt werden. Du kannst Blöcke auf bestimmten Geräten ein- oder ausblenden oder Bedingungen definieren, damit sie nur unter bestimmten Voraussetzungen erscheinen. So erstellst du dynamischere und personalisierte Nutzererlebnisse.


Sichtbarkeit nach Gerät

In den Einstellungen eines Blocks kannst du die Standard-Sichtbarkeit festlegen. Damit bestimmst du, auf welchen Geräten ein Block angezeigt wird.

Du kannst zwischen folgenden Optionen wählen:

  • Alle (Mobil & Desktop) – Der Block ist auf allen Geräten sichtbar.

  • Nur Mobil – Der Block wird nur auf mobilen Geräten angezeigt.

  • Nur Desktop – Der Block wird nur auf Desktop-Bildschirmen angezeigt.

  • Versteckt – Der Block ist auf keinem Gerät sichtbar.

Das ist praktisch, wenn du unterschiedliche Inhalte je nach Bildschirmgröße anzeigen möchtest. Zum Beispiel scrollen mobile Nutzer oft mehr, daher könntest du einen anderen CTA-Button auf Mobilgeräten anzeigen als auf dem Desktop.


Bedingte Sichtbarkeit

In den Blockeinstellungen kannst du die Bedingte Sichtbarkeit anpassen. Lege hier Regeln fest, unter welchen ein Block angezeigt oder ausgeblendet wird.

  1. Füge deine Bedingungen hinzu. Dafür hast du verschiedene Möglichkeiten:

    1. Wähle einen Block aus. Dabei kannst du Eingaben aus folgenden Blöcken nutzen: Bildauswahl, Mehrfachauswahl-, Eingabefeld-, Schieberegler-, Skala-, Icon-Bewertung-, Auswahl-Block
      💡 Hinterlege ein System-Label, um deinen gewünschten Eingabeblock schneller zu finden.

    2. Wähle eine Formel aus oder erstelle eine neue Formel für deine Regel.

    3. Wähle den Telefonnummer-Status, wie z.B. OTP-Status oder Netzwerkvalidierungsstatus.

  2. Je nach Blocktyp kannst du dann aus folgenden Optionen wählen:

    1. Ist gleich: Prüft, ob die Eingabe exakt gleich dem gewählten Wert ist

    2. Ist nicht gleich: Prüft, ob die Eingabe nicht gleich dem gewählten Wert ist

    3. Enthält: Prüft, ob die Eingabe den gewählten Wert enthält

    4. Enthält nicht: Prüft, ob die Eingabe den gewählten Wert nicht enthält

    5. Kleiner als: Prüft, ob die Eingabe kleiner als der gewählte Wert ist

    6. Kleiner gleich: Prüft, ob die Eingabe kleiner oder gleich dem gewählten Wert ist

    7. Größer als: Prüft, ob die Eingabe größer als der gewählte Wert ist

    8. Größer gleich: Prüft, ob die Eingabe größer oder gleich dem gewählten Wert ist

    9. Ist leer: Prüft, ob keine Eingabe gemacht wurde

    10. Ist nicht leer: Prüft, ob eine Eingabe gemacht wurde

  3. Wähle einen Wert aus, z.B. aus einer Liste von Optionen oder einem von dir gegebenen Wert. Wenn keine Optionen vorgegeben sind, kannst du diesen auch leer lassen.

  4. Über das Plus-Zeichen kannst du auch eine Konditionengruppe einstellen.


    So kannst du die Konditionen innerhalb einer Gruppe anpassen.

  5. Füge optional weitere Bedingungen hinzu. Dabei kannst du zwischen folgenden Optionen entscheiden:

    1. Und: Alle Bedingungen müssen zutreffen.

    2. Oder: Eine der Bedingungen muss zutreffen.

  6. Wähle aus, was unter diesen Bedingungen passieren soll. Wähle dabei aus zwischen den folgenden Optionen:

    1. Anzeigen: Zeigt ausgewählte Blöcke auf der Seite an

    2. Ausblenden: Blendet ausgewählte Blöcke auf der Seite aus

  7. Benenne deine Regel, indem du auf den Namen der Regel oder auf die drei Punkte klickst. Hier kannst du auch eine Regel duplizieren oder löschen.

🔎 Lerne hier mehr über Heyflow's Logik-Features.

💡 Du kannst auch Navigation basierend auf Regeln festlegen. Lerne hier mehr über die Erweiterte Konditionale Logik.


Beispiel: Einheiten-Umschalter (z. B. cm/ft oder kg/lbs)

Mit einem Einheiten-Umschalter können Nutzer ihre bevorzugte Maßeinheit auswählen – das passende Eingabefeld wird automatisch angezeigt. So baust du einen mit Bedingter Sichtbarkeit.

Schritt 1: Einheitenauswahl hinzufügen

  1. Füge einen Mehrfachauswahl-Block in deinen Flow ein.

  2. Füge deine Einheiten als Antwortoptionen hinzu, z. B. „cm" und „ft".

  3. Aktiviere die „Vorauswahl" für eine Option, damit immer eine Einheit vorausgewählt ist.

  4. Stelle unter „Darstellung" das Layout auf „Flex" oder „Grid" um, damit die Optionen nebeneinander angezeigt werden.

💡 Da eine Einheit vorausgewählt ist, wird das passende Eingabefeld sofort angezeigt, wenn der Nutzer diesen Schritt erreicht, ohne zusätzlichen Klick.

Schritt 2: Eingabefelder hinzufügen

  1. Füge eine Eingabeld für die erste Einheit ein (z. B. cm).

  2. Füge ein zweites Eingabefeld für die andere Einheit ein (z. B. ft).

  3. Unter Dekorationen kannst du einen Suffix-Text hinzufügen.

Schritt 3: Bedingte Sichtbarkeit einrichten

  1. Wähle das erste Eingabefeld aus (z. B. cm).

  2. Gehe zu „Einstellungen" → „Sichtbarkeit" und klicke auf "Regeln erstellen" unter "Bedingt".

  3. Füge eine Regel hinzu: Verstecke diesen Block (ft) wenn [Mehrfachauswahl] gleich „cm" ist.

  4. Wiederhole das für das zweite Eingabefeld – verstecke ihn, wenn die ausgewählte Einheit „ft" ist.

Hat dies deine Frage beantwortet?