So fügst du seitliche Bilder in Anmeldeformularen hinzu

Übersicht

Erfahre, wie du links oder rechts neben deinem Anmeldeformular ein hochwertiges Bild einfügst, um eine überzeugende Anmeldung zu ermöglichen, die zum Design deiner Marke passt.

Bevor du anfängst

Seitenbilder werden links oder rechts neben deinen Formularinhalten angezeigt. Wenn du ein Bild in einem Formular verwendest, gibt es ein paar Dinge, die du beachten solltest:

• Es gibt viele Bildformattypen zur Auswahl. JPEGs bieten ein gutes Gleichgewicht zwischen Qualität und Größe für farbige Bilder, während PNGs transparente Bilder oder Logos scharf darstellen können.
• Achte darauf, für die besten Ergebnisse ein Bild in ausreichend hoher Qualität zu verwenden.
  
  • Versuche, deine Bilder für Bilder in voller Breite zwischen 600 und 1000 px breit und weniger als 2000 px hoch zu halten, um Qualität und Ladezeit auszubalancieren. Bilder, die nicht in voller Breite sind, können kleiner als 600 px sein.
• Wie bei allen Bildern, die im Web angezeigt werden, führen größere Dateigrößen zu längeren Ladezeiten.
  • Ziele auf eine Dateigröße von 50–100 KB für Seitenbilder und weniger als 200 KB für Hintergrundbilder ab, damit dein Bild hochwertig aussieht, ohne deine Website zu verlangsamen.
• Füge deinem Bild Alternativtext hinzu, damit deine Formulare für alle Website-Besucher*innen barrierefrei sind.

Da Anmeldeformulare in Browsern gerendert werden (im Gegensatz zu E-Mails, die in ESPs gerendert werden), gibt es weniger Empfehlungen dazu, wie man sie formatiert und anpasst. Browser können Bilder aller Typen und Größen rendern. Halte dich daher generell an hochauflösende Bilder und überschaubare Dateigrößen und teste die Darstellung auf jedem Gerätetyp.

Füge deinem Formular ein seitliches Bild hinzu

So fügst du ein Bild auf einer der beiden Seiten deiner Inhalte im Anmeldeformular hinzu:

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

1. Navigiere im Abschnitt Styles zum Abschnitt Side Image und wähle die Seite aus, auf der du ein Bild hinzufügen möchtest (links oder rechts).
   

2. Auf den leeren Bildplatzhalter in der Formularvorschau klicken.
3. Klicke auf Bildergalerie durchsuchen, um ein Bild aus deiner Klaviyo-Bildergalerie hinzuzufügen, ein Bild hochzuladen oder ein neues Bild über eine URL zu importieren.
   

Achte darauf, ein Bild in ausreichend hoher Qualität zu verwenden, um die besten Ergebnisse zu erzielen. Wie bei allen Bildern, die im Web angezeigt werden, führen größere Dateigrößen zu längeren Ladezeiten. Ziele bei seitlichen Bildern auf eine Dateigröße von 50–100 KB ab, damit dein Bild hochwertig aussieht, ohne deine Website zu verlangsamen.

Anzeigeoptionen für das Seitenbild

Formularstile

Standardmäßig sind Formulare mit seitlichen Bildern auf 780 px Breite eingestellt, wobei die Breite des seitlichen Bildes auf Mittel gesetzt ist. Du kannst die Abschnitte Breite und Mindesthöhe verwenden, um die Größe des Formulars anzupassen. Wenn das seitliche Bild innerhalb des Formulars mehr oder weniger Platz einnehmen soll, passe die Größe im Abschnitt Seitliches Bild an (z. B. klein, mittel, groß, benutzerdefiniert).

Das seitliche Bild deines Formulars wird auf Mobilgeräten standardmäßig ausgeblendet, um das mobile Erlebnis zu optimieren, da der Platz auf Mobilgeräten begrenzt ist. Wenn dein seitliches Bild auf allen Geräten angezeigt werden soll, klicke im Vorschaubereich auf das Bild, scrolle dann zu Anzeigen auf und wähle Alle Geräte aus.

Stile für seitliche Bilder

Verwende den Abschnitt Styles in den Einstellungen für Side Image, um auszuwählen, wie das Bild angezeigt wird.

• Alt-Text
  Füge deinem Bild Alt-Text hinzu, damit es für alle Personen zugänglich ist, die deine Website besuchen.
• Bildposition
  Damit wird festgelegt, wie das Bild in den Bereich „Side Image“ eingepasst wird. Wähle aus den folgenden Optionen aus:
  • Enthalten
    Das vollständige Bild wird innerhalb des Abschnitts angezeigt und überhaupt nicht zugeschnitten. Wenn das Bild nicht genau in den Bildbereich passt, füllt die Hintergrundfarbe des Abschnitts alle nicht abgedeckten Bereiche aus.
  • Cover
    Das Bild füllt den Seitenbildbereich vollständig aus. Einige Teile des Bildes können abgeschnitten werden, damit das Bild den Bereich ausfüllt.
  • Benutzerdefiniert
    Wähle deine eigene Breite für das Bild aus.
• Horizontale Ausrichtung und Vertikale Ausrichtung
  Damit kannst du auswählen, ob das Bild zentriert oder am oberen, unteren, linken oder rechten Rand des Bildbereichs ausgerichtet werden soll.
• Hintergrundfarbe
  Wenn du in deinem Formular ein kleineres Bild verwendest, lege eine Hintergrundfarbe fest, um den leeren Bereich dahinter auszufüllen.