Eine Nachricht kann verschiedene Stile erhalten:
Globaler Stil – Legt allgemein fest, wie Überschriften und anderer Text angezeigt werden, sowie allgemeine Abstände, Breite und Hintergrundfarben. Der globale Stil gilt für die gesamte Nachricht, aber ein Teil der Gestaltung kann auf Komponentenebene und/oder auf Zeilen-/Spaltenebene außer Kraft gesetzt werden.
Komponentenstil – Ermöglicht die Einstellung der Hintergrundfarbe für die Komponente. Direkter Zugriff auf CSS-Stiloptionen ist ebenfalls möglich und wenn Layoutänderungen an der Komponente vorgenommen werden, wird der globale Stil außer Kraft gesetzt.
Zeilenstil – Bietet Gestaltungsoptionen auf Zeilenebene. Wenn mindestens zwei Spalten hinzugefügt wurden, ist ein zusätzliches Spaltenbreitenverhältnis konfigurierbar.
Spaltenstil – Bietet Stil- und Layoutoptionen auf Spaltenebene.
Globaler Stil
Auf den globalen Stil kann im Modus Bearbeiten direkt von der Nachricht aus über den Bereich auf der rechten Seite zugegriffen werden, nachdem Sie auf den Link Stil geklickt haben.
Der Stil folgender Elemente kann eingestellt werden:
- Hintergrundfarbe – Legt die Farbe des Hintergrunds des Browserfensters fest.
- Breite – Legt die Breite der Nachricht fest, in die Zeilen und Spalten gezogen werden können. Die Breite ist standardmäßig auf 600 px eingestellt.
- Überschriften, normaler Text und Schaltflächen – Legt die Schriftart und Farbe des Textes fest. Für Schaltflächen kann auch die Hintergrundfarbe festgelegt werden.
- Zeilen – Legt die Hintergrundfarbe der Zeilen fest.
- Spalten – Legt die Hintergrundfarbe der Spalten fest.
- Abstand — Legt den Platz zwischen Zeilen und Spalten fest. Verwenden Sie den Schieberegler, um den Abstand zu erhöhen/zu verringern.
- Rand auf Mobilgeräten – Fügt automatisch einen Abstand um den Inhalt der Nachricht hinzu, wenn diese auf einem mobilen Gerät angezeigt wird.
Es ist möglich, die Stile einiger dieser Elemente direkt im Stil-Editor zu bearbeiten. Um auf den auf den Stil-Editor zuzugreifen, klicken Sie auf das Stiftsymbol. Es ist eine Vorschau verfügbar.
Hinweis: Variablen können auch verwendet werden, um den Stil der endgültigen Nachricht zu beeinflussen (z. B. um unterschiedliche Farben für verschiedene Marken festzulegen).
Hinweis: Die globale Stil von Vorlagen kann gesperrt/entsperrt werden.
Beispiel: Wir
haben die Schriftartfarbe des Textes in unserer Vorlage sowie die Farben, die für die
Schaltflächen verwendet werden, geändert. Außerdem wurden auch einige Abstände zwischen Zeilen und Spalten
eingestellt. 
Komponentenstile
Für einige Komponenten können spezifische Layout- und Stiloptionen eingestellt werden, indem Sie auf das grüne Stiftsymbol klicken, während Sie den Mauszeiger über eine Komponente bewegen.
Weitere Informationen zu den Optionen für die einzelnen Komponenten finden Sie in den folgenden Abschnitten:
Zeilenstil
Die Optionen für den Zeilenstil können durch Klicken auf das blaue Stiftsymbol oben rechts eingestellt werden, während Sie den Mauszeiger über eine Zeile bewegen.
Dadurch werden die Zeileneigenschaften auf der rechten Seite des Bildschirms angezeigt.
Wenn der Zeile mindestens zwei Spalten hinzugefügt wurden, kann das Spaltenbreitenverhältnis festgelegt werden.
Beispiel:
Wir haben eine Nachricht, die eine Header-Zeile mit 3 Spalten enthält (Bild, Links zu verschiedenen Bereichen der Website und Copyright-Text):
Stellen
Sie den Zeilenstil im Header auf [1
| 2 | 1] ein.
So haben die Links zu den einzelnen Abschnitten der Website
mehr Platz in der Nachricht:
Die Hintergrundfarbe, die Geräte, auf denen die Zeile angezeigt wird, und das Verhalten auf Mobilgeräten können eingestellt werden.
Das Verhalten auf Mobilgeräten definiert, wie die Inhalte bei Wiedergabe
auf einem Mobilgerät angezeigt werden. Sie können es bei der horizontalen Anzeige belassen oder
sie zu vertikal ändern.
Sie können auch auf den
Stil-Editor (durch Klicken auf den Stift) zugreifen und Änderungen direkt im CSS vornehmen.
Beispiel:
Im obigen Beispiel für den Header haben wir den Zeilenstil wie folgt festgelegt:
- Hintergrundfarbe: #c3e1e2
Das Ergebnis ist wie folgt:
Um den Stil weiter zu verfeinern, klicken wir auf das Stiftsymbol und legen den folgenden benutzerdefinierten Stil fest:
- padding: 25 px;
- border-bottom-width: 1 px;
- border-bottom-style: solid;
- border-bottom-color: #000000;
Das Ergebnis ist wie folgt:
Hinweis: Das Zeilenlayout von Vorlagen kann gesperrt/entsperrt werden.
Spaltenstile
Sie können auf die Spaltenstile zugreifen, indem Sie mit dem Mauszeiger auf das gelbe Symbol klicken, wenn Sie über eine Spalte fahren.
Die folgenden Optionen werden angezeigt:
Die Hintergrundfarbe und das Spaltenlayout (Inhaltsausrichtung) können hier eingestellt werden. Sie können auch auf den Stil-Editor (durch Klicken auf den Stift) zugreifen und Änderungen direkt im CSS vornehmen.
Beispiel:
Im oben erwähnten Beispiel für den Header haben wir den Spaltenstil für die mittlere Spalte (die Links zu den Bereichen der Website enthält) wie folgt festgelegt:
- Hintergrundfarbe: #caf4d6
- Spaltenlayout horizontal mit zentrierter Textausrichtung
Das Ergebnis ist wie folgt:
Um den Stil weiter zu verfeinern, klicken wir auf das Stiftsymbol und legen den folgenden benutzerdefinierten Stil fest:
- border-style: dashed;
- border-color: #4258e8;
- border-width: 2 px;
Das Ergebnis ist wie folgt:
