{"id":17779,"date":"2026-08-05T12:15:40","date_gmt":"2026-08-05T06:30:40","guid":{"rendered":"https:\/\/www.bay20.com\/de\/?p=17779"},"modified":"2026-08-05T12:16:56","modified_gmt":"2026-08-05T06:31:56","slug":"so-erstellen-sie-wiederverwendbare-komponenten-in-webflow","status":"publish","type":"post","link":"https:\/\/www.bay20.com\/de\/so-erstellen-sie-wiederverwendbare-komponenten-in-webflow\/","title":{"rendered":"So erstellen Sie wiederverwendbare Komponenten in Webflow"},"content":{"rendered":"\n<p>Mit Webflow-Komponenten k\u00f6nnen Sie jede Gruppe von Elementen \u2013 beispielsweise eine Karte, eine Navigationsleiste, eine Schaltfl\u00e4che oder einen Testimonial-Block \u2013 in eine einzige Einheit umwandeln, die wiederverwendet und an beliebiger Stelle auf der Website platziert werden kann. Wenn Sie eine \u00c4nderung 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 \u00dcberschreibungen.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Schritt 1: W\u00e4hlen Sie die Elemente aus, die Sie wiederverwenden m\u00f6chten<\/strong><\/h3>\n\n\n\n<p>Erstellen Sie zun\u00e4chst die Vorlage, die Sie \u00e4ndern m\u00f6chten, 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\u00dflich Bildern, Titeln, Text und Schaltfl\u00e4chen.<\/p>\n\n\n\n<p>Klicken Sie im Men\u00fc oder auf dem Bildschirm auf das Hauptelement, um die einzelnen Gruppen auszuw\u00e4hlen. Um das Widget herum werden Optionen angezeigt, die best\u00e4tigen, dass alle internen Eigenschaften eingerichtet wurden.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"980\" height=\"536\" src=\"https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2026\/08\/image-3-980x536.png\" alt=\"\" class=\"wp-image-17780\" srcset=\"https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2026\/08\/image-3-980x536.png 980w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2026\/08\/image-3-300x164.png 300w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2026\/08\/image-3-768x420.png 768w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2026\/08\/image-3-1000x547.png 1000w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2026\/08\/image-3-800x438.png 800w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2026\/08\/image-3.png 1440w\" sizes=\"auto, (max-width: 980px) 100vw, 980px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Schritt 2: Wandeln Sie die Auswahl in eine Komponente um<\/strong><\/h3>\n\n\n\n<p>Klicken Sie mit der rechten Maustaste auf das ausgew\u00e4hlte Objekt und w\u00e4hlen Sie im Men\u00fc \u201eKomponente erstellen\u201c aus.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Die Komponente enth\u00e4lt nur die ausgew\u00e4hlten Elemente.<\/li>\n\n\n\n<li>Verschachtelte Objekte, Kategorien und Interaktionen bleiben erhalten.<\/li>\n\n\n\n<li>Der Basisstil bleibt unver\u00e4ndert: Wenn eine Komponente erstellt wird, \u00e4ndert sich ihr Erscheinungsbild nicht.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"980\" height=\"536\" src=\"https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2026\/08\/image-4-980x536.png\" alt=\"\" class=\"wp-image-17781\" srcset=\"https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2026\/08\/image-4-980x536.png 980w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2026\/08\/image-4-300x164.png 300w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2026\/08\/image-4-768x420.png 768w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2026\/08\/image-4-1000x547.png 1000w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2026\/08\/image-4-800x438.png 800w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2026\/08\/image-4.png 1440w\" sizes=\"auto, (max-width: 980px) 100vw, 980px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Schritt 3: Benennen Sie Ihre Komponente<\/strong><\/h3>\n\n\n\n<p>Webflow fordert Sie auf, einen neuen Namen f\u00fcr die Komponente anzugeben. W\u00e4hlen Sie einen eindeutigen und aussagekr\u00e4ftigen Namen; da dieser im Komponenten-Panel angezeigt wird, ist eine Bezeichnung wie \u201eKartenbereich\u201c oder \u201eEntsprechend dem Abschnitt\u201c sinnvoller als \u201eDiv-Block 4\u201c.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"980\" height=\"536\" src=\"https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2026\/08\/image-5-980x536.png\" alt=\"\" class=\"wp-image-17782\" srcset=\"https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2026\/08\/image-5-980x536.png 980w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2026\/08\/image-5-300x164.png 300w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2026\/08\/image-5-768x420.png 768w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2026\/08\/image-5-1000x547.png 1000w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2026\/08\/image-5-800x438.png 800w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2026\/08\/image-5.png 1440w\" sizes=\"auto, (max-width: 980px) 100vw, 980px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Schritt 4: Die Komponente bearbeiten<\/strong><\/h3>\n\n\n\n<p>Doppelklicken Sie auf eine beliebige Instanz einer Komponente, um in den Bearbeitungsmodus zu wechseln. Webflow zeigt eine gr\u00fcne Benachrichtigung an, die darauf hinweist, dass Sie die Hauptkomponente bearbeiten; alle hier vorgenommenen \u00c4nderungen (wie Schriftgr\u00f6\u00dfe, Stil oder Struktur) werden auf alle Instanzen der Komponente auf der Website \u00fcbertragen.<\/p>\n\n\n\n<p>Klicken Sie au\u00dferhalb dieses Bereichs oder verwenden Sie die Schaltfl\u00e4che \u201eZur\u00fcck\u201c, um den Bearbeitungsmodus zu verlassen und zur Standard-Seitenansicht zur\u00fcckzukehren.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"980\" height=\"535\" src=\"https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2026\/08\/image-6-980x535.png\" alt=\"\" class=\"wp-image-17783\" srcset=\"https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2026\/08\/image-6-980x535.png 980w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2026\/08\/image-6-300x164.png 300w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2026\/08\/image-6-768x419.png 768w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2026\/08\/image-6-1000x546.png 1000w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2026\/08\/image-6-800x437.png 800w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2026\/08\/image-6.png 1438w\" sizes=\"auto, (max-width: 980px) 100vw, 980px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Schritt 5: Die Komponente auf Ihrer gesamten Website wiederverwenden<\/strong><\/h3>\n\n\n\n<p>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\u00fcgen.<\/p>\n\n\n\n<p>Da jede Instanz auf dasselbe Master-Objekt verweist, werden alle \u00c4nderungen an der Master-Form (z. B. das Bearbeiten von Text oder das Hinzuf\u00fcgen einer neuen Spalte) automatisch auf alle Instanzen auf den verschiedenen Seiten \u00fcbertragen, auf denen dieses Element verwendet wird.<\/p>\n\n\n\n<p>Bitte kontaktieren Sie uns unter <strong>manish@bay20.com<\/strong> oder rufen Sie uns unter <strong>+91-9582784309 oder +91-8800519180<\/strong> an, wenn Sie Unterst\u00fctzung im Zusammenhang mit <strong><a href=\"https:\/\/www.bay20.com\/de\/digitales-marketing-unternehmen\/\" target=\"_blank\" rel=\"noopener\" title=\"\">Webflow<\/a><\/strong> ben\u00f6tigen. Sie k\u00f6nnen auch unsere Website besuchen, um sich \u00fcber unsere Dienstleistungen zu informieren.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Mit Webflow-Komponenten k\u00f6nnen Sie jede Gruppe von Elementen \u2013 beispielsweise eine Karte, eine Navigationsleiste, eine Schaltfl\u00e4che oder einen Testimonial-Block \u2013 in eine einzige Einheit umwandeln, die wiederverwendet und an beliebiger Stelle auf der Website platziert werden kann. Wenn Sie eine \u00c4nderung an der Komponente vornehmen, werden alle Instanzen automatisch auf allen Seiten aktualisiert. Diese Anleitung [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":17709,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[155,177],"tags":[],"class_list":["post-17779","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-cms","category-webflow"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/posts\/17779","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/comments?post=17779"}],"version-history":[{"count":1,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/posts\/17779\/revisions"}],"predecessor-version":[{"id":17784,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/posts\/17779\/revisions\/17784"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/media\/17709"}],"wp:attachment":[{"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/media?parent=17779"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/categories?post=17779"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/tags?post=17779"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}