Wir haben einen neuen Look und aufregende neue Funktionen! Klicken Sie hier, um mehr zu erfahren.

Stil-Leitfaden

Diese Seite des Style Guides enthält Stile und Komponenten, die auf der gesamten Website verwendet werden sollen.

Farben

Farbe ist ein hervorragendes Mittel, um Lebendigkeit zu vermitteln, visuelle Kontinuität zu schaffen, Statusinformationen zu vermitteln, Feedback zu Benutzeraktionen zu geben und Daten zu visualisieren.

Primärfarbe

#5fc9fa

Sekundärfarbe

#fa8b9f

Schwarz

#2b2b2b

Schriftarten

Das Wort Schriftart bezieht sich auf eine Reihe von druckbaren oder anzeigbaren Typografie- oder Textzeichen in einem bestimmten Stil und einer bestimmten Größe. Schriftarten werden sowohl in gedrucktem als auch in digitalem Text verwendet.

Aa
Tasa Orbiter & Inter
700 Fettgedruckter Text
300 Leichter Text
Rubriken

Ein Überschriftenelement beinhaltet alle Schriftartänderungen, Absatzumbrüche vor und nach der Überschrift sowie alle Leerzeichen, die zur Darstellung der Überschrift erforderlich sind. Die Überschriftenelemente sind H1, H2, H3, H4, H5 und H6, wobei H1 die höchste (oder wichtigste) Ebene und H6 die niedrigste ist.

Held

Rubrik 1 - 66PX

Überschrift 01

Überschrift 1 - 72PX

Überschrift 02

Rubrik 2 - 62PX

H2 mit H3-Stil

Überschrift 03

Rubrik 3 - 50PX

Rubrik 04

Rubrik 4 - 32PX
Rubrik 05
Rubrik 5 - 24PX
Rubrik 06
Rubrik 6 - 20PX
Paragraphen

Ein Absatz beginnt immer in einer neuen Zeile, und die Browser fügen vor und nach einem Absatz automatisch etwas Leerraum (einen Rand) ein.

Normaler Absatz

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tellus leo, commodo ac maximus vel, laoreet eget justo. Vivamus eros arcu, sagittis suscipit nunc nec, varius mollis sem.

Großer Absatz

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tellus leo, commodo ac maximus vel, laoreet eget justo. Vivamus eros arcu, sagittis suscipit nunc nec, varius mollis sem.

Reichhaltiger Text

Ein Rich-Text-Element (RTE) ist das perfekte Element für die Erstellung von Langform-Inhalten für Blog-Posts, Info-Seiten, Biografien - was auch immer Sie wollen. Anstatt einzelne Überschriften-, Absatz-, Listen- oder Bildelemente hinzuzufügen, können Sie mit einem Doppelklick in ein Rich-Text-Element diese verschiedenen Inhaltselemente direkt erstellen.

Überschrift 2 - Was ist ein Rich-Text-Element?

Mit der Blogtext-Auswahl können Sie Überschriften, Absätze, Blockzitate, Bilder und Videos an einem Ort erstellen und formatieren, anstatt sie einzeln hinzufügen und formatieren zu müssen. Mit einem Doppelklick können Sie einfach Inhalte erstellen.

Überschrift 3 - Was ist ein Rich-Text-Element?

Überschrift 4 - Was ist ein Rich-Text-Element?

Überschrift 5 - Was ist ein Rich-Text-Element?
Überschrift 6 - Was ist ein Rich-Text-Element?

Überschriften, WEBSITE LINK, Blockzitate, Abbildungen, Bilder und Abbildungsunterschriften können alle gestylt werden, nachdem dem Rich-Text-Element eine Klasse hinzugefügt wurde, indem das verschachtelte Selektorsystem "Wenn innerhalb von" verwendet wird.

Wie man die Formatierung für jeden Rich-Text anpasst
Wie man die Formatierung für jeden Rich-Text anpasst
  • Ungeordnete Liste Element 1
  • Ungeordnete Liste Punkt 2
  • Ungeordnete Liste Punkt 3
  1. Bestellte Liste
  2. Bestellte Liste
  3. Bestellte Liste
Überschriften, Absätze, Blockzitate, Abbildungen, Bilder und Abbildungsunterschriften können alle gestylt werden, nachdem dem Rich-Text-Element eine Klasse hinzugefügt wurde, indem das verschachtelte Selektorsystem "Wenn innerhalb von" verwendet wird.
App Webflow-Vorlage -
Black Zero - Erstellt von Wedoflow.com und Azwedo.com
www.webflow.com

Etwas Text am unteren Rand von Richtext

Buttons

Der Button-Tag definiert eine anklickbare Schaltfläche. Innerhalb eines Schaltflächenelements können Sie Text einfügen.

Haupttaste
Schaltfläche
Standard-Schaltfläche
Schaltfläche
Benachrichtigungen

Diese Komponenten können oben auf der Seite, vor der Navigation, platziert werden.

Benachrichtigungen
Wir haben einen neuen Look und aufregende neue Funktionen! Klicken Sie hier, um mehr zu erfahren.
Prüfen Sie unsere neue Premium Webflow-Vorlage
Demo ansehen
Abonnieren Sie unseren E-Mail-Newsletter und Sie erhalten 10% Rabatt!
Abonnieren
Eingabe

Input-Element wird verwendet, um interaktive Steuerelemente für webbasierte Formulare zu erstellen, um Daten vom Benutzer zu akzeptieren;

Eingabe abonnieren
Vielen Dank! Ihr Beitrag ist eingegangen!
Huch! Beim Absenden des Formulars ist etwas schief gelaufen.
Raster

Grids erstellt komplexe responsive Webdesign-Grid-Layouts einfacher und konsistent in allen Browsern.

2 Spalte

2Kol

4 Spalte

4 Spalte

4 Spalte

4 Spalte

6 Spalte

6 Spalte

6 Spalte

6 Spalte

6 Spalte

6 Spalte

Animationen

Diese können dazu beitragen, die Website ein wenig mit Leben zu füllen

Einblendung auf Scroll
Einblenden & Weiterblättern
Einblenden & Skalieren beim Scrollen
Einblenden & Unschärfe beim Blättern