Framer Einsteiger-Guide - Die wichtigsten Funktionen erklärt

1. Einstieg: Anmelden & Projekt öffnen

1. Browser öffnen und framer.com aufrufen.

2. Oben rechts auf Log-in klicken → mit Google, Apple oder E-Mail anmelden.

3. Im Dashboard siehst du alle Projekte, zu denen du Zugang hast.

4. Auf die Kachel deiner Website klicken (oder links im Seitenpanel auf den Projektnamen), um das Projekt im Editor zu öffnen.
   Fertig – die Seite lädt jetzt im Editor.

2. Editor-Oberfläche im Überblick

2.1 Canvas (Mitte)

Hier siehst du deine Seite live und kannst direkt Elemente anklicken, verschieben und bearbeiten. Alles, was du im Editor änderst, siehst du sofort im Canvas.

2.2 Linke Sidebar (Tabs: Pages · Layers · Assets)

1. Pages

   • Zeigt deine Seitenstruktur, zum Beispiel:

     • Home

     • /404 (Fehlerseite)

     • /logo-marke, /web-digital, /bestellung, /rechtliches, /ueber-mich

   • Mit Klick auf eine Seite springst du direkt zu dieser Ansicht im Canvas.

   • Über das kleine „+“ kannst du neue Seiten, Ordner oder Unterseiten anlegen.

2. Layers

   • Hier siehst du alle Ebenen (Frames, Stacks, Textblöcke, Bilder etc.) deiner aktuell ausgewählten Seite.

   • Die Ebenen sind hierarchisch angeordnet, sodass du erkennst, welches Element in welchem Container steckt.

   • Mit dem Pfeil-Symbol neben einem Layer kannst du Unter-Ebenen ein- oder ausklappen.

3. Assets

   • Zeigt alle hochgeladenen Dateien (Bilder, Videos, SVGs) in deinem Projekt.

   • Neue Dateien kannst du per Drag-and-Drop ins Panel ziehen oder über das „+“-Symbol importieren.

   • Wenn du ein Asset ersetzt, bleibt der Dateiname gleich, und alle Verknüpfungen im Canvas bleiben bestehen.

2.3 Floating Bar im Canvas

In mitte unten im Canvas findest du eine schmale, schwebende Leiste mit folgenden Icons (von links nach rechts):

1. Pfeil-Cursor: Auswahl-Werkzeug, um einzelne Elemente anzuklicken und zu verschieben.

2. Hand-Werkzeug: Zum Verschieben/Scrollen des Canvas (Drag-Modus).

3. Zeichen-Werkzeug (Blob-Icon): Schnelle Formenauswahl (z. B. Ellipse, Rechteck) oder Custom-Shape.

4. Mond-Symbol: Toggle zwischen Light Mode und Dark Mode im Editor.

5. Vier-Quadrate-Icon: Hier findest du alle installierten Plugins und kannst neue Integrationen hinzufügen.

6. Zoom-Dropdown: Zeigt den aktuellen Zoom-Level (z. B. 41 %) und erlaubt dir, die Ansicht zu vergrößern oder zu verkleinern.

2.4 Top-Bar (Plattform-Leiste)

Von links nach rechts findest du:

1. Framer-Logo: Klickst du darauf, gelangst du zurück ins Dashboard.

2. Insert-Icon: Öffnet das Einfüge-Panel (Shortcut: I), um neue Elemente wie Frame, Stack, Text, Image oder Video ins Canvas zu ziehen.

3. Layout-Icon: Aktiviert Layout-Werkzeuge wie Rows, Columns, Grid und Fit Content, um Struktur-Container zu definieren.

4. Text-Icon: Legt direkt einen Textblock an (Shortcut: T) – in der rechten Sidebar kannst du dann Schriftart, -größe und -farbe anpassen.

5. Vector/Wireframer-Icon: Ermöglicht das Zeichnen eigener Vektoren (z. B. Pfade für Icons) oder das Einfügen von Wireframe-Elementen.

6. CMS-Icon: Schneller Zugriff auf deine Collections (z. B. Blog-Posts, Team, FAQs).

3. Häufige Aufgaben & Workflows

3.1 Text ändern

• Doppelklick auf den Textblock im Canvas → tippen, um den Inhalt zu ändern.

• Mit ⌘/Ctrl + S (oder dem automatischen Speichern) werden Änderungen direkt gesichert.

3.2 Bild tauschen

1. Auf das Bild im Canvas klicken, damit es ausgewählt ist.

2. In der rechten Sidebar unter Styles → Fill → Image ins Bild klicken.

3. Neue Datei auswählen oder per Drag-and-Drop ins Popup-Fenster ziehen.

4. Bild wird ersetzt, alle bestehenden Verknüpfungen bleiben erhalten.

3.3 Link setzen

• Element markieren (Button, Text oder Bild).

• In der rechten Sidebar Bereich Link aktivieren.

• Ziel-URL oder interne Seite/Abschnitt auswählen (z. B. /bestellung oder ein externes https://...).

3.4 Farben & Schriften anpassen

• Element (Text, Button, Frame) auswählen.

• In der rechten Sidebar unter Appearance den Farb-Picker oder das Font-Dropdown nutzen.

• Änderungen greifen sofort auf alle Elemente mit diesem Style, falls du globale Styles verwendest.

3.5 CMS-Eintrag pflegen

1. In der Top-Bar auf den Tab CMS klicken.

2. Gewünschte Sammlung (z. B. Blog-Posts) öffnen.

3. Auf + New Item klicken, um einen neuen Eintrag anzulegen.

4. Felder (Titel, Bild, Inhalt) befüllen. Bilder per Drag-and-Drop ins Formular ziehen.

5. Save klicken → dann Publish, damit der neue Eintrag live verfügbar ist.

3.6 Seite veröffentlichen

1. Oben rechts auf Publish klicken.

2. Domain oder Staging-URL überprüfen (z. B. https://meine-site.framer.website).

3. Publish draft bestätigen.

4. Framer legt automatisch einen Wiederherstellungspunkt (Version) an.

5. 
   

4. Wichtige Shortcuts (Mac = ⌘, Win = Ctrl)

• Preview an/aus: ⌘/Ctrl + P

• Site publizieren: ⌘/Ctrl + Shift + P

• Open Site im Browser: ⌘/Ctrl + Shift + O

• Undo / Redo: ⌘/Ctrl + Z / ⌘/Ctrl + Shift + Z

• Duplicate (Element duplizieren): ⌘/Ctrl + D

• Delete (Element löschen): Entf

• Group / Ungroup: ⌘/Ctrl + G / ⌘/Ctrl + Shift + G

• Insert-Panel öffnen: I

• Frame einfügen: F

• Stack erstellen: S

• Text einfügen: T

• Image einfügen: Shift + I

• Video einfügen: Shift + V

• Link setzen: L

(Vollständige Liste jederzeit mit ⌘/Ctrl + /* anzeigen.)*

5. Best Practices für Assets & Performance

1. Bilder optimieren

   • Nutze Squoosh:

     • Max. 2048 px Breite, idealerweise < 500 kB, Format WebP.

     • Für Retina/HiDPI: 2×-Auflösung verwenden, damit Bilder auf modernen Displays scharf bleiben.

2. Videos auslagern

   • Lange Clips per YouTube oder Vimeo einbetten (iFrame).

   • Nur kurze Loops (max. 5–10 MB) direkt ins Assets-Panel hochladen.

3. Unbenutzte Assets & Layers entfernen

   • Alte Bilder, Videos oder Komponenten, die nicht mehr gebraucht werden, im Assets-Panel löschen.

   • Entferne nicht verwendete Ebenen über das Layers-Panel, damit das Projekt leichter und schneller bleibt.

6 Typische Stolperfallen & schnelle Lösungen

1. Layout ist verrutscht

   • Undo (⌘/Ctrl + Z) nutzen, um den letzten Schritt rückgängig zu machen.

   • In Project → History eine frühere Version wiederherstellen, falls mehrere Änderungen das Design durcheinandergebracht haben.

2. Bilder werden unscharf angezeigt

   • Prüfe, ob das hochgeladene Bild in 2×-Auflösung vorliegt (z. B. 4096 px bei Retina-Displays).

   • Stelle sicher, dass in den Bild-Einstellungen die Option Responsive Images aktiviert ist.

3. Seite wird nicht in Google indexiert

   1. In Project Settings →Page Seetings→ Search → Indexing auf Allow stellen.

   2. Die automatisch generierte Sitemap (z. B. sitemap.xml) in der Google Search Console einreichen.

   3. 
      

      

4. Langsame Ladezeiten

   1. Im Insights-Tab (Analytics) prüfen, ob bestimmte Assets (große Bilder, Videos) zu langsam laden.

   2. Unbenutzte Fonts und Scripts aus dem Projekt entfernen.

5. Plugin funktioniert nicht richtig

   • Prüfe, ob du das Plugin in der Canvas-Toolbar aktiviert hast.

   • Manchmal reicht ein Refresh oder ein erneutes Publish, damit die Änderungen greifbar werden.

7. Weiterführende Ressourcen

• Framer University (interaktive Tutorials):
  https://www.framer.com/learn/

• Community-Templates & Beispiele:
  https://www.framer.com/templates/

• Framer Forum & Discord-Community (Hilfestellung, Best Practices):
  https://community.framer.com/

• Offizielle Dokumentation & Release Notes:
  https://www.framer.com/docs/

  
  

Mit diesem Guide können auch Laien Texte, Bilder, CMS-Einträge und Publishes in Framer souverän verwalten, Analytics im Blick behalten und Plugins nach Bedarf integrieren.

Viel Erfolg beim Bearbeiten deiner Framer-Site!

Viele Grüsse

Max