Komponentenübersicht - Webflow Hilfe

Verwenden Sie Komponenten, um wiederkehrende Layouts und Inhalte effizienter auf Ihrer Website zu verwalten.

Komponenten geben Ihnen die Möglichkeit, anpassbare Blöcke aus Elementen und Kind-Elementen zu erstellen, um einen konsistenten, effizienten und skalierbaren Design-Workflow zu gewährleisten. Sie können diese Blöcke auf Ihrer gesamten Website wiederverwenden und an einem einzigen Ort ändern, um zu vermeiden, dass jedes wiederkehrende Layout einzeln überarbeitet werden muss.

Wie man eine Komponente erstellt

Sie können Komponenten visuell in Webflow erstellen oder bestehende Komponenten aus einem externen Codebestand mit DevLink importieren. Dieser Abschnitt konzentriert sich auf die visuelle Entwicklung.

Sie können eine Komponente aus einem Element oder einer Gruppe von Elementen erstellen und entscheiden, ob jede Instanz auf Ihrer Website identisch ist oder Änderungen an ihrem Inhalt, Layout oder Stil zulässt:

• Identischer Inhalt und Design pro Instanz — Erstellen Sie eine Komponente für wiederkehrende Layouts (z.B. Navigationsleisten und Fußzeilen), um sie auf Ihrer Website wiederzuverwenden. Alle Änderungen am Inhalt oder Design aktualisieren automatisch jede Instanz der Komponente.
• Einzigartiger Inhalt pro Instanz — Erstellen Sie eine Komponente mit einem konsistenten Layout und Design, aber erlauben Sie jeder Instanz, unterschiedlichen Inhalt zu haben (z.B. ein Hero-Abschnitts-Layout, das pro Instanz einzigartigen Text, Bilder oder Videos haben kann) unter Verwendung von Komponenten-Props und Slots.
• Verschiedene Stilvarianten pro Instanz — Erstellen Sie eine Komponente mit vordefinierten Stil- und Layoutoptionen (z.B. solide und umrandete Schaltflächen oder horizontale und vertikale Kartenlayouts). Komponenten-Stilvarianten ermöglichen es Ihnen, das Design jeder Instanz anzupassen, ohne separate Komponenten erstellen zu müssen.

Um eine Komponente zu erstellen:

1. Wählen Sie das Element aus, das Sie in eine Komponente umwandeln möchten
2. Öffnen Sie das Komponenten-Panel, Stil-Panel oder Elementeinstellungen-Panel
3. Klicken Sie auf das Symbol „Komponente erstellen“ oben im Panel
4. Geben Sie Ihrer Komponente einen Namen und eine optionale Beschreibung und klicken Sie auf Erstellen

Sie können auch eine vorhandene Komponente duplizieren, indem Sie die Komponente auswählen, auf die „Mehr Optionen“-Punkte klicken und Duplizieren wählen.

Sie befinden sich in der Hauptkomponente, nachdem Sie eine Komponente erstellt haben – das bedeutet, dass alle Änderungen an der Hauptkomponente in allen Instanzen dieser Komponente aktualisiert werden. Sie können jederzeit die Hauptkomponente in jeder Komponenteninstanz betreten, indem Sie:

• Die Komponenteninstanz doppelklicken
• Mit der rechten Maustaste auf die Instanz klicken und Komponente bearbeiten auswählen
• Die Instanz auswählen und auf das „Stift“-Symbol im Label klicken
• Die Instanz auswählen und auf das „Schraubenschlüssel“-Symbol oben rechts im rechten Panel klicken

Erfahren Sie mehr über das Bearbeiten der Hauptkomponente.

Wie man eine Komponente verwendet und wiederverwendet

Sobald Sie eine Komponente erstellt haben, können Sie sie überall auf Ihrer Website wiederverwenden:

1. Öffnen Sie das Komponenten-Panel
2. Fahren Sie mit der Maus über eine Komponente, um eine Vorschau anzuzeigen
3. Klicken und ziehen Sie die gewünschte Komponente auf eine beliebige Seite Ihrer Website
4. Lassen Sie die Komponenteninstanz direkt auf der Leinwand oder im Navigator fallen

Wenn Sie eine Komponenteninstanz auswählen, wird sie hervorgehoben und grün umrandet. Öffnen Sie das Komponenten-Panel, um zu sehen, wie oft jede Ihrer Komponenten auf Ihrer Website verwendet wurde.

Um die Elementhierarchie einer Komponente im Navigator-Panel anzuzeigen, halten Sie Option + Doppelklick (auf Mac) oder Alt + Doppelklick (auf Windows) auf die Komponente, oder klicken Sie auf das „Hauptkomponente bearbeiten“-Symbol. Sie können die Elementhierarchie der Komponente nur von der Hauptkomponente aus sehen (nicht innerhalb einer Komponenteninstanz).

So bearbeiten Sie eine Komponente

Lassen Sie uns die verschiedenen Möglichkeiten durchgehen, wie Sie mit einer Komponente interagieren und sie bearbeiten können:

• Hauptkomponente bearbeiten
• Komponenten-Eigenschaften, Slots und Stilvarianten
• Stilvarianten für Komponenten erstellen
• Die Varianten-Eigenschaft verwalten
• Die Variante einer Komponenteninstanz ändern
• Stilvarianten einer Komponente umordnen, umbenennen, duplizieren oder löschen
• Hauptkomponente verlassen
• Komponenten im Editor bearbeiten
• Namen oder Beschreibung einer Komponente ändern
• Komponenten gruppieren
• Eine Komponente löschen

Hauptkomponente bearbeiten

Um dieselben Änderungen in allen Instanzen einer Komponente vorzunehmen, müssen Sie die Hauptkomponente bearbeiten. Sie können die Hauptkomponente in jeder Komponenteninstanz bearbeiten, indem Sie:

• Auf der Leinwand auf die Komponenteninstanz doppelklicken
• Option + Doppelklick (Mac) oder Alt + Doppelklick (Windows) auf die Instanz im Navigator halten
• Mit der rechten Maustaste auf die Instanz klicken und Komponente bearbeiten auswählen
• Die Instanz auswählen und auf das Symbol „Komponente bearbeiten“ im Label klicken
• Die Instanz auswählen und auf das Symbol „Komponente bearbeiten“ oben im rechten Panel klicken

Änderungen an der Hauptkomponente wirken sich auf jede Komponenteninstanz aus (es sei denn, diese Komponenteninstanz hat spezifische Eigenschaften auf bestimmte Elemente innerhalb der Komponente angewendet). Beim Bearbeiten der Hauptkomponente können Sie die Struktur und die Reihenfolge der Elemente ändern, um gleichzeitig alle Komponenteninstanzen auf Ihrer Website zu beeinflussen.

Komponenten-Eigenschaften, Slots und Stilvarianten

Komponenteneigenschaften (Props), Slots und Stilvarianten ermöglichen es Ihnen, einzigartige Konfigurationen für jede Instanz einer Komponente zu erstellen:

• Props — verbinden Sie individuelle Element-Einstellungen in der Hauptkomponente (z.B. Text, Links, Bilder oder Videos) mit Props. Dies ermöglicht es Ihnen, diese Einstellungen in jeder Instanz anzupassen, ohne die Gesamtstruktur oder das Design der Komponente zu ändern. Props können auch mit CMS-Feldern verbunden werden, um Inhalte dynamisch aus Ihren CMS-Sammlungen zu ziehen.
• Slots — Slots sind Elemente, die Sie in vorhandene Komponenten einfügen können und die als Platzhalter für andere Komponenten dienen. Dies ermöglicht es Ihnen, Komponenten modular zu erstellen, wobei jede Instanz unterschiedliche Komponenten im Slot enthalten kann.
• Stilvarianten — definieren Sie mehrere Designoptionen für eine einzelne Komponente, sodass Sie ihr Erscheinungsbild für verschiedene Anwendungsfälle anpassen können. Beispielsweise können Sie Stilvarianten wie solide oder umrandete Schaltflächen oder horizontale und vertikale Kartenlayouts anbieten.

Erstellen von Stilvarianten für Komponenten

Sie können Varianten einer Komponente mit unterschiedlichen Layouts, Farben, Schriftstilen usw. erstellen (z. B. solide oder umrissene Schaltflächen oder horizontale und vertikale Kartenlayouts) und wählen, welche Variante in jeder Instanz Ihrer Komponente auf Ihrer Website verwendet werden soll.

Um eine Stilvariante für eine Komponente zu erstellen:

1. Bearbeiten Sie die Hauptkomponente
2. Gehen Sie zum Stil-Panel
3. Klicken Sie auf das Symbol „Komponentenvarianten“ im Stilauswahl
4. Klicken Sie auf das „Plus“-Symbol
5. Geben Sie der Variante einen eindeutigen Namen
6. Drücken Sie Enter/Return zur Bestätigung

Verwalten der Varianten-Eigenschaft

Wenn Sie eine Stilvariante für eine Komponente erstellen, wird automatisch eine Varianten-Eigenschaft für diese Komponente erstellt. Sie können den Namen der Varianten-Eigenschaft ändern, sie einer Eigenschaftsgruppe hinzufügen und eine Standardvariante für die Komponente im Eigenschaften-Panel festlegen.

Um den Namen der Varianten-Eigenschaft zu ändern:

1. Bearbeiten Sie die Hauptkomponente
2. Gehen Sie zum Eigenschaften-Panel
3. Klicken Sie auf die Varianten-Eigenschaft
4. Geben Sie einen eindeutigen Eigenschaftsnamen ein
5. Drücken Sie Enter/Return zur Bestätigung

Um die Varianten-Eigenschaft zu einer Eigenschaftsgruppe hinzuzufügen:

1. Bearbeiten Sie die Hauptkomponente
2. Gehen Sie zum Eigenschaften-Panel
3. Klicken Sie auf die Varianten-Eigenschaft
4. Wählen Sie eine Gruppe aus oder geben Sie einen eindeutigen Namen ein, um eine neue Gruppe zu erstellen
5. Klicken Sie auf Erstellen oder drücken Sie Enter/Return zur Bestätigung

Eine Standardvariante für eine Komponente festlegen:

1. Bearbeiten Sie die Hauptkomponente
2. Gehen Sie zum Eigenschaften-Panel
3. Klicken Sie auf die Varianten-Eigenschaft
4. Wählen Sie eine Variante aus dem Dropdown-Menü „Standards“ aus

Ändern der Variante einer Komponenteninstanz

Wie bei anderen Komponenteneigenschaften können Sie die Stilvariante für jede Instanz einer Komponente auswählen. Um die Variante einer Komponenteninstanz zu ändern:

1. Klicken Sie einmal auf die Komponente, um das Eigenschaften-Panel zu öffnen
2. Wählen Sie die Variante für diese Instanz aus dem Dropdown-Menü „Varianten“ aus

Komponentenstilvarianten neu anordnen, umbenennen, duplizieren oder löschen

Im Designmodus können Sie Komponentenstilvarianten verwalten (neu anordnen, umbenennen, duplizieren oder löschen).

So ordnen Sie die Varianten einer Komponente neu an:

1. Bearbeiten Sie die Hauptkomponente
2. Gehen Sie zum Stil-Panel
3. Klicken Sie auf das Symbol „Komponentenvarianten“ im Stilauswahlmenü
4. Klicken und ziehen Sie eine Variante, um sie an eine neue Position zu verschieben

So benennen Sie eine Variante um:

1. Bearbeiten Sie die Hauptkomponente
2. Gehen Sie zum Stil-Panel
3. Klicken Sie auf das Symbol „Komponentenvarianten“ im Stilauswahlmenü
4. Bewegen Sie den Mauszeiger über die Variante und klicken Sie auf das Symbol „Weitere Optionen“
5. Klicken Sie auf Umbenennen
6. Geben Sie einen neuen, eindeutigen Variantennamen ein
7. Drücken Sie Enter/Return, um zu bestätigen

So duplizieren Sie eine Variante:

1. Bearbeiten Sie die Hauptkomponente
2. Gehen Sie zum Stil-Panel
3. Klicken Sie auf das Symbol „Komponentenvarianten“ im Stilauswahlmenü
4. Bewegen Sie den Mauszeiger über die Variante und klicken Sie auf das Symbol „Weitere Optionen“
5. Klicken Sie auf Duplizieren
6. Geben Sie einen neuen, eindeutigen Variantennamen ein
7. Drücken Sie Enter/Return, um zu bestätigen

So löschen Sie eine Variante:

1. Bearbeiten Sie die Hauptkomponente
2. Gehen Sie zum Stil-Panel
3. Klicken Sie auf das Symbol „Komponentenvarianten“ im Stilauswahlmenü
4. Bewegen Sie den Mauszeiger über die Variante und klicken Sie auf das Symbol „Weitere Optionen“
5. Klicken Sie auf Löschen
6. Klicken Sie im Pop-up-Fenster auf Löschen, um zu bestätigen

Hauptkomponente verlassen

Sobald Sie die Bearbeitung der Hauptkomponente abgeschlossen haben, können Sie die Hauptkomponente verlassen, indem Sie:

• Auf den „Zurück“-Pfeil in der oberen linken Ecke des Designers klicken
• Außerhalb der Komponente auf der Leinwand klicken
• Escape auf Ihrer Tastatur drücken

Komponenten im Editor bearbeiten

Wenn Sie Inhaltseditoren eingeladen haben, den Inhalt Ihrer Website im Editor zu aktualisieren, werden alle Änderungen, die sie an Komponentenelementen vornehmen, die nicht mit einer Komponenteneigenschaft modifiziert sind und in allen Instanzen konsistent sind, auf alle anderen Instanzen angewendet.

Alternativ, wenn der Inhaltseditor Änderungen an Komponentenelementen vornimmt, die über eine Komponenteneigenschaft modifiziert werden, gelten diese Änderungen nur für die Komponente, die sie bearbeiten.

Ändern eines Komponentennamens oder einer Beschreibung

Um einen Komponentennamen oder eine Beschreibung zu ändern:

1. Öffnen Sie das Komponenten-Panel
2. Fahren Sie mit der Maus über einen Komponentennamen und klicken Sie auf die erscheinenden „Weitere Optionen“-Punkte
3. Klicken Sie auf Einstellungen bearbeiten
4. Nehmen Sie Ihre Änderungen vor und speichern Sie

Umbenennen einer Komponenteninstanz

Sie können einzelne Komponenteninstanzen umbenennen, um sie leichter identifizieren zu können — dies ist besonders hilfreich, wenn dieselbe Komponente mehrfach auf einer Seite verwendet wird.

Um eine Komponenteninstanz umzubenennen:

• Im Navigator oder oben im rechten Panel:

1. Doppelklicken Sie auf den Komponentennamen
2. Geben Sie den neuen Namen ein
3. Drücken Sie Enter oder klicken Sie weg, um Ihren benutzerdefinierten Namen zu speichern

• Auf der Leinwand:

1. Rechtsklicken Sie auf die Komponenteninstanz
2. Klicken Sie auf Umbenennen
3. Geben Sie den neuen Namen ein
4. Drücken Sie Enter oder klicken Sie weg, um Ihren benutzerdefinierten Namen zu speichern

Um den Namen auf den ursprünglichen Komponentennamen zurückzusetzen, löschen Sie den benutzerdefinierten Namen während des Umbenennens oder rechtsklicken Sie auf die Instanz im Navigator oder auf der Leinwand und klicken Sie auf Namen zurücksetzen.

Komponenten gruppieren

Um Ihre Komponenten in Gruppen zu organisieren:

1. Öffnen Sie das Komponenten-Panel
2. Fahren Sie mit der Maus über einen Komponentennamen und klicken Sie auf die erscheinenden „Weitere Optionen“-Punkte
3. Wählen Sie Einstellungen bearbeiten
4. Wählen Sie eine bestehende Gruppe aus dem Dropdown-Menü Gruppe oder geben Sie eine neue Gruppe ein, um sie zu erstellen

Um eine Komponentengruppe umzubenennen oder zu entgruppieren, fahren Sie mit der Maus über den Gruppentitel und klicken Sie auf die „Weitere Optionen“-Punkte.

Eine Komponente löschen

Um eine Komponente vollständig zu löschen:

1. Entfernen oder trennen Sie alle Instanzen der Komponente von Ihrer Website
2. Öffnen Sie das Komponenten-Panel
3. Fahren Sie mit der Maus über einen Komponentennamen und klicken Sie auf die „Weitere Optionen“-Punkte, die erscheinen
4. Wählen Sie Einstellungen bearbeiten
5. Klicken Sie auf Löschen und bestätigen Sie

Wie man eine Komponenteninstanz von ihrer Hauptkomponente trennt

Um eine Komponenteninstanz zu trennen und unabhängig von der Hauptkomponente Änderungen vorzunehmen:

1. Klicken Sie mit der rechten Maustaste auf ein beliebiges Komponentenelement in der Instanz, die Sie trennen möchten
2. Klicken Sie auf Instanz trennen

Sobald die Instanz getrennt ist, wird sie nicht geändert, wenn Sie eine andere verknüpfte Instanz dieser Komponente in Ihrem Design bearbeiten.

Teilen von Komponenten über Websites hinweg mit Bibliotheken

Sie können native und Code-Komponenten über Websites in einem Arbeitsbereich mit Bibliotheken teilen. Dies kann Ihren Arbeitsablauf beschleunigen und Ihr Designsystem verbessern, indem es einen einzigen Ort bietet, um Komponenten zu aktualisieren, die auf mehreren Websites in Ihrem Arbeitsbereich verwendet werden.

Zurück zur Webflow-Hilfe