Wie füge ich Seitenbilder in Anmeldeformularen hinzu?

Du wirst lernen

Hier erfährst du, wie du ein hochwertiges Bild links oder rechts von deinem Anmeldeformular einbinden kannst, um ein überzeugendes Anmeldeerlebnis zu schaffen, das zum Design deiner Marke passt.

Bevor du beginnst

Seitenbilder erscheinen links oder rechts von deinem Formularinhalt. Wenn du ein Bild in einem Formular verwendest, gibt es ein paar Dinge zu beachten:

• Es gibt viele Arten von Bildformaten, aus denen du wählen kannst. JPEGs bieten ein gutes Gleichgewicht zwischen Qualität und Größe für bunte Bilder, während PNGs transparente Bilder oder Logos scharf aussehen lassen. 
• Achte darauf, dass du ein Bild von guter Qualität verwendest, um beste Ergebnisse zu erzielen. 
  
  • Versuche, deine Bilder zwischen 600 und 1000 Pixel breit und weniger als 2000 Pixel hoch zu halten, um Qualität und Ladezeit auszugleichen. Bilder, die nicht die gesamte Breite einnehmen, können kleiner als 600 Pixel sein.
• Wie bei allen Bildern, die im Internet betrachtet werden, führen größere Dateigrößen zu langsameren Ladezeiten.
  • Strebe eine Dateigröße von 50-100 KB für Seitenbilder und weniger als 200 KB für Hintergrundbilder an, um sicherzustellen, dass dein Bild hochwertig aussieht, ohne deine Seite zu verlangsamen.
• Füge einen Alt-Text zu deinem Bild hinzu, damit deine Formulare für alle Website-Besucher zugänglich sind. 

Da Anmeldeformulare von Browsern gerendert werden (im Gegensatz zu E-Mails, die von E-Mail-Service-Providern gerendert werden), gibt es weniger Empfehlungen, wie man sie formatiert und anpasst. Browser können Bilder aller Arten und Größen wiedergeben. Halte dich also im Allgemeinen an hochauflösende Bilder und überschaubare Dateigrößen und teste das Aussehen auf jedem Gerätetyp. 

Füge ein Seitenbild zu deinem Formular hinzu

So fügst du ein Bild auf jeder Seite deines Anmeldeformulars ein:

1. Navigiere zur Registerkarte Anmeldeformular.
2. Klicke neben deinem Formular auf die 3 Punkte > Formular bearbeiten.
   

   Wenn dein Formular vor Juli 2021 erstellt wurde und ein rechts- oder linksbündiges Hintergrundbild als Seitenbild verwendet, entferne es, bevor du die Seitenbildfunktion nutzt. Navigiere dazu zum Abschnitt Formularhintergrund im Bereich Stile und entferne das Hintergrundbild. Scrolle dann nach unten zu den Formatvorlagen und entferne alle überflüssigen Polsterungen auf der rechten oder linken Seite. 

3. Navigiere im Bereich Stile zum Abschnitt Seitenbild und wähle die Seite aus, auf der du ein Bild hinzufügen möchtest (links oder rechts).
   
4. Klicke auf den leeren Bildplatzhalter in der Formularvorschau.
5. Klicke auf Bildbibliothek durchsuchen, um ein Bild aus deiner Klaviyo-Bildbibliothek hinzuzufügen, ein Bild hochzuladen oder ein neues Bild von einer URL zu importieren.
   

Achte darauf, dass du ein Bild von guter Qualität verwendest, um beste Ergebnisse zu erzielen. Wie bei allen Bildern, die im Internet betrachtet werden, führen größere Dateigrößen zu langsameren Ladezeiten. Strebe eine Dateigröße von 50-100 KB für Seitenbilder an, um sicherzustellen, dass dein Bild hochwertig aussieht, ohne deine Website zu verlangsamen. 

Optionen für die seitliche Bildanzeige

Formstile

Standardmäßig sind Formulare mit seitlichen Bildern 780 Pixel breit und die Breite des seitlichen Bildes ist auf Mittel eingestellt. Du kannst die Abschnitte Breite und Mindesthöhe verwenden, um die Größe des Formulars anzupassen. Wenn du möchtest, dass das Seitenbild mehr oder weniger Platz im Formular einnimmt, kannst du die Größe im Abschnitt Seitenbild anpassen (z. B. klein, mittel, groß, benutzerdefiniert). 

Das Seitenbild deines Formulars wird auf mobilen Geräten standardmäßig ausgeblendet, um das mobile Erlebnis zu optimieren, da der Bildschirmplatz auf mobilen Geräten begrenzt ist. Wenn du möchtest, dass dein Seitenbild auf allen Geräten angezeigt wird, klicke auf das Bild in der Vorschau, scrolle dann zu Anzeigen auf und wähle Alle Geräte.

Seitliche Bildstile

Verwende den Abschnitt Stile in den Einstellungen für das Seitenbild, um auszuwählen, wie das Bild angezeigt werden soll. 

• Alt-Text
  Füge einen Alt-Text zu deinem Bild hinzu, damit es für alle Besucher deiner Website zugänglich ist.
• Bildposition
  Hier wird festgelegt, wie das Bild in den seitlichen Bildbereich passt. Wähle eine der folgenden Optionen aus: 
  • Enthält
    Das gesamte Bild erscheint im Ausschnitt und wird nicht beschnitten. Wenn das Bild nicht genau in den Bildbereich passt, füllt die Hintergrundfarbe des Abschnitts alle unbedeckten Bereiche aus. 
  • Cover
    Das Bild wird den seitlichen Bildbereich vollständig ausfüllen. Einige Teile des Bildes können abgeschnitten werden, damit das Bild den Raum ausfüllen kann. 
  • Benutzerdefiniert
    Wähle deine eigene Breite für das Bild.
• Horizontale Ausrichtung und Vertikale Ausrichtung
  Damit kannst du festlegen, ob das Bild zentriert oder oben, unten, links oder rechts am Bildbereich ausgerichtet werden soll.
• Hintergrundfarbe
  Wenn du ein kleineres Bild in deinem Formular verwendest, lege eine Hintergrundfarbe fest, um den leeren Raum dahinter zu füllen.

Zusätzliche Ressourcen

• Bewährte Praktiken für die Erstellung barrierefreier E-Mails und Formulare 
• Stile für ein Anmeldeformular verstehen
• Erste Schritte mit Canva