Images in email campaigns

Zeige Galerien mit Bildern in deiner Kampagne an und füge Beschriftungen und Klick-Links hinzu.

Zuletzt aktualisiert: 15. Januar 2025

Verwende einen Bild-Abschnitt, um Bilder zu deiner Kampagne hinzuzufügen. Du kannst mehrere Bilder hinzufügen, jedes mit Beschriftungen und Klick-URLs, und verschiedene Layouts auswählen, um die Platzierung von Bildern und Beschriftungen zu ändern.

Folge dieser Anleitung, um zu erfahren, wie du Bild-Abschnitte in deinen Kampagnen einrichtest und um herauszufinden, an welchen anderen Stellen in deiner Kampagne Bilder angezeigt werden können.

Image formatting

To prevent blurry images, we recommend keeping your image width 750px or less. For more help with image formatting, visit Formatting your images for display on the web.

Multiple images display in a vertical stack, but you can choose different layouts to change the placement of images and captions.

Einen Bildabschnitt hinzufügen

To add an image section to a campaign:

  1. Create or open your campaign draft. For more help, visit Building email campaigns.
  2. Klicke auf + an einer beliebigen Stelle in der Kampagne zwischen Header und Footer.
  3. Klicke auf Bild.
  4. Klicke im rechten Menü auf Bilder hinzufügen, um bis zu vier Bilder von deinem Gerät hochzuladen, oder klicke auf Aus Bibliothek auswählen, um Bilder aus deiner Bibliothek oder Unsplash auszuwählen. Es ist nicht möglich, Premium-Bilder in E-Mail-Marketing zu lizenzieren, aber du kannst zuvor lizenzierte Getty Images verwenden.
  5. After uploading at least one image, click Manage Images below the thumbnail to add, rearrange, or delete images.
  6. Klicke neben einem Bildnamen auf Nicht verlink, um eine Klick-URL hinzuzufügen.
  7. Klicke auf das Drop-down-Menü Layout, um das Layout des Bild-Abschnitts zu ändern.
  8. Klicke auf Abstand und Abschnittsfarbe, um Stil-Änderungen vorzunehmen.
  9. Füge je nach Layout eine Beschriftung zu deinen Bildern hinzu.

All changes save automatically. You can undo or redo changes as long as the draft is open.

Tipp

Um den Bild-Editor zu öffnen, bewege den Mauszeiger über das Bild, das du im Entwurf bearbeiten möchtest, und klicke auf das Bleistiftsymbol.

Add, rearrange, or delete images

Nachdem du mindestens ein Bild hinzugefügt hast, klicke auf Bilder verwalten. Hier kannst du Folgendes tun:

  • Füge weitere Bilder hinzu, indem du auf Bild hinzufügen klickst. Du kannst bis zu vier Bilder in allen Layouts hinzufügen.
  • Rearrange images by clicking and holding the six dots to the right of the filename and dragging the image to a new position.
  • Delete an image by clicking - to the left of the filename.

Nachdem du Änderungen vorgenommen hast, klicke auf Zurück, um zum Bilder-Menü zurückzukehren.

Add a clickthrough URL

Image clickthrough URLs turn the whole image into a link, so when a subscriber clicks the image, it opens the link.

To add a clickthrough URL:

  1. Click Unlinked beside the images name in the right panel. If an image already has a clickthrough URL, the URL displays beside the image name. If you don't see Unlinked or a URL beside your image name, you might be in the Manage images panel. Click Back to return to the Images panel.
  2. In the clickthrough URL field, you can add a web address directly, or click the gear icon to open the link editor for more options.
  3. In the link editor, you can link to an external web address, a page on your site, an email address, or a phone number. To learn more about links in Squarespace, visit Adding links to your site.
  4. Klicke nach dem Einrichten der URL im Link-Editor auf Speichern.

Alternativtext hinzufügen

Das Hinzufügen von Alternativtext zu Bildern macht sie für Besucher barrierefreier. Der Alternativtext wird für Screenreader und andere Eingabehilfen angezeigt, erscheint aber ansonsten nicht in deiner Kampagne.

Wenn du keinen Alternativtext manuell hinzufügst, wird kein Alternativtext angezeigt. So fügst du Alternativtext zu einem Bild in einem Bild-Abschnitt hinzu:

  1. Klicke auf den Bild-Abschnitt und dann im rechten Menü auf den Namen der Bilddatei.
  2. Klicke in das Feld unter Alternativtext für Bild und füge deine Bildbeschreibung hinzu.
  3. Der Alternativtext wird automatisch gespeichert.

Du kannst mit denselben Schritten auch Alternativtext zu Blog-Abschnitten und Produkt-Abschnitten hinzufügen. Weitere Informationen zu Alternativtext im Allgemeinen, einschließlich Best Practices, findest du unter Alternativtext zu Bildern hinzufügen.

Bild-Abschnitt-Layouts

Klicke auf das Drop-down-Menü Layout, um auszuwählen, wie Bilder und Beschriftungen angezeigt werden. Wenn du einen neuen Bild-Abschnitt hinzufügst, wird standardmäßig das Banner-Layout festgelegt.

You can choose from these layouts:

  • Banner - Full-bleed images with captions below.
  • Raster – Bilder werden in einem Raster mit kleinen Vorschaubildern angezeigt. Es ist nicht möglich, Beschriftungen in diesem Layout hinzuzufügen.
  • Card - Images with captions displaying on an overlapping card. The captions display on alternating sides for each image, starting on the right.
  • List (Left) - Images in a list on the left side with captions on the right.
  • List (Right) - Images in a list on the right side with captions on the left.
  • Side - Images in a list with captions displaying on alternating sides.

Jeder Abschnitt kann einen Layout-Stil verwenden. Um ein weiteres Bild mit einem anderen Layout hinzuzufügen, füge einen neuen Abschnitt hinzu.

Den Bild-Abschnitt gestalten

Verwende die Größen-, Abstand- und Farboptionen, um deinen Bild-Abschnitt zu gestalten. Deine Optionen können je nach Layout variieren.

Image size

Mit den Raster-, Seiten- und Listen-Layouts kannst du die Bildgröße direkt bearbeiten.

Klicke auf Bildgröße und dann auf S, M oder L oder klicke auf , um die Größe manuell festzulegen.

Verwende für Banner- und Karten-Layouts die Anpassung Seitliches Padding unter Abstand, um die Bildbreite zu ändern. Beachte, dass einige Apps Bilder unabhängig von diesen Einstellungen immer in voller Breite anzeigen.

Spacing

Klicke auf Abstand, um das Padding in deinem Bild-Abschnitt zu ändern. Abhängig von deinem Layout können deine Abstandsoptionen variieren:

  • Seitliches Padding – Füge Leerräume auf beiden Seiten des Bildes hinzu. Verwende diese Anpassung für Banner- und Karten-Layouts, um die Bildbreite zu ändern.
  • Padding zwischen Abschnitten – Füge oben und unten im Bild-Abschnitt Leerräume hinzu.
  • Padding between rows - Add vertical white space between images in the section. This only appears if you add multiple images to a single section.
  • Horizontale Ausrichtung und Vertikale Ausrichtung – Richte die Bilder im Raster-Layout aus.
  • Center padding - Add white space between the images and captions in the side and list layouts.

Color

You can change the following section-specific colors:

  • Section color - Change the color that appears behind images and captions. If set to transparent, the content background or email background appears instead.
  • Textfarbe – Ändere die Farbe von Beschriftungen. Schriftart und Textgröße folgen globalen Kampagnenstilen.
  • Card color - Change the background of the captions on the card layout.

Mehr dazu erfährst du unter E-Mail-Kampagnen gestalten.

Add captions

To add captions:

  1. Wenn du das Banner-Layout verwendest, aktiviere Beschriftung anzeigen im Bilder-Menü.
  2. Klicke in der Vorschau auf Hier schreiben ... und füge Text hinzu.
  3. Highlight text to format it or add a link.

Keep in mind:

  • Das Raster-Layout unterstützt keine Beschriftungen.
  • Beschriftungen in E-Mail-Kampagnen werden nicht zu Alternativtexten.
  • Text added to images is image-specific. If you delete an image, its caption is deleted too.
  • Use the side panel to style the text color. The font matches your global fonts.

Add an image without a caption

To add an image without a caption:

  1. Füge einen Bildabschnitt hinzu.
  2. Nachdem du dein Bild hinzugefügt hast, wähle das Raster oder Banner-Layout.
  3. On the banner layout, switch the Show Caption toggle off to hide the caption.

Can I add an image slideshow?

Es gibt kein integriertes Slideshow-Layout. Um einen Slideshow-Effekt hinzuzufügen, erstelle aus einer Reihe von Bildern ein animiertes .gif und lade diese Datei in deinem Bildabschnitt hoch.

Header images

Du kannst ein Bild aus deiner Bibliothek in den Header deiner Kampagne hochladen oder wiederverwenden oder dein Website-Logo einfügen, wenn deine Website eines verwendet. Weitere Informationen findest du unter E-Mail-Kampagnen erstellen.

Blog and product images

Blog- und Produkt-Abschnitte binden Blogeinträge und Produkte von deiner Website in deine Kampagne ein, einschließlich der Beitrags- oder Produktbilder.

Es ist nicht möglich, die Beitrags- oder Produktbilder in diesen Abschnitten zu ändern, aber du kannst den Mauszeiger darüber bewegen und auf das Bleistiftsymbol klicken, um den Bild-Editor zu öffnen. Um ein komplett anderes Bild hinzuzufügen, ändere die ausgewählten Bilder auf deiner Blog- oder Shop-Seite oder verwende einen Bild-Abschnitt, um das Bild und die Beschriftung direkt auszuwählen.

Footer Image
  • Hol dir Hilfe von der Community

  • Hol dir Hilfe von unserer Community zu erweiterten individuellen Anpassungen.

  • Beauftrage einen Squarespace-Experten

  • Hebe dich online von der Masse ab, indem du dir von einem erfahrenen Webdesigner oder Entwickler helfen lässt.