Webflow und Flyo: So einfach funktioniert es 💪

Webflow eignet sich hervorragend, um selbstständig ansprechende Webseiten oder Landing Pages zu erstellen. Neben unzähligen Design Vorlagen (Templates) bietet Webflow einen visuellen Editor und ist damit auch für Nicht-Programmierer geeignet. In diesem Blogbeitrag schauen wir uns an, wie wir in wenigen Minuten Content aus Flyo mit Webflow synchronisieren. Wir verwenden dazu Inhalte aus unserem imaginären Flyo Zoo.

Bevor wir starten

Zusätzlich zu unserem Flyo Account benötigen wir einen Webflow Account. Sobald wir einen Account registriert und freigeschaltet haben, rufen wir das Webflow Dashboard auf und erstellen ein neues Projekt (New Project). Nachdem wir das Projekt (die eigentliche Webseite) erstellt haben, kehren wir zum Dashboard zurück. Damit wir Inhalte von ausserhalb (in unserem Fall von Flyo) in unser Webflow Projekt synchronisieren können, müssen wir für unser Projekt schliesslich noch den CMS Plan aktivieren. Sobald wir den CMS Plan für unser Projekt aktiviert haben, können wir mit der Synchronisation von Inhalten starten.

Tipp: Um die Integration zu testen, können wir ein kostenloses Template wählen und ohne CMS Plan beginnen. In der kostenlosen Version sind die Anzahl CMS Inhalte begrenzt, was für den Test aber keine Rolle spielt. Den CMS Plan für das Projekt können wir jederzeit zu einem späteren Zeitpunkt aktivieren.

Legen wir los

1 - Definieren, welche Inhalte wir synchronisieren möchten

Als erstes überlegen wir uns, welche Inhalte wir auf unserer Webflow Webseite benötigen werden. In unserem Beispiel möchten wir Tiere aus unserem virtuellen Flyo Zoo mit Webflow synchronisieren und auf der Webseite anzeigen. Unsere Tiere haben wir bereits in Flyo erfasst uns in einem Content Pool namens "Alle Tiere" organisiert.

Für jedes Tier gibt es in unserem Content Template "Tiere" folgende Informationen (Felder):

• Name (Textfeld)
• Slug (Textfeld)
• Teaser (Textfeld)
• Beschreibung (Textfeld)
• Bild
• Klasse (Dropdown-Auswahl)
• Klimazone (Dropdown-Auswahl)

Die Content Templates deiner Flyo Cloud findest du in der Flyo Hauptnavigation unter Organisation / Content Templates. Um die einzelnen Felder zu sehen, klicke auf ein Template und anschliessend auf Bearbeiten / Felder.

2 - Eine CMS Collection in Webflow anlegen

Bevor wir Flyo mit Webflow verbinden können, müssen wir bei Webflow das gleiche Content Template "Tiere" mit den gleichen Feldern anlegen. In Webflow werden diese Content Templates „CMS Collections“ genannt. Hierzu öffnen wir unser Webflow Projekt und klicken in der Navigation links auf CMS Collections und dann auf „Create New Collection“. Wir befüllen die Maske mit den nötigen Informationen und fügen die einzelnen Felder für die Collection hinzu. In unserem Beispiel also je ein Feld für Name, Slug, Teaser, Beschreibung, Bild, Klasse und Klimazone.

Hinweis: Auch wenn es sich bei der Klasse und der Klimazone in Flyo um eine Dropdown-Auswahl handelt, legen wir das Feld als Textfeld an. Der Grund dafür ist, dass wir später nur einen Wert aus dem Dropdown-Menü synchronisieren werden, nämlich die Klasse, welcher ein einzelnes Tier zugeordnet ist.

Wenn wir alle Felder erstellt haben, klicken wir auf „Create Collection“. Die CMS Collection ist jetzt bereit für die Anbindung an Flyo.

3 - Die Flyo Integration erstellen

Wir wechseln zur Flyo Oberfläche und wählen über den grünen Hinzufügen-Button unten rechts „Integration“.

Bei "Art der Integration" wählen wir Webseite und anschliessend Webflow. Im nächsten Schritt bestimmen wir den Content Pool, der die gewünschten Inhalte enthält. In unserem Beispiel ist das der Content Pool, der alle erfassten „Tiere“ in unserer Flyo Organisation enthält. Wir geben der Integration einen Titel und ordnen sie einer Integrationsgruppe, in unserem Beispiel der Gruppe "Zoo Webseite" zu. Mit einem Klick auf Speichern wird die Integration erstellt und wir können mit der Konfiguration, also der eigentlichen Verbindung von Flyo zu Webflow, fortfahren.

4 - Integration konfigurieren

Im ersten Schritt "Webflow Account" verbinden wir das Webflow Projekt mit Flyo. Dazu klicken wir auf den grünen Hinzufügen-Button. Es öffnet isch ein neues Fenster (Pop-Up Blocker ausschalten) zur Auswahl des gewünschten Webflow Projektes. Wir klicken auf „Authorize Application“ und schliessen das Fenster, sobald wir dazu aufgefordert werden. Nun können wir auf das Aktualisieren Icon klicken und die Verbindung aus dem Dropdown-Menü auswählen. Im Schritt "Webflow Projekt / Webseite" wählen wir unser Webflow Projekt aus. Nun folgt der wichtigste Teil, das Verknüpfen (Mapping) der Felder aus Flyo mit den Feldern der angelegten CMS Collection in Webflow.

Weil wir nur einen Content Pool ausgewählt haben, müssen wir in diesem Beispiel nur die Felder für den Content Pool "Tiere" verknüpfen. Dazu wählen wir für jedes Feld der CMS Collection (links) die passende Information aus Flyo (rechts).

Sobald wir alle Felder verknüpft haben, klicken wir auf Speichern. Flyo übernimmt nun das Programmieren der Verbindung für uns. Das kann je nach Datenmenge einen Moment dauern. Sobald alles synchronisiert wurde, erscheint eine entsprechende Meldung. Wir wechseln zu Webflow und laden die Seite neu. Im Menü „CMS Collection“ werden nun die Inhalte angezeigt und von nun an automatisch synchronisiert.

5 - Integration aktivieren / deaktivieren

Wir können die Integration jederzeit im Dashboard der Integration aktivieren/deaktivieren (Online/Offline schalten). Wenn wir die Integration deaktivieren, werden keine Inhalte mehr in der CMS Collection von Webflow aktualisiert bis wir die Integration wieder aktivieren.

Wie geht es jetzt weiter?

Wir haben auf einfache Art und Weise Inhalte aus Flyo (Content Pools) mit Webflow (CMS Collections) synchronisiert. Der nächste Schritt ist nun die Verwendung der Inhalte auf der Webflow Webseite. Diese können auf zwei Arten verwendet werden:

• Als Listen (Collection Lists): Listen werden verwendet, um Übersichtsseiten zu erstellen. In unserem Beispiel könnte das eine Seite sein, die alle Tiere im Zoo auflistet. Zum Tutorial in der Webflow University (in Englisch)
• Als einzelne Seiten (Collection Pages): Einzelne Seiten werden verwendet, um Detailseiten zu einzelnen Inhalten zu erstellen. In unserem Beispiel wäre das eine Seite mit den Informationen zu einem einzelnen Tier. Jedes Mal, wenn wir ein neues Tier in Flyo hinzufügen und dieses mit Webflow synchronisiert wird, wird automatisch eine Seite dafür erstellt. Collection Pages funktionieren wie Vorlagen - das Layout und Design der Collection Page gilt für alle automatisch erstellten Einträge (Tiere). Zum Tutorial in der Webflow University (in Englisch)

Vorteile

• Inhalte zentral verwalten und auf deinen Webseiten (z.B. Webflow Webseiten ausspielen)
• Webflow Webseite ist ein effizienter Weg, um ansprechende Webseiten mit kleinem Budget zu erstellen.
• Webflow wird stetig weiterentwickelt; die Technologie deiner Webseite bleibt aktuell.

Kosten

Neben deinem Preisplan für die Flyo Cloud musst du für eine Webflow Webseite folgende Kosten kalkulieren:

• Webflow CMS Plan (ca. CHF 15 pro Monat, abhängig vom Wechselkurs)
• Template (einmalig zwischen kostenlos und ca. CHF 100)