Webflow CMS 101 - Eine Einführung in das Webflow CMS

Webflow ist nicht nur ein mächtiges Werkzeug zur Erzeugung von statischen und klassischen Webseiten, sondern kann auch als Content-Management-System verwendet werden. Wir möchten Ihnen den Webflow CMS und seine Vorteile umfangreich vorstellen, Ihnen die verschiedenen Möglichkeiten der einfachen Nutzung präsentieren und eine umfangreiche Einführung in das Thema geben.

‍

<h2 id="Was ist das Webflow CMS" data-headline="Was ist das Webflow CMS?"><span class="first_id_number">1.</span>Was ist das Webflow CMS überhaupt?</h2>

‍

Der Web-Editor Webflow ist nicht nur in der Lage statische Webseiten der unterschiedlichen Größe einfach zu erstellen, sondern bietet Ihnen auch die Möglichkeit, als Content-Management-System genutzt zu werden. Somit können Sie nicht nur die Inhalte unabhängig vom Design erstellen, sondern auch mit mehreren Autoren an einer Website arbeiten, ohne dass die anderen Autoren das Design der Beiträge verändern können. Besonders für Blogs, aber auch für Nachrichten-Seiten ein erheblicher Vorteil. Dank der intuitiven Bedienung und der Festlegung der einzelnen Inhaltsfelder durch den Administrator behalten Sie jederzeit die volle Kontrolle über alle Inhalte und das gesamte Design der Website.

‍

<h2 id="Vorteile-vom-Webflow-CMS" data-headline="Vorteile vom Webflow CMS"><span class="first_id_number">2.</span>Welche Vorteile bietet das Webflow CMS?</h2>

‍

Während die meisten am Markt erhältlichen CMS Systeme den Nutzern nur innerhalb bestimmter Grenzen Freiheiten einräumen und oftmals komplex im Design sind, geht Webflow CMS einen anderen Weg. Da Webflow auch zur Gestaltung statischer Webseiten, Funnels und Landingpages genutzt werden kann, bietet die Erweiterung mit Webflow CMS somit maximale Freiheit in Design und inhaltlicher Ausgestaltung. Zudem müssen Sie nur ein System einmal lernen und können somit mit Webflow alle Seiten Ihrer Wahl erstellen.

Da Webflow CMS zudem mit einem visuellen Editor arbeitet, können Sie die Erstellung der Inhalte und des Designs intuitiv durchführen und sehen sofort alle Änderungen auf einen Blick. Optimal, wenn man nicht tief in die Bereiche HTML und CSS einsteigen, aber dennoch eine professionell programmierte Webseite haben möchte. Mit Webflow CMS erstellen Sie flexibel Ihre Webseiten der Wahl und können anderen Usern erlauben neue Inhalte exakt nach Ihren Design-Vorgaben zu erstellen. Denn dank des einfachen Rechte-Managements bleiben Änderungen am Design der Seite und am gesamten Erscheinungsbild Ihnen vorbehalten.

‍

Sauber programmiert, ohne Programmierkenntnisse

Eine Seite selbst zu programmieren ist mit erheblichem Aufwand verbunden. Viele Fallstricke können hier zu Problemen führen. Ein bereits bestehendes CMS zu nutzen, schränkt allerdings aufgrund fehlender Funktionen oder Designs häufig ein. Mit Webflow CMS steht die optimale Lösung zur Verfügung. Denn über den einfachen visuellen Editor lässt sich eine Seite oder ein Design einfach und ohne großen Aufwand erstellen und anschließend an die verschiedenen Seiten übertragen. Wichtig ist vor allem, dass Webflow CMS einen validen HTML- und CSS-Code erzeugt, welcher unter anderem auch von den Crawlern der Suchmaschinen sauber ausgelesen werden kann. Dies bietet vor allem bei der Suchmaschinenoptimierung enorme Vorteile und kann helfen, das Ranking nachhaltig zu verbessern.

Wer keine Programmierkenntnisse besitzt, kann dennoch mit Webflow CMS effektive und gut nutzbare Seiten erstellen. Wer zusätzlich noch in HTML und CSS programmieren kann, öffnet mit Webflow CMS nochmals weitere Türen und kann viele Funktionen noch feiner einstellen und optimieren. Webflow CMS ist ein vollständiges Content-Management-System mit allen notwendigen Facetten.

Direkte Visualisierung im laufenden Prozess

Durch den einfachen Editor können Sie alle Veränderungen im laufenden Prozess beobachten und bewerten. Das sorgt unter anderem dafür, dass Sie viel einfacher unterschiedliche Varianten eines Designs ausprobieren können, was unter anderem die Entscheidungsfindung deutlich beschleunigt. Denn eine Repositionierung von Elementen ist in Webflow CMS nicht mit großem Aufwand verbunden, sondern kann mit wenigen Mausklicks durchgeführt werden. Da das Webflow CMS zudem streng logisch aufgebaut ist, können alle Elemente intuitiv erlernt werden. Mit ein wenig Übung geht die Gestaltung in Webflow CMS beinahe von selbst.

Individuell anpassbar an jedes Design

Sie können bei Webflow CMS nicht nur das Design beliebig anpassen, sondern es auch ganz einfach ändern und variieren. Diese Änderungen werden an alle damit verbundenen Unterseiten weitergeleitet, sodass die gesamte Website weiterhin wie aus einem Guss wirkt. Egal ob Sie über Webflow CMS ein Nachrichtenportal erstellen, einen Blog für Ihr Unternehmen ins Leben rufen oder Ihr Portfolio präsentieren möchten. Passen Sie mit Webflow CMS alles an neue technische Lösungen oder eine veränderte Marktumgebung an und sorgen Sie somit für die notwendige Variabilität. Dank des enorm breitgefächerten Funktionsumfangs von Webflow CMS und auch dank der regelmäßigen Updates und Neuerungen bleiben Sie mit Ihrer Webseite technisch immer auf dem neuesten Stand.

‍

<h2 id="Das Webflow CMS" data-headline="Das Webflow CMS"><span class="first_id_number">3.</span>Das Webflow CMS - weg von statischen Seiten</h2>

‍

Statische Seiten können sinnvoll und hilfreich sein, wenn nur einzelne Inhalte angezeigt werden sollen, welche sich kaum verändern. Landingpages sind beispielsweise typische Seiten. Auch Mikrowebsites und digitale Visitenkarten sind in der Regel eher statisch. Mit Webflow CMS steht Ihnen jedoch ein Werkzeug zur Verfügung, mit dem Sie sowohl statische als auch dynamische Seiten und Inhalte erstellen können. Der Vorteil liegt vor allem darin, dass Sie sich nicht an eine neue Entwicklungsumgebung gewöhnen müssen, sondern in Webflow CMS alle Funktionen in einem Dashboard finden. Dank des eingängigen "What you see is what you get"-Prinzips profitieren Sie auch ohne technisches Wissen von den vielen Vorteilen bei Webflow CMS.

<div class="rtf-blog-element"><div class="icon_area"><img src="https://assets-global.website-files.com/620a7cdcd7f0ed9792867991/627c29a301fa389fd8f12485_info-icon.svg" loading="lazy" alt=""><p class="rtf-blog-heading cc-tip">Good to know: </p></div><p>Durch das "What you see is what you get" Prinzip, profitiert man auch ohne technisches Wissen von den vielen Vorteilen des Webflow CMS.</p></div>

‍

<h2 id="Webflow CMS Gruende" data-headline="Gründe für das Webflow CMS"><span class="first_id_number">4.</span>Warum auf das Webflow CMS setzen?</h2>

‍

Selbstverständlich gibt es viele verschiedene Content Management Systeme auf dem Markt. Doch wer neben solchen Seiten auch statische Seiten aufbauen möchte, muss dann weitere Programme an die Hand nehmen und sich gegebenenfalls neu einarbeiten. Ganz im Gegensatz dazu bietet Webflow CMS alle Möglichkeiten aus einer Hand. Über ein Dashboard können die verschiedenen Projekte erstellt, verändert und verwaltet werden. Je nach Nutzungsplan können auch mehrere Nutzer an einem Projekt arbeiten oder dieses nach Vorgaben mit Inhalten füllen.

Zudem basiert Webflow CMS auf dem effektiven Prinzip eines Baukastens, welcher es dem Anwender erlaubt, alle Details vollständig zu kontrollieren. Je affiner Sie in den Bereichen Grafikgestaltung und auch HTML-Programmierung sind, desto stärker werden Sie bemerken, wie praktisch die Herangehensweise bei Webflow CMS ist. Sie können jedes Element individuell anpassen und erhalten dennoch eine Seite mit einem klar lesbaren HTML- und CSS-Code, welche unter anderem für die SEO-Optimierung und die Crawler der Suchmaschinen optimiert ist. Sprechende URLs, eine klare Seitenstruktur und eine hohe Usability zeichnen die Seiten aus, welche mit Webflow CMS erstellt wurden.

‍

<h2 id="Erste Schritte mit Webflow" data-headline="Erste Schritte mit Webflow"><span class="first_id_number">5.</span>Erste Schritte - so beginnen Sie mit dem Webflow CMS zu arbeiten</h2>

‍

Damit Sie die Webflow CMS-Funktionen nutzen können, müssen einige Schritte beachtet werden. Denn Webflow bietet Ihnen die Möglichkeit dynamische Inhalte in verschiedenen Bereichen zu nutzen. Sie können sich für Blogs, Portfolios und Nachrichten-Seiten eigene Designs und Vorlagen erstellen, welche im Anschluss dauerhaft von den Nutzern verwendet werden können. Wir zeigen Ihnen, welche Schritte notwendig sind, damit Sie in Zukunft schnell und einfach neue Inhaltsseiten in Ihrem Webflow CMS erstellen können. Dafür beginnen wir im Webflow Editor am unteren linken Rand, wo alle CMS-Inhalte aufgelistet sind. Egal ob Sie ein System für Blogposts, für Nachrichten oder für ein Portfolio erstellen möchten, hier nimmt alles seinen Ausgang. Und zwar mit dem Erstellen einer Kollektion.

Eine Kollektion erstellen - Sammelpunkt für CMS-Inhalte

Der erste Schritt zu dynamischen Inhalten sind sogenannte Kollektionen. Dies ist wichtig, da die Kollektion wie eine Sammlung arbeitet. Wir können für eine Kollektion ein festes Design anlegen und auch, welche Inhalte in dieser Kollektion angezeigt werden sollen. Dies ist wichtig, da einige Webseiten nicht nur einen Typ dynamischer Inhalte anzeigen möchten, sondern unterschiedliche. Somit können wir dies über die Kollektionen sehr einfach trennen und organisieren. Webflow CMS stellt und sogar Vorlagen für verschiedene Kollektionen zur Verfügung, die wir einfach anpassen können. Vorlagen gibt es in Webflow CMS unter anderem für Blogbeiträge, Speisekarten, Nachrichten oder Events. Wichtig ist, dass Sie jede einzelne Kollektion individuell benennen, um diese im späteren Verlauf leichter finden und zuordnen zu können.

In jeder Kollektion können Sie nun festlegen, welche Felder in der Kollektion im Editor angezeigt werden sollen und welche Felder beispielsweise verpflichtend ausgefüllt werden müssen. Somit können Sie unter anderem festlegen, welche Elemente später im Design in jedem Fall vorhanden sein müssen, damit das einheitliche Erscheinungsbild gesichert wird. Zudem können Sie zu den einzelnen Feldern Hilfe-Texte erstellen, was es neuen Nutzern Ihres Webflow CMS später einfacher macht, neue Inhalte im Editor zu erstellen. Sie haben in den Kollektionen die völlige Freiheit, alle Einstellungen vorzunehmen. Von der Zeichenbegrenzung bis zu Pflichtfeldern. Nehmen Sie sich in jedem Fall ausreichend Zeit, da hier später zwar Änderungen möglich sind, diese aber nicht für ältere Beiträge automatisch erweitert werden. Daher ist es sinnvoll, die notwendigen Felder und Vorgaben von Beginn an strukturiert aufzubauen.

Sind Sie mit allen Einstellungen einverstanden, können Sie mit einem Klick im oberen rechten Bereich des Webflow CMS diese Kollektion einfach erstellen. Diese kann nun im Menü auf der linken Seite ausgewählt werden.

Die eigentlichen Inhalte erstellen - nutzen Sie den Editor im Webflow CMS

Klicken wir nun auf die eben erstellte Kollektion, sehen wir alle vorhandenen Inhalte in dieser Kollektion aufgelistet. Anfangs sind noch keine zu finden. Diese können wir mit einem Klick auf "Neue Inhalte" einfach erstellen. Das Webflow CMS bietet uns zudem die Möglichkeit, Beispielinhalte schnell und einfach zu generieren. Diese werden nach den Vorgaben mit Blindtext und Beispielbildern gefüllt, damit wir im Anschluss am eigentlichen Design arbeiten können. Diese Inhalte lassen sich auch bearbeiten oder nach Abschluss der Arbeiten löschen. Somit können Sie mittels Webflow CMS sehr schnell die Arbeiten durchführen, ohne selbst neue Inhalte zu Beginn generieren zu müssen. Optimal, wenn Sie nur das Design festlegen und beispielsweise Ihre Redaktion oder Ihre Mitarbeiter später mit dem Einpflegen der Inhalte beauftragt werden.

Die Darstellung generieren - legen Sie das Design für alle Inhalte fest

Nachdem nun Kollektion und Inhalte erstellt sind, geht es darum, dieses Design zu verpassen. Denn dies ist beim Webflow CMS der wichtigste Punkt. Sie können ein Design wie bei einer statischen Seite in Webflow CMS erstellen und diese dann mit dynamischen Inhalten füllen. Dafür nutzen Sie im Webflow CMS Sektionen und Container, um die verschiedenen Inhalte zu positionieren. Doch das wären erst einmal statische Inhalte. Um diese Inhalte im Webflow CMS dynamisch zu gestalten, müssen Sie bei den einzelnen Elementen angeben, welche Inhalte der Kollektion in diesen Feldern angezeigt werden sollen. Im Feld für die Überschrift wird also die Verknüpfung zum Überschriften-Feld in der Kollektion geschaffen.

Sie erstellen also im Webflow CMS ein Design für eine Kollektion, welches auf jeden Inhalt und jeden Eintrag innerhalb der Kollektion angewendet wird. Aus diesem Grund müssen Sie zu Beginn genau überlegen, welche Felder in der Kollektion vorhanden sein sollen, um diese alle in Ihrem Design unterzubringen. Schön ist, dass Sie auch im Nachhinein noch das Design verändern können und diese Veränderungen einfach auf alle Inhalte der Seite übertragen werden. Hier zeigen sich die enormen Vorteile von Webflow CMS nochmals deutlich.

‍

‍

<h2 id="Fazit" data-headline="Fazit"><span class="first_id_number">6.</span>Ob Landingpage, Verkaufsfunnel oder Blog - das Webflow CMS ist ein mächtiges Werkzeug</h2>

‍

Im Gegensatz zu vielen anderen CMS-Systemen bietet Ihnen Webflow CMS den Vorteil, dass Sie nicht nur die Felder des Editors selbst anpassen können, sondern auch volle Kontrolle über das Erscheinungsbild der Einträge haben. Sie müssen also keine Templates übernehmen, anpassen und individuell zuschneiden, sondern können dank des intuitiven Systems schnell und einfach das Design bestimmen. Dabei stehen Ihnen sowohl grafische als auch mathematische Einstellungsmöglichkeiten zur Verfügung, welche es besonders einfach machen, Designs und Inhalte perfekt miteinander zu verbinden. Im Gegensatz zu einem üblichen Homepage-Baukasten erlaubt es Ihnen, Webflow CMS alle Werte exakt einzustellen und diese mit einer sauberen und klar erkennbaren Programmierung zu hinterlegen. Egal ob Sie komplexe Menüs, besondere Designelemente oder interaktive Inhalte planen, im Webflow CMS können Sie alle Möglichkeiten mit nur wenigen Klicks ausloten.

<div class="rtf-blog-element cc-filled"><p class="rtf-blog-heading cc-white">Sie möchten mehr über das Thema Webflow CMS erfahren oder Ihre eigene Website professionell erstellen? Dann kontaktieren Sie uns gerne!</p><a href="/de/kontakt" class="c-button cc-border w-inline-block"><div class="c-button-text cc-mr15">Gespräch vereinbaren</div><div class="c-big-arrow-link_icon w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="14" viewBox="0 0 20 14">
 <path id="arrow_right" data-name="arrow_right" d="M15,5,13.59,6.41,18.17,11H2v2H18.17l-4.59,4.59L15,19l7-7Z" transform="translate(-2 -5)" fill="currentColor"></path>
</svg></div></a></div>