Deine ersten Schritte mit dem Lexware Baukasten 2.0

Der Webflow-Baukasten dient dem 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" (Symbole) im Baukasten und können dann redaktionell und bei Bedarf vom Design angepasst werden.

1. Eine neues Webflow Projekt erstellen

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 Lexware Clean Template. Mit "Create Website" erstellst du deine Seite.

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

2. Grundlegenden Seitenaufbau festlegen

Hast du erfolgreich eine Seite mit dem Lexware Template erstellt und befindest dich auf der Startseite im Designer, kann es losgehen.

Über das Plus-Icon auf der linken Seite, kannst du neue Elemente auf der Seite einfügen. In der Regel startest du mit einer Navigation, einer Standard-Section und dem Footer. Alle drei Elemente findest du unter den Symbols: c-navigation, c-section_vorlage, c-footer.

Achtung

Verwendung von Symbolen

Symbole, die nicht auf jeder Seite gleich sein sollen, müssen vor dem Bearbeiten in ein normales Element umgewandelt werden! Mehr dazu unter 3. Elemente des Baukastens einfügen

3. Elemente des Baukastens einfügen

Dieser Baukasten verschafft dir einen Überblick über alle vorangelegten Elemente und Klassen (siehe Navigation oben) und enthält zudem einige Beispiel-Seiten, die als Orientierung zum Aufbau einer neuen Landingpage oder Microsite dienen können.

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 der Navigation oder dem Footer sinnvoll. Ein Symbol erkennt man an einem grünen Rahmen und dem grünen Paket-Icon in der Liste. Alle angelegten Symbole findet man links in der Leiste unter dem Reiter mit dem Paket-Icon.

Achtung

Richtige Verwendung von Symbolen: Die Vor- und Nachteile

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ügte Symbol auswählen und dann den Button "Unlink from symbol" anklicken. Das Symbol verliert anschließend seinen grünen Rahmen und kann jetzt redaktionell bearbeitet werden.

Aber: In einigen Fällen ist es von Vorteil, ein Symbol als solches zu belassen. Navigationen, Footer oder andere Elemente (z. B. bestimmte Teaser), die sich auf mehreren Seiten wiederholen, können als Symbol eingefügt werden und so immer seitenübergreifend angepasst werden, falls nötig. So muss beispielsweise die Navigation nicht auf jeder Seite einzeln bearbeitet werden.

Mehr Infos zu Symbolen bei Webflow

4. Elemente anpassen

Dieser Baukasten verschafft dir einen Überblick über alle vorangelegten Elemente und Klassen (siehe Navigation oben) und enthält zudem einige Beispiel-Seiten, die als Orientierung zum Aufbau einer neuen Landingpage oder Microsite dienen können.

Sollten Elemente doch noch angepasst oder neue erstellt werden müssen, beachte bitte die Coding-Guidelines.

Zu den Coding-Guidelines

5. Tracking einbauen

Im neuen Lexware Baukasten 2.0 ist automatisiertes Tracking via Google Tag Manager eingebaut. Es müssen also keine einzelnen Elemente mehr (z.B. durch Klicktracking) vertrackt werden. Es gibt nur ein paar Kleinigkeiten, die dabei zu beachten sind.

Allgemeiner Aufbau der Seiten

Damit das Tracking richtig funktioniert ist es wichtig, dass die HTML-Struktur der Seiten ordentlich aufgebaut ist. Dafür müssen folgende HTML-Tags in der Seite auftauchen:

Die Symbole des Baukastens erfüllen die Grundvoraussetzungen für diesen Aufbau bereits: c-header (roter Lexware-Balken) ist ein <header>-Tag , die Navigationen (im </header>c-header und c-navbar-secondary) sind <nav>-Tags und </nav>c-footer ist ein <footer>-Tag. Deshalb solltest du beim Aufbau neuer Lexware Seiten ausschließlich mit diesen Symbolen arbeiten, um den Rahmen deiner Seite (also Header und Footer) aufzubauen. Beim weiteren Befüllen der Seite ist es dann wichtig, dass du selbstständig ein <main>-Tag einfügst (füge ein div-Element ein und ändere in den Einstellungen das Tag zu Main) und die Inhalte darin in <section>s unterteilst (füge ein Section-Element ein und ändere das Tag zu Section).</section></main></footer>

Info

Warum ist die HTML-Struktur wichtig für das Tracking?

Das automatisierte Tracking greift auf die HTML-Struktur deiner Seite zu, um die Zielnamen des Trackings richtig zu benennen. Ohne diese Struktur werden alle Links / trackbaren Elemente in Econda gleich benannt und sind nicht gut zuordenbar. Wird die richtige Nomenklatur verwendet, können z. B. Links aus der Navigation oder im Footer in Econda zugeordnet werden.

Project Settings bearbeiten

Damit das Tracking funktioniert, muss die Seite im Google Tag Manager angelegt werden (Mail an _SME-Dev@haufe-lexware.com). Anschließend kann in den Project Settings unter dem Reiter Custom Code sowohl im Head Code als auch im Footer Code die richtige Variable an der Stelle von GTM-XXXXXX eingefügt werden. Dann funktioniert das automatisierte Tracking.

Tracking prüfen

Vor dem Veröffentlichen der Seite sollte immer das Tracking mit dem Inspektor geprüft werden!

6. Projekt veröffentlichen

Ist deine Seite fertig gebaut, das Tracking eingebunden und geprüft, kann die Seite veröffentlicht werden! Dabei gibt es zwei Möglichkeiten: 

  1. Entweder du exportierst den Website-Code (über das <>-Symbol in der Webflow-Navigation oben rechts) und lädst ihn via FTP auf einem Server hoch.
  2. Oder du aktivierst das Webflow-Hosting in den Project Settings - so kann das Projekt direkt über den Publish-Button veröffentlicht werden.