Webflow Logic – Websites automatisieren ohne Code
Willkommen bei Webflow Logic – einem Gamechanger, der die Funktionsweise von Websites revolutioniert. Stell dir eine Welt vor, in der komplexe Prozesse automatisiert werden, ohne eine einzige Zeile Code zu schreiben. Genau das bietet Webflow Logic.
Die wichtigsten Erkenntnisse:
- Webflow Logic ist eine Funktion, die No-Code-Fähigkeiten erweitert und Automatisierung auf Basis von Triggern ermöglicht.
- Logic vereinfacht die Erstellung von Workflows ohne Programmierung und erweitert die Funktionalität von Webflow.
- Webflows einzigartige Funktionen wie Designer, CMS, Editor und Interactions machen es zu einer herausragenden Plattform für die Webentwicklung.
Logic Flow Integration in Webflow
Im Rahmen der No-Code-Konferenz 2021 angekündigt, führt Logic Flow von Webflow ein bahnbrechendes Konzept ein: Jede Person zu befähigen, Aufgaben mit der Präzision von Software-Ingenieuren auszuführen. Stell dir das wie das Festlegen von Regeln für die Aktionen deiner Website vor – Trigger führen zu Aktionen, alles von dir definiert.
Ab dem 13. September 2022 konnte die Community Logic-Tester beantragen, aufgrund der Beta-Veröffentlichung von Logic. Jetzt können wir den Logic Flow nutzen, indem wir visuell dargestellte Flows (automatisierte Workflows) erstellen, die festlegen, was und wann eine autonome Aktion ausgeführt werden soll, wenn ein Lead über verschiedene Website-Formulare eingeht.
Die große Stärke besteht darin, dass alles innerhalb der Webflow-Plattform geplant und abgewickelt wird, ohne dass Drittanbieter-Software wie z.B. Zapier installiert werden muss. Das ist absolut mächtig für jeden, der das wahre Potenzial eines Logic Flows vollständig versteht.
Wie Logic Flow wirklich funktioniert
Stell dir eine Welt vor, in der alle Funktionen deiner Website – von der Kundenbindung über das Verwalten von Inhaltsaktualisierungen bis hin zu Vertriebs-Leads – direkt in Webflow optimiert werden. Logic Flow macht das zur Realität und macht externe Software überflüssig.
Das Ziel der Erstellung eines Logic Flows ist es, Nutzern die Möglichkeit zu geben, das Verhalten von Verbrauchern zu kontrollieren und aufzuzeichnen, diese Aktionen mit ihrem Content-Management-System zu synchronisieren und Websites und Anwendungen plattformübergreifend zu verbinden.
Ob du Vertriebs-Leads für dein Unternehmen generierst oder E-Mail-Newsletter-Anmeldungen sammelst – Formulare sind eines der wirksamsten Tools, die jede Website haben kann.
Der Kerngedanke hinter Logic Flow ist die Erfassung von Nutzeraktionen, deren Synchronisierung mit dem Content-Management-System und die nahtlose Verbindung von Anwendungen untereinander. Es arbeitet nach dem „Wenn-das-dann-das“-Prinzip und automatisiert webbasierte Prozesse mühelos.
Mit anderen Worten kann Logic Flow:
Aufgaben automatisieren: Zum Beispiel eine Dankeschön-E-Mail versenden, wenn jemand ein Formular ausfüllt, oder verschiedene Inhalte anzeigen, basierend darauf, wer deine Website besucht.
Deine Website verbinden: Mit anderen Diensten wie E-Mail-Marketing-Plattformen oder Datenbanken.
Deine Website intelligenter machen: Durch das Reagieren auf Nutzerinteraktionen und das Ändern von Dingen basierend auf deren Verhalten.
Es gibt verschiedene Arten von Formularen, aber wir werden versuchen, dies anhand eines Lead-Generierungsformulars zu demonstrieren.
Logic Flow am Beispiel eines Lead-Generierungsformulars erklärt
Stell dir ein Lead-Generierungsformular in Webflow vor, das sich basierend auf den Benutzerauswahlen anpasst. Hier entfaltet sich die Magie von Logic Flow – spezifische Auswahlen lösen vordefinierte Aktionen aus und führen die Nutzer durch ein individuell angepasstes Erlebnis.
Bis wir zu den einzelnen Feldern mit einer Dropdown-Auswahl scrollen, wäre dieses Formular recht unkompliziert. Diese Dropdown-Optionen sind die Felder, die anzeigen, dass Logic Flow im Formular implementiert wird.
Bei der Auswahl, in unserem Fall der „Unternehmensgröße“, ist dies die Interaktion, die die Trigger bestimmt und die nachfolgenden Aktionen im Logic Flow hinter dem Formular aktiviert.
Wie wir sehen, gibt es vier Optionen, die in diesem Feld aufgelistet sind, was bedeutet, dass die Logik so konzipiert ist, dass es mindestens 4 Unterabschnitt-Aktionsflows gibt. In diesem Fall aktivieren diese vier Optionen, abhängig von der im Formular getroffenen Auswahl, automatisch die Bedingung im Hintergrund des Logic-Workflow-Designs.
Diese Bedingung muss eingegrenzt sein und eine logische Verbindung mit Triggern im Formular haben. Die IF-Bedingung führt immer zu einer von zwei Aktionen: Wahr oder Falsch.
Wenn eine Formularoption ausgewählt wird, greift die IF-Bedingung ein und leitet die folgende Aktivität zur Wahr- oder Falsch-Aktion weiter. Der Prozess wird auf diese Weise durch den Aktionsfluss zu seinem beabsichtigten Ziel und nächsten Schritt geführt.
Wie wir in dem oben dargestellten Beispiel sehen können, legen wir je nach aktivierter Bedingung vorher fest, welche E-Mail an die jeweilige Anfrage weitergeleitet werden soll. Am Ende wird der Logic Flow mit der abschließenden E-Mail mit derselben Nachricht geschlossen, die als letzte Aktion an die Empfänger gesendet werden kann.
Wie erstellt man einen Flow über Webflow Logic?
Beim Erstellen eines Flows gibt es viele Details, und dafür benötigst du einen längeren und umfassenderen Leitfaden, der bei der Webflow University bereitgestellt wird. Dennoch geben wir dir hier 7 Schritte, die du beim Erstellen eines Logic Flows für die Bedürfnisse deiner Website im Kopf haben solltest.
Hier sind die Schritte, wie du Flows in Webflow Logic erstellst:
- Greife auf das Logic-Symbol in der linken Symbolleiste zu, um das Logic-Panel zu öffnen. Klicke dort auf den Reiter „Flows“, um allgemeine Informationen über deine Flows zu erhalten, und nutze den Flow-Editor, um Flows zu erstellen, zu verwalten und zu testen.
- Klicke auf Neuer Flow, um den Flow-Editor aufzurufen.
3. Gib deinem neuen Flow einen Namen und eine Beschreibung, um den Zweck deines Flows zu verdeutlichen und ihn von anderen Flows zu unterscheiden.
4. Wähle einen Trigger aus und klicke dann auf Aktionen und Hilfsmittel, um sie an die Verbindungspunkte auf der Flow-Editor-Leinwand zu ziehen.
5. Während du deinen Flow erstellst, erscheint auf jedem Block ein gelbes „Schraubenschlüssel“-Symbol, bis die Block-Einstellungen konfiguriert sind. Sobald die Block-Einstellungen konfiguriert wurden, wird das gelbe „Schraubenschlüssel“-Symbol durch ein grünes „Häkchen“-Symbol ersetzt.
6. Du kannst die Blöcke in deinem Flow neu anordnen, indem du sie an verschiedene Verbindungspunkte klickst und ziehst.
7. Du kannst Blöcke auch aus deinem Flow löschen, indem du mit der rechten Maustaste auf den Block klickst und „Block entfernen“ anklickst, oder indem du den Block auswählst und auf deiner Tastatur die Entfernen-Taste drückst.
Dein Flow kann Trigger, Aktionen und Bedingungen enthalten. Es gibt jedoch Grenzen, wie viele Flows du pro Website einbinden kannst.
Wenn du mehr als 20 Flows hinzufügst, musst du einen älteren Flow entfernen, um einen neuen hinzuzufügen. Andererseits kannst du bis zu 50 bedingte Blöcke in einem einzigen Flow einbinden.
Wenn du mehr darüber erfahren möchtest, wie du Trigger hinzufügst, Elemente umbenennst, CMS-Elemente erstellst und viele andere Flow-Optionen erkundest, schau dir diesen ausführlichen Leitfaden auf der Webflow University an.
Die Stärken von Webflow selbst
Schätzungen zufolge kann weniger als 0,5 Prozent der Weltbevölkerung programmieren. Alle großen Ideen technologischer Innovation in Wirtschaft, Gesundheitswesen, Business und anderen Branchen werden möglicherweise durch diese kleine Gruppe von Software-Ingenieuren realisiert.
Angesichts dieser Tatsache sowie des Versprechens umfassender technologischer, industrieller, wirtschaftlicher und anderer Verbesserungen durch Software-Engineering suchte Webflow die Herausforderung des Mangels an qualifizierten Programmierern zu überwinden.
WIE?
Sie haben die Web-Anwendungsbranche mit all den erstaunlichen Funktionen, die sie seit der Gründung ihrer außergewöhnlichen No-Code-Plattform eingeführt haben, auf ein neues Level gehoben.
Zu den herausragenden Funktionen gehört der einzigartige Designer, der HTML5, CSS3 und JavaScript durch eine flüssige, leicht navigierbare visuelle Leinwand ersetzt und es ermöglicht, das Design in ein gut strukturiertes und responsives Produkt umzuwandeln.
Als nächste großartige Funktion von Webflow folgt das CMS, das für die Nutzung durch Designer, Redakteure, Entwickler und Content-Strategen geeignet ist.
Wenn es darum geht, den Inhalt einer Website zu verwalten, erweist sich das oft als frustrierend und zeitaufwändig aufgrund der komplizierten Dashboards.
Durch ihren genialen Editor hat Webflow erfolgreich dafür gesorgt, den Prozess des Schreibens und Bearbeitens von Inhalten direkt auf der Website zu vereinfachen und die Notwendigkeit zu umgehen, dass andere Teammitglieder im Back-End-CMS eingreifen müssen.
Das Erstellen neuer Inhalte und deren Veröffentlichung erfordert nur das Einfügen deiner Inhalte und das Drücken einer einzigen Schaltfläche, um sie live auf deiner Website zu veröffentlichen.
Interactions ist eine weitere Funktion, in der Webflow glänzt. Die Interaktions- und Animations-Fähigkeiten von Webflow ermöglichen es Designern, reichhaltige, ausgefeilte Animationen zu erstellen, ohne jemals den zugrunde liegenden Code berücksichtigen zu müssen.
Parallax-Animationen, Bewegung an den Scroll-Fortschritt gekoppelt, Micro-Interactions, mehrstufige Animationen, Nachbearbeitungseffekte und Lottie-Animationsintegrationen sind nur einige der Interaktionen, die in Webflow erstellt werden können – immer, ohne das </> zu öffnen.
Zum Schluss
Webflows primäres Ziel ist es, No-Code-Creators zu unterstützen, indem ihnen die Fähigkeit gegeben wird, ihre Ideen zu artikulieren, ohne auf Drittanbieter-Eingriffe angewiesen zu sein – in diesem Fall Programmierer und Entwickler im Allgemeinen.
Für Begeisterte von No-Code ist Webflow mit seinen herausragenden bestehenden Funktionen und mit Logic sowie anderen fantastischen kommenden Features die erste Wahl.
