Wie man den dynamischen Block in Formularen verwendet

Geschätzt 7 Lesedauer in Minuten
|
Aktualisiert 4. Okt. 2024, 18:55 EST
Du wirst lernen

Du wirst lernen

Erfahre mehr über dynamische Blöcke und wie du sie in Anmeldeformularen verwenden kannst, um unterschiedliche Ansichten und Erlebnisse für Kunden auf Desktop- und Mobilgeräten zu schaffen. Jeder Block in deinem Formular kann dynamisch gemacht werden, indem du seine Sichtbarkeitseinstellungen anpasst.

Mit dem dynamischen Block kannst du steuern, welcher Block je nach Gerät angezeigt wird. Du kannst den Block so konfigurieren, dass er je nach Gerät unterschiedlich in deinem Formular angezeigt wird oder dass er auf einem Gerät angezeigt wird, auf dem anderen aber nicht.

Anwendungsfälle für Dynamic Block:

  • Passe die Anzeige von Formularen für verschiedene Gerätetypen an (z. B. Handy und Desktop), damit die Kunden ein auf ihren Bildschirm zugeschnittenes Design sehen.
  • Erstelle ein einziges Formular mit verschiedenen SMS Opt-in-Methoden, die für jeden Gerätetyp angezeigt werden, um die Conversion zu optimieren (z. B. zeige eine Tap-to-Text-Option auf mobilen Geräten und ein Telefonnummern-Eingabefeld auf Desktop-Geräten).
Bevor du beginnst

Bevor du beginnst

Öffne dein Formular im Editor und navigiere zum Abschnitt Targeting und Verhaltensweisen. Stelle sicher, dass dein Formular sowohl auf dem Desktop als auch auf dem Handy angezeigt wird, damit alle Kunden es sehen können.

sichtbarkeit2.jpg

Mit dieser Einstellung kannst du separate Anzeigen für Desktop und Mobile konfigurieren.

Verwende den dynamischen Block, um unterschiedliche Ansichten für Desktop und Mobile zu erstellen

Verwende den dynamischen Block, um unterschiedliche Ansichten für Desktop und Mobile zu erstellen

Jeder Block oder jedes Eingabefeld in einem Formular, egal ob bereits vorhanden oder über die Registerkarte Block hinzufügen neu hinzugefügt, kann dynamisch gemacht werden. Um einzustellen, welche Geräte einen bestimmten Block anzeigen, befolge diese Schritte:

  1. Klicke auf den Block in der Formularvorschau (z. B. einen Textblock).
  2. Scrolle im Einstellungsmenü des Blocks auf der linken Seite nach unten zu Sichtbarkeit.
  3. Wähle, ob der Block auf dem Desktop, auf dem Handy oder auf allen Geräten angezeigt werden soll.
  4. Wiederhole diesen Vorgang für alle Blöcke, die du dynamisch machen willst.

Um eine Vorschau darauf zu erhalten, wie dein Formular auf den einzelnen Geräten aussieht, verwende die Ansichtsauswahl in der oberen rechten Ecke des Formular-Editors. Du kannst zwischen dem Desktop-Symbol und dem Symbol für das Mobilgerät hin- und herschalten, um beide Ansichten zu sehen.

  • Die Desktop-Ansicht zeigt, wie dein Formular für Kunden aussieht, die deine Website auf einem Desktop-Computer besuchen. Nur für Desktopund AlleGeräte konfigurierte Blöcke sind in dieser Ansicht sichtbar.
  • Die mobile Ansicht zeigt eine Vorschau dessen, was die Kunden sehen, wenn sie auf einem mobilen Gerät surfen. Sie zeigt die für Mobilgeräte und Alle Geräte konfigurierte Sperre an.
Beispiel

Beispiel

Angenommen, du möchtest, dass der Überschriftentext deines Formulars auf dem Desktop anders aussieht als auf einem mobilen Gerät. Um dies zu konfigurieren:

  1. Wähle in der Ansichtsauswahl oben rechts das Desktop-Symbol aus. 
  2. Wähle den Text aus, den du in der Formularvorschau bearbeiten möchtest, und nimm deine Änderungen vor.
  3. Im Einstellungsmenü des Textblocks blätterst du zu Sichtbarkeit und stellst den Textblock so ein, dass er nur auf dem Desktop angezeigt wird.

    Wenn du einen Block so einstellst, dass er nur auf dem Desktop angezeigt wird, versteckst du ihn vor mobilen Nutzern, sodass er in der mobilen Vorschau nicht sichtbar ist.

  4. Um die mobile Ansicht anzupassen, wechselst du zur mobilen Vorschau, indem du das mobile Symbol in der Ansichtsauswahl auswählst.
  5. Gehe zur Registerkarte " Block hinzufügen" und ziehe ein neues Textelement per Drag & Drop in die mobile Vorschau.
  6. Passe den Standard-Überschriftentext für mobile Kunden an. Dieser Text sollte sich von dem unterscheiden, den du in der Desktop-Version verwendet hast.
  7. Scrolle im Einstellungsmenü des Textblocks nach unten zu Sichtbarkeit und stelle diesen Textblock so ein, dass er auf Mobilgeräten angezeigt wird.
  8. Optional: Wiederhole diesen Vorgang für andere Elemente oder Eingabefelder, die du je nach Gerätetyp unterschiedlich anzeigen möchtest (z. B. ein Bild für Desktop-Kunden anzeigen, aber auf dem Handy ausblenden).
    • Wenn du die Bilder in deinem Formular dynamisch machen willst, kannst du das tun:
      • Füge ein Seitenbild sowohl für die mobile als auch für die Desktop-Ansicht hinzu oder nur für eine der beiden Ansichten.
      • Verwende ein seitliches Bild in der Desktop-Ansicht und platziere ein Bild über dem Überschriftstext auf dem Handy oder andersherum. 
Dynamischer Block zur Optimierung der SMS-Einwilligungssammlung verwenden

Dynamischer Block zur Optimierung der SMS-Einwilligungssammlung verwenden

Wenn du ein Anmeldeformular hast, das SMS-Einwilligung sammelt, kannst du den dynamischen Block verwenden, um SMS -Einwilligung für jedes Gerät zu optimieren (z.B. zeige mobilen Käufern einen Tap-to-Text-Button, während Desktop-Käufern ein Telefon-Eingabefeld angezeigt wird). 

Denk daran, dass die vorgefertigten Vorlagen in der Formularbibliothek, die sowohl E-Mail- als auch Telefonnummern sammeln, bereits einen dynamischen Block für optimierte SMS Opt-Ins auf jedem Gerät eingerichtet haben. Wenn du dich für eine dieser Vorlagen entscheidest, musst du den Block nicht konfigurieren; du musst nur das Styling des Formulars an deine Marke anpassen.

Wenn du neu anfängst oder ein neues Formular zum Sammeln SMS von Abonnent/innen erstellen möchtest, schau dir unseren Leitfaden zum SMSSammeln von -Einwilligung mit Smart Opt-in an.

Um dies einzurichten:

  1. Öffne dein bestehendes Formular im Editor und navigiere zum Schritt SMS Opt-in in der Menüleiste. 
    • Wenn dein Formular diesen Schritt noch nicht enthält, klicke auf +Schritt > SMS Opt-in und wähle eine Liste aus, um ihn hinzuzufügen.
      Die Option "Schritt hinzufügen" wird in der Menüleiste des Anmeldungseditors ausgewählt.
  2. In der Ansichtsauswahl oben rechts wählst du das Desktop-Symbol aus, um die Desktop-Ansicht deines Formulars anzupassen. 
  3. Wähle das Telefonnummern-Eingabefeld in der Vorschau aus und setze es unter Sichtbarkeit auf "Auf dem Desktop anzeigen". Mach das Gleiche für die SMS-Sprache und die Schaltfläche "Abschicken".

    Wenn du einen Block so einstellst, dass er nur auf Desktop-Geräten angezeigt wird, wird er in der mobilen Ansicht nicht ausgeblendet. 

  4. Wechsle zur mobilen Ansicht deines Formulars, indem du auf das mobile Symbol in der oberen rechten Ecke klickst.
  5. Wähle die Registerkarte " Block hinzufügen" und ziehe dann eine neue Schaltfläche "Block" per Drag & Drop in die mobile Vorschau. 
  6. Ändere die Aktion der Schaltfläche in Abonnieren per SMS.
  7. Passe dein Abo-Schlüsselwort und deine Abo-Nachricht für deinen Tap-to-Text Call-To-Action an.
  8. Wähle unter Sende-Region die entsprechende Telefonnummer für die Region, an die du das Formular senden möchtest. 
  9. Schalte zwischen der Desktop- und der mobilen Ansicht hin und her, um sicherzustellen, dass der Block auf jedem Gerät so erscheint, wie du es dir vorgestellt hast. 

Jetzt sind deine dynamischen Blöcke so konfiguriert, dass sie SMS-Einwilligung in der optimalsten Methode sowohl für Desktop als auch für Mobile sammeln. 

Nächste Schritte

Nächste Schritte

Bevor du dein Anmeldeformular veröffentlichst, kannst du auf der Registerkarte " Stile" das Layout, die Schriftarten und die Farben so ändern, dass sie zu deiner Marke passen. Achte außerdem darauf, dass du deine SMS-Sprache hinzufügst und anpasst.

Zusätzliche Ressourcen

Zusätzliche Ressourcen

Hinweis auf SMS-Opt-in-Methoden

Formularblock und Felder verstehen

Stile für ein Anmeldeformular verstehen

Kurs: Klaviyo Produktzertifikat

War dieser Artikel hilfreich?
Nutze dieses Formular nur für Feedback zu Artikeln. So kontaktierst du den Support.

Mehr von Klaviyo entdecken

Community
Vernetze dich mit Kolleg*innen, Partner*innen und Klaviyo-Expert*innen, um dich inspirieren zu lassen, Erkenntnisse auszutauschen und Antworten auf deine Fragen zu erhalten.
Live-Schulung (EN) ↗
Nimm an einer Live-Sitzung mit Klaviyo-Expert*innen teil, um mehr über Best Practices, die Einrichtung wichtiger Funktionen und mehr zu erfahren.
Support

Kontaktiere den Support über dein Konto.

Support per E-Mail (kostenlose Testversion und kostenpflichtige Konten) Verfügbar 24/7

Chat- / virtuelle Unterstützung
Verfügbarkeit abhängig von Standort und Abonnementtyp