Webflow Blog erstellen: CMS, Übersichtsseite und Blogartikel-Seite Schritt für Schritt

Kurz vorweg

Es ist Sonntagabend, kurz nach 21 Uhr, ich sitz hier mit einer Tasse Tee und tippe diesen Artikel passend zu meinem neuen Webflow-Tutorial. Tagsüber lag draußen schon dieses leise Herbst-Gefühl in der Luft, kühlere Luft, früherer Schatten, obwohl der Kalender noch August sagt. Genau der richtige Moment für ein Thema, das schon länger auf meiner Liste stand.

Vielleicht hast du deine Webflow-Webseite schon stehen, aber sobald du an den Blog denkst, kommt dieses eine Gefühl: Ich weiß, dass es geht, ich hab nur keinen Plan, wo ich anfangen soll. Genau da setzt dieser Artikel an.

Ich zeig dir heute Schritt für Schritt, wie du in Webflow eine Blogübersichtsseite baust, wie das Content Management System, kurz CMS, dahinter funktioniert und wie du danach die einzelne Blogartikel-Seite so einrichtest, dass jeder neue Beitrag automatisch sein eigenes Design bekommt, ohne dass du für jeden Artikel von vorne anfängst. Also schnapp dir eine Tasse Tee, eine Brause oder was auch immer gerade neben dir steht, und lass uns loslegen.

Ich bin Kim, Webdesignerin aus Berlin und seit diesem Sommer offiziell zertifizierte Webflow-Partnerin. Und ehrlich gesagt: CMS und Collections gehören zu den Themen, bei denen ich am Anfang selbst am längsten gebraucht habe, bis der Groschen gefallen ist. Deswegen bekommst du hier keine Kurzfassung, sondern den kompletten Weg von der leeren Seite bis zum fertigen, verlinkten Blogartikel.

Was das Webflow CMS eigentlich ist und warum du es für deinen Blog brauchst

CMS steht für Content Management System, auf gut Deutsch verwaltest du damit deine Inhalte in einem System. Du kannst dir das Ganze ziemlich trocken wie eine Datenbank vorstellen. In dieser Datenbank liegen später alle deine Blogbeiträge, und jeder Beitrag hat dieselben Bausteine: einen Titel, ein Beitragsbild, ein Datum, vielleicht eine Autorin und natürlich einen kurzen Vorschautext sowie den eigentlichen Inhalt.

Aus genau diesen Daten baut Webflow dann automatisch zwei Dinge: deine Blogübersichtsseite, auf der alle Artikel als kleine Vorschau-Kacheln aufgelistet werden, und deine einzelnen Blogartikelseiten. Wichtig für dich zum Checken: Die CMS Collection, die wir gleich anlegen, sind deine Inhalte. Die Collection Page ist das wiederverwendbare Layout, das sich jeder einzelne Beitrag automatisch zieht. Du designst das Layout also nur ein einziges Mal, und jeder neue Artikel, den du später im CMS anlegst, übernimmt dieses Design ganz von allein.

Sobald das einmal sitzt, ist der Rest eigentlich reine Fleißarbeit.

Wenn du noch tiefer verstehen willst, was eine Webseite technisch überhaupt ausmacht und woraus sie eigentlich besteht, hab ich das in Was ist eine Website wirklich? nochmal komplett aufgedröselt.

Warum das Webflow CMS so stark ist und wo es noch hakt

Bevor wir loslegen, kurz ein paar Worte dazu, warum ich das Webflow CMS im Vergleich zu anderen Systemen wirklich mag, und wo es auch an seine Grenzen kommt. Ehrlichkeit gehört für mich einfach dazu.

Stark ist das CMS vor allem, weil Design und Inhalt sauber getrennt bleiben. Du baust dein Layout einmal, so wie in Schritt 1, und jede Person, die danach nur noch Texte einträgt, kann das Design gar nicht kaputt machen, selbst wenn sie von HTML oder CSS keine Ahnung hat. Bei klassischem WordPress mit Page Buildern erlebe ich das anders: Dort reicht oft ein falsch gesetzter Block, und das ganze Layout verrutscht. Wenn dich der Vergleich genauer interessiert, hab ich dazu einen eigenen Artikel geschrieben: Webflow vs. WordPress: Was ist 2025 besser für Selbstständige?

Auch stark: Jedes einzelne CMS-Item bekommt automatisch seine eigenen SEO- und Open-Graph-Felder, ganz ohne Plugin. Bei WordPress brauchst du dafür in der Regel Yoast oder RankMath. Hier ist es einfach eingebaut.

Wo es hakt: Eine Collection ist bei maximal 60 Feldern gedeckelt. Für einen Blog reicht das locker, aber bei sehr komplexen Datenmodellen mit vielen Querverweisen wird es irgendwann eng. Und je nach Site-Plan ist auch die Anzahl der CMS-Items selbst begrenzt, das lohnt sich vorher zu checken, bevor du mit hunderten Altartikeln importierst. Und falls du von einer anderen Plattform mit sehr vielen Beiträgen umziehst: Ein sauberer Import braucht echte Vorbereitung, das geht selten in fünf Minuten nebenbei.

Das brauchst du, bevor du startest

Für dieses Tutorial brauchst du:

• Ein bestehendes Webflow-Projekt, in dem du bereits eine Section für deinen Blog geplant hast oder einbauen willst
• Zugriff auf den Designer mit den passenden Rechten, um CMS Collections anzulegen
• Etwas Geduld beim ersten Durchgang, weil du zwischen Design und CMS-Einstellungen ein paar Mal hin und her wechselst

Ein bezahlter Hosting-Plan ist für das Anlegen der Collection selbst nicht nötig, den brauchst du erst, wenn du die fertigen Blogartikel wirklich live veröffentlichen willst. Falls du noch gar kein Webflow-Projekt hast, zeig ich dir in Webflow für Einsteiger: So startest du kostenlos, wie du kostenlos startest, bevor es hier weitergeht.

Schritt 1: Die Vorschau-Kachel für deinen Blog bauen

Bevor du überhaupt eine Collection anlegst, lohnt es sich, erst mal eine Art Muster-Vorschau zu bauen. Also die Kachel, die später jeden einzelnen Blogartikel auf deiner Übersichtsseite repräsentiert. Sobald diese eine Vorlage steht, lässt sie sich später auf alle Artikel übertragen, du musst also nicht jede Kachel einzeln nachbauen.

So gehst du dabei vor:

1. Leg zwischen den bestehenden Sections deiner Seite eine neue Section an und nenn sie zum Beispiel Blog. Achte hier direkt auf dein Page Padding, also den Abstand links und rechts, damit der Inhalt auf dem Handy nicht am Bildschirmrand klebt.
2. Bau einen Container ein, der die Breite deiner Inhalte bestimmt. Ich arbeite hier gerne mit 100% Breite, zentriert, und einer Max-Width von etwa 80rem, je nachdem, wie breit dein restliches Layout schon ist.
3. Innerhalb des Containers baust du ein Grid mit drei Spalten und einer Reihe. Das ist für den Anfang die einfachste Lösung, auch wenn viele Profi-Webdesignerinnen später mit Flexbox oder anderen Strukturen arbeiten.
4. In jede Spalte kommt ein Div, das du zum Beispiel Grid Item Block nennst. Gib ihm 100% Breite in der Spalte und einen kleinen Außenabstand, damit die Kacheln nicht aneinanderkleben.
5. In diesen Block baust du nun der Reihe nach: ein Vorschaubild mit leicht abgerundeten Ecken, eine Überschrift, meistens als H2, einen kurzen Vorschautext als Paragraph, einen kleinen Abstandshalter, eine dünne Trennlinie und einen Button mit Text wie "Weiterlesen" oder etwas Kreativerem, das zu deiner Marke passt.
6. Stell zwischen den Grid-Spalten einen Abstand von zum Beispiel 1,5rem ein, damit die Kacheln erkennbar getrennt bleiben.

Diese eine fertige Kachel ist dein Muster. Alles, was du in dieser Vorlage anlegst, taucht später bei jedem einzelnen Blogartikel exakt genauso wieder auf, nur eben mit den jeweils individuellen Inhalten. Genau deswegen lohnt es sich, hier ein bisschen Zeit reinzustecken, statt schnell drüberzuhuschen.

Schritt 2: Die Blog Collection im CMS anlegen

Jetzt, wo das Design steht, brauchst du die Datenbasis dahinter. Dafür klickst du oben links auf CMS. Dort ist am Anfang alles leer, das ist völlig normal. Über das Plus legst du deine erste Collection an.

Geh dabei so vor:

1. Vergib einen Namen für deine Collection, zum Beispiel Blog. Webflow fragt danach nach der Pluralform, die kannst du bei einer einzelnen Sache wie einem Blogartikel meistens einfach gleich lassen.
2. Bei den Grundeinstellungen bestimmst du den Namen des Feldes, das automatisch als H1 auf der Blogartikel-Seite genutzt wird. Trag hier ruhig eine kurze Beschreibung ein, damit du oder eine Kundin später weiß, dass genau dieses Feld die H1 für Suchmaschinen ist.
3. Der Slug wird automatisch aus dem Namen generiert, das ist später der Teil der Webadresse, unter dem der einzelne Artikel erreichbar ist.
4. Jetzt legst du die individuellen Felder an, du hast dabei Platz für bis zu 60 Stück, mehr als du realistisch je brauchen wirst. Für einen soliden Blog reichen typischerweise diese hier:
   • Image, dein Beitragsbild. Du kannst hier gleich Mindestmaße festlegen, zum Beispiel 1000 x 1000 Pixel, und das Feld als Pflichtfeld markieren, damit kein Artikel ohne Bild live geht.
   • Plaintext für den Vorschautext, zum Beispiel mit maximal 140 Zeichen. Dieser Text erscheint später auf der Übersichtsseite und gibt Besucherinnen einen schnellen Eindruck, worum es im Artikel geht.
   • Datum, damit du steuern kannst, ob das Erstellungsdatum oder das Veröffentlichungsdatum angezeigt wird.
   • Rich Text für den eigentlichen Blogeinhalt. Dieses Feld ist die universelle Fläche, auf der später Texte, Bilder, Videos oder ein Inhaltsverzeichnis reinkönnen, alles, was ein waschechter Blogartikel eben braucht.
5. Speicher jedes Feld einzeln über Save Field, bevor du das nächste anlegst.

Sobald diese Grundfelder stehen, kannst du dir übrigens von Webflow automatisch ein paar Beispiel-Einträge generieren lassen. Trag bei "Create Sample Content" eine Zahl wie fünf ein, und Webflow füllt dir fünf komplette Blogartikel mit Titel, Bild, Vorschautext und Inhalt, damit du sofort siehst, wie sich dein Design mit echten Daten füllt, ohne dass du selbst schon Texte schreiben musst.

Schritt 3: Die Blog-Übersichtsseite mit echten Inhalten verbinden

Jetzt kommt der Moment, in dem aus der Muster-Kachel eine echte, dynamische Liste wird. Dafür brauchst du ein neues Element, die Collection List.

1. Zieh eine Collection List an die Stelle, an der später deine Blogübersicht stehen soll.
2. Bestimm im Einstellungen-Panel als Erstes die Quelle, also welche Collection angezeigt werden soll. Wähl hier deine gerade angelegte Blog-Collection aus.

Achtung an dieser Stelle: Sobald du die Quelle einmal gespeichert hast, ist sie fest verknüpft und lässt sich nicht mehr einfach wechseln, falls du mehrere Collections zur Auswahl hättest. Sei dir also sicher, dass du die richtige Quelle ausgewählt hast, bevor du speicherst.

3. Stell die Spaltenanzahl auf drei, damit die Artikel nebeneinander statt komplett untereinander erscheinen.
4. Zieh deine vorbereitete Vorschau-Kachel aus Schritt 1 in dieses Collection-Item hinein. Damit hast du auf einen Schlag alle fünf Beispielartikel in deinem fertigen Design sichtbar.
5. Jetzt verbindest du jedes einzelne Element mit den passenden CMS-Feldern: Klick auf das Bild, wähl dein Blogbild-Feld, klick auf die Überschrift, wähl den Titel, klick auf den Vorschautext-Paragraphen, wähl dein Plaintext-Feld. Beim Button oder der gesamten Kachel verlinkst du zusätzlich auf den jeweiligen Blogartikel, damit ein Klick auch wirklich zum passenden Beitrag führt.

Wenn du magst, benenn deine Elemente von Anfang an sauber, zum Beispiel Blog List Rep, statt sie bei den Standardnamen zu belassen. Das kostet im Moment ein paar Sekunden, spart dir aber später, gerade bei Kundenprojekten, jede Menge Verwirrung, wenn du oder jemand anderes wieder reinschaut.

Sobald alles verbunden ist, kannst du über die Vorschau checken, ob ein Klick auf eine Kachel tatsächlich zum jeweiligen Artikel führt. Wenn das funktioniert, hast du die Übersichtsseite fertig, es fehlt nur noch die Seite, auf der die Artikel selbst landen.

Schritt 4: Die einzelne Blogartikel-Seite aufbauen

Für die einzelne Artikelseite hast du zwei Wege. Du kannst entweder ein komplett individuelles Layout bauen, oder du nimmst den schnelleren, ebenfalls völlig legitimen Weg und arbeitest mit dem, was du bereits im Design hast. Ich zeig dir hier den zweiten, einsteigerfreundlicheren Weg.

1. Geh im Bereich Pages zu deinem Blog-Template, das Webflow beim Anlegen der Collection automatisch mit erstellt hat, und öffne die Single-Seite.
2. Bau hier zum Beispiel einen Container Small ein, damit der Lesetext eine angenehme Zeilenlänge hat und nicht über die volle Bildschirmbreite läuft.
3. Füg das Rich-Text-Element ein und verbind es mit deinem Rich-Text-Feld aus der Collection. Genau dieses Element zeigt später den kompletten Inhalt des jeweiligen Artikels an, inklusive aller Bilder, Zwischenüberschriften und Absätze, die du im CMS eingibst.
4. Verbind zusätzlich eine Überschrift mit deinem Titel-Feld, dieses Element wird automatisch zur H1 des Artikels, so wie es sich für einen Blogartikel gehört.
5. Bau dein Beitragsbild ein und verbind es ebenfalls mit dem entsprechenden CMS-Feld.

Wenn du magst, kannst du an dieser Stelle noch einen Button einbauen, der zum Beispiel wieder zurück zur Übersichtsseite führt, oder einen Anker, der beim Klick direkt zum Lesebereich runterscrollt. Dieser Teil taucht danach bei jedem einzelnen Blogartikel automatisch in derselben Struktur auf, das ist das eigentlich Praktische am ganzen CMS-System: Du baust das Layout genau einmal, und jeder neue Artikel übernimmt es von ganz allein.

Schritt 5: SEO- und Open-Graph-Felder für jeden Artikel einstellen

Damit deine Blogartikel auch bei Google und in sozialen Netzwerken vernünftig aussehen, lohnt sich ein zweiter Blick ins CMS. Geh dafür auf dein Blog-Template, klick auf das Zahnrädchen und öffne die Collection-Einstellungen. Dort kannst du zusätzliche Felder anlegen, die speziell für Suchmaschinen und Social Media gedacht sind:

• SEO Titel (Plaintext, meist um die 130 bis 140 Zeichen), das ist der Metatitel, der in den Google-Suchergebnissen erscheint
• SEO Beschreibung (Plaintext), die kurze Beschreibung unter dem Titel in der Google-Suche
• Open Graph Titel, der Titel, der angezeigt wird, wenn jemand deinen Blogartikel-Link auf LinkedIn, in WhatsApp oder in einer Facebook-Gruppe teilt
• Open Graph Beschreibung, die dazugehörige kurze Beschreibung für dieselbe Vorschau

Unter den SEO Settings deines Blog-Templates kannst du dann festlegen, dass Webflow diese Felder automatisch bei jedem Artikel zieht, statt dass du sie jedes Mal einzeln von Hand einträgst. Damit hat jeder neue Blogartikel automatisch einen eigenen, individuellen Metatitel und eine eigene Beschreibung, sowohl für Google als auch für Social Media, ganz ohne dass du an anderer Stelle im Design etwas verändern musst.

Die häufigsten Stolperfallen

Ein paar Dinge, über die ich beim ersten Mal auch gestolpert bin, damit du sie dir sparen kannst:

Die Quelle der Collection List lässt sich nach dem Speichern nicht mehr ändern. Sei dir also sicher, dass du beim Zahnrädchen der Collection List die richtige Collection ausgewählt hast, bevor du auf Speichern drückst.

Neue Inhalte erscheinen nicht sofort in der Vorschau. Das liegt fast immer an einem Cache-Problem. Speicher deine Änderungen, veröffentliche die Seite, lad sie danach auf der echten Domain neu, nicht nur auf der Staging-Seite. Meistens reicht ein einfacher Refresh, du musst deswegen nicht gleich alles noch mal umbauen.

Ein Feld wie "SEO Beschreibung" lässt sich nicht doppelt anlegen. Webflow warnt dich in dem Fall, dass ein Feldname schon vergeben ist. Das ist kein Fehler, sondern ein hilfreicher Hinweis, dass du entweder das bestehende Feld nutzt oder dem neuen Feld einen anderen Namen gibst.

Vergiss das Veröffentlichen nicht. Klingt banal, passiert aber tatsächlich regelmäßig, auch mir. Wenn ein neu angelegter Artikel im CMS steht, aber in der Vorschau nicht auftaucht, checke als Erstes, ob du wirklich schon publiziert hast.

Warum sich ein sauber aufgebauter Blog lohnt

Ein Blog, der über das CMS läuft, bedeutet für dich vor allem eins: Du baust das Design ein einziges Mal richtig, und danach ist jeder neue Artikel reine Texteingabe. Kein erneutes Zusammenklicken von Bild, Titel und Text. Keine Angst, bei Artikel Nummer zwölf ein Element zu vergessen, das bei Artikel eins noch drin war.

Und gerade die kleinen Dinge, ein eigener SEO-Titel pro Artikel, eine passende Open-Graph-Vorschau beim Teilen, ein sauber verlinkter Button zurück zur Übersicht, sind genau das, was am Ende den Unterschied macht zwischen einer Webseite, die nach Vorlage aussieht, und einer, bei der man merkt, dass jemand mitgedacht hat. Warum deine Webseite eigentlich einer deiner wichtigsten Mitarbeiter im Business ist, hab ich in Deine Webseite: Dein stärkster Mitarbeiter im Business nochmal ausführlicher aufgeschrieben.

Lass uns deinen Blog gemeinsam aufbauen

Wenn du das bis hierhin durchgezogen hast, kannst du jetzt tatsächlich behaupten, du kannst eine funktionierende Blogübersichtsseite und die dazugehörige Blogartikel-Seite in Webflow bauen, inklusive sauberer SEO- und Open-Graph-Felder. Von hier aus kannst du jederzeit weitere Felder ergänzen oder das Design nach und nach verfeinern.

Falls dir das gerade trotzdem zu viel auf einmal ist, oder deine bestehende Webseite schon einen Blog haben soll, aber dir die Zeit oder die letzte Sicherheit im CMS fehlt: Ich bin zertifizierte Webflow-Partnerin und baue genau solche Blog-Strukturen regelmäßig für meine Kundinnen auf. Buch dir ein unverbindliches Erstgespräch, dann schauen wir gemeinsam auf deine Webseite.

Und wenn du künftig keine Webflow-Tutorials mehr verpassen willst: Abonnier gerne meinen YouTube-Kanal. Schreib mir in die Kommentare, welches Thema du dir als Nächstes wünschst, ich sammle das für kommende Videos.