Alle Kollektionen
Landing Pages
Landing Page Editor
Styles-Einstellungen für Landing Pages
Styles-Einstellungen für Landing Pages

Hier werden alle Styles-Einstellungen erklärt.

Hannah Krüger avatar
Verfasst von Hannah Krüger
Vor über einer Woche 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.

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***

Hat dies Ihre Frage beantwortet?