Mit Webflow kannst du nicht nur eine statische Webseite, sondern einfach eine dynamische Webseite dank eingebauten Content-Managment System erstellen. Wie du das genau verwendest, was damit alles möglich ist und was das überhaupt ist, sowie für was dieses vorteilhaft ist, zeige ich dir in diesem Tutorial.
Als Erstes schauen wir uns an, was ein CMS überhaupt ist und welche Vorteile man damit hat, sowie für was dies praktisch ist. Anschließend zeige ich dir dann im Detail wie man eine Collection erstellen kann und anschließend Inhalte für diese erstellen bzw. hinzufügen kann. Zum Schluss gehen wir dann noch darauf ein, wie wir die Inhalte auch designen können, sodass es perfekt für unsere Webseite passt und teilweise auch auf statischen Seiten in Listen angezeigt werden. Für dieses Tutorial ist es ratsam zu wissen, wie der Webflow Editor funktioniert, darauf gehen wir hier nämlich nicht ein. Hier findest du ein ausführliches Tutorial zu diesem.
Was ist ein CMS?
CMS bedeutet Conent-Managment-System. Damit können wir also eine Datenbank erstellen, welche wir dann auf unserer Webseite darstellen können. Das besondere hierbei ist, zu einer normalen Seite, welche wir im Editor erstellen können, dass wir die Inhalte der Seiten vom Design trennen können und so einfach ein Design auf viele Seiten anwenden. Sowas ist super praktisch für Blogs, Nachrichtenseiten oder Portfolios, wo du oft wiederholende Seiten hast, die grundsätzlich gleich aussehen, nur unterschiedlichen Inhalt haben. Damit meine ich bspw. bei einem Blog, sind die Postseiten ja grundsätzlich gleich vom Design und unterscheiden sich nur vom Text, Bildern und Co. Sowas wäre auch praktisch für Shops, wo sich Produktseiten auch immer wiederholen, aber dafür gibt es ein eigenes System bei Webflow, welches wir uns im nächsten Video dieser Tutorial Serie noch anschauen werden. Im Webflow Editor finden wir am linken Rand unter CMS, alle zu diesem. Hier müssen wir in der ersten Instanz eine Collection erstellen, was die Art des wiederholenden Designs ist. Also bspw. das Blogpost oder Nachrichtenseite. Im nächsten Schritt können wir dann diese Collections mit Inhalt füllen, auf welche dann immer das Design angewendet wird. Wie das alles genau funktioniert, schauen wir uns jetzt an.
Kollektion erstellen
Als Erstes müssen wir eine Collection erstellen, was ganz einfach im Webflow Editor geht, wenn wir im CMS Fenster oben rechtes auf das Plus klicken. In dem Fenster sehen wir auch in einer Liste alle bisherigen erstellten Collections, denn wir können pro Seite natürlich auch mehrere haben, welche unterschiedliche Einstellungen und Design beinhalten. Erstellen wir jetzt eine neue können wir in der Mitte alles zu dieser einstellen und am rechten Rand bekommen wir eine Vorschau, welche Felder man bei dieser Kollektion dann individuell ausfüllen kann. Ganz oben haben wir die Möglichkeit schon vorgefertigte Kollektion für bspw. Blogbeiträge, Events, Speisekarte oder Autoren zu verwenden. Klicken wir auf eins, sehen wir die Veränderungen direkt unter den Collection Fields. Sowas ist super praktisch für den Anfang und ich wähle hier jetzt bspw. die Blogbeiträge als Vorlage aus, welche wir jetzt noch individuell bearbeiten können. Bevor wir das Machen geben wir aber erstmal einen Namen für unsere Kollektion ein, was für das Wiederfinden im CMS Fenster aber auch beim Einbinden in statische Seiten, wichtig ist. Darunter können wir auch einen URL-Link eingeben, welcher immer vor Seiten, welche in der Collection sind, stehen. Unter Kollektion Felder, kommen wir jetzt zum spannenden Teil der Erstellung, hier können wir sehr individuell festlegen, was für Daten wir mit dieser Kollektion erfassen können und schließlich dann universell dafür designen können. Bei unserer Blogpost Vorlage haben wir hier bspw. den Titel des Beitrags, also Überschrift sowie einen Slug, wo wir eine individuelle URL eingeben können, immer jeweils für den Beitrag. Unter Custom Fields, finden wir dann einen Post Body, wo wir den Text des Beitrags dann eingeben können aber auch eine kurze Zusammenfassung, was für Beitragsvorschaus auf anderen Seiten praktisch ist und auch Bilder welche als Vorschau oder im Beitrag angezeigt werden können. Auch eine Featured Funktion ist hier als Vorlage dabei, womit wir quasi besondere Post markieren können um diese dann anschließend irgendwo auf unserer Seite anzeigen lassen zu können. Das ist jetzt alles nur eine Vorlage, wir können natürlich auch noch weitere individuelle Felder hinzufügen. Dafür klicken wir einfach auf das Plus neben der Überschrift. Hier können wir jetzt Texte, Medien, Links, E-Mail-Felder, Datum, Zahlen, Optionen, Anhänge und vieles mehr hinzufügen. Fahren wir mit der Maus über ein Feld, bekommen wir auf der rechten Seite auch weitere Details, was mit diesem Feld möglich ist und für was dieses gut ist. Haben wir ein Feld ausgewählt, können wir es dann auch benennen, was relevant ist, sobald wir erste Inhalte für die Kollektion erstellen wollen. Hier können wir auch einen Hilfetext hinzufügen, was praktisch ist, wenn andere Personen auch Inhalte für die Kollektion erstellen sollen und eine weitere Erklärung für das spezifische Feld benötigen. Je nach Feld können wir hier dann bspw. auch eine Zeichenbeschränkung oder Co einstellen, sowie ob dieses Feld ausgefüllt werden muss, wenn wir einen neuen Inhalt erstellen. Wir können alle Felder natürlich auch nachträglich nochmal bearbeiten, wo wir es am oberen rechten Rand auch wieder löschen können oder die Veränderungen speichern. Hier rate ich dir zu Beginn Zeit zu nehmen, um die passenden Felder für deine Bedürfnisse zu erstellen. Natürlich kannst du auch nach dem du Inhalte erstellst hast, die Kollektion nochmal bearbeiten, aber dann fehlen natürlich die Werte bei neuen Feldern bei den bisherigen Inhalten und müssen manuell ergänzt werden oder wenn du ein Feld löscht, gehen die Informationen von den Inhalten, welche du bereits erstellt hast, für dieses Feld verloren. Auf der rechten Seite sehen wir schlussendlich beim Erstellen auch eine Vorschau wie der Editor für das Erstellen von Inhalten dieser Kollektion aussehen wird. Ganz unten können wir die aktuelle Kollektion auch wieder löschen. Sind wir zufrieden mit unserer Kollektion können wir sie oben rechts dann erstellen und sehen sie dann im linken Menü. Hier können wir über die Punkte vor dem Kollektionennamen, auch die Anordnung der Kollektionen verändern und klicken wir auf das Zahnrad rechts, auch alle gerade getätigten Einstellungen erneut bearbeiten. Klicken wir normal auf den Namen, können wir jetzt den Inhalt verwalten und neben dem Namen sehen wir auch, wie viele Inhalte wir für diese Kollektion bereits erstellt haben.
Für was Kollektionen alles praktisch sein können, habe ich dir auch in meinem neuen Instagram-Post auf @simontutorial vorgestellt. Folge mir da gerne, um keine weiteren Bonusinhalte zu allen meinen Tutorials zu verpassen.
Inhalte hinzufügen (Editor)
Schauen wir uns jetzt mal an, wie wir unsere erstellte Kollektion mit Inhalt füllen können. Hier gibt es grundsätzlich zwei Möglichkeiten, wie wir das machen können. Wenn andere Personen, Inhalte zu unseren Kollektionen hinzufügen sollen, können wir ab einem bestimmten Premium-Plan auch weitere Benutzer zu einem speziellen Webflow Editor einladen. Hier können sich diese dann einen Account erstellen und auf die verschiedenen Kollektionen zugreifen und ausschließlich Inhalte erstellen oder verwalten. Damit können sie nicht das Design an sich oder die Webseite grundlegend bearbeiten, wie wir in unserem aktuellen Editor. Sowas ist super praktisch, wenn du bspw. eine Redaktion hast, die deine Seite mit Inhalten füllen soll. Als zweite Möglichkeit können wir jetzt aber natürlich auch in unserem bisher besprochenen Editor Inhalte für unsere Kollektion erstellen. Dafür klicken wir auf das CMS Zeichen am linken Rand und wählen eine Kollektion aus. Hier sehen wir dann alle Inhalte in einer Liste und können einzelne auch nachträglich bearbeiten. Haben wir eine neue Kollektion erstellt, sehen wir hier natürlich keine und können am oberen rechten Rand einen neuen Inhalt erstellen, aber auch die Kollektion bearbeiten oder mehrere Inhalte in oder exportieren. Wir können auch, wenn wir noch keine Inhalte haben, in der Mitte Beispielinhalte erstellen, was praktisch ist, wenn wir die Darstellung der Inhalte zuerst designen wollen, bevor wir unsere Inhalte erstellen. So haben wir schon eine Vorschau wie es aussehen würde und können diese Beispiele am Ende wieder löschen. Wie wir die Inhalte designen, schauen wir uns im nächsten Kapitel an. Jetzt erstellen wir erst einen neuen Inhalt, in dem wir oben rechts auf das Plus klicken. Hier können wir jetzt alle Felder ausfüllen, für diesen einen Inhalt, welche wir bei der Kollektionerstellung hinzugefügt haben. Am roten Stern sehen wir, welche Felder ausgefüllt werden müssen. Je nach Feld können wir jetzt Bilder, Text oder Optionen einstellen. Bei einem Textbody können wir bspw. über das Plus auch innerhalb des Textes, weitere Elemente wie Bilder, Videos, Listen oder Co einbetten, um einen individuellen Inhalt erstellen zu können. Sowas ist für Blogposts super praktisch. Wir können auch einen geschriebenen Text markieren, um ihn nachträglich fett, als Überschrift oder anderweitig zu stylen, um Variation in unseren Postinhalt zu bekommen. Haben wir alles erfolgreich hinzugefügt, können wir über Create, direkt den Inhalt in der Kollektion erstellen, welche dann auch direkt auf unserer Webseite verfügbar ist, sofern diese öffentlich ist. Wenn wir das nicht wollen, können wir diesen Inhalt auch über den Pfeil daneben, als Entwurf speichern, sodass wir ihn in unserer Kollektionsliste sehen aber nicht auf der Seite oder wir können auch einen bestimmten Zeitpunkt planen, wann dieser Inhalt veröffentlicht werden soll. In der Kollektion sehen wir jetzt alle unsere Inhalte in einer Liste, wo wir auch das Erstellungs und letzte Bearbeitungsdatum sehen, sowie ob es veröffentlicht ist oder nicht. Über die Pinnnadel daneben können wir auch weitere bestimmte Felder in der Übersicht anzeigen lassen. Klicken wir auf den Namen, können wir den Inhalt erneut aufrufen und nachträglich alles nochmal bearbeiten. Am oberen rechten Rand können wir über die Suche, auch nach einem bestimmten Inhalt suchen und daneben auch mehrere Inhalte auswählen um diese zusammen löschen zu können oder bspw. die Veröffentlichung rückgängig zu machen und als Entwurf zu speichern. Hier können wir auch Inhalte archivieren, welche dann in unserer Übersicht nicht mehr angezeigt werden.
Inhalt dynamisch designen
Wir haben jetzt unsere Inhalte erstellt, aber ein wichtiger Teil fehlt noch, nämlich, wie diese auf unserer Webseite dargestellt werden. Kurz gesagt: das allgemeine Design der Inhalte für eine Kollektion. Um dieses dynamisch für eine Kollektion und dementsprechend für jeden Inhalt dieser Kollektion Einstellungen zu können, klicken wir im Webflow Editor am linken Rand auf Seiten. Hier haben wir jetzt ganz unten CMS Kollektionsseiten, wo wir für jede unserer Kollektion eine eigene Seite haben. Hier wählen wir jetzt einfach die Kollektion aus, wo wir die Inhaltsseiten bearbeiten wollen. Am Lila-Symbol vor dem Namen erkennen wir zudem, das es eine dynamische Seite ist, auf welche mehrere Inhalte angewendet werden können und keine statische Seite, wie bei den weißen Symbolen. Solche dynamischen Seiten haben wir auch beim Online-Shop, auf welchen wir im nächsten Video noch darauf eingehen werden. Haben wir jetzt auf eine unserer Kollektionseiten geklickt, ist diese meisten weiß, wenn wir noch kein Design erstellt haben. Hier können wir jetzt, sowie eine normale Seite im Editor, die Seite erstellen, in dem wir Elemente aus dem linken Menü hinzufügen und auch Sektionen und Container erstellen. Hier ist es sinnvoll, die Seite, wie eine Beispielseite für einen Blogbeitrag oder für was auch immer die Kollektion ist, zu erstellen. Wie das genau funktioniert, habe ich dir im vorherigen Video dieser Tutorial-Serie erklärt, Link zur kompletten Videoreihe, findest du auch hier. Erstellen wir so eine Seite, ist diese noch nicht dynamisch, wir müssen jetzt bei den gewünschten Elementen immer die Felder, der Kollektion, welche wir beim Erstellen der Kollektion kreiert haben verknüpfen, damit dann dort auch der Inhalte aus dem Feld des jeweiligen Inhaltes angezeigt wird. Haben wir bspw. eine Überschrift erstellt, können wir jetzt in den Kurzeinstellungen über das Zahnrad neben dem Namen, dieses Textfeld mit einem Feld aus unserer Kollektion verknüpfen. Hier können wir dann im Dropdown-Menü, dass spezielle Feld auswählen. Jetzt sehen wir, dass sich der Text im Feld verändert hat, nämlich nach einem unserer Inhalte aus der Kollektion. Das können wir jetzt nicht nur für Texte, sondern auch für Bilder, Schaltflächen und alle anderen Felder einstellen, welche wir mit dynamischen Inhalten aus unserer Kollektion füllen wollen. Bedenke hier immer, ins besonders bei Überschriften, Bilder oder Texten, dass die Länge bspw. vom Text immer unterschiedlich ist und das Design für alle Längen und Formate angepasst sein sollte. Wir können am oberen Rand auch unsere verschiedenen Inhalte auswählen, um verschiedene als Vorschau im Editor zu verwenden, um bspw. unser Design zu testen. Haben wir kein Element ausgewählt, können wir in den Einstellungen am rechten Rand auch dynamische Inhalte für die komplette Seite anwenden, wie bspw. bestimmte Farben, welche wir bei unseren Inhalten gespeichert haben, oder ein Hintergrundbild, falls wir sowas möchten. Du merkst uns sind hier fast keine Grenzen gesetzt, was den Erstellungsaufwand zwar am Anfang groß macht aber wir können die dynamische Seite auch jederzeit hier wieder verändern und diese wird dann direkt nach der Veröffentlichung auf allen unsere Inhalte der Kollektionen angewendet.
Dynamische Inhalte auf statischen Seiten
Jetzt haben wir unsere Inhalte erstellt und designt und sie können über Suchmaschinen oder den direkten Link auf unserer Webseite aufgerufen werden. Jetzt möchten wir aber vielleicht unsere Artikel bspw. von unserem Blog aber auch auf einer statischen Seite teilweise als Vorschau anzeigen lassen oder bspw. unsere Autoren, welche wir als Kollektion erstellt haben, auf einer Seite sehen, welche immer sich dynamisch an unseren Kollektionsinhalt anpasst, falls wir dort bspw. mal eine Person entfernen oder neu hinzufügen. Dafür finden wir im Editor unter Plus einen eigenen Bereich, für Kollektionslisten. Damit können wir ein Feld erstellen, in welchem die Inhalte einer Kollektion dynamisch auf einer statischen Seite eingebettet werden. Hier müssen wir über die Einstellungen als Erstes die Kollektion auswählen, aus welcher sich diese Liste den Inhalt bezieht. Unter Layout können wir auch die Spalten anzeigen, wie viele Items aus der Kollektion bspw. angezeigt werden sollen. In den erweiterten Einstellungen können wir jetzt auch noch Filter anwenden, was für Inhalte aus der ausgewählten Kollektion angezeigt werden sollen. Also bspw. nur Inhalte die ein bestimmtes Wort in einem Textfeld hat. Auch nach was die Inhalte sortiert werden sollen, können wir festlegen, also bspw. nach Veröffentlichungsdatum oder Alphabetisch. Wir können dann noch festlegen, ob nur eine bestimmte Anzahl als Inhalte dargestellt werden soll. Wir können hier auch Pfeile hinzufügen, was das Scrollen in dem Kollektionbereich auf unserer statischen Seite ermöglicht, was man bspw. aus Blogbeiträge kennt. Schließlich können wir auch Design Elemente wie Farben, Bilder und Ränder natürlich auch dynamisch für die einzelnen Inhalte hier festlegen. Wie dir jetzt vielleicht aufgefallen ist, sehen wir unsere Inhalte gar nicht in der Vorschau. Das liegt daran, dass wir die Darstellung der Inhalte hier natürlich auch individuell anpassen können. Dafür ziehen wir jetzt bzw., aus dem Erstellungsbereich ein Textfeld, in das erste Feld der Liste und sehen, dass sich dieses automatisch auch in den anderen Feldern hinzufügt. Hier können wir jetzt in den Einstellungen, neben den ganzen Designoptionen, auch ein spezifisches Feld aus unserer Kollektion zu diesem Element zuordnen, sodass der Inhalte von diesem dort angezeigt wird. Wir sehen das dann direkt im Editor, individuell zu jedem Post. So haben wir hier auch die komplette Freiheit zu designen, wie unsere Inhalte auf der Seite dargestellt werden sollen.
Experimentiere hier einfach rum, und du wirst schnell merken, wie einfach es ist, genau das Design für dich zu erstellen. Wenn du noch mehr Tiefgang in die CMS-Funktionen erhalten willst, lege ich dir nur die offiziellen Videos der Webflow University ans Herz, falls du Englisch verstehst, Link dazu hier.
Jetzt weißt du wie du mit Webflow eine Webseite mit dynamischem Inhalt erstellen kannst. Im nächsten Artikel zeige ich dir, wie du auch einen Online-Shop mit Webflow erstellen kannst. Alle Teile der Webflow Tutorial Serie findest du hier auch nochmal. Um keine neuen Tutorials mehr zu verpassen, kannst du meinen YouTube-Kanal gerne kostenlos abonnieren. Über das Teilen des Artikels freue ich mich immer sehr. Falls du noch Fragen oder Feedback haben solltest, kannst du dieses gerne in den Kommentaren hinterlassen, bis zum nächsten Mal.
