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:

Coming Soon

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.

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.

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.

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.

Gebe für jede einzelne Button-Größe eine passende Schriftgröße an. Passe die Schriftgröße auch an die unterschiedlichen Devices an.

Jeder Button kann eine unterschiedliche Höhe besitzen. Definiere diese hier.

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.

Wähle hier die horizontalen Abstände neben den Text im Button. Je größer die Abstände, desto länger wird der Button.

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.

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.

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

Bestimme eine Schriftfarbe für den Text im Button.

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

Gebe die Breite der Schrift an. Wähle zwischen bold, normal und thin.

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

Hat aktuell keine Funktion, weil es keine Aktive State Buttons gibt.

Hat aktuell keine Funktion, weil es keine Aktive State Buttons gibt.

Hat aktuell keine Funktion, weil es keine Aktive State Buttons gibt.

Sobald ein User seinen Cursor über den Button bewegt, kann eine neue Hintergrundfarbe des Buttons erscheinen.

Wenn ein User seine Maus über den Button bewegt, können die Rahmenlinien eine weitere Farbe haben.

Die Schriftfarbe des Textes im Button kann in einer neuen Farbe erscheinen, sobald über den Button gehovert wird.

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.

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

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

Definiere insgesamt neun Farben sowie Schwarz-, Weiß- und Grautöne. Du kannst einen Farbcode eingeben oder mithilfe des Farbwählers dir eine Farbe aussuchen.

Du kannst z. B. Anmelde-, Bewerbungs- oder Buchungsformulare erstellen. Die Form-Komponenten lassen sich individuell gestalten.

Hier bestimmst du die Abrundungen der Checkbox. Wähle 0px für eine eckige Checkbox aus sowie 11px für eine runde Checkbox.

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.

Die Pixel-Größe des Symbols kann hier eingetragen werden. Diese Einstellung bezieht sich nur auf die Checkbox.

Wähle eine Hintergrundfarbe für das Ankreuzfeld. Diese Einstellung bezieht sich auf die Komponenten "Checkbox" und "Radio Group".

Wähle eine Farbe für die Rahmenlinie des Ankreuzfeldes. Diese Einstellung bezieht sich auf die Komponenten "Checkbox" und "Radio Group".

Die Breite der Rahmenlinie kannst du hier bestimmen. Sie bezieht sich auf die Komponenten "Checkbox" und "Radio Group".

Zwischen dem Ankreuzfeld und dem dazugehörigen Titel kann ein Abstand definiert werden. Dieser bezieht sich auf die Komponenten "Checkbox" und "Radio Group".

Sobald das Ankreuzfeld angeklickt wird, kann das Feld in einer neuen Hintergrundfarbe erscheinen. Diese Einstellung bezieht sich auf die Komponenten "Checkbox" und "Radio Group".

Wenn ein User das Ankreuzfeld angeklickt wird, kann die Rahmenlinie ihre Farbe wechseln. Diese Einstellung bezieht sich auf die Komponenten "Checkbox" und "Radio Group".

Bestimme eine Hintergrundfarbe für das Menü, in dem ein User ein Datum wählen kann,

Du kannst ebenfalls eine Farbe für die Rahmenlinie des Menüs bestimmen.

Definiere die Breite der unteren Rahmenlinie. Sofern du keine Rahmenlinie möchtest, gebe 0px ein.

Definiere die Breite der linken Rahmenlinie. Sofern du keine Rahmenlinie möchtest, gebe 0px ein.

Definiere die Breite der rechten Rahmenlinie. Sofern du keine Rahmenlinie möchtest, gebe 0px ein.

Definiere die Breite der oberen Rahmenlinie. Sofern du keine Rahmenlinie möchtest, gebe 0px ein.

Bestimme die Breite der Rahmenlinie für die einzelnen Felder. Wähle 0px aus, falls du keinen Rahmen möchtest.

Die einzelnen Felder können separate Rahmenlinien haben. Hier kannst du die Farbe bestimmen.

Zur Visualisierung einer Zeitperiode, z. B. innerhalb eines Buchungsformulars, kann eine weitere Hintergrundfarbe ausgewählt werden.

Zur Visualisierung einer Zeitperiode, z. B. innerhalb eines Buchungsformulars, können die Daten in einer neuen Farbe erscheinen.

Sobald ein User ein Datum ausgewählt hat, kann das gewählte Feld mit einer Hintergrundfarbe markiert werden.

Wenn ein User ein Datum ausgewählt hat, kann das gewählte Feld mit einer Rahmenlinie markiert werden.

Sobald ein Datum angeklickt wird, kann das Datum in einer zweiten Schriftfarbe erscheinen. Wähle diese hier aus.

Ein bestimmtes Feld kann durch das Hovern eine neue Hintergrundfarbe erhalten.

Sobald ein User seinen Cursor über ein Feld bewegt, kann das Feld eine Rahmenlinie bekommen.

Auch die Schriftfarbe des Feldes kann durch das Hovern geändert werden.

Das aktuelle Datum kann mithilfe einer anderen Hintergrundfarbe hervorgehoben werden.

Das aktuelle Datum kann ebenfalls mit einer Rahmenlinie markiert werden.

Du kannst die Schriftfarbe des Feldes mit dem aktuellen Tag bestimmen.

Falls ein User nicht alle Felder ausfüllt, wird er benachrichtigt. Bestimme hier die Hintergrundfarbe des Pop-up-Menüs.

Du kannst die Schriftfarbe für den Text der Error Message hier auswählen. Das Menü erscheint, sofern nicht alle Felder ausgefüllt wurden.

Ebenfalls kannst du die Schriftgröße für den Text der Fehlermeldung hier bestimmen.

Bestimme hier die Zeilenhöhe für den Text der Error Message. Das Menü erscheint, sofern nicht alle Felder ausgefüllt wurden.

Wurde irgendwann mal eingebaut, aber hat keine Funktion.

Wurde irgendwann mal eingebaut, aber hat keine Funktion.

Füge einen Abstand auf der rechten Seite der Check Box oder Radio Group hinzu.

Bestimme den Abstand nach unten zum nächsten Form-Element.

Bestimme eine Hintergrundfarbe für alle Eingabefelder.

Füge eine Rahmenlinie unterhalb der Eingabefelder hinzu. Bestimme hier die Stärke der Rahmenlinie.

Hier gibst du die Farbe der Rahmenlinie an.

Gebe hier für die linke Seite des Eingabefeldes die Größe der Rahmenlinie an.

Die Eingabefelder können abgerundete Ecken haben. Für Abrundungen wähle z. B. 15px. Für spitze Kanten kannst du 0px eingeben.

Füge eine Rahmenlinie auf der rechten Seite des Eingabefeldes hinzu. Bestimme die Stärke in Pixelgröße.

Die Rahmenlinie können unterschiedliche Stile haben: Solid (durchgezogene Linie)m dotted (gepunktete Linie) sowie dashed (gestrichelte Linie).

Füge eine Rahmenlinie oberhalb der Eingabefelder hinzu. Bestimme hier die Stärke der Rahmenlinie.

Hier kannst du eine Schriftart für die Eingaben auswählen.

***Coming Soon***

***Coming Soon***

Bestimme die Farbe des Platzhalters. Einen Platzhalter ist besonders für Eingabefelder geeigent.

***Coming Soon***

Wähle eine Schriftfarbe für den Text, der in ein Eingabefeld getippt wird.

Bestimme die Höhe des Textfeldes. Diese Einstellung bezieht sich auf die Komponente "Text Area".

***Coming Soon***

***Coming Soon***

***Coming Soon***

***Coming Soon***

***Coming Soon***

***Coming Soon***

***Coming Soon***

***Coming Soon***

***Coming Soon***

***Coming Soon***

***Coming Soon***

***Coming Soon***

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.

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".

Den Abstand zwischen den einzelnen Buchstaben kannst du hier definieren. Diese Einstellung bezieht sich auf die Komponenten "Input", "Text Area", "Select" und "Multi Select".

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.

***Coming Soon***

Bestimme die Schriftfarbe des Labels. Das ist der Titel jedes Eingabefeldes.

Wähle eine Schriftgröße für den Titel, der über oder neben einem Eingabefeld steht.

Die Schrift des Labels kann normal oder kursiv (italic) dargestellt werden.

Bestimme hier die Stärke der Schrift des Titels, der über oder neben einem Eingabefeld steht.

Den Abstand zwischen den einzelnen Buchstaben kannst du hier definieren. Diese Einstellung bezieht sich auf das Label eines Feldes.

Wähle eine Zeilenhöhe für das Label aus. Gebe hierfür eine Pixelgröße an.

Wähle einen Abstand zwischen dem Titel und dem dazugehörigen Eingabefeld.

Hier bestimmst du eine Schriftart für den Text des Labels sowie für den Text der Fehlermeldung.

***Coming Soon***

***Coming Soon***

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.

Im Upload-Feld können User Dokumente oder Images hochladen. Hier kannst du die Hintergrundfarbe des Feldes bestimmen.

Du kannst dem Upload-Feld eine Rahmenlinie hinzufügen. Definiere eine Farbe für die Rahmenlinie hier.

Die Rahmenlinie kann in einem bestimmten Stil erscheinen. Wähle zwischen solid (durchgezogene Linie), dashed (gestrichelte Linie) und dotted (gepunktete Linie).

Im Upload-Feld steht ein kurzer Text für den User. Verleihe dem Text eine Schriftfarbe.

Wähle hier eine Schriftart für den Text im Upload-Feld.

Bestimmte die Breite des Textes hier.

Zwischen den einzelnen Buchstaben können kleine Abstände hinzugefügt werden.

***Coming Soon***
​

***Coming Soon***

***Coming Soon***

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.

Auch die Breite der Rahmenlinie kann für jedes Device separat bestimmt werden.

Definiere eine Schriftgröße für den Text im Upload-Feld. Die Schriftgröße kann für alle Devices individuell festgelegt werden.

Bestimme die Zeilenhöhe für den Text im Upload-Feld. Diese kann für jedes Endgerät separat festgelegt werden.

Definiere hier die Höhe des Upload-Feldes. Die Höhe kann für jedes Device unterschiedlich eingestellt werden.

Sobald ein Dokument hochgeladen wurde, erscheint ein neues Feld, indem das Dokument liegt. Bestimme hier die Hintergrundfarbe des Feldes.

Sobald ein Dokument hochgeladen wurde, wird es in einem kleinen Preview-Fenster angezeigt. Dort steht auch der Dateiname. Bestimme hier die Schriftfarbe.

***Coming Soon***

***Coming Soon***

Hier kannst du das Scrolling-Verhalten der Landing Page definieren sowie übergreifende Einstellungen festlegen.

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.

***Coming Soon***

***Coming Soon***

***Coming Soon***

***Coming Soon***

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.

***Coming Soon***

***Coming Soon***

***Coming Soon***
​

***Coming Soon***

Die Breite der Container-Komponente kann für jedes Endgerät individuell bestimmt werden.

***Coming Soon***

Du kannst sechs Gradient-Stile festlegen. Aus deinen beiden gewählten Farben wird ein Farbverlauf generiert.

***Coming Soon***

***Coming Soon***

***Coming Soon***

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.

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.

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).

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).

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).

Den Stil des Aufzählungszeichens kannst du bestimmen. Wähle zwischen square (kleines Quadrat), circle (kleiner Kreis) oder disc (kleiner gefüllter Kreis).

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).

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).

Unabhängig von der Art des Aufzählungszeichens kannst du für jedes Device eine eigene Größe für die Bullets bestimmen.

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.

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.

Wähle eine Farbe für das Pop-up.

***Coming Soon***

***Coming Soon***

***Coming Soon***

Setze eine Rahmenlinie um das Pop-up und wähle die dazugehörige Farbe.

Die Rahmenlinie kann verschiedene Stile annehmen. Wähle zwischen solid (durchgezogene Linie), dashed (gestrichelte Linie) und dotted (gepunktete Linie).

Wähle aus, wie dick die untere Rahmenlinie sein soll. Sofern du keine Rahmenlinie möchtest, trage 0px ein.

Wähle aus, wie dick die linke Rahmenlinie sein soll. Sofern du keine Rahmenlinie möchtest, trage 0px ein.

Wähle aus, wie dick die rechte Rahmenlinie sein soll. Sofern du keine Rahmenlinie möchtest, trage 0px ein.

Wähle aus, wie dick die obere Rahmenlinie sein soll. Sofern du keine Rahmenlinie möchtest, trage 0px ein.

Das Kreuz, um den Pop-up zu schließen, kann eine eigene Farbe annehmen.

Du kannst die Größe des Kreuzes bestimmen. Gebe hier eine Pixelgröße an.

Auch die Stärke des Kreuzes kannst du hier definieren.

***Coming Soon***

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.

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.

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.

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.

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.

Mit der Navigation-Komponente kannst du deiner Landing Page eine Navigation verleihen, sodass du Unterseiten verlinken kannst. Die Navbar lässt sich vielseitig stylen.

Wähle eine Hintergrundfarbe für die Navigation-Komponente aus. Für eine transparente Navigation klicke im Feld auf das Kreuz.

Die Rahmenlinie kann verschiedene Stile annehmen. Wähle zwischen solid (durchgezogene Linie), dashed (gestrichelte Linie) und dotted (gepunktete Linie).

Neben der Background Color kann die Navigation eine zweite Hintergrundfarbe annehmen, die im Content-Feld (mittig) erscheint.

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.

***Coming Soon***

Definiere einen individuellen Abstand für die linke und rechte Seite. Je größer das Spacing, desto mehr rücken die Navigation Items zusammen.

Unterhalb der Navigation kannst du eine Rahmenlinie hinzufügen. Wähle hier die Farbe der Rahmenlinie aus.

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.

Wähle eine Farbe für das Burger-Icon aus.

Definiere hier einen Abstand zwischen den drei Strichen.

Die Stärke der drei Linien kannst du hier angeben.

Die allgemeine Breite des Burger-Icons kannst du hier bestimmen. Je kleiner die Weite, desto schmaler das Icon.

Die Subpages, die im Dropdown-Menü aufgelistet sind, können rechtsbündig, linksbündig oder zentriert dargestellt werden.

Die Hintergrundfarbe wird angezeigt, sobald sich das Dropdown-Menü öffnet. Klicke auf das Kreuz, falls du einen transparenten Hintergrund möchtest.

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.

Hier definierst du eine Größe für den Pfeil.

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.

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.

Wähle eine Schriftfarbe für die verlinkten Subpages, die im Dropdown-Menü aufgelistet werden.

Wähle eine Schriftstärke für die verlinkten Subpages, die im Dropdown-Menü aufgelistet werden.

Zwischen den einzelnen Buchstaben kannst du einen Abstand wählen.

***Coming Soon***

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.

***Coming Soon***

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.

Beim Hovern kann sich der Hintergrund eines Items ändern. Wähle hier die Farbe aus.

***Coming Soon***

Beim Hovern kann sich die Schriftfarbe eines Items ändern. Wähle hier die Farbe aus.

***Coming Soon***

Gebe eine Schriftgröße für die aufgeführten Unterseiten. Diese Einstellung kann für jedes Device separat definiert werden.

Das ist der Abstand zwischen den einzelnen Dropdown Items. Diese Einstellung kann für jedes Device separat definiert werden.

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.

Bestimme die Höhe der gesamten Navigationsleiste. Die Höhe kannst du für jedes Endgerät separat bestimmen.

Definiere die Größe des Logos, das in der Navigation dargestellt wird.

Bestimme die Schriftart aller Navigation Items.

***Coming Soon***

Das Offcanvas-Menü erscheint z. B. in der mobilen Ansicht, sobald man auf das Burger-Icon klickt und die Navigation ausgeklappt wird.

Die verlinkten Unterseiten im Offcanvas-Menü können linksbündig, rechtsbündig oder zentriert aufgelistet werden.

***Coming Soon***

Bestimme eine Hintergrundfarbe für das Offcanvas-Menü, das erscheit, sobald man auf das Burger-Icon klickt.

***Coming Soon***

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.

Definiere eine Schriftart für alle verlinkten Subpages innerhalb des Offcanvas-Menüs.

Ein Navigation Item kann in den Komponenten-Einstellungen als CTA-Button dargestellt werden. Wähle hier eine Hintergrundfarbe für den CTA-Button.

Wähle eine Schriftfarbe für den Text im CTA-Button der Navigation.

Bestimme eine Schriftstärke für den Text im CTA-Button der Navigation.

Zwischen den Zeichen des Textes im CTA-Button können Abstände gesetzt werden.

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.

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.

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.

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.

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.

Bestimme eine Höhe für alle CTA-Buttons im Offcanvas-Menü. Die Höhe kann für jedes Endgerät separat bestimmt werden.

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.

Dies ist die Hintergrundfarbe für das Offcanvas-Item. Wenn du keine Hintergrundfarbe möchtest, klicke auf das Kreuz, sodass der Hintergrund transparent wird.

Wähle eine Schriftfarbe für das Offcanvas-Item.

Lege eine Schriftstärke für das Offcanvas-Item fest.

Zwischen den einzelnen Buchstaben können kleine Abstände sein. Lege hier das Spacing fest. Dies bezieht sich auf das Offcanvas-Item.

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)

Gebe hier die Schriftgröße für das Offcanvas-Item ein, das sichtbar wird, sobald man das Offcanvas-Menü ausklappt.

Bestimme die Höhe der einzelnen Offcanvas-Items. Dadurch verleihst du einen vertikalen Abstand zwischen den einzelnen Items.

***Coming Soon***

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.

***Coming Soon***

***Coming Soon***

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.

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.

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.

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.

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.

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.

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.

Bestimme für jeden Separator eine eigene Farbe.

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.

Definiere die Stärke der Linie.

In den Komponenten-Settings des Separators kannst du ein Image in die Mitte der Linie platzieren. Bestimme hier den Abstand zwischen Bild und Linie.

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.

***Coming Soon***

***Coming Soon***

In den Komponenten-Settings der Text-Komponente können Schatten hinzugefügt werden. Hier bestimmst du die Farbe des Schattens.

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.

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ü.

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.

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.

Falls du unter "Rounded Field" false bzw. das Rechteck gewählt hast, kannst du hier abgerundete Ecken hinzufügen.

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.

Bestimme hier die Farbe des Pfeils.

Lege eine Größe für den Pfeil fest.

Wähle hier, wie dick der Pfeil sein soll.

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.

***Coming Soon***

In zahlreichen Komponenten-Einstellungen kannst du Spacings setzen. Diese Spacing-Werte kannst du hier definieren.

Für die Section-Komponente kannst du fünf separate Spacing-Werte setzen.

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.

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.

Bestimme die Schriftart für den Titel eines Tab Items.

Bestimme die Stärke der Schrift für den Titel eines Tab Items.

Zwischen den Buchstaben des Titels eines Tab Items können Spacings gesetzt werden.

Der Titel des Tab Items kann in zwei unterschiedlichen Stilen angezeigt werden: Default (ohne Effekte) oder Underline (mit einer vertikalen Linie unterhalb des Titels)

Der Tab, in dem der Titel steht, kann abgerundete Ecken haben. Je größer der Wert, desto runder werden die Ecken.

Wähle die Stärke des Tab-Rahmens aus.

Definiere hier die Schriftgröße für den Titel des Tab Items. Die Größe hat auch Einfluss auf den gesamten Tab-Button.

Hier bestimmst du die vertikale Höhe des Tab-Buttons.

Sofern du unter "Button Style" underline gewählt hast, kannst du hier die Stärke des Striches festlegen.

Zwischen den Tab-Buttons kannst du einen individuellen Abstand wählen. Diesen Abstand kannst du auch für jedes Device bestimmen.

Wähle einen horizontalen Abstand um den Titel des Tab Items. Dadurch wird ein Tab Item länger.

In den Komponenten-Settings kannst du zwischen zwei Tab-Button-Styles wählen. Wähle hier eine Hintergrundfarbe für den Tab-Button.

In den Komponenten-Settings kannst du zwischen zwei Tab-Button-Styles wählen. Wähle hier eine Rahmenfarbe für den Tab-Button.

In den Komponenten-Settings kannst du zwischen zwei Tab-Button-Styles wählen. Wähle hier eine Schriftfarbe für den Tab-Button.

Bestimme hier eine Hintergrundfarbe für den Tab-Button. Diese Hintergrundfarbe wird dargestellt, wenn der Button angeklickt wurde.

Suche hier eine Rahmenfarbe für den Tab-Button aus. Diese Rahmenfarbe wird dargestellt, wenn der Button angeklickt wurde.

Definiere eine Schriftfarbe für den Titel des Tab-Button. Diese Farbe wird dargestellt, wenn der Button angeklickt wurde.

Bestimme hier eine Hintergrundfarbe für den Tab-Button. Diese Hintergrundfarbe wird dargestellt, wenn man über den Button hovert.

Suche hier eine Rahmenfarbe für den Tab-Button aus. Diese Rahmenfarbe wird dargestellt, wenn man über den Button hovert.

Definiere eine Schriftfarbe für den Titel des Tab-Button. Diese Farbe wird dargestellt, wenn man über den Button hovert.

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.

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

Definiere eine Farbe für den Rahmen. Der Rahmen wird an der linken und rechten Seiten angezeigt.

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

Wähle eine Schriftart für die Texte, die in der Tabelle stehen.

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.

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.

Eine Zeile kann in den zugehörigen Properties als Body dargestellt werden. Hier kannst du eine Hintergrundfarbe für alle Body-Zeilen wählen.

Definiere eine Farbe für den Rahmen. Der Rahmen wird an den Seiten der Body-Zellen angezeigt.

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

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

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

Zwischen den einzelnen Zeichen im Text der Tabelle kannst du hier einen Abstand wählen. Dies bezieht sich auf die Texte der Body-Zellen.

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.

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.

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.

Innerhalb einer Body-Zelle kannst du ein horizontales Spacing um den Textbereich festlegen. Die Einstellung kannst du für jedes Endgerät anpassen.

Verleihe dem Text in den einzelnen Body-Zellen eine passende Schriftgröße. Die Einstellung kannst du für jedes Device anpassen.

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.

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.

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

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

Bestimme eine Schriftfarbe für den Text im Header.

Verleihe dem Text im Header eine Schriftstärke.

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

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

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

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

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

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

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.

Wähle eine Schriftfarbe für jede einzelne Headline.

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.

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.

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

Lege die Schriftgröße der einzelnen Headlines hier fest. Die Schriftgröße kann für jede Gerätegruppe separat angelegt werden.

Wähle eine Zeilenhöhe für die Überschriften. Die Zeilenhöhe kann für jede Gerätegruppe separat angelegt werden.

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.

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).

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.

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.

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).

Bestimme eine Schriftfarbe für die Strichlisten. Strichlisten kannst du mithilfe des Text-Editors hinzufügen.

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.

Definiere eine Schriftstärke für die Texte der Strichlisten.

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

Hinterlege eine Schriftgröße für den Text in der Strichliste. Die Größe kannst du für jedes Device anpassen.

Wähle eine Zeilenhöhe für die einzelnen Stichpunkte. Die Einstellung lässt sich für jedes Device anpassen.

Setze ein bestimmtes Spacing unterhalb jedes Stichpunktes.

Der Paragraph kann in einer eigenen Farbe erscheinen. Diese kannst du hier auswählen.

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.

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.

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

Verleihe dem Paragraph eine Schriftgröße. Die Größe lässt sich für jede Gerätegruppe einstellen.

Wähle eine Zeilenhöhe für den Paragraph. Die Höhe kannst du für jedes Device anpassen.

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

Der Inline kann in einer eigenen Farbe erscheinen. Diese kannst du hier auswählen.

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.

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.

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

Verleihe dem Inline-Text eine Schriftgröße. Die Schriftgröße kann für jedes Endgerät separat definiert werden.

Wähle eine Zeilenhöhe für den Inline-Text. Die Höhe kannst du für jedes Device anpassen.

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.

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.

Das Pop-up-Fenster wird mit einem Pfeil dargestellt. Suche dir hier eine Farbe für den Pfeil aus.

Das Feld, in dem der Text des Tooltips steht, kann eine eigene Hintergrundfarbe bekommen. Diese kannst du hier auswählen.

Wähle eine Farbe für die Rahmenlinien um das kleine Pop-up-Fenster.

Das Pop-up-Fenster kann abgerundete Ecken haben. Gebe z. B. 12px ein oder 0px für spitze Kanten.

Definiere eine Schriftfarbe für den Text im Tooltip.

Hier kannst du für den Text eine Schriftstärke angeben.

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

Bestimme hier die Größe des Pfeils. Die Size kann für jedes Device separat bestimmt werden.

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.

Hier gibst du die Schriftgröße für den Text des Tooltips an. Die Größe kannst du für jede Gerätegruppe anpassen.

Wähle eine Zeilenhöhe für den Text, der im Tooltip steht. Die Höhe kannst du für jedes Device bestimmen.

Füge einen horizontalen Abstand um den Text hinzu. Dadurch wird der Tooltip länger.

Füge einen vertikalen Abstand um den Text hinzu. Dadurch wird der Tooltip höher.

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.

***Coming Soon***