Komponenten im CMS: Lebendige Blogposts bauen
Redaktion
Seit Februar 2026 lassen sich in Framer eigene Komponenten direkt in CMS-Inhalte einbetten. Was das bedeutet, wie es funktioniert und wie du responsive Komponenten für dein CMS einrichtest – Schritt für Schritt erklärt.
Stell dir vor, du schreibst einen Blogpost in Framer. Zwischen zwei Absätzen willst du dein Newsletter-Signup-Formular platzieren. Oder du schreibst ein Tutorial und möchtest mitten im Text eine live-animierte Demo einbetten. Bisher war das nicht möglich. Der CMS-Editor war auf Text, Bilder, Videos und einfache Tabellen beschränkt. Seit dem 10. Februar 2026 ist das anders: Mit dem CMS Components-Update kannst du jede Komponente, die du auf deinem Canvas erstellt hast, direkt in deine CMS-Inhalte einbetten. Mitten zwischen Absätzen, vollständig flexibel, mit allen Variablen und Varianten. Was das konkret bedeutet: Eine Komponente in Framer ist ein wiederverwendbares Designelement, erkennbar an der lila Umrandung auf dem Canvas. Das kann ein Button sein, eine Karte, ein animierter Ticker, ein Signup-Formular oder eine Bildergalerie. Diese Elemente waren bisher auf der Designebene beheimatet. Jetzt können sie direkt im Inhalt verwendet werden.
Bevor du eine Komponente in den CMS-Editor einfügst, muss sie auf dem Canvas als Komponente angelegt sein. Markiere dazu das gewünschte Element, klicke mit der rechten Maustaste und wähle Create Component, oder nutze ⌘K und suche nach "Create Component". Die Komponente erscheint danach im Assets-Panel (linke Sidebar, Tab "Assets") mit lila Umrandung.
Gut für den CMS-Einsatz geeignet sind:
Interaktive Signups (E-Mail-Eingabefelder, CTA-Buttons)
Animierte Bildergalerien oder Slider
Info-Karten oder Feature-Boxen
Status-Badges oder Ticker-Elemente
Call-to-Action-Blöcke mit Bild und Text
Weniger geeignet sind Komponenten, die stark von äußeren Dimensionen abhängen – etwa ein Full-Width-Hero-Abschnitt wirkt im Fließtext oft zu dominant.
Tipp: Erstelle für Komponenten im Assets-Panel für eine bessere Übersicht Unterordner, z.B. CMS/Newsletter-Anmeldung. Sie erscheinen dann übersichtlich gruppiert.
Framer bietet zwei Wege, um eine Komponente in ein CMS-Item einzufügen. Wichtig ist aber, dass Komponenten immer nur in Rich-Text-Felder eingefügt werden können, also formatierbare Textblöcke.
Weg 1: Über die Insert-Schaltfläche im CMS-Editor
Öffne im linken Panel den Bereich
CMS. Wähle deine Collection aus und öffne ein Item.Klicke in das Rich-Text-Feld und setze den Cursor an die gewünschte Stelle.
Klicke auf den "Insert"-Button in der Formatierungs-Toolbar über dem Rich-Text-Feld.
Im Menü erscheinen unten deine Projektkomponenten, sortiert nach der Ordnerstruktur aus dem Assets-Panel.
Wähle die gewünschte Komponente – sie erscheint sofort an der Cursorposition.
Weg 2: Per Slash-Command im On-Page-Editing
Klicke im On-Page-Editor in den bearbeitbaren Text-Bereich und setze den Cursor an die gewünschte Position.
Tippe
/– ein Suchfeld erscheint.Gib den Namen der Komponente ein. Die Liste filtert in Echtzeit.
Drücke
Enteroder klicke auf den Eintrag.
Nach dem Einfügen bleibt die Komponente vollständig editierbar. Klicke sie im Rich-Text-Feld an, ein Popover öffnet sich mit allen verfügbaren Einstellungen.
Width: Wechsel zwischen Fill (volle Breite des Textcontainers) und Fit (passt sich dem Inhalt an). Für einen Newsletter-Signup empfiehlt sich Fill, für ein kompaktes Badge eher Fit.
Alignment: Richte die Komponente linksbündig, zentriert oder rechtsbündig aus.
Varianten: Hat deine Komponente mehrere Varianten, wechselst du direkt im Popover zwischen ihnen, ohne zurück zum Canvas zu müssen.
Variablen: Alle editierbaren Properties, z.B. ein Button-Text oder ein Hintergrundradius, sind im Popover zugänglich. Änderungen betreffen nur diese eine Instanz, der Master auf dem Canvas bleibt unberührt.
Ohne weiteres Zutun zeigt Framer eine eingebettete Komponente auf allen Geräten identisch an. Um das zu ändern, nutzt Framer ein Namens-Matching-System: Gibt es eine Variante, deren Name exakt mit dem aktiven Breakpoint übereinstimmt, wird sie automatisch ausgeliefert. Diese Eigenschaft wendet Framer auch auf Komponenten im CMS an.
So richtest du es ein:
Prüfe, wie deine Breakpoints benannt sind. Übliche Namen:
Desktop,Tablet,Phone. Die genaue Schreibweise ist entscheidend.Öffne die originale Komponente auf dem Canvas (Doppelklick auf das Master im Assets-Panel).
Benenne deine Varianten exakt nach dem Breakpoint-Namen, für den sie gebaut sind, z.B.
Phone. Groß- und Kleinschreibung wird berücksichtigt.
Kein Code, keine Bedingungen, kein manuelles Einrichten – Framer übernimmt den Rest.
Wichtige Edge Cases:
Breakpoint heißt
Mobile, Variante heißtPhone: kein Match, überall wird die Desktop-Version gezeigt.Nur eine
Phone-Variante, keinTablet: auf Tablets erscheint die Desktop-Version.Keine Varianten: die Komponente wird auf allen Geräten identisch gerendert.
Tipp: Teste das Ergebnis im Preview-Modus. Ändere die Fensterbreite oder nutze den Breakpoint-Switcher, um zu prüfen, welche Variante aktiv ist.
Blog und Tutorials: Du erklärst in einem Artikel, wie ein Slider funktioniert, und baust den fertigen Slider direkt als Komponente in den Artikel ein. Der Leser sieht das Ergebnis genau dort, wo du es beschreibst.
Newsletter-Signups an der richtigen Stelle: Mit CMS-Komponenten setzt du dein Signup-Formular nach dem Absatz, der deinen stärksten Punkt macht, statt ans Ende oder an den Anfang des Artikels.
Interaktive Case Studies: Du bettest einen animierten Before/After-Slider direkt zwischen die Beschreibung ein, ohne externen Embed-Link oder YouTube-Einbettung.
FAQ-Abschnitte mit Accordion: Dein bestehender FAQ-Accordion wird an der passenden Stelle im Artikel eingefügt.
Status-Indikatoren oder Preisbadges: Weil es eine Komponente ist, reicht eine zentrale Änderung, und der Inhalt in jedem Artikel, der sie nutzt, aktualisiert sich mit.
Kann ich jede Komponente ins CMS einbetten?
Grundsätzlich ja, jede Komponente die auf dem Canvas existiert. Sehr großflächige oder stark layoutabhängige Komponenten wirken im Fließtext aber selten sinnvoll.
Ändert sich die Komponente überall, wenn ich den Master bearbeite?
Ja. Wenn du den Master-Component änderst, aktualisiert sich jede Instanz automatisch, auch die im CMS-Text.
Was passiert, wenn ich die Komponente auf dem Canvas lösche?
Sie verschwindet aus dem CMS-Text, Framer zeigt an der Stelle einen Fehler-Placeholder. Prüfe daher vor dem Löschen, ob eine Komponente in CMS-Items verwendet wird.
Funktioniert das auch mit Code-Komponenten?
Ja. Code-Komponenten (mit React-Code im Code-Editor erstellt) sind ebenfalls einfügbar, solange sie im Assets-Panel verfügbar sind.
Kann ich eine Komponente in mehrere Collections gleichzeitig einbetten?
Ja. Derselbe Newsletter-Signup kann in Blog-Artikeln, Case Studies und FAQ-Seiten gleichzeitig verwendet werden.
Die Komponente sieht auf Mobile komisch aus – was tun?
Prüfe, ob eine Variante existiert, die exakt nach dem Breakpoint-Namen deines Projekts benannt ist. Schreibweise und Breakpoint-Name müssen übereinstimmen. Mehr dazu in Block 5.
Wer tiefer in das CMS einsteigen möchte, findet alle Details zu Collections, Detail Pages und Feldtypen in der Framer-Dokumentationᶠ.
Framer Fortgeschritten
Autor: Redaktion