Wir haben Webflow speziell für Designer:innen und Entwickler:innen gebaut, die ihre Ideen schnell, schön, und responsiv zum Leben erwecken möchten. Doch das bedeutet nicht, dass Webflow nur für Design-Profis ist. Tatsächlich ist es auch eine leistungsstarke Plattform für Blogger:innen aller Art, von internen Marketing-Teams bis zu jedem, der seine Marke online aufbauen möchte.
Doch für durchschnittliche Blogger:innen mag Webflow wie eine einschüchternde Plattform wirken. Deshalb sind wir hier, um Ihnen zu zeigen, dass es tatsächlich ziemlich einfach ist, mit Webflow mit dem Bloggen zu beginnen.
Doch zuerst …
Warum mit Webflow bloggen?
Es gibt allerlei Gründe, mit Webflow zu bloggen, doch hier sind ein paar Favoriten:
1. Es ist einfach, schnell zu starten, und dabei zu lernen
Wie wir Ihnen in diesem Beitrag zeigen werden, ist es super einfach, mit Webflow mit dem Bloggen zu beginnen.
Sie werden mit kleinen Anpassungen am visuellen Design und den Content-Strukturen beginnen, doch schon bald werden Sie mehr anpassen wollen. Und Webflow eignet sich hervorragend als Lernplattform. Während Sie mit dem Tool spielen und sich unsere Tutorial-Videos ansehen, werden Sie in der Lage sein, Ihren Blog in eine wirklich individuelle Erfahrung für Ihre Leser:innen zu verwandeln.
2. Webflow beinhaltet ein intuitives CMS
Um schnell und effektiv zu bloggen, brauchen Sie wirklich ein CMS (auch bekannt als Content-Management-System). Und obwohl es eine Menge Optionen gibt, hebt sich Webflow aus zwei Gründen ab:
- Bearbeitung auf der Seite. Es gibt nichts Intuitiveres, als auf etwas Text zu doppelklicken und ihn zu bearbeiten. Direkt dort auf der Seite. Es ist wie das Schreiben und Bearbeiten auf Medium, doch Sie aktualisieren tatsächlich Ihre Website. Grandios.
- Leicht anpassbare Content-Typen. Wir nennen unsere Content-Typen „Collections", und es ist wirklich einfach, bestehende Collections anzupassen oder eigene von Grund auf zu erstellen, besonders wenn Sie sich mit dem Designer besser auskennen.
Verwandte Lektüre: Wie man Webflow CMS als Content-Modeling-Tool nutzt
3. Es ist SEO-freundlich
Wenn Sie es mit dem Bloggen ernst meinen, müssen Sie es auch mit der Suchmaschinenoptimierung (SEO) ernst meinen. Denn so finden Menschen den grandiosen Content, den Sie produzieren.
Zum Glück hilft Webflow Ihnen, bei Ihrem SEO zu glänzen, indem es:
- Schnell ist
- Sauber codiert ist
- Responsiv ist
Zusätzlich erlaubt es Ihnen:
- Ihre URL-Strukturen zu definieren (die standardmäßig ein nutzerfreundliches, also lesbares, Format haben)
- Meta-Titel, Beschreibungen, und Open-Graph-(OG)-Einstellungen automatisch basierend auf Ihrem Content zu generieren, sodass Sie bereits geschriebene Felder für Metadaten nutzen können oder sie manuell erstellen können
- Alt-Tags zu Bildern hinzuzufügen
Nun, damit ist das geklärt, hier ist, wie Sie mit Webflow mit dem Bloggen beginnen können.
Verwandte Lektüre: Website-SEO: der ultimative Leitfaden zum Ranking bei Google
Wie man mit Webflow mit dem Bloggen beginnt
Okay, kommen wir zum Wesentlichen.
Schritt 1: Wählen Sie eine Webflow-CMS-Vorlage
Schauen Sie sich zuerst unsere responsiven Vorlagen an, und klicken Sie unbedingt auf den „CMS"-Filter. (Wenn Sie diesen Link angeklickt haben, ist das bereits für Sie erledigt.)
Warum? Weil die Nutzung einer CMS-gestützten Vorlage Ihnen Zugang zur Bearbeitung auf der Seite und zum CMS-Panel gibt, sodass Sie nicht in den komplexeren Designer eintauchen müssen, bis Sie bereit sind.
Wir haben eine Menge CMS-gestützter Vorlagen, doch um die Dinge einfach zu halten, nutzen wir die kostenlose und minimalistische Tokyo-Blog-Vorlage.
Wenn Sie möchten, können Sie sich auch unsere Blog-Vorlagen ansehen, da dies ebenfalls CMS-(Content-Management-System)-Vorlagen sind, doch sie sind speziell auf Blog-Websites gefiltert.
Schritt 2: Passen Sie das Design Ihrer Website an
Um die Dinge einfach zu halten, nehmen wir nur ein paar kleine Anpassungen am visuellen Design der Tokyo-Blog-Vorlage mithilfe des Webflow Designers vor.
Aktualisierung der Typografie
Zuerst aktualisieren wir die Standardschriftart der Website. Typografie hat einen massiven Effekt darauf, wie Menschen eine Website wahrnehmen und darüber fühlen, daher ist es eine einfache Änderung mit viel Wirkung für wenig Aufwand.
Die Standardschriftart der Vorlage, Montserrat, ist eine freundliche geometrische serifenlose Schrift, was schön ist. Doch wir möchten Bewertungen von Apps schreiben, die sich auf die Bedürfnisse moderner Tech-Arbeiter:innen konzentrieren, daher wollen wir etwas Würdevolleres.
Beim Durchsehen des Schriftart-Dropdowns im Typografie-Panel sehen wir nichts genau Passendes, daher gehen wir zu unseren Website-Einstellungen, indem wir auf das W in der oberen linken Ecke klicken, dann Site Settings.
Dann klicken wir auf den Fonts-Tab und öffnen das Google-Fonts-Dropdown – wo wir aus jeder von Google Fonts' riesiger Sammlung wählen können.
Wir entscheiden uns für eine andere serifenlose Schrift namens Work Sans, also laden wir diese (mit Sicherstellung, dass wir das dünne Gewicht auswählen, das ein zartes Schweizer-Design-Gefühl hat) und kehren zum Designer zurück.
Um Änderungen effizient zu halten, möchten wir Work Sans zur Standardschriftart für die gesamte Website machen. Dazu müssen wir sie zur Schriftart des Body der Website machen.
In Webflow (und im Webdesign generell) ist Body die grundlegende Entität Ihrer Website, also wenn Sie möchten, dass eine Stilentscheidung alles auf der Website beeinflusst, beginnen Sie dort. Um den Body auszuwählen und zu stylen, klicke ich auf "Body" im Navigator links im Designer.
Dann klicke ich im Style-Panel rechts im Designer in das Selector-Feld und wähle Body (Alle Seiten). Klicken Sie auf dieses Tag, dann geht es zurück zum Typografie-Panel, um die neue Schriftart auszuwählen, und bam(!) – das Rebranding hat begonnen.
Hinweis: Im Allgemeinen ist es am besten, Tags zu stylen, statt eindeutige Selektoren für alles auf Ihrer Website zu erstellen. Das stellt sicher, dass Ihre Änderungen die breitesten Auswirkungen haben, und hilft, Ihren Code sauber zu halten.
Das Umschalten des Body-Tags auf Work Sans änderte einen Großteil des Textes auf der Website, doch nicht alles. Das liegt daran, dass eines der wesentlichen Gesetze von CSS Spezifität ist: spezifischere Klassen überschreiben weniger spezifische. Deshalb sind Elemente wie die Überschriften immer noch in Montserrat: Das Überschrift-Tag ist spezifischer als das Body-Tag.
Also bewegen wir uns jetzt durch den gesamten Text, der noch in Montserrat ist, und aktualisieren zu Work Sans. Nach dem Ändern des Website-Namens kommen wir zu den Nav-Links, und einem weiteren wichtigen Element von Webflow.
Wenn wir auf den „Blog"-Link klicken, sehen wir, dass er zwei Selektoren hat: Nav Link und Current. „Current" sagt uns, dass auf diesen Selektor ein Übergang angewendet wird. Da das Web ein interaktives Medium ist, kann die Website die Aktionen widerspiegeln, die Menschen auf der Website ausführen. In diesem Fall ändert der Selektor die Farbe, um zu zeigen, dass Blog die aktuelle Seite ist.
Das beeinflusst nicht die Schriftartänderungen, doch es ist erwähnenswert, während Sie tiefer in Design-Anpassungen in Webflow eintauchen.
Nachdem die Startseite (Blog-Feed) fertig ist, wechseln Sie zur Vorlage für einzelne Blogbeitragsseiten (mit dem Seitenumschalter oben links). Hier sehen wir, dass während der Body-Text in Work Sans eingestellt ist, die Überschriften in Montserrat bleiben.
Das Knifflige ist, dass wir den Blogbeitrags-Content nicht direkt stylen können, da er wiederum aus der Collection gezogen wird. Also fügen wir ein zweites Rich-Text-Feld zur Leinwand hinzu und geben ihm denselben Klassennamen wie dem dynamischen Content (in dieser Vorlage, „Blog Content"). Dann können wir die H2s und H3s innerhalb des Rich Text stylen und beobachten, wie sich die Zwischenüberschriften im Blog-Content oben aktualisieren.
Vergessen Sie nur nicht, dieses Rich-Text-Element wieder zu löschen, das Sie hinzugefügt haben! Andernfalls wird es auf jedem Blogbeitrag erscheinen, den Sie veröffentlichen. (Dasselbe gilt für jedes nicht-dynamische Element, das Sie zu einer Collection-Page-Vorlage hinzufügen.)
Ein wenig Material-Stil mit Box-Shadow hinzufügen
Okay, das einfache Ändern der Schriftart für unseren Blog hat also ziemlich viel davon transformiert. Doch wir möchten eine weitere einfache Änderung vornehmen, die ebenfalls viel Wirkung hat.
Da ich ein großer Fan von Googles Material-Design-Ansatz und kartenbasierten Interfaces bin, möchten wir diese Blog-Teaser in Karten verwandeln. Keine Sorge, es ist super einfach.
Wählen Sie einfach den gesamten Container für den Teaser aus – das Ding, das das Bild, den Beitragstitel, die Metadaten, den Auszug, und den Link umschließt – und fügen Sie dann einen Box-Shadow aus dem Effects-Bereich des Style-Panels hinzu.
Und genau so haben wir unseren Blog ziemlich unterscheidbar von unserer Quellvorlage gemacht, und er sieht immer noch großartig aus. Alles ohne Code zu berühren.
Schritt 3: Passen Sie Ihre Collections an
Wie bereits erwähnt, nennen wir Content-Typen „Collections" – und es ist einfach, sie zu Ihren eigenen zu machen. Hier steigen wir auch in die Designer-Seite von Webflow CMS ein!
Zuerst müssen Sie die Categories-Collection aktualisieren, um zu den Themen zu passen, über die Sie schreiben werden. Öffnen Sie also einfach das Collections-Panel links, klicken Sie auf Categories, und gehen Sie dann durch jede Kategorie, um sie zu aktualisieren auf das, was für Ihren Blog relevant ist.
Während Sie das tun, stellen Sie sicher, sowohl das Name-Feld als auch die URL zu aktualisieren. Schließlich möchten Sie nicht, dass Ihre Beiträge über Web-Apps „Musik" in ihrer URL haben (außer es ist natürlich eine Musik-App)!
Sie werden eine Warnung sehen, dass das Ändern der URL die alte URL zerstören wird, doch das ist okay. Sie haben noch nicht veröffentlicht, also haben Sie tatsächlich noch keine URLs zerstört, und alle Blogbeiträge, die mit von Ihnen bearbeiteten Kategorien verknüpft sind, werden automatisch aktualisiert.
Wenn Sie mehr Kategorien brauchen, klicken Sie einfach auf +New, und wenn Sie weniger brauchen, klicken Sie einfach auf Delete innerhalb der Kategorie.
Schritt 4: Aktualisieren Sie die Beispiel-Blogbeiträge
Jede Webflow-Vorlage kommt mit Beispiel-Content, um das Design zu füllen, doch Sie möchten offensichtlich diesen gesamten Content aktualisieren, um zu Ihrer Veröffentlichungsvision zu passen.
Sie können dies auf zwei Arten tun:
- Aktualisieren Sie den Content innerhalb des Designers, vor der Veröffentlichung. Wenn Sie besorgt sind, dass jemand Ihren Blog voller Beispiel-Content sieht, möchten Sie vielleicht diesen Weg gehen.
- Veröffentlichen Sie Ihre Website und aktualisieren Sie den Content im Editor. Da die Chancen gering sind, dass jemand versehentlich über unseren brandneuen Blog stolpert – und weil ich Ihnen den Editor vorstellen möchte – werden wir diesen Weg gehen.
Um Ihre Website zu veröffentlichen, klicken Sie einfach auf den Publish-Button oben rechts, dann klicken Sie auf das Link-Symbol rechts vom Website-Namen. Das öffnet die Website im Editor – der Front-End-Seite von Webflows Content-Management-System.
Anders als WordPress' Dashboard verhält sich der Webflow Editor nicht (meistens) wie ein Backend. Stattdessen lässt er Sie sich mit Ihren tatsächlichen Navigationslinks auf der Seite durch die Website bewegen und Content direkt auf der Seite bearbeiten.
Als Texter:in ist das unglaublich wertvoll, weil es wirklich darauf ankommt, wie Wörter auf der Seite aussehen. Zudem entfernt es eine ärgerliche Abstraktionsebene zwischen Ihnen und Ihrem Content, wenn Sie Ihre Änderungen nicht "vorschauen" müssen.
Hinweis: Das Ändern eines Blogbeitragstitels auf der Seite wird seine URL nicht ändern. Das können Sie im Editor-Panel tun.
Um das Editor-Panel zu öffnen, klicken Sie einfach auf Pages oder Collections. Das Panel gleitet dann nach oben und erlaubt Ihnen, Ihren statischen Content (Pages) und dynamischen Content (Collections) durchzusehen. Dann klicken Sie einfach auf einen Beitrag, um ihn zu öffnen und den Titel und die URL zu aktualisieren.
Das Großartige daran ist, dass die Startseite (Blog-Feed) die Blogbeitragstitel und URLs dynamisch zieht, sodass Sie tatsächlich keine URLs zerstören (nochmal!).
Hinweis: Das Bearbeiten statischer Seiten-URLs wird Links zu ihnen zerstören, da sie nicht dynamisch sind.
Jetzt sind Sie auf dem Weg, einen wunderschönen Blog in Webflow zu erstellen.
Content-Ersteller:innen und Designer:innen befähigen
Aufmerksamkeit im heutigen Online-Klima zu gewinnen, wird immer härter. Sie brauchen eine Plattform, die es Ihnen ermöglicht, sich abzuheben. Eine Plattform, die es Ihnen erlaubt, sich selbst zu branden und eine Website zu erstellen, die völlig originell ist – mit sauberem Code und SEO im Hinterkopf.
Da das Web zugänglicher wird, und mehr Menschen großartigen Content online erstellen, werden Branding und Content-Strategie zum unterscheidenden Faktor.
Damit ist es wichtig, Wege zu finden, Content-Erstellung und visuelle Entwicklung zusammenzuführen. Denken Sie darüber nach, wie Ihr Content Ihre Designs speist und wie Ihre Designs Ihre Marke speisen. Hier ist auf eine neue Welle der Erschaffung.
