WICHTIG: Lies dir bitte zuerst die folgenden Schritte durch, bevor du mit dem Baukasten anfängst zu arbeiten.

Der Webflow-Baukasten dient zum schnelleren bauen einer Webflow-Seite. Wesentliche Element wie Navigation, Footer und Produktdarstellungen sollen über alle Content-Systeme hinweg dem Corporate Design entsprechen. Diese Elemente existieren als "Vorlagen" im Baukasten und können dann noch redaktionell und vom Design angepasst werden.

Es gibt für den Baukasten zwei Template-Projekte:

1. „Lexware Baukasten” unter http://lexware-baukasten.webflow.io: 
Dieser enthält Beispielseiten über alle Vorlagen im Baukasten und Dokumentation über den Umgang mit dem Baukasten. Für dich gilt dieses Projekt als Nachschlagwerk und Showcase.

2. „Lexware Vorlage” unter http://lexware-vorlage.webflow.io:
Dieses Projekt ist schon vorbereitet für den Einsatz beim bauen von Webflow-Webseiten. Wir haben hier alle Demo- und Erklärseiten für dich entfernt, damit du sofort mit deinem Projekt durchstarten kannst. Dieses Template enthält nur die Sample Seiten, die Vorlagen unter "Symbole" und die ganzen vordefinierten Styles.

Welche Elemente es gibt und den Aufbau der Elemente, zeigt die die Navigation links unten. Beachte hier auch die Rubrik Content. Diese zeigt verschiedene Typographien und Darstellungsweisen von Text.

In den folgenden Schritten zeigen wir dir kurz, wie du mit dem Webflow Template „Lexware Baukasten” richtig umgehst.

1. Eine neues Webflow Projekt erstellen

1.1 Nachdem du dich in Webflow eingeloggt hast, klicke auf "+ New Website" in der rechten oberen Ecke. Hier vergibst du einen Namen für deine Webseite. Anschließend kannst du ein Template auswählen. Hier wählst du das Template "Blank Lexware Template". Mit "Create Website" erstellst du deine Seite.

1.2 Glückwunsch! Du bist jetzt bereit, deine Seite mit dem Lexware Webflow Baukasten zu bauen.

2. Lexware-Style oder neutralen Grundstyle auswählen

Vergebe nun für den "body" entweder die Klasse "body--lexware" oder "body--neutral"

3. Elemente des Baukastens einfügen

3.1 Die Elemente des Bauskastens sind als >>Symbole<< angelegt. Ein Symbol ist ein seitenübergreifendes Element. D.h. ändert man das Symbol auf einer Seite, ändert es sich auf allen Seiten entsprechend. Dies ist z.B. bei Navigationen sinnvoll. Ein Symbol erkennt man an einem grünen Rahmen und dem grünen Paket-Icon in der Liste. Alle angelegten Symbole findet man rechts in der Leiste unter dem Reiter mit dem Paket-Icon.


3.2 Wie oben beschrieben, ist der Nachteil eines Symbols, dass sie sich auf allen Seiten mit verändern. Um dies zu verhindern, muss man das Symbol in ein normales Element umwandeln. Dazu zieht man ein Symbol aus der Symbol-Liste in die Seite. Das Symbol hat nun den grünen Rahmen. Um es bearbeiten zu können und umzuwandeln, muss man das eingefügt Symbol auswählen und dann den Button "Unlink from symbol" anklicken (siehe Bild unten). Das Symbol verliert anschließend seinen grünen Rahmen und kann jetzt redaktionell bearbeitet werden.

4. Elemente anpassen

Um die Elemente auf deine Wünsche anzupassen, musst du bestimmte Coding-Regeln beachten.

Zu den Coding-Guidelines