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.
So findest du das Styles-Menü:
Die folgenden Beschreibungen helfen dir, die einzelnen Styles-Einstellungen zu verstehen.
Die Styles sind in den folgenden Kategorien geordnet:
Background
Coming Soon
Border
Für Sections, Container, Grids sowie Slideshow Items kannst du Rahmenlinien hinzufügen. In den jeweiligen Komponenten-Einstellungen kannst du unter "Border" den Border-Type auswählen und 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: Size
Hier gibst du die Breite der Rahmenlinie für das ausgewählte Endgerät an. Die Farbe und der Style der Linie bestimmst du in den Komponenten-Einstellungen des jeweiligen Elementes.
Button
Das Styles-Menü bietet zahlreiche Optionen, um Buttons nach deinen Wünschen und Vorstellungen zu designen. Es gibt insgesamt drei Button Types (Variant), die du im Styles-Menü designen kannst. Zudem kannst du drei unterschiedliche Größen für die Buttons definieren (Large, Medium, Small). Dabei kann jede Größe an alle Endgeräte angepasst werden. Den Type des Buttons sowie seine Größe kannst du in den Komponenten-Settings des Buttons wählen.
Button: Border Radius
Unabhängig vom Button Type kannst du drei Button Größen bestimmen (Large, Medium, Small). Hier bestimmst du 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: Font Size
Gebe für jede einzelne Button-Größe eine passende Schriftgröße an. Passe die Schriftgröße auch an die unterschiedlichen Devices an.
Button: Height
Jeder Button kann eine unterschiedliche Höhe besitzen. Definiere diese hier.
Button: Icon Spacing
In den Komponenten-Settings des Buttons kann ein Icon neben den Text im Button hinzugefügt werden. Den Abstand zwischen Icon und Text wählst du hier.
Button: Horizontal Spacing
Wähle hier die horizontalen Abstände neben den Text im Button. Je größer die Abstände, desto länger wird der Button.
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 zufrieden sein, kannst du unter Colors dir sechs Farben sowie mehrere Grautöne frei auswählen.
Button: Border Color
Ein Button kann eine Rahmenlinie haben. Definiere die Farbe des Rahmens. Sofern du einen Button ohne Rahmen möchtest, klicke auf das kleine Kreuz im Eingabefeld.
Button: Border Width
Hier definierst du die Stärke der Rahmenlinie in Form einer Pixel-Angabe.
Button: Text Color
Bestimme eine Schriftfarbe für den Text im Button.
Button: Font Family
Wähle eine Schriftart für den Text im Button aus.
Button: Font Weight
Gebe die Breite der Schrift an. Wähle zwischen bold, normal und thin.
Button: Letter Spacing
Definiere den Abstand zwischen den einzelnen Buchstaben des Textes im Button.
Active: Background Color
Hat aktuell keine Funktion, weil es keine Aktive State Buttons gibt.
Active: Border Color
Hat aktuell keine Funktion, weil es keine Aktive State Buttons gibt.
Active: Text Color
Hat aktuell keine Funktion, weil es keine Aktive State Buttons gibt.
Hover: Background Color
Sobald ein User seinen Cursor über den Button bewegt, kann eine neue Hintergrundfarbe des Buttons erscheinen.
Hover: Border Color
Wenn ein User seine Maus über den Button bewegt, können die Rahmenlinien eine weitere Farbe haben.
Hover: Text Color
Die Schriftfarbe des Textes im Button kann in einer neuen Farbe erscheinen, sobald über den Button gehovert wird.
Button: Border Radius
Bestimme die Stärke der Abrundungen an den Ecken. Für spitze Kante gebe 0px an. Für einen rundlichen Button gebe maximal 25px an.
Button: Font Size
Bestimme die Größe der Schrift für den Text im Button.
Button: Height
Wähle die Höhe für deinen Button. Gebe eine Pixelgröße an.
Color
Definiere insgesamt neun Farben sowie Schwarz-, Weiß- und Grautöne. Du kannst einen Farbcode eingeben oder mithilfe des Farbwählers dir eine Farbe aussuchen.
Forms
Du kannst z. B. Anmelde-, Bewerbungs- oder Buchungsformulare erstellen. Die Form-Komponenten lassen sich individuell gestalten.
Check: Border Radius
Hier bestimmst du die Abrundungen der Checkbox. Wähle 0px für eine eckige Checkbox aus sowie 11px für eine runde Checkbox.
Check: Icon
Sobald man eine Checkbox anklickt, erscheint ein Icon, wie z. B. ein Haken. Lade ein passendes Symbol hoch und wähle es schließlich hier aus.
Check: Icon Size
Die Pixel-Größe des Symbols kann hier eingetragen werden. Diese Einstellung bezieht sich nur auf die Checkbox.
Check/Radio: Background Color
Wähle eine Hintergrundfarbe für das Ankreuzfeld. Diese Einstellung bezieht sich auf die Komponenten "Checkbox" und "Radio Group".
Check/Radio: Border Color
Wähle eine Farbe für die Rahmenlinie des Ankreuzfeldes. Diese Einstellung bezieht sich auf die Komponenten "Checkbox" und "Radio Group".
Check/Radio: Border Width
Die Breite der Rahmenlinie kannst du hier bestimmen. Sie bezieht sich auf die Komponenten "Checkbox" und "Radio Group".
Check/Radio: Label Spacing Left
Zwischen dem Ankreuzfeld und dem dazugehörigen Titel kann ein Abstand definiert werden. Dieser bezieht sich auf die Komponenten "Checkbox" und "Radio Group".
Check/Radio: Checked Background Color
Sobald das Ankreuzfeld angeklickt wird, kann das Feld in einer neuen Hintergrundfarbe erscheinen. Diese Einstellung bezieht sich auf die Komponenten "Checkbox" und "Radio Group".
Check/Radio: Checked Border Color
Wenn ein User das Ankreuzfeld angeklickt wird, kann die Rahmenlinie ihre Farbe wechseln. Diese Einstellung bezieht sich auf die Komponenten "Checkbox" und "Radio Group".
Datepicker: Background Color
Bestimme eine Hintergrundfarbe für das Menü, in dem ein User ein Datum wählen kann,
Datepicker: Border Color
Du kannst ebenfalls eine Farbe für die Rahmenlinie des Menüs bestimmen.
Datepicker: Border Bottom Width
Definiere die Breite der unteren Rahmenlinie. Sofern du keine Rahmenlinie möchtest, gebe 0px ein.
Datepicker: Border Left Width
Definiere die Breite der linken Rahmenlinie. Sofern du keine Rahmenlinie möchtest, gebe 0px ein.
Datepicker: Border Right Width
Definiere die Breite der rechten Rahmenlinie. Sofern du keine Rahmenlinie möchtest, gebe 0px ein.
Datepicker: Border Top Width
Definiere die Breite der oberen Rahmenlinie. Sofern du keine Rahmenlinie möchtest, gebe 0px ein.
Datepicker: Date Border Color
Bestimme die Breite der Rahmenlinie für die einzelnen Felder. Wähle 0px aus, falls du keinen Rahmen möchtest.
Datepicker: Date Border Color
Die einzelnen Felder können separate Rahmenlinien haben. Hier kannst du die Farbe bestimmen.
Datepicker: Date Range Background Color
Zur Visualisierung einer Zeitperiode, z. B. innerhalb eines Buchungsformulars, kann eine weitere Hintergrundfarbe ausgewählt werden.
Datepicker: Date Range Text Color
Zur Visualisierung einer Zeitperiode, z. B. innerhalb eines Buchungsformulars, können die Daten in einer neuen Farbe erscheinen.
Datepicker: Active Background Color
Sobald ein User ein Datum ausgewählt hat, kann das gewählte Feld mit einer Hintergrundfarbe markiert werden.
Datepicker: Active Border Color
Wenn ein User ein Datum ausgewählt hat, kann das gewählte Feld mit einer Rahmenlinie markiert werden.
Datepicker: Active Text Color
Sobald ein Datum angeklickt wird, kann das Datum in einer zweiten Schriftfarbe erscheinen. Wähle diese hier aus.
Datepicker: Hover Background Color
Ein bestimmtes Feld kann durch das Hovern eine neue Hintergrundfarbe erhalten.
Datepicker: Hover Border Color
Sobald ein User seinen Cursor über ein Feld bewegt, kann das Feld eine Rahmenlinie bekommen.
Datepicker: Hover Text Color
Auch die Schriftfarbe des Feldes kann durch das Hovern geändert werden.
Datepicker: Today Background Color
Das aktuelle Datum kann mithilfe einer anderen Hintergrundfarbe hervorgehoben werden.
Datepicker: Today Border Color
Das aktuelle Datum kann ebenfalls mit einer Rahmenlinie markiert werden.
Datepicker: Today Text Color
Du kannst die Schriftfarbe des Feldes mit dem aktuellen Tag bestimmen.
Error Message: Background Color
Falls ein User nicht alle Felder ausfüllt, wird er benachrichtigt. Bestimme hier die Hintergrundfarbe des Pop-up-Menüs.
Error Message: Text Color
Du kannst die Schriftfarbe für den Text der Error Message hier auswählen. Das Menü erscheint, sofern nicht alle Felder ausgefüllt wurden.
Error Message: Font Size
Ebenfalls kannst du die Schriftgröße für den Text der Fehlermeldung hier bestimmen.
Error Message: Line Height
Bestimme hier die Zeilenhöhe für den Text der Error Message. Das Menü erscheint, sofern nicht alle Felder ausgefüllt wurden.
Form Field: Horizontal Spacing
Wurde irgendwann mal eingebaut, aber hat keine Funktion.
Form Field: Vertical Spacing
Wurde irgendwann mal eingebaut, aber hat keine Funktion.
Form Field: Right Spacing of Check/Radio
Füge einen Abstand auf der rechten Seite der Check Box oder Radio Group hinzu.
Form Field: Spacing Bottom
Bestimme den Abstand nach unten zum nächsten Form-Element.
Input: Background Color
Bestimme eine Hintergrundfarbe für alle Eingabefelder.
Input: Border Bottom Width
Füge eine Rahmenlinie unterhalb der Eingabefelder hinzu. Bestimme hier die Stärke der Rahmenlinie.
Input: Border Color
Hier gibst du die Farbe der Rahmenlinie an.
Input: Border Left Width
Gebe hier für die linke Seite des Eingabefeldes die Größe der Rahmenlinie an.
Input: Border Radius
Die Eingabefelder können abgerundete Ecken haben. Für Abrundungen wähle z. B. 15px. Für spitze Kanten kannst du 0px eingeben.
Input: Border Right Width
Füge eine Rahmenlinie auf der rechten Seite des Eingabefeldes hinzu. Bestimme die Stärke in Pixelgröße.
Input: Border Style
Die Rahmenlinie können unterschiedliche Stile haben: Solid (durchgezogene Linie)m dotted (gepunktete Linie) sowie dashed (gestrichelte Linie).
Input: Border Top Width
Füge eine Rahmenlinie oberhalb der Eingabefelder hinzu. Bestimme hier die Stärke der Rahmenlinie.
Input: Font Family
Hier kannst du eine Schriftart für die Eingaben auswählen.
Input: Multiselect Item Background Color
***Coming Soon***
Input: Multiselect Item Border Color
***Coming Soon***
Input: Placeholder Color
Bestimme die Farbe des Platzhalters. Einen Platzhalter ist besonders für Eingabefelder geeigent.
Input: Select Delete Icon Color
***Coming Soon***
Input: Text Color
Wähle eine Schriftfarbe für den Text, der in ein Eingabefeld getippt wird.
Input: Text Area Min Height (in Lines)
Bestimme die Höhe des Textfeldes. Diese Einstellung bezieht sich auf die Komponente "Text Area".
Input: Disabled Background Color
***Coming Soon***
Input: Disabled Border Color
***Coming Soon***
Input: Disabled Placeholder Color
***Coming Soon***
Input: Disabled Text Color
***Coming Soon***
Input: Disabled Background Color
***Coming Soon***
Input: Error Border Color
***Coming Soon***
Input: Error Placeholder Color
***Coming Soon***
Input: Error Text Color
***Coming Soon***
Input: Focus Background Color
***Coming Soon***
Input: Focus Border Color
***Coming Soon***
Input: Focus Placeholder Color
***Coming Soon***
Input: Focus Text Color
***Coming Soon***
Input: Font Size
Für die Komponenten "Input", "Text Area", "Select" und "Multi Select" kann in den Komponenten-Settings jeweils eine von drei Größen gewählt werden. Für jede Größen lässt sich z. B. die Schriftgröße definieren. Zusätzlich kann man auch Anpassungen je Device individuell bestimmen.
Input: Height
Definiere hier die Höhe der Eingabefelder für alle drei Größen sowie für jedes Endgerät. Diese Einstellung bezieht sich auf die Komponenten "Input", "Text Area", "Select" und "Multi Select".
Input: Letter Spacing
Den Abstand zwischen den einzelnen Buchstaben kannst du hier definieren. Diese Einstellung bezieht sich auf die Komponenten "Input", "Text Area", "Select" und "Multi Select".
Input: Horizontal Spacing
Du kannst einen Abstand zwischen der linken Seite des Eingabefeldes und dem Textabschnitt hinzufügen. Den Abstand kannst du individuell für die Größen Large, Medium und Small definieren sowie für alle Devices.
Label: Interactive Active Color
***Coming Soon***
Label: Text Color
Bestimme die Schriftfarbe des Labels. Das ist der Titel jedes Eingabefeldes.
Label: Font Size
Wähle eine Schriftgröße für den Titel, der über oder neben einem Eingabefeld steht.
Label: Font Style
Die Schrift des Labels kann normal oder kursiv (italic) dargestellt werden.
Label: Font Weight
Bestimme hier die Stärke der Schrift des Titels, der über oder neben einem Eingabefeld steht.
Label: Letter Spacing
Den Abstand zwischen den einzelnen Buchstaben kannst du hier definieren. Diese Einstellung bezieht sich auf das Label eines Feldes.
Label: Line Height
Wähle eine Zeilenhöhe für das Label aus. Gebe hierfür eine Pixelgröße an.
Label: Spacing Bottom
Wähle einen Abstand zwischen dem Titel und dem dazugehörigen Eingabefeld.
Label/ Error Message: Font Family
Hier bestimmst du eine Schriftart für den Text des Labels sowie für den Text der Fehlermeldung.
Progress: Color
***Coming Soon***
Progress: Height
***Coming Soon***
Radio: Border Radius
Das Ankreuzfeld der Radio-Komponente kann eckig oder rund sein. Für ein rechteckiges Feld gebe 0px ein. Für ein rundes Feld trage 11px ein.
Upload: Background Color
Im Upload-Feld können User Dokumente oder Images hochladen. Hier kannst du die Hintergrundfarbe des Feldes bestimmen.
Upload: Border Color
Du kannst dem Upload-Feld eine Rahmenlinie hinzufügen. Definiere eine Farbe für die Rahmenlinie hier.
Upload: Border Style
Die Rahmenlinie kann in einem bestimmten Stil erscheinen. Wähle zwischen solid (durchgezogene Linie), dashed (gestrichelte Linie) und dotted (gepunktete Linie).
Upload: Text Color
Im Upload-Feld steht ein kurzer Text für den User. Verleihe dem Text eine Schriftfarbe.
Upload: Font Family
Wähle hier eine Schriftart für den Text im Upload-Feld.
Upload: Font Weight
Bestimmte die Breite des Textes hier.
Upload: Letter Spacing
Zwischen den einzelnen Buchstaben können kleine Abstände hinzugefügt werden.
Upload: Active Background Color
***Coming Soon***
Upload: Active Border Color
***Coming Soon***
Upload: Active Text Color
***Coming Soon***
Upload: Border Radius
Einige Styles können individuell für jedes Endgerät angelegt werden. Wie z. B. für die Abrundungen der Rahmenlinien des Upload-Feldes. Für ein rechteckiges Feld gebe 0px ein. Für abgerundete Ecken trage z. B. 15px ein.
Upload: Border Width
Auch die Breite der Rahmenlinie kann für jedes Device separat bestimmt werden.
Upload: Font Size
Definiere eine Schriftgröße für den Text im Upload-Feld. Die Schriftgröße kann für alle Devices individuell festgelegt werden.
Upload: Line Height
Bestimme die Zeilenhöhe für den Text im Upload-Feld. Diese kann für jedes Endgerät separat festgelegt werden.
Upload: Spacing
Definiere hier die Höhe des Upload-Feldes. Die Höhe kann für jedes Device unterschiedlich eingestellt werden.
Upload: Preview Background Color
Sobald ein Dokument hochgeladen wurde, erscheint ein neues Feld, indem das Dokument liegt. Bestimme hier die Hintergrundfarbe des Feldes.
Upload: Preview Text Color
Sobald ein Dokument hochgeladen wurde, wird es in einem kleinen Preview-Fenster angezeigt. Dort steht auch der Dateiname. Bestimme hier die Schriftfarbe.
Upload: Preview Unknown Media Icon
***Coming Soon***
Upload: Preview Remove Icon Color
***Coming Soon***
Global Settings
Hier kannst du das Scrolling-Verhalten der Landing Page definieren sowie übergreifende Einstellungen festlegen.
Background Scrolling Behavior
Du kannst zwischen den Scrolling-Stilen scroll und fixed wählen. Das ausgewählte Hintergrundbild bewegt sich z. B. durch fixed nicht. Das Hintergrundbild kannst du hier wählen.
Background Horizontal Position
***Coming Soon***
Background Vertical Position
***Coming Soon***
Background Repeat
***Coming Soon***
Background Size
***Coming Soon***
Background Image
Wähle ein Bild, das sich über den Hintergrund einer gesamten Landing Page ziehen kann. Wählst du z. B. in den Komponenten-Settings einer Section aus, dass diese keine Background Color besitzen soll, wird das Bild angezeigt.
Body Background Color
***Coming Soon***
Default Text Color
***Coming Soon***
Scroll Snap Alignment
***Coming Soon***
Scroll Snap Type
***Coming Soon***
Container Width
Die Breite der Container-Komponente kann für jedes Endgerät individuell bestimmt werden.
Container Width Large
***Coming Soon***
Gradient
Du kannst sechs Gradient-Stile festlegen. Aus deinen beiden gewählten Farben wird ein Farbverlauf generiert.
Angle
***Coming Soon***
Color 1
***Coming Soon***
Color 2
***Coming Soon***
Grid Gap
Sobald du ein Grid-Element verwendest, kannst du in den Komponenten-Settings ein Grid Gap in unterschiedlichen Größen wählen. Dieses setzt einen Abstand zwischen den einzelnen Grid Items.
Du kannst drei Größen für das Grid Gap bestimmen sowie die Abstände für jedes Endgerät separat bestimmen.
List
Im Text-Editor kannst du Strichlisten hinzufügen. Hier kannst du wählen, ob die Bullets kleine Punkte sein sollen (unordered) oder z. B. nach Zahlen geordnet sein sollen (unordered). Weitere Anpassungen zu den Strichlisten findest du hier.
Ordered: Level 1 Bullet
Den Stil des Aufzählungszeichens kannst du bestimmen. Wähle zwischen decimal (Ziffern), decimal leading zero (Ziffern mit einer 0 zu Beginn), lower alpha (keine Buchstaben), lower roman (kleine römische Zahlen), upper alpha (große Buchstaben) oder upper roman (große römische Zahlen).
Ordered: Level 2 Bullet
Den Stil des Aufzählungszeichens beim ersten Einzuges kannst du separat bestimmen. Wähle zwischen decimal (Ziffern), decimal leading zero (Ziffern mit einer 0 zu Beginn), lower alpha (keine Buchstaben), lower roman (kleine römische Zahlen), upper alpha (große Buchstaben) oder upper roman (große römische Zahlen).
Ordered: Level 3 Bullet
Auch den Stil des Aufzählungszeichens beim zweiten Einzuges kannst du separat bestimmen. Wähle zwischen decimal (Ziffern), decimal leading zero (Ziffern mit einer 0 zu Beginn), lower alpha (keine Buchstaben), lower roman (kleine römische Zahlen), upper alpha (große Buchstaben) oder upper roman (große römische Zahlen).
Unordered: Level 1 Bullet
Den Stil des Aufzählungszeichens kannst du bestimmen. Wähle zwischen square (kleines Quadrat), circle (kleiner Kreis) oder disc (kleiner gefüllter Kreis).
Unordered: Level 2 Bullet
Den Stil des Aufzählungszeichens beim ersten Einzuges kannst du separat bestimmen. Wähle zwischen square (kleines Quadrat), circle (kleiner Kreis) oder disc (kleiner gefüllter Kreis).
Unordered: Level 3 Bullet
Auch den Stil des Aufzählungszeichens beim zweiten Einzuges kannst du separat bestimmen. Wähle zwischen square (kleines Quadrat), circle (kleiner Kreis) oder disc (kleiner gefüllter Kreis).
Image Bullet Size
Unabhängig von der Art des Aufzählungszeichens kannst du für jedes Device eine eigene Größe für die Bullets bestimmen.
Modal
Mit der Komponente "Intent Modal" kannst du beliebig viele Pop-ups einbinden. Dir stehen viele Funktionen zum Stylen zur Verfügung. Die Default-Einstellungen beziehen sich auf jedes Pop-up, unabhängig von der Modal Size. Zudem kannst du in den Komponenten-Einstellungen des Modals für jedes Modal eine Größe (Large, Medium, Small) wählen. Im Styles-Menü kannst du das Pop-up für alle Größen sowie für alle Endgeräte anpassen. Somit stellst du sicher, dass z. B. das Pop-up in der mobilen Version kleiner ist.
Backdrop Color
Sobald das Pop-up erscheint, kann hinter dem Menü eine Farbe erscheinen. Wähle diese hier aus. Du kannst auch transparent wählen, sodass die Inhalte der Landing Page im Hintergrund angezeigt werden.
Default: Background Color
Wähle eine Farbe für das Pop-up.
Default: Inner Border Color Color
***Coming Soon***
Default: Inner Border Style
***Coming Soon***
Default: Inner Border Width
***Coming Soon***
Default: Outer Border Color
Setze eine Rahmenlinie um das Pop-up und wähle die dazugehörige Farbe.
Default: Outer Border Style
Die Rahmenlinie kann verschiedene Stile annehmen. Wähle zwischen solid (durchgezogene Linie), dashed (gestrichelte Linie) und dotted (gepunktete Linie).
Default: Outer Border Bottom Width
Wähle aus, wie dick die untere Rahmenlinie sein soll. Sofern du keine Rahmenlinie möchtest, trage 0px ein.
Default: Outer Border Left Width
Wähle aus, wie dick die linke Rahmenlinie sein soll. Sofern du keine Rahmenlinie möchtest, trage 0px ein.
Default: Outer Border Right Width
Wähle aus, wie dick die rechte Rahmenlinie sein soll. Sofern du keine Rahmenlinie möchtest, trage 0px ein.
Default: Outer Border Top Width
Wähle aus, wie dick die obere Rahmenlinie sein soll. Sofern du keine Rahmenlinie möchtest, trage 0px ein.
Default: Closer Color
Das Kreuz, um den Pop-up zu schließen, kann eine eigene Farbe annehmen.
Default: Closer Size
Du kannst die Größe des Kreuzes bestimmen. Gebe hier eine Pixelgröße an.
Default: Closer Icon Strength
Auch die Stärke des Kreuzes kannst du hier definieren.
Default: Title Color
***Coming Soon***
Large/Medium/Small: Border Radius
Hier gibst du an, ob die Kanten des Pop-ups abgerundet sein sollen. Für eckige Kanten gebe 0px an. Für abgerundete Kanten trage z. B. 10px ein. Diese Einstellung kannst du separat für die Modal Größen sowie für jedes Device anpassen.
Height
Bestimme die Höhe des Pop-ups. Stelle sicher, dass das Pop-up in der mobilen Ansicht kleiner dargestellt wird. Beachte, dass du diese Einstellung separat für die Modal Sizes sowie für jedes Endgerät anpassen kannst.
Horizontal Spacing
Dies ist der Abstand zwischen der linken und rechten Seite des Pop-ups und den sich darin befindenden Content-Komponenten. Diese Einstellung kannst du separat für die Modal Sizes sowie für jedes Device anpassen.
Vertical Spacing
Das ist der Abstand zwischen der oberen und unteren Seite des Pop-ups und den sich darin befindenden Content-Komponenten. Beachte, dass du diese Einstellung separat für die Modal Größen sowie für jedes Endgerät anpassen kannst.
Width
Hier legst du die Weite des Pop-Ups fest. Die Weite kann für jede Modal Größe sowie für jedes Device unterschiedlich definiert werden.
Navbar
Mit der Navigation-Komponente kannst du deiner Landing Page eine Navigation verleihen, sodass du Unterseiten verlinken kannst. Die Navbar lässt sich vielseitig stylen.
Background Color
Wähle eine Hintergrundfarbe für die Navigation-Komponente aus. Für eine transparente Navigation klicke im Feld auf das Kreuz.
Border Style
Die Rahmenlinie kann verschiedene Stile annehmen. Wähle zwischen solid (durchgezogene Linie), dashed (gestrichelte Linie) und dotted (gepunktete Linie).
Content Background Color
Neben der Background Color kann die Navigation eine zweite Hintergrundfarbe annehmen, die im Content-Feld (mittig) erscheint.
Switch to Burger Navigation
Bei schmalen Bildschirmen lässt sich eine Navigation ungünstig darstellen. Daher wird ein Burger-Menü empfohlen. Statt der gesamten Navi, wird ein Icon dargestellt, wodurch die Navigation ausgeklappt werden kann. Entscheide, ab welchen Endgerät das Burger-Menü erscheinen soll.
Spacing Inside Container
***Coming Soon***
Spacing Outside
Definiere einen individuellen Abstand für die linke und rechte Seite. Je größer das Spacing, desto mehr rücken die Navigation Items zusammen.
Border Bottom Width
Unterhalb der Navigation kannst du eine Rahmenlinie hinzufügen. Wähle hier die Farbe der Rahmenlinie aus.
Burger: Active Color
Sobald das Burger-Menü geöffnet ist, erscheint statt den drei Strichen, ein Kreuz zum Schließen. Suche dir hier eine Farbe für das Kreuz aus.
Burger: Icon Color
Wähle eine Farbe für das Burger-Icon aus.
Burger: Icon Line Spacing
Definiere hier einen Abstand zwischen den drei Strichen.
Burger: Line Width
Die Stärke der drei Linien kannst du hier angeben.
Burger: Width
Die allgemeine Breite des Burger-Icons kannst du hier bestimmen. Je kleiner die Weite, desto schmaler das Icon.
Dropdown: Alignment
Die Subpages, die im Dropdown-Menü aufgelistet sind, können rechtsbündig, linksbündig oder zentriert dargestellt werden.
Dropdown: Background Color
Die Hintergrundfarbe wird angezeigt, sobald sich das Dropdown-Menü öffnet. Klicke auf das Kreuz, falls du einen transparenten Hintergrund möchtest.
Dropdown: Show Arrow Indicator
Klicke auf true, wenn an der oberen Seite des Dropdown-Menüs ein Pfeil platziert werden soll. Wähle false, falls du keinen Pfeil möchtest.
Dropdown: Indicator Size
Hier definierst du eine Größe für den Pfeil.
Dropdown: Border Radius
Das ausgeklappte Menü kann abgerundete Ecken haben. Für Abrundungen wähle z. B. 15px. Für spitze Kanten kannst du 0px eingeben. Diese Einstellung kann für jedes Device separat eingetragen werden.
Dropdown: Vertical Spacing
Setze ein Spacing an der oberen und unteren Seiten innerhalb des Menüs. Durch große Spacings wird das Menü länger. Diese Einstellung kann für jedes Device separat definiert werden.
Dropdown Item: Text Color
Wähle eine Schriftfarbe für die verlinkten Subpages, die im Dropdown-Menü aufgelistet werden.
Dropdown Item: Font Weight
Wähle eine Schriftstärke für die verlinkten Subpages, die im Dropdown-Menü aufgelistet werden.
Dropdown Item: Letter Spacing
Zwischen den einzelnen Buchstaben kannst du einen Abstand wählen.
Dropdown Item: Variant
***Coming Soon***
Dropdown Item: Active Background Color
Sobald ein Website-User auf eine Unterseite innerhalb des Dropdowns klickt, kann der Hintergrund des Items eine neue Farbe bekommen. Damit sich die Farbe nicht ändert, wähle einfach dieselbe Hintergrundfarbe aus.
Dropdown Item: Active Hightlight Color
***Coming Soon***
Dropdown Item: Active Text Color
Sobald ein Website-User auf eine Unterseite innerhalb des Dropdowns klickt, kann sich der Schriftfarbe des Items wechseln. Damit sich die Farbe nicht ändert, wähle einfach dieselbe Schriftfarbe aus.
Dropdown Item: Hover Background Color
Beim Hovern kann sich der Hintergrund eines Items ändern. Wähle hier die Farbe aus.
Dropdown Item: Hover Hightlight Color
***Coming Soon***
Dropdown Item: Hover Text Color
Beim Hovern kann sich die Schriftfarbe eines Items ändern. Wähle hier die Farbe aus.
Dropdown Item: Hightlight Width
***Coming Soon***
Dropdown Item: Font Size
Gebe eine Schriftgröße für die aufgeführten Unterseiten. Diese Einstellung kann für jedes Device separat definiert werden.
Dropdown Item: Height
Das ist der Abstand zwischen den einzelnen Dropdown Items. Diese Einstellung kann für jedes Device separat definiert werden.
Dropdown Item: Horizontal Spacing
Setze ein Spacing auf der linken und rechten Seite des Dropdown Menü. Durch da Spacing wird das Menü breiter. Diese Einstellung kann für jedes Device separat definiert werden.
Height
Bestimme die Höhe der gesamten Navigationsleiste. Die Höhe kannst du für jedes Endgerät separat bestimmen.
Logo: Height
Definiere die Größe des Logos, das in der Navigation dargestellt wird.
Navbar: Font Family
Bestimme die Schriftart aller Navigation Items.
Scrolled: Background Color
***Coming Soon***
Offcanvas
Das Offcanvas-Menü erscheint z. B. in der mobilen Ansicht, sobald man auf das Burger-Icon klickt und die Navigation ausgeklappt wird.
Alignment
Die verlinkten Unterseiten im Offcanvas-Menü können linksbündig, rechtsbündig oder zentriert aufgelistet werden.
Backdrop Color
***Coming Soon***
Background Color
Bestimme eine Hintergrundfarbe für das Offcanvas-Menü, das erscheit, sobald man auf das Burger-Icon klickt.
Outer Spacing
***Coming Soon***
Offcanvas Item
Dies sind die verlinkten Unterseiten innerhalb des Offcanvas-Menü. Das Offcanvas-Menü erscheint z. B. in der mobilen Ansicht, sobald man auf das Burger-Icon klickt und die Navigation ausgeklappt wird. In den Komponenten-Einstellungen der Navigation-Link-Komponente kann ein Item standardisiert (Default Style) oder als Button (CTA Style) dargestellt werden. Beide Item-Stile kannst du im Styles-Menü designen.
Font Family
Definiere eine Schriftart für alle verlinkten Subpages innerhalb des Offcanvas-Menüs.
CTA: Background Color
Ein Navigation Item kann in den Komponenten-Einstellungen als CTA-Button dargestellt werden. Wähle hier eine Hintergrundfarbe für den CTA-Button.
CTA: Text Color
Wähle eine Schriftfarbe für den Text im CTA-Button der Navigation.
CTA: Font Weight
Bestimme eine Schriftstärke für den Text im CTA-Button der Navigation.
CTA: Letter Spacing
Zwischen den Zeichen des Textes im CTA-Button können Abstände gesetzt werden.
CTA Active: Background Color
Sobald ein Website-User auf den Button innerhalb der Navigation klickt, kann der Hintergrund eine neue Farbe bekommen. Damit sich die Farbe nicht ändert, wähle einfach dieselbe Hintergrundfarbe wie hier aus.
CTA Active: Text Color
Sobald ein Website-User auf den Button innerhalb der Navigation klickt, kann sich die Schriftfarbe ändern. Damit sich die Farbe nicht ändert, wähle einfach dieselbe Schriftfarbe wie hier aus.
CTA Hover: Background Color
Bestimme hier die wechselnde Hintergrundfarbe für den CTA-Button im Offcanvas-Menü. Die Farbe wechselt sich beim Hovern. Damit sich die Farbe nicht ändert, wähle einfach dieselbe Hintergrundfarbe wie hier aus.
CTA Hover: Text Color
Durch das Hovern können Buttons innerhalb des Offcanvas-Menüs hervorgehoben werden. Zum Beispiel kann sich dadurch die Schriftfarbe ändern. Damit sich die Farbe nicht ändert, wähle einfach dieselbe Schriftfarbe wie hier aus.
CTA: Font Size
Gebe hier die Schriftgröße für das Offcanvas-Item im CTA-Style an. Die Größe kann für jedes Endgerät separat angepasst werden.
CTA: Height
Bestimme eine Höhe für alle CTA-Buttons im Offcanvas-Menü. Die Höhe kann für jedes Endgerät separat bestimmt werden.
CTA: Horizontal Spacing
Um den Text des Buttons kann ein horizontales Spacing gesetzt werden. Dadurch wird ein Button länger. Der Abstand kann für jede Gerätegruppe einzeln bestimmt werden.
Default: Background Color
Dies ist die Hintergrundfarbe für das Offcanvas-Item. Wenn du keine Hintergrundfarbe möchtest, klicke auf das Kreuz, sodass der Hintergrund transparent wird.
Default: Text Color
Wähle eine Schriftfarbe für das Offcanvas-Item.
Default: Font Weight
Lege eine Schriftstärke für das Offcanvas-Item fest.
Default: Letter Spacing
Zwischen den einzelnen Buchstaben können kleine Abstände sein. Lege hier das Spacing fest. Dies bezieht sich auf das Offcanvas-Item.
Default: Variant
Du kannst zwischen drei unterschiedlichen Stilen für das Offcanvas-Item wählen: Default (neue Schriftfarbe beim Hovern), Highlight (neue Schriftfarbe und horizontaler Strich beim Hovern) und Underline (neue Schriftfarbe und vertikaler Strich beim Hovern)
Default: Font Size
Gebe hier die Schriftgröße für das Offcanvas-Item ein, das sichtbar wird, sobald man das Offcanvas-Menü ausklappt.
Default: Height
Bestimme die Höhe der einzelnen Offcanvas-Items. Dadurch verleihst du einen vertikalen Abstand zwischen den einzelnen Items.
Default: Horizontal Spacing
***Coming Soon***
Default: Highlight Width
Wenn du unter "Variant" Highlight oder Underline ausgewählt hast, wird beim Offcanvas-Item ein vertikaler oder horizontaler Strich dargestellt. Bestimme hier die Stärke des Striches.
Default Submenu: Font Size
***Coming Soon***
Default Submenu: Item Height
***Coming Soon***
Default Active: Background Color
Sobald du ein Ofdfcanvas-Item angeklickt hat, kann eine Hintergrundfarbe um das Item erscheinen. Wähle diese hier aus. Wenn du diesen Effekt nicht möchtest, klicke auf das Kreuz, um einen transparenten Hintergrund zu wählen.
Default Active: Text Color
Sobald du ein Offcanvas-Item ausgewählt hast, kann sich die Schriftfarbe ändern. Bestimme diese Farbe hier. Falls du diesen Effekt nicht möchtest, kannst du einfach dieselbe Textfarbe wählen.
Default Active: Highlight Color
Wenn du unter "Variant" Highlight oder Underline ausgewählt hast, wird beim Offcanvas-Item ein vertikaler oder horizontaler Strich dargestellt. Wenn du ein Item anklickst, kann sich die Farbe des Striches ändern. Bestimme hier die Farbe des Striches.
Default Hover: Background Color
Durch das Hovern über dem Offcanvas-Item kann dies mit einer neuen Hintergrundfarbe markiert werden. Wähle diese hier aus oder klicke auf das Kreuz, um eine transparente Hintergrundfarbe zu wählen.
Default Hover: Text Color
Sobald über ein Offcanvas-Item gehovert wird, kann dieses mit einer neuen Schriftfarbe erscheinen. Wähle diese hier aus. Wenn du diesen Effekt nicht möchtest, wähle einfach dieselbe Schriftfarbe wie hier aus aus.
Default Hover: Highlight Color
Wenn du unter "Variant" Highlight oder Underline ausgewählt hast, wird beim Offcanvas-Item ein vertikaler oder horizontaler Strich dargestellt. Bestimme hier die Farbe des Striches, der beim Hovern erscheint.
Separator
Mithilfe eines Separators können Inhalte durch eine horizontale Linie getrennt werden. In den Komponenten-Settings des Separators kannst du drei unterschiedliche Separator-Stile auswählen und diese im Styles-Menü designen.
Variant: Line Color
Bestimme für jeden Separator eine eigene Farbe.
Content Width
In den Komponenten-Settings des Separators kannst du ein Image in die Mitte der Linie platzieren. Wähle hier die Weite bzw. Größe des Images aus.
Line Height
Definiere die Stärke der Linie.
Content Spacing
In den Komponenten-Settings des Separators kannst du ein Image in die Mitte der Linie platzieren. Bestimme hier den Abstand zwischen Bild und Linie.
Shadow
In den Komponenten-Einstellung der Text-Komponente kannst du einen von drei Text Shadows wählen und diese im Styles-Menü designen. Auch Glow-Effekte für Images können gewählt und definiert werden.
Glow: Color
***Coming Soon***
Glow: Size
***Coming Soon***
Text Shadow: Color
In den Komponenten-Settings der Text-Komponente können Schatten hinzugefügt werden. Hier bestimmst du die Farbe des Schattens.
Text Shadow: Size
Lege hier die Größe des Schattens fest. Je größer der Schatten, desto blasser wird die Farbe. Die Größe kannst du für jede Gerätegruppe einstellen.
Slider
Mithilfe einer Slideshow/eines Sliders kannst du Inhalte in Form eines Karussells rotieren lassen. Füge beliebig viele Slideshow Items hinzu und style den Slider im Styles-Menü.
Arrow: Rounded Field
In den Komponenten-Settings des Slideshow-Containers kannst du wählen, ob der User Pfeile verwenden sollte, um zwischen den Slides zu wechseln. Diese Pfeile können von einem Kreis (true) oder einem Rechteck (false) umgeben sein.
Arrow: Background Color
Das Feld um den Pfeilen kann in einer beliebigen Farbe erscheinen. Wenn du kein Feld möchtest, klicke auf das Kreuz, sodass das Feld transparent wird.
Arrow: Border Radius
Falls du unter "Rounded Field" false bzw. das Rechteck gewählt hast, kannst du hier abgerundete Ecken hinzufügen.
Arrow: Area Size
Bestimme hier eine Größe für das Feld um den Pfeil herum. Diese Größe hat keinen Einfluss auf die Größe des Pfeils.
Arrow: Icon Color
Bestimme hier die Farbe des Pfeils.
Arrow: Icon Size
Lege eine Größe für den Pfeil fest.
Arrow: Icon Strength
Wähle hier, wie dick der Pfeil sein soll.
Arrow: Left/Right Spacing
Hier kannst du die horizontale Platzierung der Pfeile bestimmen. Je größer der Wert ist, desto näher rücken der linke und rechte Pfeil zusammen.
Navigation Style
***Coming Soon***
Spacing
In zahlreichen Komponenten-Einstellungen kannst du Spacings setzen. Diese Spacing-Werte kannst du hier definieren.
Section Spacing 1-5
Für die Section-Komponente kannst du fünf separate Spacing-Werte setzen.
Spacing 1-9
Definiere hier insgesamt neun Spacing-Werte. Diese Spacings lassen sich schließlich in den Komponenten-Einstellung von u.a. Grid, Grid Item und Container auswählen.
Tab
Mithilfe der Tab-Mechanik kannst du mehrere Inhalte, wie Images oder Textabschnitte in beliebig viele Tabs einteilen. Ein User kann dann zwischen den Tabs wechseln, ähnlich wie Browser-Tabs. Hier kannst du die Tab-Button umfangreich stylen.
Button: Font Family
Bestimme die Schriftart für den Titel eines Tab Items.
Button: Font Weight
Bestimme die Stärke der Schrift für den Titel eines Tab Items.
Button: Letter Spacing
Zwischen den Buchstaben des Titels eines Tab Items können Spacings gesetzt werden.
Button: Style
Der Titel des Tab Items kann in zwei unterschiedlichen Stilen angezeigt werden: Default (ohne Effekte) oder Underline (mit einer vertikalen Linie unterhalb des Titels)
Button: Border Radius
Der Tab, in dem der Titel steht, kann abgerundete Ecken haben. Je größer der Wert, desto runder werden die Ecken.
Button: Border Width
Wähle die Stärke des Tab-Rahmens aus.
Button: Font Size
Definiere hier die Schriftgröße für den Titel des Tab Items. Die Größe hat auch Einfluss auf den gesamten Tab-Button.
Button: Height
Hier bestimmst du die vertikale Höhe des Tab-Buttons.
Button: Highlight Width
Sofern du unter "Button Style" underline gewählt hast, kannst du hier die Stärke des Striches festlegen.
Button: Spacing Between
Zwischen den Tab-Buttons kannst du einen individuellen Abstand wählen. Diesen Abstand kannst du auch für jedes Device bestimmen.
Button: Horizontal Spacing
Wähle einen horizontalen Abstand um den Titel des Tab Items. Dadurch wird ein Tab Item länger.
Button Style: Background Color
In den Komponenten-Settings kannst du zwischen zwei Tab-Button-Styles wählen. Wähle hier eine Hintergrundfarbe für den Tab-Button.
Button Style: Border Color
In den Komponenten-Settings kannst du zwischen zwei Tab-Button-Styles wählen. Wähle hier eine Rahmenfarbe für den Tab-Button.
Button Style: Text Color
In den Komponenten-Settings kannst du zwischen zwei Tab-Button-Styles wählen. Wähle hier eine Schriftfarbe für den Tab-Button.
Button Style: Active Background Color
Bestimme hier eine Hintergrundfarbe für den Tab-Button. Diese Hintergrundfarbe wird dargestellt, wenn der Button angeklickt wurde.
Button Style: Active Border Color
Suche hier eine Rahmenfarbe für den Tab-Button aus. Diese Rahmenfarbe wird dargestellt, wenn der Button angeklickt wurde.
Button Style: Active Text Color
Definiere eine Schriftfarbe für den Titel des Tab-Button. Diese Farbe wird dargestellt, wenn der Button angeklickt wurde.
Button Style: Hover Background Color
Bestimme hier eine Hintergrundfarbe für den Tab-Button. Diese Hintergrundfarbe wird dargestellt, wenn man über den Button hovert.
Button Style: Hover Border Color
Suche hier eine Rahmenfarbe für den Tab-Button aus. Diese Rahmenfarbe wird dargestellt, wenn man über den Button hovert.
Button Style: Hover Text Color
Definiere eine Schriftfarbe für den Titel des Tab-Button. Diese Farbe wird dargestellt, wenn man über den Button hovert.
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ü festlegen.
Background Color
Wähle eine Hintergrundfarbe für den gesamten Bereich innerhalb Tabelle. Die Hintergrundfarbe ist auch sichtbar, sobald du einen gepunkteten oder gestrichelten Rahmen verwendest.
Border Color
Definiere eine Farbe für den Rahmen. Der Rahmen wird an der linken und rechten Seiten angezeigt.
Border Style
Du kannst einen Rahmen-Stil wählen. Es gibt die Optionen dotted (gepunktete Linie), dashed (gestrichelte Linie) sowie solid (durchgezogene Linie).
Font Family
Wähle eine Schriftart für die Texte, die in der Tabelle stehen.
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.
Body: Background Color
Eine Zeile kann in den zugehörigen Properties als Body dargestellt werden. Hier kannst du eine Hintergrundfarbe für alle Body-Zeilen wählen.
Body: Border Color
Definiere eine Farbe für den Rahmen. Der Rahmen wird an den Seiten der Body-Zellen angezeigt.
Body: Border Style
Du kannst einen Rahmen-Style wählen. Es gibt die Optionen dotted (gepunktete Linie), dashed (gestrichelte Linie) sowie solid (durchgezogene Linie).
Body: Text Color
Gebe eine Schriftfarbe für die Texte in den einzelnen Body-Zellen an.
Body: Font Weight
Du kannst dem Text in den Body-Zellen eine bestimmte Schriftstärke verleihen.
Body: Letter Spacing
Zwischen den einzelnen Zeichen im Text der Tabelle kannst du hier einen Abstand wählen. Dies bezieht sich auf die Texte der Body-Zellen.
Body: Border Width Left/Right
Wähle eine Stärke für alle vertikalen Rahmenlinien. Gebe hier einen Pixel-Wert an. Dies bezieht sich auf die Rahmenlinien der Body-Zellen. Die Einstellung kannst du für jedes Endgerät anpassen.
Body: Border Top/Bottom
Wähle eine Stärke für alle horizontalen Rahmenlinien. Gebe hier einen Pixel-Wert an. Dies bezieht sich auf die Rahmenlinien der Body-Zellen. Die Einstellung kannst du für jedes Device anpassen.
Body: Cell Height
Hier kannst du die Höhe der Body-Zellen bestimmen. Gebe hier einen Pixel-Wert an. Die Einstellung kannst du für jedes Endgerät anpassen.
Body: Horizontal Cell Spacing
Innerhalb einer Body-Zelle kannst du ein horizontales Spacing um den Textbereich festlegen. Die Einstellung kannst du für jedes Endgerät anpassen.
Body: Font Size
Verleihe dem Text in den einzelnen Body-Zellen eine passende Schriftgröße. Die Einstellung kannst du für jedes Device anpassen.
Body: Row Highlight Color
Sobald ein User in eine Zelle klickt, kann die dazugehörige Zeile in einer neuen Farbe erscheinen. Gebe hier die Highlight-Farbe an. Wenn du diese Einstellung nicht verwenden möchtest, wähle hier dieselbe Farbe wie die Hintergrundfarbe aus.
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) sowie solid (durchgezogene Linie).
Header: Text Color
Bestimme eine Schriftfarbe für den Text im Header.
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.
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: Font Size
Du kannst eine separate Schriftgröße für den Text im Header angeben.
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: Default Color
Wähle eine Schriftfarbe für jede einzelne Headline.
Headline: Font Family
Hier kannst du für jede einzelne Überschrift eine benutzerdefinierte Schriftart angeben. Eine Custom Font Family musst du zunächst in der oberen Leiste unter "Fonts" hinterlegen.
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: Font Size
Lege die Schriftgröße der einzelnen Headlines hier fest. Die Schriftgröße kann für jede Gerätegruppe separat angelegt werden.
Headline: Line Height
Wähle eine Zeilenhöhe für die Überschriften. Die Zeilenhöhe kann für jede Gerätegruppe separat angelegt werden.
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. Diese Einstellung kann für jedes Device separat angelegt werden.
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 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: Hover Color
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: Hover Decoration
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).
List Item: Default Color
Bestimme eine Schriftfarbe für die Strichlisten. Strichlisten kannst du mithilfe des Text-Editors hinzufügen.
List Item: Font 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 Weight
Definiere eine Schriftstärke für die Texte der Strichlisten.
List Item: Letter Spacing
Zwischen den Buchstaben kann ein Abstand hinzugefügt werden. Gebe hier einen Pixel-Wert an.
List Item: Font Size
Hinterlege eine Schriftgröße für den Text in der Strichliste. Die Größe kannst du für jedes Device anpassen.
List Item: Line Height
Wähle eine Zeilenhöhe für die einzelnen Stichpunkte. Die Einstellung lässt sich für jedes Device anpassen.
List Item: Margin Bottom
Setze ein bestimmtes Spacing unterhalb jedes Stichpunktes.
Paragraph: Default Color
Der Paragraph kann in einer eigenen Farbe erscheinen. Diese kannst du hier auswählen.
Paragraph: 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 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: Font Size
Verleihe dem Paragraph eine Schriftgröße. Die Größe lässt sich für jede Gerätegruppe einstellen.
Paragraph: Line Height
Wähle eine Zeilenhöhe für den Paragraph. Die Höhe kannst du für jedes Device anpassen.
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.
Small: Default Color
Der Inline kann in einer eigenen Farbe erscheinen. Diese kannst du hier auswählen.
Small: Font Family
Hier kannst du für den Inline-Text eine benutzerdefinierte Schriftart angeben. Eine Custom Font Family musst du zunächst in der oberen Leiste unter "Fonts" hinterlegen.
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: Font Size
Verleihe dem Inline-Text eine Schriftgröße. Die Schriftgröße kann für jedes Endgerät separat definiert werden.
Small: Line Height
Wähle eine Zeilenhöhe für den Inline-Text. Die Höhe kannst du für jedes Device anpassen.
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. Das Spacing kann für jede Gerätegruppe eingestellt werden.
Tooltip
Das Tooltip-Feature kannst du bei unterschiedlichen Elementen in den entsprechenden Komponenten-Settings aktivieren. Darunter zählen z. B. die Form-Komponenten, Images und Buttons. Ein Tooltip ist ein kleines Pop-up-Fenster, das beim Hovern des Elementes erscheint.
Arrow Color
Das Pop-up-Fenster wird mit einem Pfeil dargestellt. Suche dir hier eine Farbe für den Pfeil aus.
Background Color
Das Feld, in dem der Text des Tooltips steht, kann eine eigene Hintergrundfarbe bekommen. Diese kannst du hier auswählen.
Border Color
Wähle eine Farbe für die Rahmenlinien um das kleine Pop-up-Fenster.
Border Radius
Das Pop-up-Fenster kann abgerundete Ecken haben. Gebe z. B. 12px ein oder 0px für spitze Kanten.
Text Color
Definiere eine Schriftfarbe für den Text im Tooltip.
Font Weight
Hier kannst du für den Text eine Schriftstärke angeben.
Letter Spacing
Zwischen den Buchstaben kann ein Abstand hinzugefügt werden. Gebe hier einen Pixel-Wert an.
Arrow Size
Bestimme hier die Größe des Pfeils. Die Size kann für jedes Device separat bestimmt werden.
Border Width
Hier gibst du die Stärke der Rahmenlinie an. Die Stärke der Rahmenlinie kannst du für jedes Device eingeben. Gebe hier 0px an, falls du keine Rahmenlinien möchtest.
Font Size
Hier gibst du die Schriftgröße für den Text des Tooltips an. Die Größe kannst du für jede Gerätegruppe anpassen.
Line Height
Wähle eine Zeilenhöhe für den Text, der im Tooltip steht. Die Höhe kannst du für jedes Device bestimmen.
Spacing Horizontal
Füge einen horizontalen Abstand um den Text hinzu. Dadurch wird der Tooltip länger.
Spacing Vertikal
Füge einen vertikalen Abstand um den Text hinzu. Dadurch wird der Tooltip höher.
Video
Neben Images und GIFs kannst du auch Videodateien zu einer Landing Page hinzufügen. Nehme dafür die Video-Komponente und lade ein Video von deinem Desktop hoch.
Main Color
***Coming Soon***