但是对于普通的博主来说，Webflow似乎是一个令人印象深刻的平台。所以我们在这里向你展示，用Webflow开始写博客其实是非常容易的。

但首先……

为什么用Webflow写博客?

有各种各样的理由使用Webflow来写博客，但以下是一些最受欢迎的理由:

1.快速上手很容易，边做边学

正如我们将在这篇文章中向你展示的，用Webflow开始写博客是非常容易的。

您将开始对视觉设计和内容结构进行微调，但很快就会想要定制更多内容。Webflow是一个很好的学习平台。当你玩着工具，看着我们的教程视频，你将能够把你的博客变成一个真正的读者定制体验。

2.Webflow包括一个直观的CMS

为了快速有效地撰写博客，您确实需要一个CMS(又名内容管理系统)。虽然有很多选择，但Webflow脱颖而出有两个原因:

1. 页面编辑。没有什么比双击一些文本并编辑它更直观的了。就在这一页上。这就像在Medium上写作和编辑一样，但你实际上是在更新你的网站。太棒了。
2. 易于定制的内容类型。我们称我们的内容类型为集合，这真的很容易调整现有的集合，或从头开始制作自己的，特别是当你与设计师越来越好。

相关阅读:如何使用Webflow CMS作为内容建模工具

3.这是seo友好

如果你认真对待博客，你也必须认真对待搜索引擎优化(SEO)。因为这是人们发现你制作的精彩内容的方式。

值得庆幸的是,Webflow将帮助你驾驭你的SEO通过:

1. 快
2. 干净地编码
3. 响应
   

另外，它还能让你:

1. 定义你的URL结构(默认为人类友好的，例如，可读的格式)
2. 自动生成元标题、描述和打开图(OG)设置基于你的内容，因此您可以使用已经为元数据编写的字段，或手工编写它们
3. 添加alt标签的图像
   

所以，有了这些，下面是如何开始用Webflow写博客的方法。

相关阅读:网站SEO:谷歌排名的最终指南

如何用Webflow开始写博客

好吧，让我们来看看细节。

步骤1:选择Webflow CMS模板

首先,查看我们的响应模板，并确保点击“CMS”过滤器。(如果你点击了那个链接，它就已经为你完成了。)

为什么?因为使用CMS支持的模板可以访问页面上的编辑和CMS面板，所以在您准备好之前不必深入到更复杂的Designer中。

我们有一堆cms支持的模板，但是为了简单起见，我们将使用免费和最小的东京博客模板．

如果你愿意，你也可以看看我们的博客模板，因为这些也是CMS(内容管理系统)模板，但它们只针对博客网站进行了过滤。

步骤2:定制你的网站设计

为了保持简单，我们将使用Webflow Designer对Tokyo博客模板的视觉设计进行一些小调整。

更新排版

首先，我们将更新站点的默认字体。排版有巨大的影响人们对一个网站的看法和感觉，所以这是一个简单的改变，为你的钱带来很多好处。

该模板的默认字体Montserrat是一种友好的无衬线几何字体，这很好。但我们希望撰写针对现代科技工作者需求的应用程序评论，所以我们想要一些更有尊严的应用程序。

在字体排版面板的字体下拉菜单中，我们没有看到任何正确的东西，所以我们要通过点击左上角的W进入我们的网站设置，然后是网站设置。

然后点击进入字体选项卡，打开谷歌字体下拉菜单，我们可以从中选择任何谷歌字体的大量集合。

我们将使用另一种名为Work sans的无衬线字体，所以我们把它装上(确保选择薄的重量，它有一种精致的瑞士设计感)，然后返回到Designer。

为了保持更改的效率，我们希望将整个站点的Work Sans字体设置为默认字体。为此，我们需要将其设置为网站主体的字体。

在Webflow(和一般的网页设计)中，主体是你网站的基本实体，所以如果你想要一个风格选择来影响网站上的所有东西，从这里开始。为了选择Body并设置样式，我在Designer左侧的导航器上单击“Body”。

然后在Designer右侧的样式面板上，单击Selector字段，并选择Body (All Pages)。点击这个标签，然后回到Typography面板选择新的字体，然后bam(!)——重新命名就开始了。

注意:一般来说，最好是设计标签的样式，而不是为网站上的所有东西创建唯一的选择器。这确保了您的更改具有最广泛的影响，并有助于保持代码整洁。

把Body标签换成Work Sans会改变网站上的很多文字，但不是全部。这是因为CSS的一个基本法则是特异性:更具体的类覆盖不太具体的类。这就是为什么像标题这样的元素仍然在Montserrat中:标题标签比主体标签更具体。

现在我们将浏览蒙特塞拉特的所有文本，并更新到Work Sans。在更改站点名称之后，接下来是导航链接，以及Webflow的另一个重要元素。

当我们点击“Blog”链接时，我们看到它有两个选择器:Nav link和Current。“Current”告诉我们这个选择器有一个过渡应用到它。由于网络是一种互动媒体，网站可以反映人们在网站上的行为。在这种情况下，选择器改变颜色以显示Blog是当前页面。

这不会影响字体的更改，但是当你深入挖掘Webflow中的设计定制时，这是值得注意的。

完成主页(博客提要)后，切换到各个博客文章页面模板(使用左上角的页面切换器)。在这里我们看到，虽然正文设置为Work Sans，但标题仍然是Montserrat。

棘手的事情是，我们不能直接样式的博客文章内容，因为它是，再次从集合。因此，我们将在画布中添加第二个Rich Text字段，并赋予它与动态内容相同的类名(在这个模板中为“Blog content”)。然后，我们可以在富文本中设置H2s和H3s的样式，并查看上面博客内容中的子标题更新。

只是不要忘记删除您添加的Rich Text元素!否则，它就会出现在你发布的每一篇博客文章上。(对于添加到Collection Page模板的任何非动态元素也是如此。)

添加一个小的材料风格的盒子阴影

好吧，简单地改变一下我们博客的字体就改变了很多。但是我们想再做一个简单的改变，它也会有很大的影响。

因为我是谷歌的材料设计方法和基于卡片的界面的超级粉丝，我们想把这些博客宣传片变成卡片。别担心，这非常简单。

只需要为预告片选择整个容器—包含图像、标题、元数据、节选、而且链接-然后从样式面板的效果部分添加一个框阴影。

就这样，我们使我们的博客与我们的源模板截然不同，它看起来仍然很棒。所有这些都不涉及任何代码。

步骤3:定制您的收藏

如前所述，我们将内容类型称为“集合”——您自己也可以很容易地创建它们。这也是我们深入Webflow CMS的设计器方面的地方!

首先，您需要更新Categories Collection以匹配您将要写的主题。所以，只要打开左边的收藏面板，点击类别，然后浏览每个类别，更新任何与你的博客相关的内容。

在此过程中，请确保更新了两个Name字段而且URL。毕竟，你不希望你的网页应用的帖子的URL中有“音乐”(除非它是一个音乐应用)!

您将看到更改URL将破坏旧URL的警告，但这没有关系。你还没有发布，所以你实际上还没有破坏任何url，任何与你编辑的类别相关的博客帖子都会自动更新。

如果你需要更多的类别，只需单击+新建，如果你需要更少的类别，只需单击类别内的删除。

步骤4:更新示例博客文章

每个Webflow模板都附带了样例内容来填充设计，但显然您需要更新所有这些内容以符合您的发布愿景。

你可以通过两种方式做到这一点:

1. 在发布之前更新设计器中的内容。如果您担心有人看到您的博客中充满了示例内容，那么您可能希望采用这种方法。
2. 在编辑器中发布站点并更新内容。因为任何人偶然发现我们全新博客的机会都很低——而且因为我想把你介绍给编辑——我们就走这条路。
   

要发布站点，只需单击右上角的“发布”按钮，然后单击站点名称右侧的链接图标。这将在编辑器中打开网站——Webflow内容管理系统的前端。

与WordPress的仪表板不同，Webflow Editor(大多数情况下)并不像一个后端。相反，它允许您使用实际的页面导航链接在站点中移动并编辑内容就在这一页上．

作为一名广告文案，这是非常有价值的，因为文字在页面上的外观真的很重要。此外，它消除了您和您的内容之间令人讨厌的抽象层不必须“预览”你的更改。

注意:在页面上更改博客文章的标题不会改变它的URL。您可以在编辑器面板中进行此操作。

要打开编辑器面板，只需单击“页面”或“集合”。然后，面板会滑动，让您可以仔细阅读静态内容(Pages)和动态内容(Collections)。然后只需点击一个帖子打开它，并更新标题和URL。

这里很棒的一点是，主页(博客提要)动态地引入博客文章标题和url，所以实际上不会破坏任何url(又是这样!)

注意:编辑静态页面url将断开它们的链接，因为它们不是动态的。

现在你要用Webflow创建一个漂亮的博客了。

赋予内容创造者和设计师权力

在如今的网络环境下，人们越来越关注网络。你需要一个能让你脱颖而出的平台。一个平台，让您品牌自己，并创建一个网站，是完全原创-干净的代码和SEO在头脑中。

随着网页变得更容易访问，越来越多的人在网上创建优秀的内容，品牌和内容策略将成为区分因素。

因此，找到将内容创造和视觉开发结合在一起的方法是很重要的。想想你的内容是如何满足你的设计的，你的设计又是如何满足你的品牌的。为创造的新浪潮干杯。