Zum Hauptinhalt springen
Alle KollektionenE-Mail MarketingE-Mail Editor
Styles-Einstellungen für E-Mails
Styles-Einstellungen für E-Mails

Hier werden alle Styles-Einstellungen im Detail erklärt.

Hannah Krüger avatar
Verfasst von Hannah Krüger
Vor über einem Jahr aktualisiert

Mit dem Styles-Menü kannst du deine Corporate Identity in den Editor implementieren. Das Styles-Menü bietet dir zahlreiche Optionen, um E-Mails nach deinen Wünschen oder Designvorgaben zu erstellen.

Die folgenden Beschreibungen helfen dir, die einzelnen Styles-Einstellungen zu verstehen. Wie genau du die Styles bearbeitest, findest du in diesem Artikel heraus.


So findest du das Styles-Menü:

Die Styles sind in den folgenden Kategorien geordnet:


Border

Für Sections, Container und Grids kannst du Rahmenlinien hinzufügen. In den jeweiligen Komponenten-Einstellungen kannst du unter "Border" den Border-Type auswählen sowie definieren, zu welchen Seiten die Rahmenlinie hinzugefügt werden soll. Insgesamt gibt es fünf Border-Types, die du im Styles-Menü unterschiedlich designen kannst.

Border: Color

Wähle eine Farbe für den jeweiligen Border-Type aus.

Border: Style

Wähle den Style der Rahmen aus. Du kannst zwischen solid (durchgezogene Linie), dashed (gestrichelte Linie), dotted (gepunktete Linie) und double (doppelte Linie) wählen.

Border: Width

Definiere die Stärke der Rahmenlinie, am besten in Form einer Pixel-Angabe.


Button

Das Styles-Menü bietet zahlreiche Optionen, um Buttons nach deinen Wünschen und Vorstellungen zu designen. Es gibt insgesamt sechs Button Types, die du im Styles-Menü designen kannst. Beim Erstellen eines Newsletters kannst du dann in den Komponenten-Settings des Buttons wählen, welchen Type du nutzen möchtest.

Button: Background Color

Wähle eine Buttonfarbe bzw. Hintergrundfarbe für den jeweiligen Button Type aus. Solltest du mit den Farben, die im Dropdown-Menü angezeigt werden, nicht zufrienden sein kannst du unter Colors dir sechs Farben sowie mehrere Grautöne frei auswählen.

Button: Border Color

Ein Button kann eine Rahmenlinie haben und in diesem Feld definierst du die Farbe des Rahmens. Sofern du einen Button ohne Rahmen möchtest, klicke auf das kleine Kreuz im Eingabefeld, um die ausgewählte Farbe zu löschen.

Button: Border Radius

Bestimme die Stärke der Abrundungen an den Ecken. Für spitze Kanten gebe 0px an. Für einen rundlichen Button gebe maximal 25px an.

Button: Border Width

Hier definierst du die Stärke der Rahmenlinie in Form einer Pixel-Angabe.

Button: Font Family

Wähle eine Schriftart für den Text im Button aus.

Button: Font Size

Bestimme die Größe der Schrift für den Text im Button.

Button: Font Weight

Gebe die Breite der Schrift an. Wähle zwischen bold, normal und thin oder nutze folgende Nummern: 100 (thin), 200, 300, 400 (normal), 500, 600, 700 (bold), 800, 900

Button: Height

Wähle die Höhe für deinen Button. Gebe eine Pixelgröße an.

Button: Letter Spacing

Definiere den Abstand zwischen den einzelnen Buchstaben des Textes im Button.

Button: (Mobile) Width

Bestimme eine separate Breite des Buttons für die mobile Ansicht aus. Gebe hier einen Pixel-Wert an.

Button: Left / Right Spacing

Setze in diesem Feld ein horizontales Spacing um den Text herum.


Colors

Definiere insgesamt sechs Farben sowie einen Schwarz-, Weiß- und Grauton. Du kannst einen HEX-Farbcode eingeben oder mithilfe des Farbwählers dir eine Farbe aussuchen oder die RGB-Werte eingeben.


Default Settings

In den Default Settings kannst du u. a. die Content-Breite deiner Newsletter bestimmen.

Background Image

Du kannst ein Bild aus der Media Library wählen, das über den gesamten Hintergrund der E-Mail dargestellt wird.

Background Repeat

Sofern das Hintergrundbild zu klein ist, kannst du wählen, ob das Image mehrfach angezeigt werden soll. Das Bild kann sich horizontal (repeat-x) oder vertikal (repeat-y) wiederholen. Du kannst ebenso angeben, dass das Bild nur einmalig dargestellt wird (no-repeat).

Background Repeat (Mobile)

Inwiefern sich das Hintergrundbild wiederholt, kannst du separat für die mobile Ansicht einstellen.

Background Color

Definiere eine Hintergrundfarbe, die über den gesamten Newsletter dargestellt wird.

Background Color (mobile)

Wähle für die mobile Ansicht eine Hintergrundfarbe aus, die über der gesamten E-Mail angezeigt wird.

Text Color

Suche dir eine Schriftfarbe für die Default-Texte aus.

Font Family

Verleihe den Default-Texten eine eigene Schriftart.

Content Width

Die Content Width beschreibt den Bereich, in dem alle Inhalte platziert werden. Die Breite dieses Bereiches lässt sich definieren. Deine Änderungen werden in der Section-Komponente gespeichert. Wir empfehlen ca. 600-650px.

Content Width Small

Neben der klassischen Section-Komponente, die sich auf die Content Width bezieht, gibt es die Komponente "Section Small Width". Die Breite der Komponente kannst du hier wählen.

Content Width Large

Die Content Width Large bezieht sich auf die Breite der Komponente "Section Large Width". Verwendest du diese Komponente, werden alle Inhalte werden dieser Breite platziert.

Font Size

Bestimme eine Schriftgröße für die Default-Texte.

Line Height

Bestimme die Zeilenhöhe für die Default-Texte.


List Images

Mit der Komponente "List with Image Bullets" kannst du Strichlisten darstellen, welche als Bulletpoints ein von dir gewähltes Bild nutzen.

Spacing Bottom

Füge einen Abstand zwischen den einzelnen List Items hinzu. Das Spacing ist unterhalb des jeweiligen Items platziert.

Spacing Between

Wähle einen Abstand zwischen dem Bulletpoint und dem danebenstehenden Text.

Image Height

Als Bulletpoint kannst du ein kleines Image hinzufügen. Die Höhe der Bilder kannst du hier anpassen.

Image Width

Die Breite des Bildes, das als Bulletpoint dient, kannst du hier definieren.


Product

Du kannst Produkte dynamisch in deine E-Mail-Kampagnen einbauen. Die Product-Komponenten lassen sich hier stylen.

Description: Text Color

Wähle eine Textfarbe für die Produktbeschreibung.

Description: Custom Font Family

Für den Text der Produktbeschreibung kannst du eine benutzerdefinierte Schriftart wählen. Die Custom Font Family musst du zunächst in der oberen Leiste unter "Fonts" hinterlegen.

Description: Font Family

Wähle eine Schriftart für den Text der Produktbeschreibung. Du kannst hier Systemschriften nutzen.

Description: Font Weight

Definiere die Stärke der Schrift, die in der Produktbeschreibung steht.

Description: Letter Spacing

Ein Abstand der einzelnen Buchstaben innerhalb des Textes der Produktbeschreibung kann hier gesetzt werden.

Large/2 Column: Description Font Size

Wähle die Schriftgröße der Produktbeschreibung. Diese Änderung bezieht sich auf die Komponenten "Product Box Large" und "Product Box 2 Column".

Large/2 Column: Description Line Height

Definiere einen Zeilenabstand für den Text in der Produktbeschreibung. Diese Änderung bezieht sich auf die Komponenten "Product Box Large" und "Product Box 2 Column".

Large/2 Column: Price Font Size

Gebe eine Schriftgröße für den Preis an. Diese Änderung bezieht sich auf die Komponenten "Product Box Large" und "Product Box 2 Column".

Large/2 Column: Price Line Height

Gebe einen Zeilenabstand für den Preis an. Diese Änderung bezieht sich auf die Komponenten "Product Box Large" und "Product Box 2 Column".

Large/2 Column: Retail Font Size

Sobald ein Produkt einen Sale-Preis erhält, wird der Normalpreis durchgestrichen und kleiner angezeigt. Die Schriftgröße des Vollpreises kannst du hier bestimmen. Diese Änderung bezieht sich auf die Komponenten "Product Box Large" und "Product Box 2 Column". Weitere Anpassungen zum Retail Preis findest du, indem du in die Suchzeile "Retail" eingibst.

Large/2 Column: Retail Line Height

Sobald ein Produkt einen Sale-Preis erhält, wird der Normalpreis durchgestrichen und kleiner angezeigt. Den Zeilenabstand des Vollpreises kannst du hier bestimmen. Diese Änderung bezieht sich auf die Komponenten "Product Box Large" und "Product Box 2 Column".

Large/2 Column: Spacing Bottom

Unterhalb des Produktfeldes kannst du ein Spacing setzen. Diese Änderung bezieht sich auf die Komponenten "Product Box Large" und "Product Box 2 Column".

Large/2 Column: Spacing Description Bottom

Ein Spacing kann unterhalb der Produktbeschreibung gesetzt werden. Diese Änderung bezieht sich auf die Komponenten "Product Box Large" und "Product Box 2 Column".

Large/2 Column: Spacing Image Bottom

Zwischen dem Produktimage und dem Produkttitel kannst du einen Abstand hinzufügen und diesen hier definieren. Diese Änderung bezieht sich auf die Komponenten "Product Box Large" und "Product Box 2 Column".

Large/2 Column: Spacing Price Bottom

Unterhalb der Preisangabe kannst du ein Spacing setzen und dieses hier definieren. Diese Änderung bezieht sich auf die Komponenten "Product Box Large" und "Product Box 2 Column".

Large/2 Column: Spacing Title Bottom

Unter dem Produkttitel kannst du einen Abstand hinzufügen. Diese Änderung bezieht sich auf die Komponenten "Product Box Large" und "Product Box 2 Column".

Large/2 Column: Spacing Top

Oberhalb des gesamten Produktfeldes kann ein Spacing hinzugefügt werden. Diese Änderung bezieht sich auf die Komponenten "Product Box Large" und "Product Box 2 Column".

Large/2 Column: Title Font Size

Bestimme eine Schriftgröße für den Titel des Produktes. Diese Änderung bezieht sich auf die Komponenten "Product Box Large" und "Product Box 2 Column".

Large/2 Column: Title Line Height

Definiere einen Zeilenabstand für den Titel des Produktes. Diese Änderung bezieht sich auf die Komponenten "Product Box Large" und "Product Box 2 Column".

Medium: Description Font Size

Wähle eine Schriftgröße für die Produktbeschreibung aus. Diese Änderung bezieht sich auf die Komponente "Product Box for 2 Column Grid".

Medium: Description Number of Lines

Gebe an, wie viele Zeilen die Produktbeschreibung in Anspruch nehmen sollte. Diese Änderung bezieht sich auf die Komponente "Product Box for 2 Column Grid".

Medium: Description Line Height

Für die Produktbeschreibung kann ein Zeilenabstand bestimmt werden. Diese Änderung bezieht sich auf die Komponente "Product Box for 2 Column Grid".

Medium: Image Height

Die Höhe des Produktbildes kann hier bestimmt werden. Diese Änderung bezieht sich auf die Komponente "Product Box for 2 Column Grid".

Medium: Price Font Size

Gebe eine Schriftgröße für den Preis an. Diese Änderung bezieht sich auf die Komponente "Product Box for 2 Column Grid".

Medium: Retail Font Size

Sobald ein Produkt als Sale-Artikel gelistet wird, wird der Vollpreis neben dem Sale-Preis durchgestrichen angezeigt. Hier kann nun eine neue Schriftgröße definiert werden. Diese Änderung bezieht sich auf die Komponente "Product Box for 2 Column Grid".

Medium: Retail Line Height

Wähle einen Zeilenabstand für den Vollpreis. Diese Änderung bezieht sich auf die Komponente "Product Box for 2 Column Grid".

Medium: Spacing Bottom

Für das gesamte Produktfeld kann ein unteres Spacing gesetzt werden. Diese Änderung bezieht sich auf die Komponente "Product Box for 2 Column Grid".

Medium: Spacing Description Bottom

Unterhalb der Produktbeschreibung kann ein unteres Spacing gesetzt werden. Diese Änderung bezieht sich auf die Komponente "Product Box for 2 Column Grid".

Medium: Spacing Image Bottom

Zwischen dem Bild und dem Produkttitel kann ein Abstand definiert werden. Diese Änderung bezieht sich auf die Komponente "Product Box for 2 Column Grid".

Medium: Spacing Price Bottom

Unter der Preisangabe kannst du einen Abstand hinzufügen. Diese Änderung bezieht sich auf die Komponente "Product Box for 2 Column Grid".

Medium: Spacing Title Bottom

Zwischen dem Produktnamen und der Beschreibung kann ein Abstand definiert werden. Diese Änderung bezieht sich auf die Komponente "Product Box for 2 Column Grid".

Medium: Spacing Top

Überhalb des Produktfeldes kann ein Spacing bestimmt werden. Diese Änderung bezieht sich auf die Komponente "Product Box for 2 Column Grid".

Medium: Title Font Size

Bestimme eine Schriftgröße für den Produktnamen. Diese Änderung bezieht sich auf die Komponente "Product Box for 2 Column Grid".

Medium: Title Number of Lines

Gebe an, wie viele Zeilen der Produktname in Anspruch nehmen sollte. Diese Änderung bezieht sich auf die Komponente "Product Box for 2 Column Grid".

Medium: Title Line Height

Definiere die Zeilenhöhe des Produktnamens. Diese Änderung bezieht sich auf die Komponente "Product Box for 2 Column Grid".

Price: Text Color

Für die Preisangabe kannst du eine Schriftfarbe auswählen. Diese Änderung bezieht sich auf alle Produkt-Komponenten.

Price: Custom Family

Sofern du eine benutzerdefinierte Schriftart hinterlegt hast, kannst du diese auch für die Preisangabe verwenden. Diese Änderung bezieht sich auf alle Produkt-Komponenten.

Price: Font Family

Wähle eine Schriftart für die Preisangabe aus. Diese Änderung bezieht sich auf alle Produkt-Komponenten.

Price: Font Weight

Bestimme ein Font Weight für den Preis. Je höher der Wert, desto stärker/breiter die Schrift. Diese Änderung bezieht sich auf alle Produkt-Komponenten.

Price: Letter Spacing

Ein Abstand zwischen den einzelnen Zeichen kann bestimmt werden. Diese Änderung bezieht sich auf alle Produkt-Komponenten.

Retail: Text Color

Der Retail-Preis bezeichnet den Vollpreis, sobald ein Artikel als Sale gelistet wird. Für den Vollpreis kann eine Farbe gewählt werden, wie z. B. rot. Diese Änderung bezieht sich auf alle Produkt-Komponenten.

Retail: Custom Family

Wähle eine benutzerdefinierte Schriftart für den Retail bzw. Vollpreis aus. Diese Änderung bezieht sich auf alle Produkt-Komponenten. Die Custom Font Family musst du zunächst in der oberen Leiste unter "Fonts" hinterlegen.

Retail: Font Family

Bestimme eine System-Schriftart für den Retail bzw. Vollpreis aus. Diese Änderung bezieht sich auf alle Produkt-Komponenten.

Retail: Font Weight

Gebe eine Schriftstärke für den Vollpreis an, der erscheint, sobald ein Artikel als Sale gekennzeichnet wird. Diese Änderung bezieht sich auf alle Produkt-Komponenten.

Retail: Line Height

Bestimme einen Zeilenabstand für den Vollpreis, der erscheint, sobald ein Artikel als Sale gekennzeichnet wird. Diese Änderung bezieht sich auf alle Produkt-Komponenten.

Retail: Text Decoration

Die Preisangabe kann durchgestrichen angezeigt werden. Du kannst auch einen Strich im ober- oder unterhalb des Preises hinzufügen. Diese Änderung bezieht sich auf alle Produkt-Komponenten.

Small: Description Font Size

Bestimme die Schriftgröße für die Produktbeschreibung. Diese Änderung bezieht sich auf die Komponente "Product Box for 3 Column Grid".

Small: Description Number of Lines

Wähle aus, wie viele Zeilen die Produktbeschreibung beanspruchen soll. Diese Änderung bezieht sich auf die Komponente "Product Box for 3 Column Grid".

Small: Description Line Height

Gebe einen Zeilenabstand für den Text in der Produktbeschreibung an. Diese Änderung bezieht sich auf die Komponente "Product Box for 3 Column Grid".

Small: Image Height

Die Höhe bzw. Größe des Produktbildes kannst du hier bestimmen. Diese Änderung bezieht sich auf die Komponente "Product Box for 3 Column Grid".

Small: Price Font Size

Die Schriftgröße der Preisangabe gibst du hier an. Diese Änderung bezieht sich auf die Komponente "Product Box for 3 Column Grid".

Small: Price Line Height

Bestimme einen Zeilenabstand für die Preisangabe. Diese Änderung bezieht sich auf die Komponente "Product Box for 3 Column Grid".

Small: Retail Font Size

Sobald ein Produkt einen Sale-Preis erhält, wird der Normalpreis durchgestrichen und kleiner angezeigt. Bestimme hier die Größe des Vollpreises. Diese Änderung bezieht sich auf die Komponente "Product Box for 3 Column Grid".

Small: Retail Line Height

Für den Vollpreis kannst du einen separaten Zeilenabstand wählen. Diese Änderung bezieht sich auf die Komponente "Product Box for 3 Column Grid".

Small: Spacing Bottom

Unterhalb des Produktfeldes der Komponente "Product Box for 3 Column Grid" kann ein Spacing gesetzt werden.

Small: Spacing Description Bottom

Setze ein Spacing unterhalb der Produktbeschreibung. Diese Änderung bezieht sich auf die Komponente "Product Box for 3 Column Grid".

Small: Spacing Image Bottom

Füge einen Abstand unterhalb des Produktbildes hinzu. Diese Änderung bezieht sich auf die Komponente "Product Box for 3 Column Grid".

Small: Spacing Price Bottom

Unterhalb der Preisangabe kannst du ein Spacing setzen. Diese Änderung bezieht sich auf die Komponente "Product Box for 3 Column Grid".

Small: Spacing Title Bottom

Hier definierst du zwischen dem Titel und der Produktbeschreibung einen Abstand. Diese Änderung bezieht sich auf die Komponente "Product Box for 3 Column Grid".

Small: Spacing Top

Oberhalb des Produktfeldes der Komponente "Product Box for 3 Column Grid" kann ein Spacing gesetzt werden.

Small: Title Font Size

Du kannst eine Schriftgröße für den Produktnamen hier bestimmen. Diese Änderung bezieht sich auf die Komponente "Product Box for 3 Column Grid".

Small: Title Number of Lines

Bestimme, wie viele Zeilen der Produkttitel erfordern soll. Diese Änderung bezieht sich auf die Komponente "Product Box for 3 Column Grid".

Small: Title Line Height

Hier kannst du angeben, wie groß der Zeilenabstand des Produktnamens sein soll. Diese Änderung bezieht sich auf die Komponente "Product Box for 3 Column Grid".

Title: Text Color

Wähle eine Schriftfarbe für den Produktnamen aus. Diese Änderung bezieht sich auf alle Produkt-Komponenten.

Title: Custom Family

Du kannst eine benutzerdefinierte Schriftart für den Produktnamen angeben. Diese Änderung bezieht sich auf alle Produkt-Komponenten. Die Custom Font Family musst du zunächst in der oberen Leiste unter "Fonts" hinterlegen.

Title: Font Family

Verwende eine System-Schriftart für den Produktnamen. Diese Änderung bezieht sich auf alle Produkt-Komponenten.

Title: Font Weight

Bestimme die Schriftstärke des Produkttitels. Diese Änderung bezieht sich auf alle Produkt-Komponenten.

Title: Letter Spacing

Wähle einen Abstand zwischen den einzelnen Buchstaben des Produktnamen aus. Diese Änderung bezieht sich auf alle Produkt-Komponenten.


Section

Die Section ist die Basis-Komponente deines Newsletters. Es können unterschiedliche Styles für sie eingestellt werden.

Border Bottom Color

Bestimme die Farbe der Rahmenlinie unterhalb der Section.

Border Bottom Style

Wähle einen Style für die Rahmenlinie unterhalb der Section. Du kannst zwischen solid (durchgezogene Linie), dashed (gestrichelte Linie), dotted (gepunktete Linie) und double (doppelte Linie) wählen.

Border Bottom Width

Du kannst die Größe bzw. Stärke der unteren Rahmenlinie hier definieren. Gebe hier am besten einen Pixel-Wert an.

Border Left Color

Bestimme die Farbe der Rahmenlinie an der linken Seite der Section.

Border Left Style

Wähle einen Style für die Rahmenlinie an der linken Seite der Section. Du kannst zwischen solid (durchgezogene Linie), dashed (gestrichelte Linie), dotted (gepunktete Linie) und double (doppelte Linie) wählen.

Border Left Width

Du kannst die Größe bzw. Stärke der linken Rahmenlinie hier definieren. Gebe hier einen Pixel-Wert an.

Border Right Color

Bestimme die Farbe der Rahmenlinie an der linken Seite der Section.

Border Right Style

Border Right Style

Wähle einen Style für die Rahmenlinie an der rechten Seite der Section. Du kannst zwischen solid (durchgezogene Linie), dashed (gestrichelte Linie), dotted (gepunktete Linie) und double (doppelte Linie) wählen.

Border Right Width

Du kannst die Größe bzw. Stärke der rechten Rahmenlinie hier definieren. Gebe hier einen Pixel-Wert an.

Border Top Color

Bestimme die Farbe der Rahmenlinie oberhalb der Section.

Border Top Style

Wähle einen Style für die Rahmenlinie oberhalb der Section. Du kannst zwischen solid (durchgezogene Linie), dashed (gestrichelte Linie), dotted (gepunktete Linie) und double (doppelte Linie) wählen.

Border Top Width

Du kannst die Größe bzw. Stärke der oberen Rahmenlinie hier definieren. Gebe hier einen Pixel-Wert an.

Left/Right Spacing

In den Komponenten-Settings der Section kannst du an allen Seiten einer Section unterschiedliche Spacings wählen. Du kannst zwischen den Größen Extra Large, Large, Medium, Small, Extra Small wählen und die Größen in den jeweiligen Einstellungen hier definieren.


Separator

Um Inhalte zu trennen, kannst du die Separator-Komponenten verwenden. Diese stellen horizonatel Linie dar. Du kannst insgesamt 3 unterschiedlich gestylte Separator verwenden sowie die Komponenten "Separator with Image" und "Separator with Text".

Color

Wähle für jeden einzelnen Separator-Type eine Farbe. Diese Änderung bezieht sich auf alle Separator-Komponenten.

Style

Wähle den Style der Linie aus. Du kannst zwischen solid (durchgezogene Linie), dashed (gestrichelte Linie), dotted (gepunktete Linie) und double (doppelte Linie) wählen. Diese Änderung bezieht sich auf alle Separator-Komponenten.

Width (in px-Format)

Bestimme die Stärke der einzelnen Separators. Diese Änderung bezieht sich auf alle Separator-Komponenten.

Content Width

Hier kannst du die Breite bestimmen, in der die Inhalte (Text oder Bild) platziert werden sollen. Diese Einstellung bezieht sich auf die Komponenten "Separator with Text" und "Separator with Image".

Content Horizontal Spacing

Setze ein Spacing zwischen den Linien und dem Content-Bereich auf der linken und rechten Seite. Diese Einstellung bezieht sich auf die Komponenten "Separator with Text" und "Separator with Image".

Width (in %-Format)

Ein Separator kann unterschiedlich lang sein. Du kannst für die Größen Small, Medium und Large eigene Prozent-Werte hinterlegen. 50% Width bedeutet, dass der Separator über die halbe Content-Breite dargestellt wird. Diese Änderung bezieht sich auf alle Separator-Komponenten.

Vertical Space

Du kannst einstellen, dass ober- und unterhalb eines Separators ein Spacing dargestellt werden soll. Für die Größen Small, Medium und Large können eigene Pixel-Werte hinterlegt werden. Diese Änderung bezieht sich auf alle Separator-Komponenten.


Slideshow

Du kannst eine Slideshow in deinen Newsletter einbauen, um mehrere Images in Form einer Gallerie darzustellen.

Arrow (left & rigth)

Mithilfe von Pfeilen können User zwischen den Slides wechseln. Hier kannst du eigene Pfeile hochladen, indem du diese deiner Media Library hinzufügst.

Arrow Width

Die Größe bzw. Breite der Pfeile kannst du hier bestimmen. Nutze am besten Pixelwerte.


Spacer

Spacer 1-6 definieren die Spacing-Werte, welche du in unterschiedlichsten Komponenten-Einstellungen wählen kannst. Die Vertical Spacer sind leere Komponenten, die einen Abstand zwischen anderen Komponenten schaffen können.

Spacer 1-6

Hier kannst du bis zu sechs unterschiedliche Pixel-Werte angeben. Die Werte kannst du dann in den Settings der einzelnen Komponenten auswählen. Diese Einstellung bezieht sich auf die Komponenten Section, Container, Button, Column Container und Column Grid.

Vertical Spacer

Diese Einstellung bezieht sich auf die Spacer-Komponente. Du kannst drei unterschiedliche Größen definieren und verwenden.


Table

Mit dem Text-Editor kannst du Tabellen verwenden. Dafür benötigst du zunächst eine Section und eine Text-Komponente. Das Design deiner Tabellen kannst du im Styles-Menü angeben.

Background Color

Wähle eine Hintergrundfarbe für den gesamten Bereich der Tabelle. Die Hintergrundfarbe ist auch sichtbar, sobald du einen gepunkteten oder gestrichelten Rahmen verwendest.

Body: Background Color

Wähle eine Hintergrundfarbe innerhalb der Tabelle. In den Zellen wird diese Farbe angezeigt.

Body: Border Color

Definiere eine Farbe für den Rahmen. Der Rahmen wird an allen Seiten sowie um die Zellen angezeigt.

Body: Border Style

Du kannst einen Rahmen-Style wählen. Es gibt die Optionen dotted (gepunktete Linie), dashed (gestrichelte Linie), double (doppelte Linie) sowie solid (durchgezogene Linie).

Body: Border Width Left/Right

Wähle eine Stärke für alle vertikalen Rahmenlinien. Gebe hier einen Pixel-Wert an.

Body: Border Top/Bottom

Wähle eine Stärke für alle horizontalen Rahmenlinien. Gebe hier einen Pixel-Wert an.

Body: Cell Height

Hier kannst du die Höhe der Zellen bestimmen. Gebe hier einen Pixel-Wert an.

Body: Horizontal Cell Spacing

Innerhalb einer Zelle kannst du ein horizontales Spacing um den Textbereich festlegen.

Body: Text Color

Gebe eine Schriftfarbe für die Texte in den einzelnen Zellen an.

Body: Font Size

Verleihe dem Text in den einzelnen Zellen eine passende Schriftgröße.

Body: Font Weight

Du kannst dem Text in den Zellen eine bestimmte Schriftstärke verleihen.

Body: Row Highlight Color

Sobald ein User in eine Zelle klickt, kann die dazugehörige Zeile in einer neuen Farbe erscheinen. Gebe hier die Hightlight-Farbe an. Wenn du diese Einstellung nicht verwenden möchtest, wähle hier dieselbe Farbe wie die Hintergrundfarbe aus.

Body: Letter Spacing

Zwischen den einzelnen Zeichen im Text der Tabelle kannst du hier einen Abstand wählen.

Border Color

Du kannst einen weiteren Rahmen um die Tabelle hinzufügen. Definiere hier die Rahmenfarbe.

Border Style

Du kannst einen Rahmen-Style wählen. Es gibt die Optionen dotted (gepunktete Linie), dashed (gestrichelte Linie), double (doppelte Linie) sowie solid (durchgezogene Linie).

Border Width Left/Right

Neben dem Body-Rahmen kannst du an der linken und rechte Seite einen weiteren Rahmen einfügen. Wenn du keinen Rahmen benötigt, gebe 0px an.

Border Width Top/Bottom

Neben dem Body-Rahmen kannst du ober- und unterhalb des Rahmens einen weiteren Rahmen hinzufügen. Wenn du keinen Rahmen benötigt, gebe 0px an.

Custom Family

Wähle eine benutzerdefinierte Schriftart für den Text in den Zellen. Die Custom Font Family musst du zunächst in der oberen Leiste unter "Fonts" hinterlegen.

Font Family

Suche dir eine Schritart für die den Text in den Zellen aus. Du kannst hier System-Schriften wählen.

Header: Background Color

Du kannst eine horizontalen oder vertikalen Zeile als Header verwenden. Wähle dafür die gewünschten Zellen aus, klicke auf das Tabellen-Icon im Text-Editor, gehe zu Row Properties und wähle als Row Type "Header aus". Definiere im Styles-Menü eine separate Hintergrundfarbe für den Header.

Header: Border Color

Du kannst um den Header-Bereich einen weiteren Rahmen bauen, um ihn abzuheben. Wähle hier eine Farbe für die Rahmenlinien aus.

Header: Border Style

Du kannst einen Rahmen-Style wählen. Es gibt die Optionen dotted (gepunktete Linie), dashed (gestrichelte Linie), double (doppelte Linie) sowie solid (durchgezogene Linie).

Header: Border Width Left/Right

Bestimme die Stärke der linken und rechten Rahmenlinie des Headers. Gebe hier einen Pixel-Wert an.

Header: Border Width Top/Bottom

Bestimme die Stärke der oberen und unteren Rahmenlinie des Headers. Gebe hier einen Pixel-Wert an.

Header: Cell Height

Hier kannst du die Höhe der Zellen im Header definieren. Gebe hier einen Pixel-Wert an.

Header: Horizontal Cell Spacing

Innerhalb einer Zelle im Header kannst du ein horizontales Spacing um den Textbereich festlegen.

Header: Text Color

Bestimme eine Schriftfarbe für den Text im Header.

Header: Font Size

Du kannst eine separate Schriftgröße für den Text im Header angeben.

Header: Font Weight

Verleihe dem Text im Header eine Schriftstärke.

Header: Letter Spacing

Wähle einen Abstand zwischen den einzelnen Buchstaben im Text des Headers.


Text

Hier stylst du alle Text-Elemente. Die sechs Headlines H1 bis H6 kannst du nach deinen Wünschen designen. Auch das Design von Strichlisten kannst du hier definieren.

Headline: Custom Font Family

Hier kannst du für jede einzelne Überschrift eine benutzerdefinierte Schriftart angeben. Die Custom Font Family musst du zunächst in der oberen Leiste unter "Fonts" hinterlegen.

Headline: Font Family

Wähle eine System-Schriftart für die jeweiligen Überschrift aus. Sofern du eine Custom Font ausgewählt hast, kannst du hier dennoch eine Schriftart auswählen, die nun als Fallback Font dient.

Headline: Font Size

Lege die Schriftgröße der den einzelnen Headlines hier fest.

Headline: Font Weight

Hier kannst du der Headline eine Schriftstärke verleihen. Du kannst hier einen Zahlen-Wert (100 (sehr dünn) bis 900 (sehr dick)) eingeben oder zwischen normal und bold wählen.

Headline: Letter Spacing

Zwischen den Buchstaben kann ein Abstand hinzugefügt werden. Gebe hier einen Pixel-Wert an.

Headline: Line Height

Wähle eine Zeilenhöhe für die Überschriften.

Headline: Margin Bottom

Unterhalb der Überschrift kann ein Spacing gesetzt werden. Wenn deine Überschrift über mehrere Zeilen geht, wird auch zwischen den Zeilen das Spacing gesetzt.

Headline: Font Size (Mobile)

Verleihe den einzelnen Headlines Schriftgrößen. Diese Einstellung wird nur auf der mobilen Ansicht übernommen.

Headline: Letter Spacing (Mobile)

Zwischen den Buchstaben kann ein Abstand hinzugefügt werden. Gebe hier einen Pixel-Wert an. Diese Einstellung wird nur auf der mobilen Ansicht übernommen.

Headline: Line Height (Mobile)

Wähle eine Zeilenhöhe für die Überschriften. Diese Einstellung wird nur auf der mobilen Ansicht übernommen.

Headline: Margin Bottom (Mobile)

Unterhalb der Überschrift kann ein Spacing gesetzt werden. Wenn deine Überschrift über mehrere Zeilen geht, wird auch zwischen den Zeilen das Spacing gesetzt. Diese Einstellung wird nur auf der mobilen Ansicht übernommen.

List Item: Custom Family

Hier kannst du eine benutzerdefinierte Schriftart für den Text in der Strichliste auswählen. Die Custom Font Family musst du zunächst in der oberen Leiste unter "Fonts" hinterlegen.

List Item: Font Family

Wenn du keine Custom Family verwendest, bestimmst du hier eine Schriftart für den Text in der Strichliste.

List Item: Font Size

Hinterlege eine Schriftgröße für den Text in der Strichliste.

List Item: Letter Spacing

Zwischen den Buchstaben kann ein Abstand hinzugefügt werden. Gebe hier einen Pixel-Wert an.

List Item: Line Height

Wähle eine Zeilenhöhe für die einzelnen Stichpunkte.

List Item: Margin Bottom

Setze ein bestimmtes Spacing unterhalb jedes Stichpunktes.

List Item: Font Size (Mobile)

Hinterlege eine Schriftgröße für den Text in der Strichliste. Diese Einstellung wird nur auf der mobilen Ansicht übernommen.

List Item: Letter Spacing (Mobile)

Zwischen den Buchstaben kann ein Abstand hinzugefügt werden. Gebe hier einen Pixel-Wert an. Diese Einstellung wird nur auf der mobilen Ansicht übernommen.

List Item: Line Height (Mobile)

Wähle eine Zeilenhöhe für die einzelnen Stichpunkte. Diese Einstellung wird nur auf der mobilen Ansicht übernommen.

List Item: Margin Bottom (Mobile)

Setze ein bestimmtes Spacing unterhalb jedes Stichpunktes. Diese Einstellung wird nur auf der mobilen Ansicht übernommen.

Link: Color

Sobald ein Text mithilfe des Text-Editors verlinkt wird, kann er in einer anderen Farbe erscheinen. Die Schriftfarbe für verlinkte Texte setzt du hier. Wenn du diese Einstellung nicht verwenden möchtest, tippe inherited in das Feld ein.

Link: Color (Hover)

Ein verlinkter Text kann in einer anderen Farbe erscheinen, sobald der User über ihn hovert. Wähle hier die Hover-Farbe aus. Wenn du diese Einstellung nicht verwenden möchtest, tippe inherited in das Feld ein.

Link: Text Decoration

Ein verlinkter Bereich kann automatisch mit einer unteren Linie gekennzeichnet werden, um sich von den restlichen Inhalten abzuheben. Wähle hier zwischen underline (untere Linie), overline (obere Linie), line-through (durchgestrichene Linie) sowie none (keine Linien).

Link: Text Decoration (Hover)

Wenn ein User über ein verlinktes Wort hovert, kann eine untere Linie angezeigt werden. Wähle hier zwischen underline (untere Linie), overline (obere Linie), line-through (durchgestrichene Linie) sowie none (keine Linien).

Paragraph: Custom Font Family

Hier kannst du für den Paragraph (den reinen Fließtext) eine benutzerdefinierte Schriftart angeben. Die Custom Font Family musst du zunächst in der oberen Leiste unter "Fonts" hinterlegen.

Paragraph: Font Family

Wähle eine System-Schriftart für den Paragraph aus. Sofern du eine Custom Font ausgewählt hast, kannst du hier dennoch eine Schriftart auswählen, die nun als Fallback Font dient.

Paragraph: Font Size

Verleihe dem Paragraph eine Schriftgröße.

Paragraph: Font Weight

Hier kannst du dem Paragraph eine Schriftstärke verleihen. Du kannst hier einen Zahlen-Wert (100 (sehr dünn) bis 900 (sehr dick)) eingeben oder zwischen normal und bold wählen.

Paragraph: Letter Spacing

Zwischen den Buchstaben kann ein Abstand hinzugefügt werden. Gebe hier einen Pixel-Wert an.

Paragraph: Line Height

Wähle eine Zeilenhöhe für den Paragraph.

Paragraph: Margin Bottom

Unterhalb des Paragraphs kann ein Spacing gesetzt werden. Wenn der Paragraph über mehrere Zeilen geht, wird auch zwischen den Zeilen das Spacing gesetzt.

Paragraph: Font Size (Mobile)

Verleihe dem Paragraph eine Schriftgröße. Diese Einstellung wird nur auf der mobilen Ansicht übernommen.

Paragraph: Letter Spacing (Mobile)

Zwischen den Buchstaben kann ein Abstand hinzugefügt werden. Gebe hier einen Pixel-Wert an. Diese Einstellung wird nur auf der mobilen Ansicht übernommen.

Paragraph: Line Height (Mobile)

Wähle eine Zeilenhöhe für den Paragraph. Diese Einstellung wird nur auf der mobilen Ansicht übernommen.

Paragraph: Margin Bottom (Mobile)

Unterhalb des Paragraphs kann ein Spacing gesetzt werden. Wenn der Paragraph über mehrere Zeilen geht, wird auch zwischen den Zeilen das Spacing gesetzt. Diese Einstellung wird nur auf der mobilen Ansicht übernommen.

Small: Custom Font Family

Hier kannst du für den Inline-Text eine benutzerdefinierte Schriftart angeben. Die Custom Font Family musst du zunächst in der oberen Leiste unter "Fonts" hinterlegen.

Small: Font Family

Wähle eine System-Schriftart für den Inline-Text aus. Sofern du eine Custom Font ausgewählt hast, kannst du hier dennoch eine Schriftart auswählen, die nun als Fallback Font dient.

Small: Font Size

Verleihe dem Inline-Text eine Schriftgröße.

Small: Font Weight

Hier kannst du für den Inline-Text eine Schriftstärke angeben. Du kannst hier einen Zahlen-Wert eingeben oder zwischen "normal" und "bold" wählen.

Small: Letter Spacing

Zwischen den Buchstaben kann ein Abstand hinzugefügt werden. Gebe hier einen Pixel-Wert an.

Small: Line Height

Wähle eine Zeilenhöhe für den Inline-Text.

Small: Margin Bottom

Unterhalb des Inline-Textes kann ein Spacing gesetzt werden. Wenn der Inline-Text über mehrere Zeilen geht, wird auch zwischen den Zeilen das Spacing gesetzt.

Small: Font Size (Mobile)

Bestimme für den Inline-Text eine Schriftgröße. Diese Einstellung wird nur auf der mobilen Ansicht übernommen.

Small: Letter Spacing (Mobile)

Zwischen den Buchstaben kann ein Abstand hinzugefügt werden. Gebe hier einen Pixel-Wert an. Diese Einstellung wird nur auf der mobilen Ansicht übernommen.

Small: Line Height (Mobile)

Wähle eine Zeilenhöhe für den Inline-Text. Diese Einstellung wird nur auf der mobilen Ansicht übernommen.

Small: Margin Bottom (Mobile)

Unterhalb des Inline-Textes kann ein Spacing gesetzt werden. Wenn der Paragraph über mehrere Zeilen geht, wird auch zwischen den Zeilen das Spacing gesetzt. Diese Einstellung wird nur auf der mobilen Ansicht übernommen.

Hat dies deine Frage beantwortet?