Diese 6 Mail Designer Layout-Blöcke brauchst du für einen perfekten Newsletter
Layoutblöcke sind die zentralen Bausteine jedes Mail Desinger Newsletters. Sie ordnen dein Mail-Layout, geben ihm Struktur, Form, Style. Wir haben uns 6 Layout-Blöcke herausgepickt, mit denen du den Look deiner Desktop- und Mobil-Version definieren kannst.
Der Bildplatzhalter: das Universaltalent
Einer der wichtigsten Layout-Blöcke ist der Bildplatzhalter. Es ist ein super-flexibler Content-Container für jegliches Designmaterial wie Bilder, Schriften und Grafiken. Alles, was du in ihm platzierst, wird später auch als Bild gerendert. Er wird also beim Empfänger auf jeden Fall so dargestellt, wie du ihn in deiner Design Idee erstellt hast.
Du kannst somit beispielsweise auch ohne Probleme ausgefallene Schmuck- oder Webschriften als Überschriften verwenden.
Dieser Layout-Block eignet sich also sehr gut, um spannende Newsletter-Aufmacher mit Bild, Headline-Texten, Vorspann und einer Haupt-Link kombinieren.
Tipps
• Du kannst auf deinem Aufmacher-Bild mehr als eine Call-to-Action verwenden, wenn du einen Zweifachen-Bildplatzhalter zu einem Bild zusammenstückelst (siehe Bild unten).
• Beziehe deinen Background als Aufmacher-Bild mit ein und platziere ein transparentes Rechteck aus der Grafikpalette darauf. So kannst du perfekt Text und Infos positionieren und erzielst coole Transparenz-Effekte.
• Verwende eine ein feine Linie (1px oder 2px), um deinen Aufmacher vom Rest des Layouts leicht abzutrennen
Der Abstandhalter: Ordnung muss sein
Um einzelne Newsletter-Parts zu separieren, gibt es den Abstand-Layoutblock. Er ist extrem wichtig für die Feinjustierung deines Designs und für ein luftiges Erscheinungsbild.
Tipps
• Für einen transparenten Abstand löschst du einfach den Inhalt eines Abstands mit der Delete-Taste heraus. Schon scheint dein Hintergrund-Bild oder die gewählte Background-Farbe durch.
• Versuche einen gleichmäßigen Abstandsrhythmus in deinem Newsletter einzuhalten. Halte also immer 20px bei den Abständen ein, damit dein Layout harmonischer wirkt.
Aufmacher im Poster-Style: einen Header im Magazin-Look erstellen
Der neue Layout-Block für Magazin-Aufmacher hilft dir einen Aufmacher im Web-Look zu kreieren. Es ist eine flexible Kombination aus Bildplatzhaltern mit einem Hauptbild und mehren kleinen Einzelbildern.
Tipps
• Diesen Bildplatzhalter kannst du sehr gut einem Hauptbild zwei alternative Call-to-Actions anordnen.
• Zeige eine Hauptansicht deines neuen Produkts, plus zwei Detail-Aufnahmen.
• Achte auf die Reihenfolge, es gibt zwei verschiedene Magazin-Layoutblöcke. Bei einem wird das größte Bild in der Mobilvariante als erstes gezeigt, bei der anderen als letztes.
Lesefreundlich bleiben: Der puristische Text- mit Bild-Layoutblock
Den Text-plus-Bild-Layoutblock verwendest du, wenn du wie im folgendem Beispiel längere Texte in deinem Layout in Kombination mit einem Bild darstellen möchtest.
Tipps
• Ein den Textbereichen kannst du als bevorzugte Schrift natürlich auch einen ausgefallenen Webfont verwenden. Du kannst als E-Mail-sichere-Schrift einen Font definieren, den jeder Mail-Client sicher darstellen kann (beispielsweise Arial). Dieser Ersatzfont kommt zum Tragen, wenn Mail-Clients deine Schrift nicht unterstützen.
• Brauchst du etwas mehr Abstand bei denen Text-Abschnitten, positionierst überhalb und unterhalb des Text-Bild-Layoutblocks einen Abstandhalter-Layoutblock. Diesen kannst gegebenfalls in der Farbe des Text-Hintergrunds einfärben.
• Für die Feinjustierung am Textabsatz kannst du auch die Einstellungen für „Vor dem Absatz“ und „Nach dem Absatz“ verwenden.
Verkaufen und anteasern: So stellst du dir einen Content-Layout-Block zusammen
Manchmal ist eine Kombination aus mehreren Layoutblöcken gefragt. Mit dieser Layoutblock- Anordnung kannst du beispielsweise randlos Artikel-Bilder zeigen und auf deine einzelnen Store-Items verlinken:
- Abstandhalter zum Aufmacherbild einbauen
- 3er-Bildlayoutblock ohne Rand für deine Produkt-Bilder einfügen, Ränder anpassen, Text zentrieren
- 3er-Text-Block für deine Produkt-Feature-Headline einfügen (Tipp: du kannst im Schriften-Menü auch gestrichenen Text beim Stil einstellen. Gut für Steichpreise
- Weiteren kleinen Abstand einfügen
- Einen weiteren 3er-Text-Layoutblock hineinziehen, Texte anpassen
- Weiteren Abstand verwenden
- 3er-Bildlayoutblock einfügen und dort deine „Buy“-CTAs als Bild einbauen
Tipp: Eine einfache Alternative ist auch der Layoutblock mit Überschrift, Bildplatzhalter und Beschreibungstext. Sie hat den Vorteil, dass hier die Items auch gut in der Mobilversion dargestellt werden. Allerdings musst du hier Ränder an deinen Bildern in Kauf nehmen
So kannst du dir schnell eine Kopfzeile mit Logo und Social Links bauen
Um eine Kopfzeile mit mehren Links zu bauen bieten sich verschiedene Layoutblöcke an. Einmal gibt eine Variante mit einem Bildplatzhalter für das Firmen-Logo und vier weiteren Unterteilungen für Textlinks.
Andererseits gibt es auch eine praktische Layout-Block Variante in der du ganz links deine Kontaktadresse positonieren kannst und daneben bis zu vier Social Links als verlinkte Bild-Icons.
Worum geht es bei Newslettern? Du möchtest so schnell wie möglich Herzen, Klicks, Follower und Fans gewinnen. Bei nur 8 Sekunden Aufmerksamkeitsspanne deiner Empfänger kann ein intelligent aufgebauter, bildlastiger Newsletter also den Quick-Link schaffen, um erfolgreich deine Verkäufe und Aktionen zu triggern.
Und ab Herbst sind Zielgruppen sicher besonders empfänglich und kauffreudig. Dann, wenn sie am Wochenende wohlig auf der Couch sitzen und sich im Night-Shift-Schein von lumineszierenden iPhone-Screens aufhalten und sich nicht vom Sonnenuntergang am Badesee blenden lassen.
Jetzt ist die beste Gelegenheit, deine E-Mail-Aktionen hochzufahren – Halloween, Thanksgiving, Black Friday, Weihnachten und Neujahr warten schon.
Mit cleveren Design-Moves lässt sich mit Mail Designer Pro das Erfolgspotential erhöhen. Wir zeigen dir wie…
Den Wallpaper-Modus in Mails hochfahren – Backgrounds mit Bang!
Bilder verkaufen, das ist klar. Sie versetzen deine Empfänger in den gewünschten Mood und du kannst Produkte sowie Aktionen emotional stärker aufladen.
Mit der verbesserten Hintergrund-Funktion von Mail Designer Pro kannst du atemberaubende Effekte mit vollflächigen Hero-Images erzeugen.
Sei kreativ, stretche Mood-Pictures über dein gesamtes Mail und stimme die Layout-Komposition genau auf dieses Image auf. Coole große Fonts geben deiner Aktion meist einen zusätzlichen Impact – wenn der Slogan performt.
Tipp: Beim Ausprobieren ist wichtiger ein Image zu finden, dass perfekt im Mobil-Modus funktioniert, denn gerade am Smartphone musst du bedenken, dass deine Empfänger auch scrollen. In dieser Zeit müssen sie: in den Mood kommen, den Style erkennen, den Preisvorteil erfassen und sowie Aktionszeitraum verstehen.
Bilder werten deinen Newsletter mit Style auf: Eine spezielles Herbst-Menü fürs Restaurant, eine Einladung zum „Tag der offen Tür“, Blitzdeals zum Wochenende – die Intention lässt sich durch richtige Backgrounds subtil verstärken. Für das Newsletter-Layout musst du nur ein wenig Geschick mitbringen. Wir zeigen dir, wie Hintergrund-Artworks in der Desktop- und Mobil-Version Ihre Wirkung entfachen.
Das passende Background-Motiv finden
Je größer, desto besser: Idealer Weise suchst du dir Hintergrundbilder mit mindestens 4000px Breite aus. So hast du noch Spielraum beim Positionieren und das Bild bleibt selbst bei einer Retina-Anzeige scharf.
Extra Spielraum: Denk daran, dass du höchstwahrscheinlich Textkästen auf deinem Bild positionieren wirst, deswegen sollte das Bild nicht an allen Stellen extrem kleinteilig sein, sondern auch ruhige Bildpassagen enthalten (ggf. durch etwas Tiefenunschärfe). So findest du Spots, über die du besser Headlines und Texte schreiben kannst.
Bilddatenbanken als Inspiration: Wer im Netz etwas sucht, findet einige gute Image-Datenbanken, über die man lizenzfreie Bilder downloaden: beispielsweise diese…
Das Browsen durch die vielen Bilder gibt einem oft außergewöhnliche Newsletter-Ideen. Am Besten ist es natürlich, man hat selbst gute Bilder.
Layout-Cheet-Sheets: Mails mit Hintergründen gestalten
Viel oder wenig Text: Im Vorfeld solltest du dich entscheiden, ob du mit transparenten Text-Kästen arbeitet möchtest oder mit Text-Layoutblöcken, die nicht durchscheinen. Letztere Variante bietet sich an, wenn du eher längere Text-Inhalte einfügst.
Deinem Hintergrund Platz geben: Versuche, den Kopf und das erste Drittel deines Newsletter frei zu halten. Hier soll dein Hintergrund-Bild besonders zur Geltung kommen. Für Texte verwendest du dann beispielsweise einen Text/-Bild-Layoutblock und verkleinerst ihn entsprechend wie im folgenden Beispiel. Texte sollten mindestens 16px groß sein, so funktionieren sie auch gut in der Mobil-Version.
Style durch transparente Layer: Verwendest du nur wenig Text, also bei kurzen Infos, Aktionen, Transaction-Mails – kannst du deinem Newsletter-Hintergrund mehr Raum geben. Hier kannst du mit Bildlayout-Blöcken arbeiten, auf die du Layer für deine Texte legst.
Wie unterschiedlich das Mooding durch ein Hintergrundbild wirken kann, siehst du in diesen 3 Varianten…
Für die Layer, ziehst du dir Rechtecke oder Kreise aus den Grafik-Tools auf deine Bild-Layout-Blöcke. Regle die Deckkraft auf etwa 80% herunter, sodass sie leicht durchscheinen. Bei dieser Methode musst du allerdings etwas aufwendiger die Mobil-Version anpassen.
Tipp: Klickrate erhöhen: Diese Variante kannst du ebenfalls einsetzen, um deine Call-to-Action zu forcieren. Verschiebe das Bild so, dass ein Element des Hintergrunds die Aufmerksamkeit auf einen deiner Links lenkt.
Einsetzen, Positionieren, Optimieren des Hintergrunds für die Desktop-Version
Um einen Hintergrund zu positionieren klickst du auf das Hintergrund-Icon links unten. Jetzt kannst du ein Bild auf den äußern Rand des Hintergrunds ziehen. Mit dem Zoom-Regler passt du die Größe des Bilds an deinen Newsletter an. Mit festgehaltener Maustaste kannst du im Inneren Bereich dein Hintergrund-Bild verschieben.
Tipps: Durch die Hintergrund-Bilder kann dein Newsletter von der Datenmenge her sehr groß werden. Über Hintergrund optimieren ist es möglich, das Artwork stärker zu komprimieren.
Entkoppeln und Anpassen des Hintergrunds für die Mobilversion deines Newsletters
Für deine Mobil-Version musst du einen alternativen Ausschnitt deines Hintergrunds wählen. Wechsle in die Mobile-Layout-Ansicht für Smartphones und hier in den Hintergrund-Modus.
Durch leichtes verschieben des Hintergrunds fragt dich Mail Designer Pro, ob du den Hintergrund vom Desktop-Design entkoppeln möchtest. Nach dem Entkopplen kannst du nun den geeigneten Hintergrund an die schmale Smartphone-Breite anpassen.
5 Tipps für catchy CTAs für eine gute Konversion
Bei deinem Aktionslink beziehungsweise der „Call to Action“ (CTA) solltest du dich von modernen Webtrends inspirieren lassen. Auch hier gilt wieder: die CTA muss zuerst mobil perfekt funktionieren und dann solltest du dieses Konzept auf die Desktop-Variante übertragen.
Übrigens, der Text macht den Klick – motivierende Aufforderungen oder eine Lösung für ein Problem sind besser, als plumpe Floskeln wie „hier laden“.
Eine einzige CTA ist immer stärker als fünf in einem Newsletter. Je weniger Auswahlmöglichkeiten deine Empfänger haben, desto stärker ist sie.
Wir haben hier 5 Design-Tipps für CTA-Design zusammengestellt…
• Slogan Boost: Arbeite mit einer modernen Typo, die du dir aus unseren Web-Fonts auswählst. Positioniere deinen Text prominent auf dein Aufmacher-Bild und highlighte ein einzelnes, motivierendes Wort, dass du zu deiner Main-CTA ausbaust. Tipp: Sonderzeichen wie „>“ können dem Text-Link Nachdruck verleihen.
• Transparente Flächen: Um deiner CTA einen modernen Look zu geben, kannst du mit transparenten Button-Grafiken arbeiten, auf die du einen Text in gefetteter, weißer Schrift setzt.
Alternative: du kannst auch einen einen größeren, transparenten, farbigen Textblock in den Aufmacher nehmen. Innerhalb dieser Fläche setzt du einen kontrastreichen Button mit weißer Schrift ein.
•Leichte Linien: Eine sehr moderne, stylische Methode: verwende eine einfache (1pt), leicht abgerundetes Outline in Kombination mit einem dünnen Thin-Schriftschnitt (z.B. Open Sans) positioniert auf einem unscharfen Aufmacher-Bild
• Vollkontakt – Hoher Kontrast: Übrigens – nicht die Farbe ist bei einer CTA entscheidend, sondern der Kontrast. Laut einer Studie steigerte ein Online-Shop seine Konversionsrate um über 30%, nur durch einen Wechsel des Buttons auf Grün. So wurden sie sichtbarer und haben sich stärker vom Hintergrund abgehoben. Interessante Farbverläufe oder Signalfarbe auf einem Designer-Grau sind also immer einen Versuch wert
• Bestplatz-Garantie: Überraschende Platzierung: Überrasche mit untypischen Button-Formen und Positionen. Wer sagt, dass man nicht auch mal einen runden Button verwenden kann, den du perfekt mit deinem Aufmacher-Bild abstimmst.
Überprüfe dein Hero-Image: gibt es Positionen auf deinem Bild, die als Eye-Catcher funktionieren? Passt der Lesefluss des Empfängers dazu? Hier wäre ein guter Platz für eine effektive CTA.
7 Mail Designer Pro Power-Tricks die jeder kreative Designer kennen muss
In Mail Designer Pro steckt wesentlich mehr als du denkst. Bist du bereit? Diese Power-Tipps geben dir Inspiration und neue Möglichkeiten beim Erstellen von Newslettern.
Wie du hochwertige PDFs im Nu erzeugen kannst
Mit der aktuellsten Version kannst du per Knopfdruck PDFs erstellen. Genial um Ideen und Flyer auszudrucken. Optimal um ein cooles Design schnell auf Facebook und in deine nächste Keynote-Präsentation einzubauen. So geht’s…
Wähle Ablage > Als PDF exportieren > fertig!
Genial! Webseiten scribbeln oder spontan eine Landing-Page produzieren
Schon mal daran gedacht, mit Mail Designer Pro einen Webseiten-Entwurf auszuprobieren? Erweitere die Breite deiner Design Idee auf die typischen 1024px und leg los. Gestalte deine Design Idee nach deinen Vorstellungen als Wepapge. Bist du fertig, wählst du bei den Export-Funktionen > Webseite / HTML aus.
Im Export-Fenster hast du jetzt die Möglichkeit einen Prefix für deine Image-URL anzugeben und kannst deine HTML-Datei benennen. Mail Designer merkt sich diese Export-Ziele, so musst du bei Änderungen und erneutem Export nicht lange nach den Server-Links suchen.
Desktop-Mailings direkt per Apple Mail versenden
Eine schnelle Sales-Aktion, eine Rundmail, ein Gutschein-Mailing, all das kannst du auch unkompliziert an deinen Apple Mail-Verteiler versenden. Allerdings ausschließlich als Desktop-Newsletter-Variante deiner Design Idee, da Apple Mail den Versand von responsive Varianten nicht unterstützt.
Wähle dazu in der Versende-Optionen Apple Mail aus. Tipp: Wenn du einen etwas schlankeren Newsletter (650 px) mit leicht vergrößerter Schrift (mind. 14px) verwendest, wird dein Newsletter auch auf aktuellen Smartphones gut funktionieren. In eine einspaltige, etwas schmalere Textspalte können Empfänger gut hinein zoomen.
Wie du mit Emojis und Symbolen in Mail Designer Pro stylische Akzente setzen kannst
Wusstest du, dass du Emojis & Symbole für deine Designs einsetzen kannst. Über Bearbeiten kannst du dir die komplette Emoji & Symbol Palette aufrufen und dann die Symbole und Zeichen als Text in einem Textblock einfügen und sie von dort in einen Bildbereich kopieren. Verwende sie bitte ausschließlich in Bildbereichen – so werden sie auch als Bild gerendert.
Über die Textgröße steuerst du die Größe. Jetzt kannst du lustige Emoji-Style-Headline erstellen oder die facettenreichen Symbole für Design- und Grafik-Akzente benutzen.
Einen Layoutblock-Style super-schnell ändern
Mit den Layoutblöcken kannst du deinen Newsletter schnell und easy kreativ zusammenbauen. Möchtest du den Style eines Layoutblocks schnell ändern, ziehst du einfach eine alternative Version auf den entsprechenden Layoutblock. Schon passt sich der Bereich dementsprechend an.
Wie du den Style von Text-Links individuell formatierst
Links müssen nicht immer nur in der langweiligen Standard-Kombination blau, mit Unterstreichung daherkommen – du kannst das in Mail Designer Pro auch ändern. Erstelle einfach einen Text-Link, switche dann zu den Schriftstil-Funktionen und ändere dort den Link bei Wortweise Hervorhebungen in deine gewünschte Farbe und entferne den Unterstrich, wenn du ihn nicht behalten möchtest.
Wie du die Grafik-Palette mit eigenen Items erweiterst
Benutzt du regelmäßig die gleichen Buttons oder Grafikelemente kannst du sie auch direkt in deine Grafik-Palette einfügen.
Ziehe eine mit Mail Designer erstellte Grafik auf den Desktop. Jetzt hast du davon eine .png Datei. In der Sidebar unter Inhalte kannst du sie nun bei den Grafik-Elementen (drittes Icon) ganz unten per drag-and-drop in den Bereich Benutzerdefiniert hineinziehen. So hast du sie immer parat.
7 geniale Google Fonts für Headlines
zur Zeit IN >>> Apple macht´s vor: FETTE Schriftarten
- Raleway
- Work Sans
- Montserrat
- Poppins
- Playfair Display
- Titillium Web
- Roboto
Great Vibes ( Schöne Handschrift 😃 )