So erstellen Sie wiederverwendbare Komponenten in Webflow

Mit Webflow-Komponenten können Sie jede Gruppe von Elementen – beispielsweise eine Karte, eine Navigationsleiste, eine Schaltfläche oder einen Testimonial-Block – in eine einzige Einheit umwandeln, die wiederverwendet und an beliebiger Stelle auf der Website platziert werden kann. Wenn Sie eine Änderung an der Komponente vornehmen, werden alle Instanzen automatisch auf allen Seiten aktualisiert. Diese Anleitung behandelt den gesamten Arbeitsablauf, von der Auswahl der Elemente bis zur Verwaltung benutzerdefinierter Überschreibungen.

Schritt 1: Wählen Sie die Elemente aus, die Sie wiederverwenden möchten

Erstellen Sie zunächst die Vorlage, die Sie ändern möchten, genau so, wie sie bei der ersten Verwendung aussehen soll. In der Regel umfasst dies den gesamten Inhalt eines Widget-Elements (wie z. B. ein `div` oder `component`), einschließlich Bildern, Titeln, Text und Schaltflächen.

Klicken Sie im Menü oder auf dem Bildschirm auf das Hauptelement, um die einzelnen Gruppen auszuwählen. Um das Widget herum werden Optionen angezeigt, die bestätigen, dass alle internen Eigenschaften eingerichtet wurden.

Schritt 2: Wandeln Sie die Auswahl in eine Komponente um

Klicken Sie mit der rechten Maustaste auf das ausgewählte Objekt und wählen Sie im Menü „Komponente erstellen“ aus.

  • Die Komponente enthält nur die ausgewählten Elemente.
  • Verschachtelte Objekte, Kategorien und Interaktionen bleiben erhalten.
  • Der Basisstil bleibt unverändert: Wenn eine Komponente erstellt wird, ändert sich ihr Erscheinungsbild nicht.

Schritt 3: Benennen Sie Ihre Komponente

Webflow fordert Sie auf, einen neuen Namen für die Komponente anzugeben. Wählen Sie einen eindeutigen und aussagekräftigen Namen; da dieser im Komponenten-Panel angezeigt wird, ist eine Bezeichnung wie „Kartenbereich“ oder „Entsprechend dem Abschnitt“ sinnvoller als „Div-Block 4“.

Schritt 4: Die Komponente bearbeiten

Doppelklicken Sie auf eine beliebige Instanz einer Komponente, um in den Bearbeitungsmodus zu wechseln. Webflow zeigt eine grüne Benachrichtigung an, die darauf hinweist, dass Sie die Hauptkomponente bearbeiten; alle hier vorgenommenen Änderungen (wie Schriftgröße, Stil oder Struktur) werden auf alle Instanzen der Komponente auf der Website übertragen.

Klicken Sie außerhalb dieses Bereichs oder verwenden Sie die Schaltfläche „Zurück“, um den Bearbeitungsmodus zu verlassen und zur Standard-Seitenansicht zurückzukehren.

Schritt 5: Die Komponente auf Ihrer gesamten Website wiederverwenden

Klicken Sie auf das Seitenpanel (das Symbol auf der rechten Seite). Alle erstellten Elemente stehen zur Verwendung bereit. Ziehen Sie ein beliebiges Element in den Arbeitsbereich (oder auf eine beliebige Seite), um eine neue Instanz hinzuzufügen.

Da jede Instanz auf dasselbe Master-Objekt verweist, werden alle Änderungen an der Master-Form (z. B. das Bearbeiten von Text oder das Hinzufügen einer neuen Spalte) automatisch auf alle Instanzen auf den verschiedenen Seiten übertragen, auf denen dieses Element verwendet wird.

Bitte kontaktieren Sie uns unter manish@bay20.com oder rufen Sie uns unter +91-9582784309 oder +91-8800519180 an, wenn Sie Unterstützung im Zusammenhang mit Webflow benötigen. Sie können auch unsere Website besuchen, um sich über unsere Dienstleistungen zu informieren.