In diesem Artikel zeige ich dir Schritt für Schritt, wie du das CMS in Framer aufbaust und sinnvoll nutzt. Der Blogartikel ergänzt mein YouTube-Video und erklärt den gesamten Prozess noch einmal in Ruhe in schriftlicher Form. Ziel ist es, dass du nach diesem Guide verstehst, wie ein CMS funktioniert und wie du es flexibel für Blogartikel, Produkte oder andere Inhalte einsetzen kannst.
1. Neue CMS Collection in Framer anlegen
Der Einstieg ins CMS beginnt direkt in Framer. Oben in der Toolbar findest du das CMS-Icon. Über dieses Icon kannst du eine neue Collection anlegen.
Eine Collection ist im Grunde deine Datenbank. Sie kann zum Beispiel für Blogartikel, Produkte, Referenzen oder Case Studies genutzt werden. Sobald du eine neue Collection erstellst, gibst du ihr einen passenden Namen, zum Beispiel „Blog“ oder „Products“.
2. Fields erstellen und richtig nutzen
Nach dem Anlegen der Collection definierst du die Fields, also die Felder, die später deine Inhalte enthalten. Jedes Field hat eine klare Aufgabe. Typische Field-Typen sind:
Textfelder für Titel oder kurze Beschreibungen
Rich-Text-Felder für längere Inhalte wie Blogartikel
Number-Felder für Preise oder Bewertungen
Toggle-Felder für Status wie „Featured“ oder „Best Seller“
Image- oder File-Felder für Bilder und Medien
Link-Felder für externe Verlinkungen
Category- oder Select-Felder für Filter und Kategorien
Welche Fields du brauchst, hängt davon ab, ob du ein Produkt-CMS oder ein Blog-CMS aufbaust. Wichtig ist, dass du dir vorher kurz überlegst, welche Informationen du später auf der Website anzeigen möchtest.
3. Inhalte über „New Item“ hinzufügen
Sobald alle Fields angelegt sind, kannst du Inhalte erstellen. Über den Button New Item legst du einen neuen Eintrag in deiner Collection an.
Hier füllst du alle zuvor erstellten Felder mit Inhalt, zum Beispiel Produktname, Beschreibung, Kategorie, Preis oder Bilder. Für Blogartikel kannst du hier Titel, Text, Veröffentlichungsdatum und Autoreninformationen eintragen.
Diese Items sind später die Grundlage für alle dynamischen Seiten auf deiner Website.
4. Index Page erstellen und Inhalte anzeigen
Im nächsten Schritt erstellst du eine Index Page. Dafür gehst du in den Bereich Pages, klickst auf das Plus-Icon und wählst „Index Page“.
Framer erstellt nun automatisch eine Seite, auf der alle Items deiner Collection angezeigt werden. Diese Seite dient meist als Übersicht, zum Beispiel für alle Blogartikel oder alle Produkte.
Oft wird diese Index-Section kopiert und an anderer Stelle wiederverwendet, zum Beispiel auf der Startseite oder in einer eigenen Produktübersicht.
5. Featured Sections und dynamische Inhalte nutzen
Ein großer Vorteil des CMS ist, dass du Inhalte überall auf deiner Website dynamisch einsetzen kannst.
Du kannst zum Beispiel eine Featured Section auf der Startseite bauen, in der nur bestimmte Items angezeigt werden, etwa Bestselling Products oder empfohlene Blogartikel. Das erreichst du über Filter, zum Beispiel über ein Toggle-Feld wie „Featured = true“.
So bleibt deine Website flexibel und du kannst Inhalte zentral im CMS steuern, ohne jedes Mal das Design anfassen zu müssen.
6. Filter-Systeme für Kategorien und Sortierungen
Ein weiterer wichtiger Anwendungsfall ist das Erstellen von Filtersystemen. Dafür nutzt du meist Kategorien oder Select-Felder im CMS.
In Framer kannst du Buttons oder Filterelemente bauen, mit denen Besucher nach Kategorien, neuesten Einträgen oder bestimmten Eigenschaften filtern können. Diese Filter lassen sich direkt mit der CMS-Collection verbinden und sorgen für eine bessere Nutzererfahrung.
Genau diesen Aufbau zeige ich auch detailliert im YouTube-Video.
7. Detail Page für einzelne Inhalte erstellen
Für einzelne Produkte oder Blogartikel erstellst du eine Detail Page. Dafür gehst du erneut in den Pages-Bereich, klickst auf das Plus-Icon und wählst deine CMS-Collection aus.
Framer erstellt dann eine dynamische Seite, die für jedes Item automatisch genutzt wird. Auf dieser Seite designst du das Layout für ein einzelnes Produkt oder einen Blogartikel.
8. CMS-Daten im Design verwenden
Beim Designen der Detail Page verbindest du Texte, Bilder und andere Elemente mit dem CMS.
Dafür klickst du im Properties-Panel eines Elements auf das Plus-Icon und wählst das passende Field aus deiner Collection aus. So werden Titel, Beschreibungen, Bilder oder Kategorien automatisch aus der Datenbank geladen.
Dieses Prinzip gilt für Texte, Bilder, Buttons und viele weitere Elemente.
9. Suchfunktion für das CMS integrieren
Zum Abschluss zeige ich im Video auch, wie du eine Searchbar integrierst. Damit können Besucher direkt nach Produkten oder Blogartikeln suchen.
Die Suchfunktion wird ebenfalls mit dem CMS verbunden und sorgt dafür, dass Inhalte schnell gefunden werden können, vor allem bei größeren Collections.
Fazit: Warum das Framer CMS so mächtig ist
Das CMS in Framer ermöglicht dir, strukturierte Inhalte einmal zentral anzulegen und sie flexibel auf deiner Website zu nutzen. Egal ob Blog, Produktseite oder Portfolio, mit dem richtigen Aufbau sparst du Zeit und bleibst maximal flexibel.
Wenn du das Ganze Schritt für Schritt in Aktion sehen möchtest, empfehle ich dir das passende YouTube-Video, in dem ich alle Schritte live umsetze. Das komplette Projekt kannst du außerdem remixen und für dein eigenes Projekt verwenden.
