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.