Der kostenlose, klonbare Style Guide von Webflow University listet die Basis-Tags auf, die du stylen kannst. Klone ihn, füge ihn in ein neues Projekt ein und starte mit einem Designsystem.
Webflow ist so einfach und flexibel, wie ein Tool nur sein kann. Wenn du aber ein Projekt startest, kannst du ewig damit verbringen, Grundelemente zu stylen, und beim nächsten Projekt machst du dasselbe noch einmal. Manche richten gleich zu Beginn einen Style Guide für ihr Projekt ein. Wenn du dann einen Absatz oder ein anderes Element einfügst, ist der Basisstil dafür schon da. So sollte es sein: Ein solides Designsystem macht vieles einfach und schnell, und die Regeln für dein Projekt stehen fest. Das Problem ist, dass niemand bei jedem neuen Projekt jedes Basis-Tag-Element wie <p>, <h1>, <h2> und so weiter neu anlegen will. Ja, auf lange Sicht spart es Zeit, aber warum den Aufwand betreiben, wenn die Webflow-Profis ihn dir längst abgenommen haben? Und ja, genau deshalb lieben wir das Webflow-Team.
Folge einfach dem Link zum praktischen, klonbaren Projekt, das Webflow University erstellt hat. Klone das Projekt, öffne es, kopiere alles und füge es auf der Style-Guide-Seite deines neuen, leeren Projekts ein. Dann stylst du die Elemente, und fertig. Webflow hat die ganze Arbeit erledigt, und das Projekt enthält jedes Basis-Tag-Element von Webflow. Du musst sie nur noch stylen, und schon hast du ein Designsystem für dein Webflow-Projekt, das jedes Webflow-Studio und jede Designerin braucht.
Was ist die Webflow-Style-Guide-Vorlage?
Es ist ein kostenloses, klonbares Webflow-Projekt (der „Acme“-Style-Guide), das alle HTML-Tags, die du in Webflow stylen kannst, auf einer Seite auflistet: Überschriften, Absätze, Links, Listen, Bilder, Zitate, Labels, Code und so weiter. Stell es dir als leeres Designsystem vor. Du startest nicht auf einer weißen Seite, sondern auf einer Seite, die bereits alles aufführt, was du stylen musst.
So nutzt du sie in einem neuen Projekt
- Öffne den Link oben und klone das Projekt in deinen eigenen Workspace.
- Öffne den Klon im Designer und geh zu seiner Style-Guide-Seite.
- Wähle den Style-Guide-Bereich auf dieser Seite aus (alles darin) und kopiere ihn.
- Öffne dein neues Projekt und füge ihn auf einer leeren Style-Guide-Seite ein.
- Style jedes Element einmal (Überschriften, Absatz, Links und so weiter), und alles, was du danach baust, erbt diese Regeln.
- Style das Body-Tag (All pages) selbst: Der Body einer Seite lässt sich nicht kopieren, deshalb ist er nicht in der Vorlage enthalten. Wähle das Body-Element auf deiner neuen Style-Guide-Seite aus und lege dort Standardschrift, Schriftgröße, Zeilenhöhe und Hintergrund fest (Webflows Anleitung zu HTML-Tags).
Eines solltest du wissen: Laut Webflow werden Stile, die auf Basis-HTML-Tags angewendet wurden, beim Einfügen zwischen Projekten nicht übernommen. Die eingefügte Seite bringt die Struktur und die Klassen mit, das Styling machst du also in deinem neuen Projekt, und genau darum geht es ja ohnehin (Webflows Hinweis zum Kopieren und Einfügen zwischen Projekten).
Warum jedes Projekt mit einem Style Guide starten?
Weil du jedes Basis-Element einmal stylst, statt es immer wieder zu tun. Änderst du einen Überschriften- oder Absatzstil an einer Stelle, wirkt er sich auf die ganze Website aus. Das hält das Projekt konsistent und spart dir bei jeder späteren Seite Zeit. Wenn du noch einen Schritt weitergehen willst: Unser Beitrag zu Finsweet Client-First behandelt ein System für Klassennamen, das sich gut mit einem Style Guide ergänzt, und unsere Übersicht der wichtigsten Chrome-Erweiterungen für Webflow enthält noch ein paar weitere Tools, die den Designer beschleunigen. Mehr von unseren Tools und Tipps findest du im Beitrag kostenlose und kostenpflichtige Tools für kleine Agenturen und Freelancer, und falls dir beim Stylen die Spezifität in die Quere kommt, lies CSS-Spezifität in Webflow meistern.
Noch mehr ausführliche Webflow-Anleitungen findest du hier.
FAQ
Gibt es eine kostenlose Webflow-Style-Guide-Vorlage?
Ja. Webflow University veröffentlicht ein kostenloses, klonbares Style-Guide-Projekt, das die Basis-HTML-Tags enthält, die du in Webflow stylen kannst. Klone es, kopiere den Style-Guide-Bereich und füge ihn in dein eigenes Projekt ein.
Werden Basis-Tag-Stile beim Einfügen zwischen Projekten übernommen?
Nein. Webflow weist darauf hin, dass Stile auf Basis-HTML-Tags beim Einfügen von einem Projekt in ein anderes nicht importiert werden. Plane also ein, die Basis-Elemente in deinem neuen Projekt zu stylen, einschließlich des Body-Tags (All pages), das sich gar nicht kopieren lässt.
Brauche ich in jedem Webflow-Projekt eine Style-Guide-Seite?
Du brauchst keine, aber sie lohnt sich. Wenn du die Basis-Elemente gleich zu Beginn an einer Stelle stylst, erbt jede Seite, die du danach baust, dieselben Regeln.
