Einführung in Webflow - Webflow Hilfe
Lernen Sie Webflow kennen.
In Webflow können Sie Ihre Website über Seiten, Zweige und Standorte strukturieren, erstellen und gestalten. Webflow ermöglicht es Ihnen, dynamische Inhalte und Daten effektiv zu erstellen und zu verwalten und bietet Werkzeuge zur Analyse und Optimierung der Website-Leistung. Sie können Ihre Arbeit auch teilen, Feedback einholen und schließlich Ihre Website in dedizierten Umgebungen (z. B. Staging und Produktion) veröffentlichen.
Sie können auf Webflow vom Dashboard aus zugreifen, indem Sie auf das Miniaturbild Ihrer Website klicken, oder von den Seiteneinstellungen aus, indem Sie im oberen Werkzeugleiste auf Website öffnen klicken. Die Werkzeuge, auf die Sie in Webflow zugreifen können, unterscheiden sich je nach Ihrer Website-Rolle (z. B. Prüfer, Inhaltseditor usw.), sodass Sie schnell auf die benötigten Werkzeuge zugreifen können — und die Werkzeuge vergessen, die Sie nicht benötigen.
Bevor Sie beginnen
Überprüfen Sie die unterstützten Browser, Geräte und Bildschirmauflösungen von Webflow.
Zusammenarbeit mit mehreren Benutzern
Mehrere Teammitglieder können gemeinsam an einer Website in Webflow zusammenarbeiten. Um den Designprozess flüssig zu halten, können Sie die Designkontrolle zwischen Ihren Teammitgliedern übergeben und in Echtzeit sehen, wo andere Personen innerhalb Ihrer Website arbeiten.
Überblick über die Webflow-Oberfläche
Wenn Sie Ihre Website in Webflow öffnen, ist der Hauptbildschirm, der Ihre Website zeigt, die Leinwand. Um die Leinwand herum befinden sich die folgenden Werkzeugleisten und Panels:
- Die obere Leiste umfasst die Registerkartennavigation, die Kontextleiste und Website-Aktionen (z. B. Kollaborations- und Veröffentlichungstools).
- Die Leinwandleiste enthält Rückgängig/Wiederholen, Breadcrumb-Navigation, erweiterte Breakpoints und Leinwandeinstellungen.
- Die linke Werkzeugleiste enthält das Hauptmenü, verschiedene Werkzeug- und Navigationspanels, Einstellungen, Website-Audit und Tutorials.
- Die rechte Werkzeugleiste enthält Elementstile, Einstellungen und Interaktionen.
Die Leinwand
Der größte Bereich in Webflow ist die Leinwand. Hier können Sie in Echtzeit mit der Seite interagieren und gestalten. Sie können Elemente auswählen, verschieben und Inhalte direkt auf der Seite bearbeiten. Webflow speichert Ihre Arbeit automatisch, aber Sie können Ihre Website manuell speichern, indem Sie Command + S (auf Mac) oder Control + S (auf Windows) drücken.
Die obere Leiste
Die obere Leiste bietet schnellen Zugriff auf Designmodi, das CMS, Analyse, Optimierung, Lokalisierungen, einen Seitenschalter und Website-Aktionen.
Die Hauptregisterkartennavigation umfasst die Design-Registerkarte, die CMS-Registerkarte und die Insights-Registerkarte.
- Design-Registerkarte — Diese Registerkarte zeigt den aktuellen Modus an (z. B. Design, Erstellen usw.) und ermöglicht es Ihnen, zwischen Modi zu wechseln oder Seitenzweige zu erstellen. Die Website-Rolle eines Mitglieds bestimmt, welche Modi verfügbar sind. Zum Beispiel können Website-Manager und Designer auf den Designmodus zugreifen, während Vermarkter nur auf den Erstellungsmodus zugreifen können.
- CMS-Registerkarte — Öffnet das CMS (Content Management System) Panel, in dem Sie Sammlungen, Sammlungselemente und E-Commerce-Produkte und -Kategorien erstellen und verwalten können.
- Insights-Registerkarte — Öffnet das Insights-Panel, in dem Sie auf Analyse und Optimierung zugreifen können. Analyse bietet webseitenweite Analysen mit umsetzbaren Erkenntnissen. Optimierung ermöglicht es Ihnen, Experimente auf Ihrer Website durchzuführen, um verschiedene Stile, Layouts, Abläufe, Formulierungen, Bilder und mehr zu testen.
Kontextleiste
Die Kontextleiste ermöglicht es Ihnen, Website-Optimierungen mit Optimize verwalten und zwischen Sprachen, Seiten, Sammlungsseiten und Sammlungselementen zu wechseln. Sie zeigt auch an, wenn Sie die Haupt-Komponente bearbeiten (anstatt einer Komponenteninstanz) sowie den Designfreigabestatus.
Website-Aktionen
Website-Aktionen beziehen sich auf die spezifische Seite, auf der Sie sich befinden, oder auf die Website selbst. Teammitglieder, die in Echtzeit an der Website zusammenarbeiten, werden hier ebenfalls mit einem Avatar oder einer Anzahl aufgelistet.
- Analysemodus — Erhalten Sie Seitenanalysen und Einblicke (z.B. wie weit scrollen Besucher und wo klicken sie).
- Kommentare — Überprüfen Sie Kommentare, die andere Teammitglieder hinterlassen haben, oder fügen Sie Ihr eigenes Feedback/Notizen hinzu.
- Vorschau — Wechseln Sie in den Vorschau-Modus.
- Teilen — Erstellen Sie einen Nur-Lese-Link zur Website.
- Veröffentlichen — Veröffentlichen Sie Ihre Website.
Die Canvas-Leiste
Die Canvas-Leiste befindet sich standardmäßig über der Leinwand, kann aber in den Canvas-Einstellungen darunter verschoben werden.
- Rückgängig/Wiederholen-Symbole — Schnelles Rückgängigmachen oder Wiederherstellen von Änderungen.
- Breadcrumb-Navigation — Zeigt die Elementhierarchie des ausgewählten Elements an.
- Canvas-Einstellungen — Verschiedene Optionen (z.B. Lineale, Hilfslinien, Textzoom-Vorschau).
- Breakpoints — Vorschau und Bearbeitung für verschiedene Gerätegrößen.
Die linke Werkzeugleiste
Enthält das Hauptmenü und Panels zur Website-Strukturierung.
Klicken Sie auf das Webflow-Logo, um das Hauptmenü zu öffnen.
- Schnellsuche für Elemente, Komponenten, Seiten usw.
- Aktionen rückgängig machen/wiederholen
- Code exportieren
- Tastenkombinationen
- CSS-Vorschau öffnen
- Hilfe erhalten oder Feedback senden
Panels und Website-Aktivitätsprotokoll
- Panel hinzufügen — Tastenkombination: A
- Seiten-Panel — Tastenkombination: P
- Navigator-Panel — Tastenkombination: Z
- Komponenten-Panel — Tastenkombination: Shift + A
- Variablen-Panel — Tastenkombination: G
- Stilauswahl-Panel — Tastenkombination: J
- Assets-Panel — Tastenkombination: L
- Bibliotheken-Panel — Tastenkombination: L
- Apps-Panel — Tastenkombination: E
- Website-Aktivitätsprotokoll — Designänderungen an Ihrer Website
Einstellungen, KI-Lernassistent, Audits, Schnellsuche und Tutorials
- Einstellungs-Panel — Oberfläche, Suche, Backup, Lokalisierung.
- KI-Lernassistent — KI-gestützte Hilfe.
- Audit-Panel — Tastenkombination: U.
- Schnellsuche — Tastenkombination: Command + E (Mac), Control + E (Windows).
- Video-Tutorials-Panel — Kostenlose Videokurse.
Die rechte Werkzeugleiste
Enthält Panels für Elementstile, Einstellungen und Interaktionen.
- Stil-Panel — Tastenkürzel: S.
- Elementeinstellungen-Panel — Tastenkürzel: D.
- Interaktionen-Panel — Tastenkürzel: H.
FAQ
Welche Browser unterstützt Webflow?
Webflow unterstützt offiziell die letzten drei Hauptversionen aller modernen Browser: Chrome, Edge, Firefox und Safari. Dies gilt sowohl für die Plattform als auch für veröffentlichte Seiten.
Für Funktionen mit eingeschränkter Unterstützung siehe verwandte Artikel:
Webflow unterstützt nicht den Internet Explorer.
Welche Bildschirmauflösungen/Geräte unterstützt Webflow?
Webflow erfordert einen Desktop-/Laptop-Computer mit einer Bildschirmbreite von mindestens 1268px.
Warum ist Webflow eine Online-/gehostete App — warum keine herunterladbare App?
Webflow ist online/gehostet, um Design im Browser und schnelle Updates zu ermöglichen.
- WYSIWYG-Design — direkte Wirkung auf HTML/CSS.
- Schnelle Updates — Immer die neueste Version, keine manuellen Updates.