从这里开始

导言

欢迎您的到来

无论您是刚刚购买了 Masterclass 课程模板，还是只是想了解一下，我们都很高兴您能来到这里。您可能知道，Masterclass Course 是基于 Webflow 制作的，Webflow 是一款功能强大的无代码网站制作工具。如果您对它已经非常熟悉，我相信编辑这个模板将是小菜一碟。

本文档涵盖了使用 Webflow 的一般规则，我们认为值得与大家分享。

如果您是 Webflow 的新用户

另一方面，如果您是第一次使用 Webflow，您可能需要了解一下Webflow 大学和他们的 101 速成课程。

特定模板

Masterlclass 课程 Webflow 模板是使用 Webflow 的会员功能构建的。

会员结构

该结构包括一个名为 "Masterclass "的 "基本 "计划和一个名为 "Masterclass+"的 "专业 "计划。购买 "基本 "计划的用户可以访问 "课程集 "中的所有课程。购买专业计划的用户可以同时使用 "Classes Collection "和 "Classes Plus Collection "中的课程。

造型设计

下面是一些有关模板样式的一般规则。

颜色

在大师班课程模板中，我们使用了色块。这意味着您可以在一个地方更改颜色，并将其应用于共享相同色板的所有元素。

更改色板：

1. 点击要编辑颜色的元素。
2. 在右侧的样式选项卡中，找到颜色选项（例如：文字颜色）
3. 点击颜色方块。
4. 弹出小窗口后，点击编辑图标，选择新颜色。
5. 点击保存。

请看下面的迷你教程视频。

字体

大师班课程模板还使用了一种名为 Instrument Sans 的字体。可在 Google Fonts 下载。该字体 100％ 免费用于个人和商业用途。

Instrument Sans 应用于网站正文，因此会自动应用于所有段落和文本块。您可以通过以下方式对其进行全局更改

1. 选择 "机身
2. 在右侧的样式选项卡中，单击选择器并选择 "正文（所有页面）"。
3. 向下滚动到 "排版"，然后更换所需的字体。

请看下面的迷你教程视频：

‍

Instrument Sans 同样适用于标题（H1-H6）。您也可以通过以下方式对其进行编辑：

1. 选择要编辑的标题类型
2. 在右侧的样式选项卡中，单击选择器并选择 "所有 H（1、2、3、4、5、6）标题"。
3. 向下滚动到 "排版"，然后更换所需的字体。

图标

所有图标都是 .svg 格式，因此更改网站上的色块不会对它们产生影响。您可以从 "资产 -> 图标 "选项卡中下载这些图标，并在您的设计软件（Photoshop、Figma、Sketch 等）中进行编辑。您也可以直接上传自己的图标。

编辑

下面是一些编辑模板文案和图片的一般技巧。

静态内容与动态内容

说到文案，Webflow 区分两种不同的文案类型--静态内容和动态内容 (CMS)。

要快速区分这些文案类型，您可以查看导航选项卡，静态内容将使用白色字体显示。

‍

‍

动态内容将使用紫色字体显示。

‍

‍

在设计器空间中直接将鼠标悬停在元素上，还可以直接看到哪个元素是静态的，哪个元素是动态的。静态内容周围会有蓝色边框。

‍

动态内容的边框将为紫色。

编辑静态内容

除内容管理系统相关副本外，其他副本都是静态内容。这意味着您需要直接在页面上对其进行编辑。

您可以通过两种方式编辑静态内容：

1. 在 "设计器模式 "下，只需双击要编辑的文本并进行修改。Webflow 会自动为您保存。
2. 在 "编辑器模式 "下，同样点击文本并进行修改。

查看下面的视频，了解如何在 "设计器模式 "下编辑静态内容。

编辑动态内容

编辑动态内容非常简单，但在开始时可能会有点混乱。这类内容需要通过集合进行编辑。一旦你掌握了它，就像填写网络表格一样简单。

编辑动态内容：

1. 转到左侧的内容管理系统收藏集，找到要编辑的收藏集（如博客）。
2. 点击收藏项目（如特定博文）。
3. 更改要编辑的输入内容（如博客文章标题）
4. 保存后就完成了。

您可以在 Webflow CMS 的大学页面上了解更多有关编辑收藏集和使用 Webflow CMS 的信息。

编辑（静态）图像

本模板中使用了两种不同的图片类型--普通图片和背景图片。你可能会注意到，我们主要将普通图片用于图标，而大图片则作为背景图片使用。

编辑正常图像：

1. 找到要更改的图像并将其选中。
2. 在 "设置 "选项卡右键单击 "替换图片"，然后选择新图片。

编辑背景图片：

1. 找到带有背景图像的元素（如 Section、Div）并将其选中。
2. 在样式选项卡中，向下滚动到背景图像设置，然后点击图像设置。
3. 在弹出的小窗口中选择 "选择图像"，以选择不同的图像。

请观看下面的视频，了解如何编辑背景图片。

编辑产品（电子商务）

编辑电子商务产品与编辑动态内容非常相似。

编辑您的产品：

1. 进入 "电子商务"，点击 "产品"。找到要编辑的产品并将其选中。
2. 进入产品后，编辑您想要的所有字段。
3. 保存后就完成了！

支持

如果您购买了 Masterclass 课程模板，我们将为您提供基本支持。有关模板的直接问题，请发送电子邮件至templates@wavesdesign.io。

有关使用 Webflow 工具的问题，请访问其大学网站或联系技术支持。

‍

如果您需要定制模板，请通过templates@wavesdesign.io联系我们。