Responsiv machen

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:

1. Prüfe, wie deine Breakpoints benannt sind. Übliche Namen: Desktop, Tablet, Phone. Die genaue Schreibweise ist entscheidend.

2. Öffne die originale Komponente auf dem Canvas (Doppelklick auf das Master im Assets-Panel).

3. 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ßt Phone: kein Match, überall wird die Desktop-Version gezeigt.

• Nur eine Phone-Variante, kein Tablet: 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.