Webflow CMS: Inhalte bei bestimmten Kollektionsseiten ausschließen – 2 Wege

Ich zeige dir, wie du bestimmte Sektionen auf deiner Webflow CMS-Kollektionsseite effektiv ausschließen kannst und zwar so, dass sie auch nicht im Code gerendert werden und auch nicht von Suchmaschinen und Screenreader erfasst werden können. Meistens löst man das über die Funktion Conditional Visibility. Leider wird dabei ein Element nur ausgeblendet und trotzdem im Quellcode geschrieben. Entdecke einen cleveren Workaround, um Sektionen als Komponenten zu nutzen und ihre Sichtbarkeit individuell über das CMS zu steuern.

Quick Tipp: Webflow „Conditional Visibility” die nicht im Code rendert

In diesem Video zeige ich dir, wie du bestimmte Sektionen auf deiner CMS-Kollektionsseite in Webflow ausschließen kannst. Dabei geht es nicht nur darum, dass sie im Code nicht gerendert werden, sondern auch von Suchmaschinen und Screen Readern nicht erfasst werden sollen. Wir werden uns die Probleme anschauen, die bei Webflow auftreten können und wie du sie umgehen kannst.

Häufig hast du sicherlich schon die Situation gehabt, dass du auf einer CMS-Kollektionsseite Bereiche hast, die auf bestimmten CMS Seiten nicht angezeigt werden sollen. Hier habe ich zum Beispiel einen Farbvergleich auf meiner Seite, der auf den meisten Seiten sichtbar sein soll. Aber es gibt eine Seite auf der der Farbvergleich ausgeschlossen werden soll.

Schauen wir uns jetzt an, wie wir das in Webflow umsetzen können. Ich habe eine Sektion mit dem Namen "Subproducts", die den Farbvergleich enthält. In den Einstellungen habe ich eine bedingte Sichtbarkeit festgelegt (Conditional Visibility). Die bedingte Sichtbarkeit wird angewendet, wenn ein Element aus der Kollektion zu einer bestimmten Kategorie gehört. Ist das der Fall, wird sie auf der Seite ausgeblendet. Das Problem dabei ist, dass dies im Quellcode immer noch geladen wird. Webflow stellt diese Sektion nur auf den CSS Befehl „display:none” Dies wirkt sich auf die Leistung aus, besonders wenn wir viele Produkte haben. Derzeit ist die bedingte Sichtbarkeit eine der Haupt-Möglichkeiten dies umzusetzen.

Allerdings habe ich zufällig eine weitere Möglichkeit entdeckt. Ich habe eine Sektion zu einer Komponente umgewandelt. Innerhalb der Komponente können wir die Sichtbarkeitseinstellungen bearbeiten. Wir können eine neue Eigenschaft namens "Sichtbarkeit" erstellen. Dadurch haben wir die Kontrolle über die Sichtbarkeit der Komponente und wo diese ausgeblendet werden soll. Damit die Komponente nur auf einer Kollektionsseite unsichtbar ist, müssen wir eine Verknüpfung zur CMS Kollektion herstellen. Dazu fügen wir ein neues Feld mit einem Toggle / Switch zur CMS-Kollektion hinzu. Jetzt können wir festlegen, dass die Komponente nur dann sichtbar ist, wenn der Schalter aktiviert ist.

Dieser Workaround ermöglicht es uns, die Komponente zu nutzen, ohne dass sie im Code gerendert wird. Leider können wir derzeit keine Komponente erstellen, wenn wir CMS-Inhalte darin haben. Das ist etwas, das voraussichtlich im nächsten Jahr, 2024, behoben wird. Bis dahin ist dies jedoch eine gute Lösung.