In diesem Artikel zeigen wir Ihnen alles, was Sie über die Erstellung von E-Mail-Bannern wissen müssen. Erfahren Sie mehr über die verschiedenen Arten von E-Mail-Bannern, ihre perfekten Abmessungen und wie Sie Ihr E-Mail-Design mit Stripo durch Banner bereichern können.
Banner sind ein hervorragendes Mittel, um Ihre E-Mails übersichtlicher zu gestalten, die Aufmerksamkeit der Empfänger auf die wichtigsten Elemente Ihrer Nachricht zu lenken und sich in den überfüllten Posteingängen Ihrer Leser hervorzuheben. Eine falsche Größe des E-Mail-Banners kann jedoch die Struktur Ihres Inhalts zerstören und all Ihre Bemühungen zunichte machen.
In diesem Artikel erfahren Sie mehr über die perfekte Breite und Höhe eines Bannerbildes und die grundlegenden Dinge, die Sie bei der Erstellung eines Banners für Ihre E-Mail-Marketingkampagnen beachten sollten. Außerdem geben wir Ihnen nützliche Tipps, wie Sie mit Stripo innerhalb weniger Minuten auffällige Banner erstellen können.
Was ist ein E-Mail-Banner?
Es handelt sich um ein hochwertiges Bild, das oben in Ihrer Nachricht platziert wird, um deren Hauptzweck und Ton hervorzuheben. Bannerbilder können mit dem Namen Ihrer Marke, dem Firmenlogo, einem Aufruf zum Handeln, Ihrem Angebot und Produktfotos versehen werden. Sie können Ihr Banner mit kurzen und prägnanten Texten wie „15 % Rabatt auf ausgewählte Artikel” oder „Flash-Sale am Wochenende” versehen, um die Botschaft Ihrer E-Mail so klar wie möglich zu vermitteln.
(Quelle: Stripo-Vorlage)
Die Bedeutung der Größe eines E-Mail-Banners
Ein Bannerbild vermittelt Ihre UVP (Unique Value Proposition) und markenbezogene Komponenten wie Ihr Markenlogo, CTA, Unternehmensfarben und Grafiken. Diese Merkmale heben Sie von Hunderten von Werbe-E-Mails ab, die die Posteingänge Ihrer Empfänger überfluten, und motivieren Abonnenten, Ihre Nachrichten tatsächlich zu öffnen und zu lesen.
Eine ungeeignete Bannergröße in E-Mails kann die gesamte Struktur Ihrer Inhalte ruinieren. Ein zu breites Banner zwingt Ihren E-Mail-Client dazu, die horizontale Bildlaufleiste zu aktivieren, während ein zu kleines Banner die Empfänger dazu zwingt, die Augen zusammenzukneifen, um Ihre Inhalte wahrzunehmen.
Die perfekten Abmessungen für E-Mail-Vorlagen
Die am häufigsten verwendete Bannergröße für E-Mails beträgt 600 bis 700 Pixel Breite für Desktop-Geräte, wodurch eine korrekte Darstellung auf allen Geräten gewährleistet ist. Die Höhe liegt häufig zwischen 350 und 500 Pixel.
Wenn Sie sich an die unten angegebenen Abmessungen für E-Mail-Banner halten, können Sie visuell ansprechende und responsive Designs für Desktop- und Mobilgeräte erstellen und vermeiden, dass Sie die falsche Größe für Ihr E-Mail-Banner wählen.
Es ist möglich, verschiedene Arten von E-Mail-Bannern in Ihrem Newsletter zu verwenden, um unterschiedliche Ziele zu erreichen. Nun werden wir die perfekte Größe für Ihre responsiven E-Mail-Banner, Kopf- und Fußzeilen besprechen.
Größe des E-Mail-Header-Banners
Ein lebendiges und einprägsames Header-Bild motiviert Ihre Leser, weiterzuscrollen. Sie können diesen Header mit Ihrem Firmenlogo, einem kurzen Text, der den Hauptzweck Ihrer E-Mail erklärt, und einem CTA versehen. Wir empfehlen Ihnen, die Breite des E-Mail-Banners auf 600 bis 700 Pixel und die Höhe auf 90 bis 200 Pixel für Computer zu begrenzen.
Auf Mobilgeräten sollten Sie beim Erstellen von E-Mail-Bannern moderne E-Mail-Editoren verwenden, die responsive Bilder unterstützen. Durch einen responsiven Ansatz passt sich die Größe des Bildes automatisch an die Größe des Bildschirms an, auf dem es angezeigt wird. Responsive Bilder ersparen Ihnen Kopfzerbrechen, da Sie nicht sicher wissen können, auf welchem Mobilgerät Ihre E-Mail geöffnet wird. Ihr Hauptziel ist es daher, ein einheitliches E-Mail-Erlebnis zu bieten, und responsive Bilder sind das richtige Werkzeug für diese Aufgabe.
In anderen Fällen können Sie den oben genannten Ratschlag von Roman befolgen.
Hier ist ein Beispiel für einen E-Mail-Header mit einer Breite von 650 px und einer Höhe von 200 px:
Größe des Banners im E-Mail-Text
Ein auffälliges Banner im Text Ihrer E-Mail kann die Kernaussage Ihrer Nachricht vermitteln, ohne die Leser mit langen Textabschnitten zu überfordern. Hier können Sie weitere Details zu Ihrem Angebot preisgeben und erklären, welche Probleme ein Kunde damit lösen kann.
Für Desktop-Bildschirme empfehlen wir Ihnen, ein Banner mit einer Breite von 650 bis 700 Pixel und einer Höhe von 350 bis 500 Pixel zu erstellen. Auf Mobilgeräten gilt dasselbe. Berücksichtigen Sie die gängigen Bildschirmgrößen, wie wir bereits erwähnt haben, oder verwenden Sie moderne E-Mail-Editoren mit Funktionen, mit denen Sie dynamische Bilder erstellen können, die sich automatisch anpassen.
(Quelle: Stripo-Vorlage)
Größe des E-Mail-Fußzeilenbanners
Die Fußzeile befindet sich am Ende Ihres Newsletters und kann die Kontaktdaten Ihres Unternehmens für Rückfragen, Social-Media-Konten und die Option „Abbestellen“ enthalten. Dank dieser Angaben landen Ihre Inhalte nicht im Spam-Ordner, sondern im Posteingang Ihrer Empfänger.
Halten Sie Ihre E-Mail-Fußzeilen für Desktop-Bildschirme 650–700 Pixel breit und bis zu 150 Pixel hoch. Auf Mobilgeräten empfehlen wir Ihnen, sich an unsere Empfehlungen zu vordefinierten Bildgrößen zu halten, die den gängigsten Bildschirmgrößen entsprechen, oder E-Mails mit Editoren zu erstellen, die responsive Bilder unterstützen, um Ihnen das Leben als E-Mail-Marketer zu erleichtern. Sehen Sie sich unser Beispiel für eine E-Mail-Fußzeile an (700 Pixel breit und 150 Pixel hoch):
(Quelle: Stripo-Vorlage)
Größe des E-Mail-Signaturbanners
Signaturen werden häufig auch am Ende von E-Mails platziert und können mithilfe von E-Mail-Bannern erstellt werden. Die Abmessungen für Ihre Bannersignatur entsprechen in etwa denen einer normalen Fußzeile, sodass Sie für Ihre Desktop-E-Mail-Version eine Breite zwischen 650 und 700 Pixel und eine Höhe von bis zu 150 Pixel festlegen können.
(Quelle: Stripo-Vorlage)
Was Mobilgeräte angeht, sollten Sie vordefinierte Bildgrößen oder einen responsiven Bildansatz verwenden, wenn Ihr E-Mail-Editor ähnliche Funktionen unterstützt, mit denen Sie E-Mail-Teile mit dynamischen Bildern erstellen können.
Was Sie beim Erstellen eines E-Mail-Banners beachten sollten
Nachdem Sie nun alles über die idealen Abmessungen für verschiedene Arten von E-Mail-Bannern wissen, wollen wir uns noch einige weitere wichtige Aspekte ansehen, die Sie beim Designprozess berücksichtigen sollten, um Ihre Banner ansprechend zu gestalten:
Größe der Schaltflächen
Schaltflächen auf E-Mail-Bannern sollten gut sichtbar sein. Daher ist es wichtig, dass sie sich nicht mit dem Hintergrundbild und anderen Elementen Ihrer Nachricht vermischen.
(Quelle: Stripo-Vorlage)
Text über Bannerbildern
Ein typisches E-Mail-Banner besteht aus einem Bild und darüberliegendem Text. Hier ist es wichtig, die richtigen Schriftarten und Farbkombinationen zu wählen, damit Ihr Text gut lesbar und lebendig wirkt. Beispielsweise wäre Ihr Text in Braun auf einem schwarzen Bild kaum zu erkennen. Das Gleiche gilt für helle Farben: Weißer Text auf hellgrauem Hintergrund ist ebenfalls keine gute Idee.
Wir empfehlen Ihnen, mit Schriftarten, Farben, Größen und der Positionierung Ihres Textes zu experimentieren, um ihn auffällig und lesbar zu gestalten. Auf den folgenden Bildern sehen Sie, dass ein Banner mit einer unleserlichen Schriftart und grauem Text auf einem braunen Hintergrundbild unordentlich wirkt, während die erste Option mit einer besser lesbaren Schriftart und einer kontrastierenden Farbe viel leichter zu erkennen ist.
Bildgröße
Eine gute Ladegeschwindigkeit ist ebenfalls entscheidend. Je weniger Zeit das Laden Ihrer E-Mail benötigt, desto besser. Komprimieren Sie Ihre Bannerbilder unbedingt, bevor Sie sie zu Ihren E-Mails hinzufügen, um eine Erhöhung der Dateigröße Ihrer E-Mail-Banner zu vermeiden.
Wenn Sie mit Stripo arbeiten, können Sie alle Bilder, die Sie hinzufügen, automatisch komprimieren. Aktivieren Sie einfach die Bildkomprimierung und wählen Sie den gewünschten Komprimierungsprozentsatz in Ihren Arbeitsbereichseinstellungen aus.
Geräteoptimierung
E-Mail-Banner mit weihnachtlichen Motiven erfordern eine Geräteoptimierung, um sicherzustellen, dass Ihre Vorlage auf allen Geräten zugänglich und effektiv ist. In der Weihnachtszeit, wenn die Menschen in Eile sind, nutzen sie meist ihre Mobilgeräte oder Tablets. Daher ist es entscheidend, dass Ihre Vorlage zusammen mit allen CTA-Buttons und Illustrationen optimiert ist.
Markenbildung
Durch die Erstellung eines Feiertagsbanners für E-Mails mit Markenbildern können Sie die Markenbekanntheit steigern und neue Kunden gewinnen, was für das Unternehmen von entscheidender Bedeutung ist. Achten Sie darauf, dass das Feiertagsbanner mit anderen Markenmaterialien übereinstimmt. Fügen Sie die Markenvorlage hinzu und passen Sie das Bannerdesign an die visuelle Identität Ihrer Marke an. Dadurch werden Ihre E-Mail-Kampagnen zu den Feiertagen leicht wiedererkennbar. Ein Logo, eine Typografie und ein Farbschema helfen Verbrauchern und Unternehmen, Vertrauen und Loyalität aufzubauen, was zu mehr Engagement, Umsatz und ROI führt.
Linkaufbau
Stellen Sie sicher, dass Ihr Feiertagsbanner-Bild mit der gewünschten Landing Page verlinkt ist! Es ist ganz einfach, einen Link zu einem beliebigen Bild hinzuzufügen. Wenn Sie beispielsweise für ein bestimmtes Produkt werben, könnte ein Verweis auf die Produktseite eine gute Wahl sein. Die Empfänger klicken darauf und interagieren direkt mit Ihren Inhalten. Auf diese Weise steigern Sie Ihre Klickrate und fördern die Konversionen direkt über dasselbe Feiertagsbanner.
Erstellen eines Banners mit Stripo
Mit unserem Editor können Sie innerhalb weniger Minuten mit der Erstellung von E-Mail-Bannern beginnen. Wir haben einige Tipps zusammengestellt, um Ihnen diesen Vorgang zu erleichtern:
Vorbereiten Ihres Banners
Zunächst müssen Sie Ihrer E-Mail-Vorlage ein Banner hinzufügen. Wir haben einen speziellen Banner-Block, den Sie per Drag-n-Drop in Ihre Vorlage ziehen müssen.
Klicken Sie anschließend auf das hinzugefügte Banner, um dieses Menü zu öffnen. Bevor Sie die Abmessungen und andere Parameter anpassen können, müssen Sie ein E-Mail-Bannerbild anhängen. Sie haben verschiedene Möglichkeiten: Sie können einfach ein Bild von Ihrem Gerät hochladen, Stockbilder verwenden oder mit unserer KI-Bildfunktion ein einzigartiges Bild erstellen.
Für unser Beispiel haben wir eine Option aus dem Fotostock ausgewählt. Sie müssen lediglich auf das gewünschte Bild klicken (geben Sie eine Suchanfrage in das entsprechende Feld ein, wenn Sie nicht sofort passende Bilder für Ihre Designideen finden), und es wird automatisch an das Banner angehängt.
Sobald dies erledigt ist, können Sie mit der Anpassung der E-Mail-Banner-Parameter fortfahren.
Ändern der Breite und Höhe für den Desktop
Um die richtige Größe für das E-Mail-Banner festzulegen, gehen Sie zur Registerkarte „Einstellungen“. Im Abschnitt „Größe“ können Sie die erforderlichen Abmessungen festlegen.
Es gibt mehrere Schaltflächen, mit denen Sie die richtige Größe für Ihr Banner einstellen können (von links nach rechts):
- passt das Bild an die Größe des Containers an;
- stellt die tatsächliche Bildgröße wieder her;
- modus zum Anpassen der Breite;
- modus zum Anpassen der Höhe;
- schaltflächen zum Anpassen der Größe (funktionieren separat für den Modus zum Anpassen der Breite und den Modus zum Anpassen der Höhe).
Stellen Sie einfach mit diesen Schaltflächen die richtigen Abmessungen ein, und schon kann es losgehen.
Sie können auch eine Zuschneideform im entsprechenden Abschnitt festlegen, indem Sie aus vordefinierten Ausrichtungen (sowohl vertikal als auch horizontal) auswählen.
Ändern der Breite und Höhe für mobile Bildschirme
Damit Ihr E-Mail-Banner auf mobilen Bildschirmen korrekt angezeigt wird, klicken Sie auf die Option „Mobile Ansicht“, um die Einstellungen für die mobile Version in Stripo zu öffnen.
Wir haben standardmäßig eine Option für responsive Bilder aktiviert, sodass Sie in den meisten Fällen nichts unternehmen müssen, da diese Option dafür sorgt, dass sich Ihr Bannerbild automatisch an die Bildschirmabmessungen anpasst.
Sie können diese Option deaktivieren, wir raten jedoch davon ab, da Ihr Bannerbild nach der Deaktivierung unabhängig von der Bildschirmauflösung statisch bleibt. Dies kann zu einer schlechten Darstellung der Bilder und Inhalte in Ihrem Banner führen.
Das Ändern der Ernteform funktioniert genauso wie in der Desktop-Version.
Bilder und Links hinzufügen
Um Ihrem Banner eine Schaltfläche hinzuzufügen, bieten wir Ihnen eine Option, mit der Sie ein weiteres Bild über Ihrem Banner einfügen können. Sie können Ihr relevantes Hintergrundbild mit einem anderen kombinieren, um einzigartige Designs für Ihre E-Mail zu erstellen oder die Aufmerksamkeit auf Ihr Banner zu lenken.
Klicken Sie dazu in den Einstellungen des Bannerblocks auf die Option „Bild“.
Es wird dasselbe Menü zum Hinzufügen eines Bildes angezeigt, das Sie zuvor für das gesamte Banner gesehen haben. Wählen Sie einfach die richtige Option zum Hinzufügen eines Bildes aus, um fortzufahren.
Nach dem Hinzufügen wird Ihr Bild in der Mitte Ihres Banners angezeigt, und Sie sehen ein kleines Menü mit Optionen, um die Deckkraft dieses Bildes und seine Drehung einzustellen, es nach Bedarf zu spiegeln und visuelle Filter darauf anzuwenden.
Um die Größe dieses zusätzlichen Bildes zu ändern, müssen Sie die Ecken des Rahmens ziehen, woraufhin sich die Größe Ihres Bildes ändert. Sie können das Bild auch innerhalb der Bannerränder ziehen, indem Sie es anklicken und ziehen, sowie manuell drehen, indem Sie den Punkt über dem Rahmen berühren.
Sie haben Ihr CTA-Bild hinzugefügt, um Aufmerksamkeit zu erregen. Wie machen Sie nun Ihr Banner anklickbar? Sie müssen lediglich den Link in das entsprechende Feld einfügen. Sobald Sie dies getan haben, verwandelt sich Ihr gesamtes Banner in einen großen CTA-Button, der den Empfänger auf die gewünschte Seite weiterleitet.
Texte hinzufügen und anpassen
Wenn Sie weitere Optionen zum Gestalten Ihres Bannerbildes benötigen, können Sie Text darüber hinzufügen. Klicken Sie auf die Option „Text“ über Ihrem Banner.
Der Textknoten wird automatisch in der Mitte Ihres Banners angezeigt, und Sie sehen eine Registerkarte mit verschiedenen Textoptionen.
Um Ihren Text einzugeben, doppelklicken Sie einfach auf den Textknoten, um den Standardtext auszuwählen, und geben Sie Ihren neuen Text ein.
Was die Optimierungsoptionen angeht, so stehen Ihnen eine ganze Reihe davon zur Verfügung. Sie können die Position, Größe und Drehung manuell ändern, indem Sie die Ecken des Textknotenrahmens oder den gesamten Knoten selbst auf die gleiche Weise wie bei Ihrem Bild verschieben.
Was den Text selbst betrifft, können Sie:
- die Schriftart, Größe und Farbe auswählen;
- die Textausrichtung festlegen;
- stile wie Fettdruck, Kursivschrift, Unterstreichung oder Durchstreichung anpassen;
- die Groß-/Kleinschreibung ändern;
- die Deckkraft und Drehung festlegen und den Text nach Bedarf spiegeln.
So sieht unser Textknoten aus, nachdem die meisten Optionen angewendet wurden. Passen Sie Texte ganz einfach an Ihre E-Mail-Designanforderungen an.
Zusammenfassung
Die richtige Größe Ihres E-Mail-Banners sorgt für eine übersichtliche Struktur Ihrer Nachricht und lenkt die Aufmerksamkeit Ihrer Abonnenten auf die zentralen Elemente Ihrer Botschaft. Jetzt, da Sie die perfekte Breite und Höhe eines E-Mail-Banners kennen und wissen, wie Sie mit Stripo ein solches Banner erstellen können, sind Sie bestens gerüstet, um Ihre nächste Kampagne zu einem Erfolg zu machen!