ModernAccess / E-Mail

Logo

• Logo des Events
  Das Logo wird komplett angezeigt und nicht beschnitten. Extrem breite Logos können hierdurch sehr klein wirken und zu Darstellungs-Problemen führen.
• Fallback: Logo der Agentur

Farben

• Event > Design > E-Mail > Variablen
• Fallback: Agentur > Design > E-Mail > Variablen

Schrift

• Schrift aus Event > Design 
• Fallback: Agentur > Design

Bilder

Du kannst mit Hilfe von Abschnitten (siehe Doku) beliebig viele Bilder hinzufügen. Hier geht es nur um die Bilder, die im Template vorgesehen sind.

• Eventbild / Bei individuellen Mailings: Bild das im Mailing-Dialog für dieses Mailing hinterlegt wurde (Fallback: Eventbild)
• Breite 2.000px, die Höhe wird automatisch entsprechend der Original-Proportionen des Bilds berechnet
• Fallback: Wenn kein Bild hochgeladen wird, bleibt der Bereich leer
• Hintergrundbild
• Das Hintergrundbild des Events wird in der E-Mail NICHT genutzt

Variablen

• Für dieses Template werden nicht die Standard-Agenturfarben genutzt, sondern die Farben, die Du am Template (siehe oben "Farben") hinterlegst.
• Zusätzlich kannst Du diverse weitere Parameter anpassen. Alle Variablen inkl. deren Bedeutung haben wir im nächsten Punkt Verfügbare Variablen beschrieben

Schrift

• Text Schriftgröße & Zeilenhöhe
  Schriftgröße & Zeilenabstand für normalen Fließtext
• Kleiner Text Schriftgröße & Zeileanabstand
  Schriftgröße & Zeilenabstand für kleinere Texte, die nicht so stark ins Gewicht fallen sollen
  Beispiele: Impressum, Links im Footer der E-Mail, zusammenfassende Tabelle
• Überschrift Schriftgröße und Zeilenhöhe
  Schriftgröße & Zeilenabstand für H1 - Überschrift 1. Grades
• Überschrift Gewicht
  Dicke der Schrift für H1 - Überschrift 1. Grades
  normal || bold
• Kleinere Überschrift Schriftgröße & Zeilenhöhe
  Schriftgröße & Zeilenabstand für H2 - Überschrift 2. Grades
• Kleinere Überschriften Gewicht
  Dicke der Schrift für Überschrift 2. - 4. Grades
  normal || bold

Farben

• Hauptfarbe
  Hintergrundfarbe wenn man mit dem Cursor über Call-to-Action-Buttons fährt/hovert
• Hauptfarbe Text
  Textfarbe wenn man mit dem Cursor über Call-to-Action Buttons fährt/hovert
  Wichtig: Hoher Kontrast notwendig zu: "Hauptfarbe"
• Hauptfarbe: Überschrift
  Farbe für Überschriften 1. - 4. Grades
  Wichtig: Hoher Kontrast notwendig zu: "Hintergrundfarbe: Fläche", "Hintergrundfarbe: Sektion" und "Trennlinien-Farbe"
• Akzentfarbe
  Hintergrundfarbe für Call-to-Action-Buttons (z. B. "Anmelden") oder Rahmen- und Text-Farbe für Call-to-Action-Buttons zweiten Grades (z. B. "Absagen")
• Akzentfarbe Text
  Textfarbe für Call-to-Action-Buttons (z. B. "Anmelden") und Hintergrundfarbe für Call-to-Action-Buttons zweiten Grades (z. B. "Absagen")
  Wichtig: Hoher Kontrast notwendig zu: "Akzentfarbe"
• Linkfarbe
  Farbe für Links im Fließtext
  Wichtig: Hoher Kontrast notwendig zu: "Hintergrundfarbe: Fläche", "Hintergrundfarbe: Sektion" und "Trennlinien-Farbe"
• Linkfarbe Text
  Falls es Links gibt, die mit einer Fläche hinterlegt sind, hat die Fläche die Linkfarbe und der Text auf der Fläche die hier angegebene Farbe (eher selten)
  Wichtig: Hoher Kontrast notwendig zu: "Linkfarbe"
• Schriftfarbe
  Farbe der Texte und Informationen
  Wichtig: Hoher Kontrast notwendig zu: "Hintergrundfarbe: Fläche", "Hintergrundfarbe: Sektion" und "Trennlinien-Farbe"
• Schriftfarbe Hell
  Farbe für weniger relevante Informationen, die in den Hintergrund rücken sollen
  Beispiel: Impressum, Links im Footer der E-Mail
  Wichtig: Hoher Kontrast notwendig zu: "Hintergrundfarbe: Fläche", "Hintergrundfarbe: Sektion" und "Trennlinien-Farbe"
• Hintergrundfarbe: Seite
  Hintergrundfarbe des Containers, in dem der Inhalt steht (am Smartphone nicht sichtbar, da es aufgrund der geringeren Größe keinen Rand um den Container herum gibt)
• Hintergrundfarbe: Fläche
  Hintergrundfarbe des Hauptbereiches der E-Mail
• Hintergrundfarbe: Sektion
  Aktuell nicht verwendet
• Trennlinien-Farbe
  Aktuell nicht verwendet / Farbe von Trennlinien, die nicht so auffällig sein sollen oder Hintergrundfarbe von Boxen in denen eine relevantere Textinfo steht
• Hintergrundfarbe: Umfrage
  Nur dann relevant, wenn man eigene Bilder für die Umfrage-Mailings (Smileys, Sterne) nutzt. Ansonsten bitte immer weiß (#FFFFFF) lassen.
• Schriftfarbe Umfrage
  Die Farbe der Smileys und Sterne im Umfrage-Mailing
• Hoverfarbe: Umfrage
  Die Farbe der Smileys und Sterne im Umfrage-Mailing wenn man mit dem Cursor darüber fährt/hovert. Wird nicht in jedem E-Mail-Programm richtig angezeigt.

Rahmen

• Eckenradius: Standard
  Der Eckenradius des Inhalt-Containers und darin platzierter Bilder.
• Eckenradius: Akzent
  Der Eckenradius der Call-to-Action-Buttons
• Eckenradius Grid-Elemente
  Aktuell nicht verwendet

Schatten

• Schatten: Oberfläche
  Schatten des Inhalt-Containers auf "Hintergrundfarbe Seite"
• Schatten: Grid
  Nicht verwendet / Schatten der Abschnitts-Bereiche (im Infomailing)
• Schatten: Haupt
  Wenn Standard-Elemente einen Schatten haben, dann diesen
  Beispiel: Infomailing > Abschnitt Bild&Text > Bild
• Schatten: Akzent
  Schatten der Call-to-Action-Buttons ersten Grades
• Schatten: Aktionen
  Nicht verwendet

Sonstiges

• Breite: Oberfläche
  Breite des Inhalt-Containers auf Desktop-Rechnern (Empfehlung: Nicht verändern - kann ggf. Probleme bereiten!)
• Logo: Höhe
  Höhe des Logos (Breite wird automatisch berechnet)
• Logo: Ausrichtung
  Ausrichtung des Logos im Kopfbereich (left || right || center)

Outlook

Outlook hat manchmal etwas speziellere Anforderungen. Daher könnt Ihr hier für die Buttons folgendes einstellen:

• Outlook: Button Border-Radius
  Rundung der Ecken eines Buttons prozentual zur Höhe (siehe unten)
• Outlook: Button Höhe
  Höhe der Buttons
  WICHTIG: Bei Retina-Displays wird die Größe Zahl, daher lieber größer angeben… Outlook :/
• Outlook: Button Breite
  Breite der Buttons
  WICHTIG: Bei Retina-Displays wird die Größe Zahl, daher lieber größer angeben… Outlook :/

Wir haben bei dem neuen Template viel Wert auf mehr Individualisierung gelegt.

Wenn Dir die verfügbaren Variablen (siehe oben) nicht ausreichen, kannst Du jetzt auch ganz einfach das CSS der E-Mail anpassen ohne direkt in den HTML-Code eingreifen zu müssen. Der Vorteil ist, dass der Rest Deiner E-Mails update-fähig bleibt, wenn wir Verbesserungen/Veränderungen an den Templates vornehmen.

So passt Du das CSS an:

• Gehe zu Agentur > E-Mail-Templates (Direkt-Link)
  (Business-Tarif und entsprechende Manager-User-Rechte notwendig)
• Wähle in der Liste "Header: CSS-Include"
• Kopiere den "Standard Code", passe ihn nach Deinen Wünschen an und füge ihn dann bei "Dein Code" ein
• Klicke oben rechts auf "Speichern"
• Fertig

Das Template ist von der Struktur her für eine barrierefreie Nutzung ausgelegt (bzw. wird aktuell noch dahingehend weiter optimiert).

Du musst aber darauf achten, dass Eure Farben die entsprechenden rechtlich vorgegebenen Kontraste einhalten. Wenn Du an den Variablen etwas änderst, solltest Du auch darauf achten, dass die Schriftgrößen den Richtlinien entsprechen.

Im Gegensatz zum Template für die Eventseite gibt es hier die Option, getrennte Werte für die reguläre oder kontrastreiche Darstellung zu pflegen - dies wird jedoch nicht von allen E-Mail-Programmen unterstützt.

Alle Details zum Thema Barrierefreiheit und wichtige Tipps findest Du hier: guestoo barrierefrei einsetzen

Keine Besonderheiten bei diesem Template

Dieses Template ist im Public Beta Stadium und wird von einigen Kunden auch produktiv genutzt. Folgende Punkte sind noch auf unserer Road-Map:

• Optimierte Button-Darstellung für ältere Outlook-Mailclients
  Veröffentlichung: In der Nacht auf den 17.5.2025

Falls der Standard nicht reicht, bieten wir die Möglichkeit individuelle Templates zu erstellen. Meldet Euch hierzu einfach bei unserem Support:

support@guestoo.de