Hintergründe

Das Hintergrundelement ermöglicht es, bearbeitbaren Inhalt (Gruppe, Trenner, Bild, Text, Video, Code) auf einem Hintergrundbild zu platzieren.

Einer der größten Vorteile dieses Elements ist dessen Flexibilität auf mobilen Geräten: Im Gegensatz zu einem klassischen Bild können Sie das Hintergrundbild zoomen, zuschneiden oder sogar ersetzen, was mehr kreative Möglichkeiten eröffnet.

Info

Der Hintergrund ist mit allen Umgebungen kompatibel (Gmail, Outlook live, Outlook PC, Outlook Mac, Orange, Free, Yahoo, native iOS- und Android-Anwendungen).

Der Hintergrund ist nicht anklickbar, nur überlagerte Elemente auf dem Hintergrundelement können angeklickt werden.

Schaltflächen, Slider und Hintergrundelemente können auf dem Hintergrund nicht überlagert werden.

Einen Hintergrund hinzufügen und anpassen

Es gibt viele Möglichkeiten, Layouts mit dem Hintergrund zu erstellen. Dies sind die grundlegenden Schritte:

Schritt 1: Einen Abschnitt für den Hintergrund hinzufügen

Ziehen Sie aus dem Tab „Elemente“ im Designbereich einen Abschnitt in Ihre E-Mail und doppelklicken Sie darauf.

Ziehen Sie dann das Hintergrundelement hinein.

Schritt 2: Das Hintergrundbild für die Desktop-Version importieren

Klicken Sie auf den Hintergrund. Daraufhin öffnet sich der Tab „Stile“ im Designbereich.

Im Bereich "Container“ können Sie Ihr Bild aus der Mediathek importieren, indem Sie auf die Schaltfläche „Wählen“ klicken oder direkt die URL des Bildes eingeben.

Schritt 3: Die Höhe des Hintergrunds für die Desktop-Version festlegen

Ein Hintergrund hat eine feste Höhe. Daher ist es wichtig, ihn für die Desktop-Version festzulegen. Wenn die Höhe nicht festgelegt wird, könnte das Bild abgeschnitten werden.

Die Höhe des Bildes ermitteln

Wenn das Bild bereits auf Ihrem Computer gespeichert ist, können Sie die Höhe in den Bildeigenschaften, insbesondere in den Dimensionen, nachsehen.

Befindet sich das Bild nicht auf Ihrem Computer, gehen Sie folgendermaßen vor:

  1. Fügen Sie ein "Bild"-Element zu Ihrer E-Mail hinzu.
  2. Importieren Sie das Hintergrundbild als Quelle für dieses Element.
  3. Fahren Sie mit der Maus über das Bild: Die Abmessungen werden unten links angezeigt. Notieren Sie sich die Höhe, diese benötigen Sie, um den Hintergrund festzulegen.

Schritt 4: Die Darstellung und Ausrichtung des visuellen Elements wählen

Sie können auswählen, wie das visuelle Element im Hintergrund angezeigt wird, indem Sie die Optionen für die Darstellung und Ausrichtung verwenden.

Strecken: Das visuelle Element wird so verzerrt, dass es vollständig sichtbar ist. Diese Option ist besonders nützlich, wenn ein Farbverlauf als Hintergrundbild verwendet wird.

Originalbild

Füllen

Das visuelle Element wird in seinen Proportionen so geändert, dass es den gesamten verfügbaren Platz im Hintergrundelement ausfüllt, auch wenn Teile des Bildes nicht mehr sichtbar sind.

Anpassen

Das visuelle Element wird in seinen Proportionen so geändert, dass es im Hintergrundelement vollständig sichtbar ist, auch wenn Ränder angezeigt werden.

Mit den Ausrichtungsoption können Sie die Position des visuellen Elements ändern, wenn die Darstellung auf "Füllen“ oder "Anpassen“ gesetzt ist.

In der Tablet- und Mobilansicht können Sie den „Benutzerdefinierten“ Modus auswählen, mit dem Sie die Art und Weise, wie das visuelle Element gerendert und ausgerichtet wird, weiter anpassen können.

Für weitere Informationen beachten Sie bitte Schritt 7 weiter unten.

Diese Optionen für Darstellung und Ausrichtung funktionieren mit den meisten Mail-Clients auf dem Markt. Wenn Sie jedoch möchten, dass Ihre visuellen Elemente mit den Mail-Clients von Orange, GMX und Web.de kompatibel sind, empfehlen wir, visuelle Elemente mit einer Breite von 640px und einer Höhe zu verwenden, die der Höhe des Inhalts entspricht, den Sie in den Hintergrund integrieren möchten.

Schritt 5: Fügen Sie Ihre bearbeitbaren Elemente zum Hintergrund hinzu

Nachdem Sie das Hintergrundbild platziert haben, doppelklicken Sie darauf. Sie können nun folgende Elemente hinzufügen, indem Sie sie hineinziehen:

  • Texte
  • Bilder
  • Gruppen
  • Videos
  • Trenner
  • Code-Elemente
Info

Standardmäßig werden bearbeitbare Elemente hinzugefügt und auf dem Hintergrund positioniert.

Elemente, die auf dem Hintergrund liegen, dürfen das Bild nicht überschreiten, da sie sonst abgeschnitten werden.

Eine Schaltfläche oder einen CTA zum Hintergrund hinzufügen

  • Fügen Sie ein "Text"-Element zum Hintergrund hinzu.
  • Wenden Sie eine Hintergrundfarbe an.
  • Passen Sie die Zeilenhöhe an.
  • Fügen Sie Ränder hinzu.
  • Fügen Sie einen Link ein.

Schritt 6: Elemente auf dem Hintergrund positionieren

Um die Position von überlagerten Elementen auf dem Hintergrund zu ändern oder anzupassen, gehen Sie zu den Einstellungen im Bereich „Position“.

Wenn Sie den Wert der oberen Position erhöhen, verschieben Sie die Elemente nach unten.

Info

Stellen Sie die Positionseinstellungen in Prozent ein, um ein optimales Anzeigeergebnis auf allen Bildschirmen im responsiven Modus zu gewährleisten.

Den Inhalt ausrichten

Um die Elemente nach rechts oder links auszurichten, gehen Sie folgendermaßen vor:

  1. Fügen Sie eine Gruppe in den Hintergrund ein.
  2. Fügen Sie zwei Spalten in diese Gruppe ein.
  3. Platzieren Sie die bearbeitbaren Elemente in der Spalte Ihrer Wahl.

Für Abstand zwischen den überlagerten Elementen im Hintergrund sorgen

Um Abstand zwischen den Elementen zu schaffen, passen Sie die oberen und unteren Ränder an. Wenn Sie Schaltflächen auseinander platzieren müssen, verwenden Sie das "Trenner"-Element.

Weitere Informationen zu Design und Layout finden Sie im Artikel Der Aufbau des Designers.

Schritt 7: Einen Hintergrund für die mobile Version anpassen

Der Hintergrund bietet mehrere Layout-Optionen für mobile Ansichten:

1. Wählen Sie ein anderes Bild für die mobile Version

In der Hintergrundbild-Quelle können Sie ein neues Bild speziell für die mobile Version hochladen.

2. Bild zuschneiden

Um den Hintergrund auf dem Mobilgerät anzupassen, verwenden Sie die Zuschneideoptionen im Container-Bereich. Achten Sie darauf, dass das Bild zum Zuschneiden geeignet ist, ohne Ränder oder rechtliche Hinweise am unteren Rand, um eine optimale Anpassung zu gewährleisten.

Die folgenden Einstellungen ermöglichen es Ihnen, den Hintergrund entsprechend der gewünschten Darstellung für Mobilgeräte anzupassen:

  • Horizontale Position: Bewegt das Bild von rechts nach links.
  • Vertikale Position: Bewegt das Bild nach oben und unten.
  • Bildbreite: Zoomt das Bild über 100% hinaus.
  • Bildhöhe: Passt die Höhe an, um Verzerrung oder Stauchung des Bildes zu vermeiden.

3. Das gesamte Bild anzeigen

Weitere Informationen zur Einstellung von mobilen Hintergründen finden Sie in Den mobilen Hintergrund anpassen.

Best Practices

Für eine gute Lesbarkeit des Hintergrunds sorgen

Setzen Sie eine Hintergrundfarbe für den Hintergrund. Selbst wenn die Bilder im Posteingang nicht angezeigt werden, bleiben die Elemente dank des Kontrasts mit dieser Hintergrundfarbe sichtbar.

Wenn Sie sehen möchten, wie Ihre E-Mails ohne Medien aussehen, klicken Sie auf diesen Button:

Was tun, wenn der Hintergrund nicht angezeigt wird?

Es gibt mehrere Gründe, warum ein Hintergrund möglicherweise nicht angezeigt wird. Wir empfehlen, sie im Ausschlussverfahren zu überprüfen:

Im Email Builder:

  • Haben Sie den Pfad zum Hintergrund korrekt im Feld „Quelle“ eingegeben?
  • Haben Sie die Höhe des Hintergrunds korrekt in Pixeln angegeben?

Nach dem Routing:

  • Ist die URL des Hintergrunds korrekt und gibt keinen 404-Fehler zurück?
  • Verwendet die Hintergrund-URL „https“?
  • Ist die URL des Hintergrunds korrekt im HTML-Code des Routers ersetzt worden?
  • Wenn die URL nicht im Router-Code ersetzt wurde, können Sie die Hosting-URL Ihres Hintergrunds direkt in den Email Builder einfügen. Kontaktieren Sie bei Bedarf gerne den Support.