Webflow 面向创新者

使用 Webflow 模板的初始步骤一开始可能看起来有点让人不知所措，但我们已经解决了基础知识，以便您可以开始 - 从获取和个性化您的模板，到发布您的创意内容供全世界查看。

在本模块中你将了解：

1. 如何采购模板
2. 如何在 Webflow Designer 中修改您的站点
3. 如何管理博客
4. 如何添加或删除网站元素
5. 如何发布您的网站
6. 如何将自定义域名链接到您的网站
7. 如何配置 Google 分析
8. 如何获取模板方面的帮助

如何采购模板

在开始设计之前，您必须获取模板并在 Webflow 仪表板中根据模板创建一个网站。您可以获取创新者模板，仅供个人、企业或网站使用。

重要的： 获取模板后，您可以通过选择插入促销代码（如果有） 添加促销代码 在结帐模式中，在文本框中输入促销代码，然后按 申请.

要选择并获取您的创新者模板：

1. 访问 Webflow 的模板市场 找到你想要为你的网站使用的顶级模板（例如， 链接X模板, 链接应用程序模板, Socialite 的社交模板)
2. 按 购买 在模板主页上（如果您尚未注册，您将被要求注册一个免费的 Webflow 帐户；如果您已退出，您可以登录到您现有的帐户）
3. 在结帐模式中输入您的付款详细信息（或点击“修改信用卡”来更新你的付款详情（如果你之前已经添加过）
4. 点击 现在付款 按钮完成您的购买
5. 轻敲 继续 确认您的付款后
6. 为您的新网站命名并点击 创建网站 在 Webflow Designer 中展示您新购买的模板

重要的： 您可以在以下位置找到模板采购发票 工作区设置 > 模板 标签 > 购买的模板。 点击 下载发票 获取您所购买的特定模板的发票。

稍后，您将能够从 Webflow 仪表板访问基于模板的站点。

如何在 Webflow Designer 中定制您的网站

获得模板后，您可以开始个性化它以适合您的风格。 

您的模板可能已直接在 Webflow 设计师，或者您可以选择从 Webflow 仪表板启动您的网站。这两个选项都会将您带到同一个位置 — 设计器 — 您所有的个性化设计魅力都发生在这里！  

在开始自定义模板之前，您可以熟悉 设计师，以及 Webflow帆布 本身： 

• 页面面板
• 讲述人面板
• 资源面板
• 样式面板
• 帆布

这些面板授予您访问您页面的权限 (页面面板）、页面中元素的层次结构排列（讲述人面板)、您已集成到站点中的资产的概述（资源面板）以及微调页面元素样式的能力（样式面板）。 这 帆布 是您可以与站点中的元素进行交互的区域。 

您还可以在发布之前在浏览器中预览您的设计，方法是点击页面左上角的“眼睛”图标 设计师. 

建议定期检查网站设计的各种断点视图，以确保您的网站在各种设备上均能响应。了解有关断点的更多信息。

除了我们在此模块中纳入的详细信息外，模板创建者可能已提供“从这里开始”指南作为模板中的页面之一。如果您的网站中有这样的指南，您可以利用它来掌握特定于您购买的模板的技巧和技术。 

如果您使用的是 Webflow 的入门网站计划，您将能够修改模板中的所有页面，但您将无法添加其他页面或复制页面，除非先升级到付费 工作区规划 或付费 网站计划.

重要的： 在着手对您的网站进行修改之前，最好先备份您的网站，并在对您的网站进行任何重大更改之前进行手动备份（除了 Webflow 的自动备份）。

让我们来看看如何利用 设计师 到：

• 更改文本
• 调整颜色
• 个性化背景
• 替换图像
• 更新链接
• 收集网站访客数据
• 修改SEO配置

重要的： 如果您遇到一个元素同时也是符号，请双击它以修改符号内的元素。符号是可重复使用的组件，可在整个网站的多个实例中使用（例如，您可以在多个不同的页面上拥有相同的联系表单）。每次您修改符号的一个实例时，它会在所有其他位置更新。阅读有关符号的更多信息。

更改文本

要修改模板中的文本，请双击文本元素或选择它并按 进入/返回。然后，选择占位符文本并将其替换为您自己的内容。

您还可以更改文本的字体、粗细、颜色等。排版样式属性位于 排版 category的 样式面板. 

有用提示： 如果您希望快速更改整个网站的文本样式，您可以选择正文（所有页面）标签并修改文本的字体类型、字体大小和行高。了解有关排版的更多信息。

相关阅读：

• 字体颜色对比

调整颜色

如果模板的配色方案包含颜色变量，您可以轻松修改颜色变量以在整个网站上更新它（例如，将红色变量转换为紫色会将所有红色元素更改为紫色）。

个性化背景 

某些元素利用背景颜色、图像或渐变来引起视觉兴趣。 

在元素上设置背景可以让你控制外观和可读性。在 样式面板 > 背景，您可以将背景图像、渐变或颜色添加到大多数元素中（视频和图像等媒体元素除外）。了解如何调整背景样式。

其他资源：

• Webflow 的颜色选择器
• 字体颜色变化

替换图片

您可以选择将设计中的占位符图像替换为您自己上传的替代图像。您可以通过“资源”面板上传图像并访问之前上传的图像。了解如何替换图像。

进一步阅读：

• 为你的图片添加替代文本
• 不同的图像文件格式
• 优化图像质量

修改超链接

更新所选设计中的任何超链接也很重要。要快速修改超链接，请选择包含超链接的元素，然后导航到 设置面板 > 链接设置 并进行必要的调整。了解如何设置超链接并调整其配置。

进一步阅读：

• 锚文本
• 链接部分

有价值的提示： 您还可以选择嵌入来自 YouTube 或 Vimeo 等外部平台的视频。了解如何利用 Webflow 的视频组件。

收集访客详细信息

为了收集网站访问者的信息（例如，新闻通讯注册等）或允许访问者通过联系表单发送消息，您可以配置表单以准确收集这些信息并将其转发给您。

您可以直接在您的 站点设置或利用第三方服务（如 MailChimp 或 Zapier）来管理表单提交。了解如何处理表单提交和通知。

调整SEO配置

要自定义您的网站被分享或搜索时显示的标题、图片或描述，您可以在页面设置中修改 SEO 设置和 Open Graph 设置。使用我们的 SEO 基础知识指南深入了解 SEO。

访问 SEO 配置 和 开放图谱设置:

1. 访问 页面面板
2. 单击所需页面旁边的齿轮图标以获取更新
3. 编辑信息 SEO 配置 或者 Open Graph 配置

运营博客

如果您的模板包含内置博客，您可以使用 Webflow 的内置内容管理系统 (CMS) 高效地制作新帖子来展示您独特的内容。 

CMS 是动态内容的存储库。您的网站在各个页面上引用此动态内容，确保 CMS 中对此内容的任何修改都会自动更新到所有相关页面上。

Webflow 的可视化 CMS 使您能够塑造结构化内容、围绕该内容进行创造性设计并管理所有内容 — 无需更改代码。了解有关 Webflow CMS 和处理单个 Collection 项目的更多信息。

您可以通过紫色轮廓来区分动态 CMS 元素，也可以通过选择元素并检查 样式面板. 如果 动态样式设置 段是可见的，该元素是一个动态 CMS 元素。

我们来回顾一下这个过程：

• 个性化您的个人帖子
• 合并和删除博客条目和类别
• 保存博客文章草稿
• 安排博客文章

个性化您的个人帖子

您可以在 Webflow CMS 中定制博客文章。模板网站中的 CMS 通常包含 2 个（或更多）CMS 收藏 包含示例内容（例如，“博客文章”集合和“类别”集合）。您可以用自己的数据替换示例内容。

A 收藏 是类似项目的汇编。例如，您可能有一个名为“博客文章”的集合。“博客文章” 收藏 包括个人 收藏品 — 个人博客文章。

每个 收藏品 （例如，每篇博客文章）包含内容字段。例如，您可以插入博客文章标题、博客文章内容、博客文章主图、博客文章 category 等。

要使用您的具体输入来更新示例内容： 

1. 点击 内容管理系统 设计器工具栏中的图标打开 CMS 面板
2. 选择所需的 收藏 （例如“博客文章”）
3. 挑选一个 收藏品 （例如，其中一篇示例博客文章）
4. 在字段中填写您的信息

随后，您可以：

• 节省 你的改变
• 使用下拉菜单 发布 立即发布您的个人博客文章（无需全局发布）
• 使用下拉菜单 保存为草稿 如果您尚未准备好发布该帖子。 

对任何其他内容重复上述步骤 收藏品 您希望更新的内容。您所做的修改将自动反映在画布上（除非您将帖子保留为草稿，这会将其隐藏在您的网站上，不供公众查看）。了解有关更新收藏项目的更多信息。

重要的： 如果更改博客文章的标题，请确保更新 URL 段。 

合并和删除博客条目和类别

附加 收藏品 （例如，博客文章或博客 category），您可以手动创建新项目，从 CSV 文件导入项目，或使用 Zapier 或 webhook 通过 CMS API 链接它们。了解如何创建其他 Collection 项目。

您可以选择一次删除多个收藏品，或者删除单个收藏品。 

删除单个 收藏品:

1. 访问 内容管理系统 设计器工具栏中的图标打开 CMS 面板
2. 选择所需的 收藏 （例如“博客文章”）
3. 挑选一个 收藏品 （例如博客文章）
4. 滚动到底部并选择 删除
5. 点击确认 删除 再次

保留博客文章草稿

您无需直接在您的网站上发布博客文章，而是可以先将其安全地保留为草稿。

您可以多次修改草稿，并继续将其保存为草稿，直到准备好发布为止。一旦完成，文章就可以 准备出版 或者 发布 在您的网站上。了解如何管理草稿项目。

安排博客文章

计划发布功能可让您提前规划内容发布，并在指定时间自动推送。此功能仅在 托管 CMS、商业和电子商务网站计划.

了解如何安排您的博客条目。

如何添加或删除网站元素

您已选择所需的自定义模板，但您可能希望在主页上添加新图片或在链接列表中添加新超链接。或者，您可能不需要 Twitter 链接或产品商店，而希望从布局中消除这些元素。您可以灵活地从网站中添加或删除元素，以完美定制您的内容。

有价值的提示： 对于管理博客文章，需要采用略有不同的方法，因为博客文章由 Webflow CMS 控制。请参阅有关使用博客的特定博客说明。 

让我们指导您：

• 将元素融入您的网站
• 消除网站中的元素

笔记： 建议在对您的网站进行任何重大改动之前先创建备份。

在您的网站中包含组件

您可以选择将元素和部分集成到您的网站中。例如，如果您希望插入新链接，您可以通过复制现有链接并将其直接粘贴到您的网站来复制它：

1. 选择 您想要复制的元素（例如链接）
2. 使用复制元素 命令 + C （在 Mac 上）或 控制 + C （在 Windows 上）
3. 使用粘贴复制的元素 命令 + 五 （在 Mac 上）或 控制 + 五 （在 Windows 上）

您也可以通过点击 命令 + 是 （在 Mac 上）或 控制 + 是 （在 Windows 上）。

从您的网站中删除组件

您还可以从网站中删除元素。例如，如果您不使用特定社交媒体平台并希望删除其链接，请按照以下步骤删除元素：

1. 选择要删除的元素（确保您已选择其所有相关组件，以避免在删除后遗留任何元素）
2. 按 删除 键盘上的键

您也可以通过点击 命令 + 是 （在 Mac 上）或 控制 + 是 （在 Windows 上）。

发布网站的步骤

在定制您的设计时，您可以免费将您的网站发布到 Webflow 的原生域名（例如“www.myamazingplants”。webflow.io”）来预览您的网站在网络上的显示效果。了解如何发布您的网站。

将个人域名链接到您的网站的指南

尽管您始终可以免费将您的网站发布到 Webflow 的默认域（例如，mamazingplants。webflow.io），您还可以将自定义域名连接到您的网站并在那里发布（例如，mamazingplants。com).

我们将解释您如何能够：

• 获取新网站的网站规划
• 将您的自定义域名链接到您的网站

获取网站规划

如果您想在网站上使用自定义域名或建立更全面的博客，您可以为网站购买网站计划。了解如何管理网站计划。

如果您的模板使用 Webflow CMS（例如，用于博客），则您无法购买基本网站计划，直到从您的网站中删除 CMS。此操作可能会影响模板设计的部分内容，因此请确保在删除 CMS 之前备份您的网站。

了解如何在购买站点计划时使用促销代码。

将您的自定义域名链接到您的网站

获得网站站点计划后，您可以将网站发布到您拥有的任何自定义域（例如，mamazingplants.com）。了解如何连接您的自定义域。

添加 Google Analytics 的流程

您已经开发了一个很棒的网站。现在是时候设置 Google Analytics 来监控基本指标，例如用户数量、页面浏览量、用户会话持续时间和跳出率。Google Analytics 还提供有关您网站流量来源的见解，让您可以深入了解城市等特定位置。了解如何为您的网站配置 Google Analytics。

获取模板帮助

如果您是 Webflow 新手，发现模板具有大量交互、自定义菜单和弹出模式，难以自定义，您可以向模板设计者寻求帮助。此外，许多模板设计者在其模板中包含对 documentation 的支持。

庆祝您创建独特且引人入胜的网站的成就，并与世界分享您的创意内容！